これははてなエンジニア Advent Calendar 2025 2 日目の記事です。 年の瀬なので振り返りたくなる季節ですね。 今年もAI の話題が非常に多く、コーディングエージェントの普及を始めいろんな変化がありました。新しいモデル、高まる精度、飛び交うビッグマネー、跳ね回る驚き達。そういう景気の良い話はさておき、既存の技術が新しい文脈で再注目されたり、思わぬ用途で広く使われるようになったりすることも起きています。 今日はそんな「以前から存在していたけどAI によって新しい価値を見出された技術やツールを語ろう」のコーナーです。 いくぞ!! Server-Sent Events (SSE) まず出世頭として思いつくのは Server-Sent Events でしょう。 Server-sent events - WebAPI | MDN 今やチャットAI のレスポンスはほとんど
■「AIを使っていると、バカになりそう」問題「AIを使っていると、バカになりそう。」 「最近、AIに何でも聞けばいい気がして、頭を使う時間が減った気がする。」 そう感じたこと、ないでしょうか? Chat GPT、Geminiを始めとする生成AIは非常に便利なものですが、使い方を間違えると、自分ではものがまったく考えられなくなり、なんでも生成AIに聞いて、そのとおりに行動する生成AIに操られる人になってしまいます。 今回はそうならないために、どのようにAIを使っていくのが良いのか考察していきたいと思います。 このブログが良いなと思ったら、noteやXをフォローしてくれると嬉しいです。 ■AIで無能になりやすい人の特徴調べるのが面倒だからAIに聞き、出てきた回答を読んで「わかった気」になって終了してしまう…、これは自分自身もよくやってしまいがちです。 しかし無能になりやすい人の特徴は、生成AI

Twitterでこういう発言を見かけましてTailwindCSSはデザインに凝ってるサイトでは使えない こだわりが無い場合に向いている は?何いってんの? って思ったので、自分がいろいろ試した結果、TailwindCSSを選んだ話を書きます。 はじめに 以前、TailwindCSSは結構いいぞって話を書いたんですが、この記事の立ち位置的にはその続きみたいなものなので、以下の記事を始めにご参照いただけるとより分かりやすいかもしれないです。 この記事では、前回記事を書いた後、個人仕事でWebサイトをGatsbyで作り、その中で、どうやってCSSを書くのが良いのか模索した結果、自分はこれを選んだっていうのを、同じUIを色々な方法で書き比べたコードを並べつつ、どうのこうの筆者の考えを述べていきます。 その仕事はほとんど筆者が「まかせてくださいよーいい感じに作りますよー。デザインそろってない

「なんでこの提案、通らないんだろう?」 ──かつての私は、仕事が進まない理由を“相手”に求めていました。 しかしあるとき気づいたのです。提案が止まるのは、「言語化」を相手に委ねていたからだと。 提案レベルを上げ、“伝えたい”を“伝わる”に変えるための言語化コストを自ら引き受けることで、提案はそのま…

こんにちは、リテールアプリ共創部の戸田駿太です。 今回はChrome DevToolsを利用した手動テスト時の入力を効率化する方法をご紹介します。 この方法を使えば今まで手作業で行なっていた入力を簡易的に自動化することができるため手動テストの効率が向上します。 まずは実行動画から! 左のカード登録画面(仮)のバリデーションテストをしている様子です。 この動画で行なっていること 正常な値を入力して登録 正常登録の確認 正常な値の状態から1つの入力を編集してバリデーションエラーの状態で登録 エラーが発生することを確認 Recorderを使うメリット ✅ 手動テストの効率が向上する 今までテスト項目毎に入力していた値をミスなく入力できるようになります。 コードベースの確実な操作ができるのでテストのミスも少なくなるので安心感も増します。 ✅Chromeの開発者ツールであるため、環境構築が必要ない
はじめに こんにちは、みなさん!最近、私はClaudeを使ったプロジェクトで苦戦していたんですよ。「なんでこのAIは私の意図を理解してくれないんだ...」と頭を抱えていた時、Anthropicが公式に内部プロンプトエンジニアリング技術を公開したんです!これは本当に目から鱗でした。 Anthropicがついに社内で使っているプロンプト技術を公開しました。主にClaudeのために設計されていますが、ほとんどの技術は他のLLMにも使えます。彼らが強調しているのは、プロンプトエンジニアリングはモデルの微調整よりも効率的だということ。理由は単純で、リソース要求が低く、コストが安く、反復が速いからです。 核心原則:Claude 4を使いこなすための4つの基本 最新のClaude 4モデルに対して、Anthropicは特に4つの基本原則を強調しています: 明確に指示する(Be Explicit) Cla

はじめに こんにちは。エンジニア 兼 講師のShotaです。 普段はエンジニアとしてAIツールを実案件に適用しながら開発を行い、同時に講師として得られた知見を体系化して受講生の方にお伝えする活動をしています。AIツールを実案件に適用する際に事前に知っておくべき実践的なTipsのシリーズ第4回。今回のテーマは「【AI駆動開発】Cursor@ファイル指定で404 Not Found未実装バグ修正」です。 なお、本記事は私が提供しているAI駆動開発実践コースの内容から一部を抜粋して無料公開しているもので、実際の開発現場での知見に基づいています。 前回の振り返りと課題 前回は、AIツールを使ったリファクタリングにおいて、以下の2つのポイントが効果的であることを確認しました: タスクを細分化すること ファイル名を指定して明確な指示を出すこと 今回は、これらの手法がバグ修正においても有効なのかを実際
はじめに今回は、Cursorで業務フローをdraw.ioで可視化し、n8nのワークフローを作成するまでの流れを自動化するシステムの構築方法をご紹介します。 このシステムでは対話形式で要件を整理し、段階的にフロー図やn8nのワークフローを作成できます。 このシステムでは、精度高く、n8nのワークフローを構築してくれますが、ノードの細かな設定部分は人間が修正する必要はあります。 ただし、今後のLLMの精度向上に従って、よりn8nワークフロー作成精度の向上も期待できます。そのため、LLMで作成することを前提としたシステムを作成しておくことは非常に便利だと考えられます。 システムの概要このシステムは4つの段階でフロー図やn8nのワークフローを作成します。 対話形式でのヒアリング → 構造化された要件定義書を自動生成 要件定義書 → 中間設計書(DSL)を自動変換 中間設計書 →Draw.io形式

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 正直に言うと、プログラミングを始めたばかりの頃、僕は毎日のようにバグと格闘していました。「なんでこのコードが動かないんだ?」と深夜まで悩んでいた日々が懐かしいです。 そんな時に出会ったのがAIプログラミングアシスタント。最初は半信半疑でしたが、使ってみるとこれは革命だと確信しました。AIプログラミングアシスタントができること: コード補完:変数、関数、さらには複雑なロジック全体を自動生成 自動デバッグ:バグの発見と修正提案 学習サポート:サンプルコードと詳細な解説で新言語習得をサポート チーム連携:自動コメント生成とドキュメ

LSP を活用してセマンティックなコード検索・編集能力を提供する MCP サーバー Serena の導入・使用方法を紹介。Claude Code でのオンボーディングからリファクタリングまでの実践的な活用例を解説します。 Serena はセマンティックなコード検索・編集能力を追加するオープンソースのツールキットです。MCP(Model Context Protocol) サーバーとして動作しているため、Claude Code や Cursor, VS Code のように MCP に対応しているクライアントであれば利用できます。またエージェントフレームワークとして Agno を使用しているため、特定の LLM モデルに依存せずに動作します。 Serena は LSP(Language Server Protocol)を使用してセマンティックなコードを解析するのが特徴です。LSP はコードの構

※この記事は、AIで生成したフィクションのキャラクター「ダウナー系お姉さん」の視点で書かれています。登場する人物・事例もAIで生成した100%架空のものですが、技術的な内容は実際に使用可能です。 はぁ...また夜更かししちゃった。タバコとコーヒーだけで生きてる気がする今日この頃。 でもね、今日は珍しく良いもの見つけたから記事書いてあげる。Claude Code使ってn8nのワークフローを自然言語で作れるっていう、まあまあ使える話。 なんでこんなことしようと思ったか Claude Code推進してる会社多いでしょ?「Webアプリのデモ作ってすごいね〜」で終わってない?正直、それじゃあんまり楽になんないよね。 実際の業務に使えないと、ただの高級なおもちゃ。というわけで、業務自動化の定番n8nと組み合わせてみたら、意外と良かったって話。 ちなみにこれ使うやつ: ...真面目に読んでる?まあいいや

毎日繰り返しやる処理は カスタムスラッシュコマンドで自動化する スラッシュコマンドとは あらかじめ登録した処理を実行できる 毎回長いプロンプトを書く必要がない 組み込みスラッシュコマンド /doctor Claude Codeのバグをチェック /reviewコードレビューをリクエスト https://docs.anthropic.com/ja/docs/claude-code/slash-commands カスタムスラッシュコマンドとは ユーザーが独自に登録した処理を実行できる 毎回命令している長いプロンプトは登録するのが便利 .claude/commands/コマンド名.mdに処理を記述 スコープを設定できる グローバル・プロジェクト・プロジェクトで自分だけ使う等 https://docs.anthropic.com/ja/docs/claude-code/slash-commands

AIを使ってコーディングをしていると、こんな風に感じたことはありませんか? 「大きなファイルを読み込ませるたびに、大量のトークンが消費されてしまう…💸」 「1つのバグを直してもらったら、別の3つのバグが生まれてしまった…😭」 「AIがコードの全体像を理解してくれなくて、何度も同じ説明を繰り返している…🌀」 これらの悩みは、AIがコードを「テキストの羅列」としてしか見られていないことに起因します。しかし、もしAIが人間のようにコードの「意味」や「構造」を理解してくれたら…? 今回は、そんな夢のような未来を実現するツール「Serena」について、その魅力と使い方を、AI技術に触れたことのある皆さまに向けて、じっくりと解説していきます! そもそも「Serena」って何者? なぜ必要なの?Serenaは、一言でいうと「AI(特にClaude)に、あなたのプロジェクトコードを深く理解させるため

※ 学習曲線:低=すぐに使いこなせる、中=少し学習が必要、高=習熟に時間がかかる ※ リソース要件:低=軽量で動作、中=標準的なPC環境、高=高性能PCが望ましい それでは、各ツールの詳細を見ていきましょう! 1. Continue.dev 最初に紹介するのは、Continue.devです。VS Codeの拡張機能として動作するこのツールは、Cursorの主要機能をほぼカバーしています。 初めて使ったとき、「えっ、これ無料なの?」と驚きました。コード生成、バグ修正の提案、ドキュメント作成支援など、有料ツールに引けを取らない機能が揃っているんです。 主な特徴: 複数のAIモデルをサポート -OpenAI、Anthropic、Ollama、Geminiなど、好きなモデルを選べる コンテキスト認識 -プロジェクト全体を理解した上でコード提案 カスタマイズ性 - 自分のワークフローに合わせて設

リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く