くるしば | ソフトバンクよりReact本発売中

プログラミング独学→半年でWebサービスを作り起業/ベンチャー2社と個人事業を創業、売却/エンジニアになりたい人、個人開発したい人に向けてプログラミングやプロダクトの作り方を発信中/SBクリエイティブより「挫折しないReactの教科書」発売中/ 公開した全てのUdemy講座がベストセラー入り

[くるしば | ソフトバンクよりReact本発売中 @shiba_program]

AIエージェントに書かせたコード、動くけど中身はよくわからない…という人にちょうどいい「学習モード」をClaude Codeに追加しよう

Anthropic公式のプラグイン「learning-output-style」を入れると、Claudeがコードを全部書くんじゃなくて、要所の5〜10行だけをこっちに書かせてくれる

例えば認証の仕組みはClaudeが用意したうえで

「セッションは操作中に延長する？固定にする？セキュリティと使いやすさのトレードオフだから、handleSessionTimeout() を実装してみて」

みたいに、考えどころの関数だけを渡してくる

・定型コードや設定、単純なCRUDはClaudeがそのまま書く
・人間にかかせるのは処理の中身・エラー時の対応・データの持ち方みたいな、コードの意味がつかめてくる部分
・なぜその書き方にしたか、コードのどこにどんなパターンがあるかを「★ Insight」で2〜3点ずつ解説してくれる

教材を別に用意しなくても、いつもの開発の流れのまま数行ずつ自分で書くことになるので、読める・書けるが少しずつ増えていきそう

全部任せると速いけど、中身がわからないままだとエラーが出たときに自分で直せない

AIに作らせたコードが読めなくてモヤっとしてるなら、まずこれを入れて、数行ずつ書くところから始めてみるのが良さそう

[くるしば | ソフトバンクよりReact本発売中 @shiba_program]

GitHubが無料で公開してる「GitHub Copilot CLI for Beginners」が、AIエージェントの入門にちょうどいい
CopilotのFreeプランで受講できるので、最初から最後まで無料でできる

ターミナルで動くAIエージェントの使い方を、インストールから全8章で学べる公式コース

・1つの書籍管理アプリを、最初の章から最後まで育てていく
・コードレビュー・デバッグ・テスト作成をAIに頼む流れを、手を動かして試せる
・自分専用のレビュー役AIを、Markdownファイル1つで作る
・よく使う手順を「スキル」にして、頼んだ内容に合わせて自動で読み込ませる
・MCPでGitHubやプロジェクトのファイル、最新のドキュメントにつなぐ

コード例も、レビューや解説で決まった出力が出るように作り込まれてて、教材としてかなり丁寧

「スキル」や「MCP」なども使える
AIエージェント使ってみたいけど、いきなりお金かけるのは...という人、一旦これをやってみてからClaude Codeなどの有料ツールを使ってみてもいいかも

[くるしば | ソフトバンクよりReact本発売中 @shiba_program]

@s4qlf それはopusに回す場合も同様ですが

[くるしば | ソフトバンクよりReact本発売中 @shiba_program]

Claude Codeで複数のタスクを並行して回そうとすると、1つ1つに長い作業をまとめて任せたくなる

でも長く任せるほど、途中で止まってたり、思ってた完成形と違ったりして、なかなかクオリティが上がらないの僕だけじゃないはず

Anthropic公式のOpus 5.5ガイドに、長い作業を任せるときのコツがまとまってた

・いつ止まっていつ進んでいいかを、CLAUDE.mdに書いておく
・ファイル削除みたいな危ないコマンドの許可確認は、オフにしないでおく
・コード全体の点検や移行みたいな大きい作業は、サブエージェントに分けて任せる
・やることリストをTASKS.mdに置いて、終わったら印を付けさせて、途中で見つけた作業も書き足させる

どれも「任せっぱなしでも、どこまで進んだか・次に何をやるか」がAIにも自分にも見えるようにする工夫で、並行で回すときこそ効きそう

並列でAIを使い始めた人は、まずこのガイドを読んでみるといいかも

[くるしば | ソフトバンクよりReact本発売中 @shiba_program]

@s4qlf ありだと思います！

タスクを切る粒度によっては、切り返えがこまめに発生しすぎて、その分コンテキストを消費してしまい逆効果になってしまうケースもあると思うので、そこは気をつけたいですね

[くるしば | ソフトバンクよりReact本発売中 @shiba_program]

Claude Codeの「eli5」ってプラグイン知ってる？

「/eli5 DNSはどうやって動いているの？」みたいに打つと、大きな絵と少ない言葉だけのHTMLで、その仕組みを「5歳児に説明するように」図解してくれる

・難しい概念や文章も、圧倒的にシンプル、簡単な説明になる
・出てくるのはチャットの文章じゃなくて、ブラウザで開けるHTMLだから、そのまま保存して見返せる
・利用を検討しているライブラリやツールなどをこれで比較検討するとかなり楽

自分が学習していてわからないことや、理解のために深ぼって調べたりしないといけないことがあったら、これにサクッと投げてみるとよさそう

[くるしば | ソフトバンクよりReact本発売中 @shiba_program]

Docker公式が、AIにDockerfileを書かせるときのスキル集を無料で公開してた

「Docker Skills」はClaude CodeやCursor、GitHub Copilotで使えて、Dockerfile・Compose・サンドボックスなど5領域11スキルが入ってる

「イメージがでかい」「ビルドが遅い」って言うだけで自動で読み込まれて、Docker公式のやり方でDockerfileを書いてくれる

・依存のインストールを先、ソースのコピーを後にして、ビルドが速くなる順番に改善する
・npmやpipのキャッシュを、ビルドのたびに使い回す
・rootじゃなく、専用のユーザーで動かす
・削除系のコマンドは、docker system pruneの前に何が消えるかを説明して確認を取る

Dockerのようなインフラ系のファイル、AIに書かせるのは不安という人も多いと思うので、公式が提供しているスキルがあるのは嬉しい

[くるしば | ソフトバンクよりReact本発売中 @shiba_program]

Docker公式が、AIにDockerfileを書かせるときのスキル集を無料で公開してた

「Docker Skills」はClaude CodeやCursor、GitHub Copilotで使えて、Dockerfile・Compose・サンドボックスなど5領域11スキルが入ってる

「イメージがでかい」「ビルドが遅い」って言うだけで自動で読み込まれて、Docker公式のやり方でDockerfileを書いてくれる

・依存のインストールを先、ソースのコピーを後にして、ビルドが速くなる順番に改善する
・npmやpipのキャッシュを、ビルドのたびに使い回す
・rootじゃなく、専用のユーザーで動かす
・削除系のコマンドは、docker system pruneの前に何が消えるかを説明して確認を取る

Dockerのようなインフラ系のファイル、AIに書かせるのは不安という人も多いと思うので、公式が提供しているスキルがあるのは嬉しい

[くるしば | ソフトバンクよりReact本発売中 @shiba_program]

バイブコーディングで作ったアプリ、どう動くか自分でわかってる？

自分のプロジェクトのコードの動きを、アニメーションとクイズ付きの講座に変えてくれるClaude Codeのスキル「codebase-to-course」が面白い

Claude Codeに「Teach me how this code works」と頼むと、手元のコードを読み込んで、ブラウザで開くだけで動く講座を作ってくれる

・実際のコードの横に、説明が入るので、どこで何をしてるかわかりやすい
・コードの各部分がチャットで会話するようなアニメーションで、データのやりとりを見せてくれる
・各章に、バグ探しや「この場面ならどうする？」みたいな、暗記じゃないクイズがある

コードは実際のファイルから書き換えずに抜き出して、自分のコードをそのまま教材にしてくれるのが嬉しい

AIで作ったアプリ、動くけど中で何が起きてるのかまで把握できてない人多いと思う

このスキルは特に非エンジニア向けに作られてて説明がやさしいのでおすすめ

[くるしば | ソフトバンクよりReact本発売中 @shiba_program]

GitHubが無料で公開してる「Spec Kit」、AIとの開発の進め方をそのまま型にしてくれてて良さそう

AIに「〇〇作って」といきなり投げるんじゃなくて、何を・なぜ作るかを先に仕様書にしてから実装させる「仕様駆動開発」のためのツールキット

Claude CodeやCopilot、Codexなど、38種類のAIエージェントで使える

流れはこんな感じ

・最初に1回だけ、テストやコードの品質など、プロジェクトで守る原則を決める
・作りたい機能を普通の言葉で伝えると、仕様書にまとめてくれる
・使う技術を伝えると、設計の計画に落としてくれる
・計画を、順番つきの作業リストに分けてくれる
・作業リストの順に実装する
・最後に仕様と実装を突き合わせて、足りない部分があれば作業を足してくれる

各段階でできた仕様書や計画が次の段階の材料になるので、作り始める前に「思ってたのと違う」に気づけるのが嬉しい

AIに頼むたびに作り直しになってる人、僕だけじゃないはずなので、READMEにある写真整理アプリの例をそのままなぞってみるのがおすすめ

[くるしば | ソフトバンクよりReact本発売中 @shiba_program]

@ai_nurseman ですね！

[くるしば | ソフトバンクよりReact本発売中 @shiba_program]

GitHubが無料で公開してる「Spec Kit」、AIとの開発の進め方をそのまま型にしてくれてて良さそう

AIに「〇〇作って」といきなり投げるんじゃなくて、何を・なぜ作るかを先に仕様書にしてから実装させる「仕様駆動開発」のためのツールキット

Claude CodeやCopilot、Codexなど、38種類のAIエージェントで使える

流れはこんな感じ

・最初に1回だけ、テストやコードの品質など、プロジェクトで守る原則を決める
・作りたい機能を普通の言葉で伝えると、仕様書にまとめてくれる
・使う技術を伝えると、設計の計画に落としてくれる
・計画を、順番つきの作業リストに分けてくれる
・作業リストの順に実装する
・最後に仕様と実装を突き合わせて、足りない部分があれば作業を足してくれる

各段階でできた仕様書や計画が次の段階の材料になるので、作り始める前に「思ってたのと違う」に気づけるのが嬉しい

AIに頼むたびに作り直しになってる人、僕だけじゃないはずなので、READMEにある写真整理アプリの例をそのままなぞってみるのがおすすめ

[くるしば | ソフトバンクよりReact本発売中 @shiba_program]

@fwLMjd7ddW86643 おっしゃる通りで、手戻りを減らすためにはまず仕様から作らせるのが鉄則と思います
動画やコードなど、成果物の言語化が難しい複雑なタスクほどより必要性が高いですね

[くるしば | ソフトバンクよりReact本発売中 @shiba_program]

@yuzu00yuzu00 そうなんです！
おすすめです！

[くるしば | ソフトバンクよりReact本発売中 @shiba_program]

@kumitate_ai そうなんです、そこが仕様駆動開発やプランモードのよいとこですよね

[くるしば | ソフトバンクよりReact本発売中 @shiba_program]

シンプルなデザインはAIに作らせてもそこそこのクオリティでできるようになったけど、アニメーションは結構微妙な品質になりがち

そんな時におすすめ。VercelやLinearで働いてきたデザインエンジニアがアニメーションの作り方をスキルにまとめたの「emilkowalski/skills」

・今あるアニメーションを、決まったルールで厳しくチェックしてくれる
・プロジェクト全体の動きを見直して、優先順位つきの改善プランを出してくれる
・長すぎる名前や空のリストみたいな最悪のデータで、UIが崩れないか試してくれる
・ほかにも、動きを足すと良くなる場所探しや、カクつきの修正まで15本のスキルが入ってる

僕もあまりデザインの知見がないので、こういうの公開してくれるのは本当に助かる

[くるしば | ソフトバンクよりReact本発売中 @shiba_program]

DBの中身を見るのに、MySQLはこれ、Redisはこれ、SQLiteはこれ…ってツールを入れ分けなくてもよさそう

「DBX」は、MySQL・PostgreSQL・SQLite・Redis・MongoDBなど100種類以上のデータベースを、1つのアプリで開ける無料のDBクライアント

しかもアプリ本体は約25MBしかない

・テーブルの中身を表のまま見て、絞り込んだり編集したりできる
・補完つきのエディタでSQLを書ける
・テーブル同士のつながりをER図で出せる
・KafkaやRabbitMQみたいなメッセージキューの中身まで見られる

Mac・Windows・Linuxで動いて、アカウント登録もいらないのが気軽でいい

SQL勉強中なら、自分のアプリのDBを開いてER図を眺めるだけでも、テーブル同士がどうつながってるのか理解が進むはず

[くるしば | ソフトバンクよりReact本発売中 @shiba_program]

URLを渡すと、そのサイトをNext.jsのアプリとして組み直してくれるスキル

「AI Website Cloner Template」は、/clone-website にURLを渡すだけで、AIがサイトを調べて、Reactのコンポーネントに分けて作り直してくれる

作る段取りがしっかりしてるぶん、出来上がりもちゃんと使えるものになってるのが良い

・PCとスマホ、両方の幅で元サイトを見てから作るので、スマホで開いたときの見た目までそっくり
・最後に元サイトと並べて見比べて、ずれを自分で直すので、余白や配置みたいな細かいところまで寄せてくれる
・画像やフォントは元サイトから実物を抜き出して使うので、仮の画像や似たフォントで済まされない
・どのURLをどのページにするかまで調べるので、1ページだけじゃなく複数ページのサイトもまとめて組み直せる
・見た目を写すだけじゃなく、部品ごとのコンポーネントに分けて組み立てるので、あとから自分で編集しやすい

Next.jsでアプリを作る際に、一部でも良いなと思った部分があるサイトをこれで組み直して、良いと思うコンポーネントをピックアップする→組み合わせて調整
みたいな使い方はかなり良さそう

悪用やなりすましは厳禁

[くるしば | ソフトバンクよりReact本発売中 @shiba_program]

「Understand Anything」ってプラグイン知ってる？プロジェクトのコードを、ブラウザで触れる地図にしてくれるやつ

ファイル・関数・クラスと、そのつながりが1枚のグラフになって、ズームしたり検索したりしながら眺められる

中身を見てて「そこまでやってくれるの？」ってなったところ

・依存関係の順に、どこから読めばいいかをガイドツアーで案内してくれる
・初心者向け・PM向け・上級者向けみたいに、見る人に合わせて説明の細かさが変わる
・ジェネリクスやクロージャみたいな言語の仕組みが出てくると、注釈を付けてくれる
・この変更がどこまで影響するかも出してくれる

他人のコードを読むとき、最初の1ファイルを決めるのが一番しんどいので、そこを決めてくれるのはかなり助かるはず

[CodeRabbit (JP) @Coderabbitaija]

くるしばさん (@shiba_program) のブログ記事です🐰

あなたの開発生産性を爆上げする、エンジニア向けAIツール22個
https://t.co/mqxaK8xW7Z

#CodeRabbit