はてなブックマーク

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こんにちは、とまだです。 フロントエンド開発でコンソールエラーをいちいちコピーしたり、スクリーンショットを撮ってAIに渡したりするの、地味に面倒ですよね。 実は私も、ローカル環境でのテストでエラーが出るたびに、DevToolsを開いてエラーメッセージをコピーして、Claude Codeに貼り付けて...という作業を繰り返していました。 そこで以前ご紹介したPlaywright MCPでかなり楽になったのですが、さらに便利なツールが登場しました。 結論から言いますと、Chromeだけを対象にしたウェブ開発であれば、Chrome DevTo

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こんにちは、とまだです。 みなさん、AI駆動開発でコードは書けるようになったけど、要件定義や設計がうまくいかないと感じたことはありませんか? 実は私も最初は「AIに任せすぎて何を作っているのか見失う」という経験をよくしていました。 今回は、Codex CLI専用の仕様駆動開発ツール「Spec Driven Codex」を作ったので、その使い方と実践例を紹介します! 忙しい人のために要約 Codex CLI対応の仕様駆動開発ツールをOSSでリリース 1コマンドで導入できて既存プロジェクトにも使える 要件定義→設計→実装の流れを6つのコマン

AI駆動開発ツールの選択は開発スタイルで決まる 私がAI駆動開発を始めたきっかけは、GitHub Copilotでした。 業務で初めて触れて、そのコード生成能力に驚いたものです。 それ以来、CursorやCline、AWS Kiro に JetBrainsのAIアシスタントなど、さまざまなツールを試してきました。 その後、6月からClaude Codeを本格的に使い始め、今では日常的に活用しています。 そして今はClaude CodeとCodex CLIを併用しています。 そんな経験から、両ツールの特徴と使い分け方や、どちらを選ぶべきかを解説します! おさらい:Claude CodeとCodex CLIの基本情報 まず基本的な位置づけを確認しましょう。 Claude CodeはAnthropic社が提供するターミナル統合型のAIコーディングアシスタント。 Codex CLIはOpenAI社

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こんにちは、とまだです。 みなさん、AWS Kiroの仕様駆動開発(Spec-Driven Development)は試したことあるでしょうか? 仕様駆動開発は「要件定義→設計→実装」の順番でAIと協働しながら進める開発スタイルです。 ただ、Kiroはウェイトリストに登録しないと使えないし、使えるモデルも限られているんですよね。 今回は、この仕様駆動開発をClaude Codeで実現できる国産ツール「cc-sdd」を実際に使ってみたので、その導入から実践まで詳しく解説します。 (追記:仕様駆動開発の観点を含めて Codex CLI との

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こんにちは、とまだです。 みなさん、AI駆動開発ツールを選ぶとき、「Claude CodeとCodex CLI、結局どっちがいいの?」と迷ったことはありませんか? 私は両ツールを日常的に使い分けています。 Claude CodeはMaxプラン、Codex CLIはChatGPT Plusプランと、両方に投資して実践的に使い込んでいます。 今回は、実際に両ツールを併用している立場から、それぞれの特徴と効果的な使い分け方を解説します。 (追記:どちらを選ぶべき?に焦点をあてた記事も書きました) 忙しい人のために要約 初心者はドキュメントが充

こんにちは、とまだです。 みなさん、Claude Codeで開発していて「もっと深い分析がしたい」「複雑な問題を解決したい」と思ったことはありませんか? 特にこの1ヶ月ぐらい、Claude Codeの一部モデルで性能が低下しており、困っている方も多いのではないかと思います。 そのためか、OpenAIが出したCodex CLIに流れている方も多いようです。 しかし、ツールやフレームワークが整っているClaude Codeを普段使いしたいというのが正直なところ...。 ですので、Claude CodeからCodexをワンショットで呼び出すということをやっていました。 しかしちょうど、Codex CLIのアップデートによって、MCP経由でCodex CLIを直接呼び出せるようになりました。 今回は実際に設定して使ってみたので、その手順と感想を共有します。 (追記:動画版もあります!) 忙しい人の

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こんにちは、とまだです。 Claude CodeとCodex、どちらを使うべきか迷っていませんか? そこで今回、同じ要件定義のToDoアプリを両ツールで作成し、コード品質を5つの観点から徹底比較してみました。 結果から言うと、それぞれに明確な強みがあることが分かりました。 今回はその比較結果をお伝えしていきます! なお、この収録を行っている時点では、Claude Codeの性能が一時的に低下していると言われています。 公平な比較ではない可能性があるので、修正されたら改めてチェックしてみようと思います。 忙しい人のために要約 同じToDo

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こんにちは、とまだです。 ChatGPTのサブスクリプション(Plus/Pro)を契約しているけど、チャット機能しか使ってないという方も多いのではないでしょうか? そのサブスクで 追加料金なしで使えるAIコーディングツール「Codex」 はご存知でしょうか。 最近は AI でのコーディングといえば カーソルやClaude Codeが主流になりつつありますが、Googleトレンドを見るとCodexも特に日本で人気を集めています。 今回は、Codexの基本的な使い方から実際にWebサイトを作るまでを解説します。 忙しい人のために要約 Cha

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こんにちは、とまだです。 Claude Codeで開発していて、毎回手動でブラウザ確認するのが面倒だと感じたことはありませんか? フォームの動作確認や、ボタンクリックのテスト、レスポンシブデザインのチェック。 AIがコードを書いてくれても、結局最後は自分の目で確認しなきゃいけないですよね。 今回は、Microsoft公式のPlaywright MCPを使って、自然言語で指示するだけでE2Eテストを完全自動化する方法を紹介します。 忙しい人のために要約 Playwright MCPで自然言語の指示だけでブラウザ操作が可能 「フォームに入力

こんにちは、とまだです。 SuperClaudeのコマンドはたくさんあるけれど、どの順番で使えばいいか迷っていませんか? 実はSuperClaudeには「Common Workflows」という推奨パターンがあります。 この流れに沿って進めると、要件定義から実装計画の策定、さらにコード品質の向上までスムーズに開発が進むようになります。 今回は天気予報アプリを題材に、SuperClaudeの4つのワークフローを実践してみました! 忙しい人のために要約 SuperClaudeの推奨ワークフローで効率的に開発できる brainstorm → design → workflow の3つで設計が完成 各コマンドの実行結果が具体的で実用的 コード品質の分析と改善が数値で可視化される ドキュメント生成機能で開発資産を残せる ちなみに、こちらの動画版の方が解説は手厚いのでおすすめです。 今回使うワークフロ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こんにちは、とまだです。 Claude Code でコードを書いていて、「セキュリティ的に大丈夫かな?」とか「もっとパフォーマンス改善できないかな?」と悩んだことはありませんか? 最近話題の SuperClaude というフレームワークを使ってみたところ、コード品質の改善がとても楽になったので紹介します。 (追記:実践編はこちら) 忙しい人のために要約 SuperClaude は Claude Code を拡張する無料のオープンソースツール 専門家ペルソナが自動的に登場して最適な支援をしてくれる 16個の高品質なカスタムコマンドがすぐに

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こんにちは、とまだです。 Claude Codeを使い始めたら「もっと便利に使えそう」と感じたことはありませんか? または、「Claude Code を使ってみたいけど難しそう」と思って、手を出せてない方もいるはずです。 実際、Claude Codeの性能を引き出すには様々なコツが必要です。 しかし、そういったノウハウは実際に使ってみないと分からないことばかりです。 そこで今回、私が実際に使い込んで見つけたノウハウを詰め込んだ無料チュートリアルを公開しましたので、そのお知らせです! Claude Code 基礎講座(ユーザー登録不要)

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こんにちは、とまだです。 Claude Codeを使い始めたら「もっと便利に使えそう」と感じたことはありませんか? または、「Claude Code を使ってみたいけど難しそう」と思って、手を出せてない方もいるはずです。 実際、Claude Codeの性能を引き出すには様々なコツが必要です。 しかし、そういったノウハウは実際に使ってみないと分からないことばかりです。 そこで今回、私が実際に使い込んで見つけたノウハウを詰め込んだ無料チュートリアルを公開しましたので、そのお知らせです! Claude Code 基礎講座(ユーザー登録不要)

こんにちは、とまだです。 Claude Code で数日前に追加された Sub agent という機能、もう使ったでしょうか? 正直、名前だけじゃ何の機能かピンと来ませんでした。 こちらはざっくり言うと 「Claude Code 内にさらに専門家を作る」 機能です。 特にコードレビューや UI/UX 改善など、専門的な視点が必要なときに役立ちそうです。 今回は、私が運営している Learning Next というサイトで Sub agents を作って使ってみた体験を共有します。 Sub agents とは? まずは公式の説明をそのまま引用&翻訳してみます。 サブエージェントとは何ですか? サブエージェントとは、Claude Codeがタスクを委譲できる事前設定されたAIペルソナのことです。各サブエージェントには以下の特徴があります: 特定の目的と専門分野を持っている メインの会話とは別の

.claude/ ├── 00_project/ # プロジェクトの要件 │ ├── 01_appcadia_concept_requirements.md │ └── 02_inception_deck.md ├── 01_development_docs/ # 技術設計ドキュメント(15個) │ ├── 01_architecture_design.md │ ├── 02_database_design.md │ ├── 03_api_design.md │ ├── 04_screen_transition_design.md │ ├── 05_seo_requirements.md │ ├── 06_error_handling_design.md │ ├── 07_type_definitions.md │ ├── 08_development_setup.md │ ├── 09_

こんにちは、とまだです。 先日、こんな記事を書かせていただきました。 【AI 駆動開発】Cursor を使いこなして 1 ヶ月でプログラミング学習サイトを作ったのでノウハウを伝えたい Cursor と Claude を使った AI 駆動開発で、1 ヶ月でプログラミング学習サイトを作ったという内容でした。 おかげさまで多くの方に読んでいただけたようで、お役に立てて嬉しいです。 ただ、前回の記事では 「デザインの統一感で苦労した」 という反省点もお伝えしていました。 今回はその続編として、Apple 風のデザインルールを策定することで UI 調整が劇的に改善した 経験をお伝えしたいと思います。 ※(注記)「デザインルール」「デザインルール」「デザインシステム」など、同じような意味で使われる言葉ですが、ここでは「デザインルール」と呼ぶことにします。 この記事でわかること Claude を使ったデザインル

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こんにちは、とまだです。 皆さん、最近話題の AI 駆動開発、試していますか? 私は普段フリーランスの Web エンジニアとして活動しており、そちらでは AI エージェントをフル活用した開発を行っています。 そして業務だけでなく、個人開発の中でも AI を活用して、開発効率を劇的に向上させています。 そんな中、個人開発として Cursor と Claude をフル活用して、プログラミング学習サイトを たった 1 ヶ月で作り切る ことができました。 今回作ったのは「Learning Next」というサイトで、プログラミング学習用のテキスト

はじめに みなさん、AI 駆動開発してますか? 最近、いろんな AI エージェントが登場してきて、AI 駆動開発が盛り上がってきていますね。 私はこれまで、業務やプライベートの両方で、生成 AI や AI エージェントを使って開発をしてきました。 生成 AI 系 ChatGPT Gemini Claude AI エージェント GitHub Copilot Cursor Cline この中で、個人的には Cline が一番使いやすく、特に Next.js との相性が良いと感じています。 今回は、最近特に話題の AI エージェント Cline と Next.js を組み合わせて開発する際に、私が使っている設定ファイルを紹介してみたいと思います。 一応、数行を書き換えれば他の技術スタックでも使えると思いますが、今回は Next.js を例にして紹介していきます。 Cline とは Cline は

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こんにちは、とまだです。 みなさん、個人開発はしていますか? そして個人開発をしている方は 個人開発アプリで一発あてて月収 xx 万円 を夢見ていたりしませんか? 私も夢見る一人なのですが、特に「集客」や「マネタイズ」の方法に悩んでいる方も多いのではないでしょうか。 今回は、私が個人開発した Learning Next というサービスがあります。 こちらが軌道に乗ってきたので、開発の背景から技術的な工夫まで、赤裸々にお話ししたいと思います。 この記事を読んだらわかること この記事は、個人でサービスを作ってみたい人、特に 集客やマネタイズ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

こんにちは、とまだです。 最近、AI の進化がすごいですよね! 今日は、Anthropic 社が新しく発表した「Claude computer use」という機能を試してみたので、その様子をお届けしたいと思います。 Claude computer use って何? 簡単に言うと、「AI がパソコンを人間のように操作できる」機能です。 1. 基本的な操作が可能 マウスを動かしてクリックする キーボードでテキストを入力する 画面を見て情報を読み取る フォームに情報を入力する 2. 日常的なタスクの例 フォームに必要な情報を入力する スプレッドシートからデータを確認する ウェブブラウザで情報を探す データを集めてまとめる 3. 実際の使用例 例えば、こんなことができます。

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? フロントエンド開発をしていると、「ビルドに時間がかかりすぎる...」と感じることはありませんか? 特に大規模なプロジェクトでは、ビルド時間が長くなりがちで、開発効率が落ちてしまうことも多いです。 そんな悩みを解決してくれるのが、今回紹介する「Vite」というビルドツールです。 Vite を使えば、フロントエンド開発の速度が劇的に向上し、ストレスフリーな開発環境を手に入れることができます。 そもそも「ビルドツール」とは? フロントエンド開発において、ビルドツールは欠かせない存在です。 でも、「ビルドツールって何?」と思う方もいるかもしれま