AIエージェントに書かせたコード、動くけど中身はよくわからない…という人にちょうどいい「学習モード」をClaude Codeに追加しよう
Anthropic公式のプラグイン「learning-output-style」を入れると、Claudeがコードを全部書くんじゃなくて、要所の5〜10行だけをこっちに書かせてくれる
例えば認証の仕組みはClaudeが用意したうえで
「セッションは操作中に延長する?固定にする?セキュリティと使いやすさのトレードオフだから、handleSessionTimeout() を実装してみて」
みたいに、考えどころの関数だけを渡してくる
・定型コードや設定、単純なCRUDはClaudeがそのまま書く
・人間にかかせるのは処理の中身・エラー時の対応・データの持ち方みたいな、コードの意味がつかめてくる部分
・なぜその書き方にしたか、コードのどこにどんなパターンがあるかを「★ Insight」で2〜3点ずつ解説してくれる
教材を別に用意しなくても、いつもの開発の流れのまま数行ずつ自分で書くことになるので、読める・書けるが少しずつ増えていきそう
全部任せると速いけど、中身がわからないままだとエラーが出たときに自分で直せない
AIに作らせたコードが読めなくてモヤっとしてるなら、まずこれを入れて、数行ずつ書くところから始めてみるのが良さそう
GitHubが無料で公開してる「GitHub Copilot CLI for Beginners」が、AIエージェントの入門にちょうどいい
CopilotのFreeプランで受講できるので、最初から最後まで無料でできる
ターミナルで動くAIエージェントの使い方を、インストールから全8章で学べる公式コース
・1つの書籍管理アプリを、最初の章から最後まで育てていく
・コードレビュー・デバッグ・テスト作成をAIに頼む流れを、手を動かして試せる
・自分専用のレビュー役AIを、Markdownファイル1つで作る
・よく使う手順を「スキル」にして、頼んだ内容に合わせて自動で読み込ませる
・MCPでGitHubやプロジェクトのファイル、最新のドキュメントにつなぐ
コード例も、レビューや解説で決まった出力が出るように作り込まれてて、教材としてかなり丁寧
「スキル」や「MCP」なども使える
AIエージェント使ってみたいけど、いきなりお金かけるのは...という人、一旦これをやってみてからClaude Codeなどの有料ツールを使ってみてもいいかも
Claude Codeで複数のタスクを並行して回そうとすると、1つ1つに長い作業をまとめて任せたくなる
でも長く任せるほど、途中で止まってたり、思ってた完成形と違ったりして、なかなかクオリティが上がらないの僕だけじゃないはず
Anthropic公式のOpus 5.5ガイドに、長い作業を任せるときのコツがまとまってた
・いつ止まっていつ進んでいいかを、CLAUDE.mdに書いておく
・ファイル削除みたいな危ないコマンドの許可確認は、オフにしないでおく
・コード全体の点検や移行みたいな大きい作業は、サブエージェントに分けて任せる
・やることリストをTASKS.mdに置いて、終わったら印を付けさせて、途中で見つけた作業も書き足させる
どれも「任せっぱなしでも、どこまで進んだか・次に何をやるか」がAIにも自分にも見えるようにする工夫で、並行で回すときこそ効きそう
並列でAIを使い始めた人は、まずこのガイドを読んでみるといいかも
Claude Codeの「eli5」ってプラグイン知ってる?
「/eli5 DNSはどうやって動いているの?」みたいに打つと、大きな絵と少ない言葉だけのHTMLで、その仕組みを「5歳児に説明するように」図解してくれる
・難しい概念や文章も、圧倒的にシンプル、簡単な説明になる
・出てくるのはチャットの文章じゃなくて、ブラウザで開けるHTMLだから、そのまま保存して見返せる
・利用を検討しているライブラリやツールなどをこれで比較検討するとかなり楽
自分が学習していてわからないことや、理解のために深ぼって調べたりしないといけないことがあったら、これにサクッと投げてみるとよさそう
くるしば | ソフトバンクよりReact本発売中 retweeted
Docker公式が、AIにDockerfileを書かせるときのスキル集を無料で公開してた
「Docker Skills」はClaude CodeやCursor、GitHub Copilotで使えて、Dockerfile・Compose・サンドボックスなど5領域11スキルが入ってる
「イメージがでかい」「ビルドが遅い」って言うだけで自動で読み込まれて、Docker公式のやり方でDockerfileを書いてくれる
・依存のインストールを先、ソースのコピーを後にして、ビルドが速くなる順番に改善する
・npmやpipのキャッシュを、ビルドのたびに使い回す
・rootじゃなく、専用のユーザーで動かす
・削除系のコマンドは、docker system pruneの前に何が消えるかを説明して確認を取る
Dockerのようなインフラ系のファイル、AIに書かせるのは不安という人も多いと思うので、公式が提供しているスキルがあるのは嬉しい
Docker公式が、AIにDockerfileを書かせるときのスキル集を無料で公開してた
「Docker Skills」はClaude CodeやCursor、GitHub Copilotで使えて、Dockerfile・Compose・サンドボックスなど5領域11スキルが入ってる
「イメージがでかい」「ビルドが遅い」って言うだけで自動で読み込まれて、Docker公式のやり方でDockerfileを書いてくれる
・依存のインストールを先、ソースのコピーを後にして、ビルドが速くなる順番に改善する
・npmやpipのキャッシュを、ビルドのたびに使い回す
・rootじゃなく、専用のユーザーで動かす
・削除系のコマンドは、docker system pruneの前に何が消えるかを説明して確認を取る
Dockerのようなインフラ系のファイル、AIに書かせるのは不安という人も多いと思うので、公式が提供しているスキルがあるのは嬉しい
バイブコーディングで作ったアプリ、どう動くか自分でわかってる?
自分のプロジェクトのコードの動きを、アニメーションとクイズ付きの講座に変えてくれるClaude Codeのスキル「codebase-to-course」が面白い
Claude Codeに「Teach me how this code works」と頼むと、手元のコードを読み込んで、ブラウザで開くだけで動く講座を作ってくれる
・実際のコードの横に、説明が入るので、どこで何をしてるかわかりやすい
・コードの各部分がチャットで会話するようなアニメーションで、データのやりとりを見せてくれる
・各章に、バグ探しや「この場面ならどうする?」みたいな、暗記じゃないクイズがある
コードは実際のファイルから書き換えずに抜き出して、自分のコードをそのまま教材にしてくれるのが嬉しい
AIで作ったアプリ、動くけど中で何が起きてるのかまで把握できてない人多いと思う
このスキルは特に非エンジニア向けに作られてて説明がやさしいのでおすすめ
くるしば | ソフトバンクよりReact本発売中 retweeted
GitHubが無料で公開してる「Spec Kit」、AIとの開発の進め方をそのまま型にしてくれてて良さそう
AIに「〇〇作って」といきなり投げるんじゃなくて、何を・なぜ作るかを先に仕様書にしてから実装させる「仕様駆動開発」のためのツールキット
Claude CodeやCopilot、Codexなど、38種類のAIエージェントで使える
流れはこんな感じ
・最初に1回だけ、テストやコードの品質など、プロジェクトで守る原則を決める
・作りたい機能を普通の言葉で伝えると、仕様書にまとめてくれる
・使う技術を伝えると、設計の計画に落としてくれる
・計画を、順番つきの作業リストに分けてくれる
・作業リストの順に実装する
・最後に仕様と実装を突き合わせて、足りない部分があれば作業を足してくれる
各段階でできた仕様書や計画が次の段階の材料になるので、作り始める前に「思ってたのと違う」に気づけるのが嬉しい
AIに頼むたびに作り直しになってる人、僕だけじゃないはずなので、READMEにある写真整理アプリの例をそのままなぞってみるのがおすすめ
GitHubが無料で公開してる「Spec Kit」、AIとの開発の進め方をそのまま型にしてくれてて良さそう
AIに「〇〇作って」といきなり投げるんじゃなくて、何を・なぜ作るかを先に仕様書にしてから実装させる「仕様駆動開発」のためのツールキット
Claude CodeやCopilot、Codexなど、38種類のAIエージェントで使える
流れはこんな感じ
・最初に1回だけ、テストやコードの品質など、プロジェクトで守る原則を決める
・作りたい機能を普通の言葉で伝えると、仕様書にまとめてくれる
・使う技術を伝えると、設計の計画に落としてくれる
・計画を、順番つきの作業リストに分けてくれる
・作業リストの順に実装する
・最後に仕様と実装を突き合わせて、足りない部分があれば作業を足してくれる
各段階でできた仕様書や計画が次の段階の材料になるので、作り始める前に「思ってたのと違う」に気づけるのが嬉しい
AIに頼むたびに作り直しになってる人、僕だけじゃないはずなので、READMEにある写真整理アプリの例をそのままなぞってみるのがおすすめ
シンプルなデザインはAIに作らせてもそこそこのクオリティでできるようになったけど、アニメーションは結構微妙な品質になりがち
そんな時におすすめ。VercelやLinearで働いてきたデザインエンジニアがアニメーションの作り方をスキルにまとめたの「emilkowalski/skills」
・今あるアニメーションを、決まったルールで厳しくチェックしてくれる
・プロジェクト全体の動きを見直して、優先順位つきの改善プランを出してくれる
・長すぎる名前や空のリストみたいな最悪のデータで、UIが崩れないか試してくれる
・ほかにも、動きを足すと良くなる場所探しや、カクつきの修正まで15本のスキルが入ってる
僕もあまりデザインの知見がないので、こういうの公開してくれるのは本当に助かる
DBの中身を見るのに、MySQLはこれ、Redisはこれ、SQLiteはこれ…ってツールを入れ分けなくてもよさそう
「DBX」は、MySQL・PostgreSQL・SQLite・Redis・MongoDBなど100種類以上のデータベースを、1つのアプリで開ける無料のDBクライアント
しかもアプリ本体は約25MBしかない
・テーブルの中身を表のまま見て、絞り込んだり編集したりできる
・補完つきのエディタでSQLを書ける
・テーブル同士のつながりをER図で出せる
・KafkaやRabbitMQみたいなメッセージキューの中身まで見られる
Mac・Windows・Linuxで動いて、アカウント登録もいらないのが気軽でいい
SQL勉強中なら、自分のアプリのDBを開いてER図を眺めるだけでも、テーブル同士がどうつながってるのか理解が進むはず
URLを渡すと、そのサイトをNext.jsのアプリとして組み直してくれるスキル
「AI Website Cloner Template」は、/clone-website にURLを渡すだけで、AIがサイトを調べて、Reactのコンポーネントに分けて作り直してくれる
作る段取りがしっかりしてるぶん、出来上がりもちゃんと使えるものになってるのが良い
・PCとスマホ、両方の幅で元サイトを見てから作るので、スマホで開いたときの見た目までそっくり
・最後に元サイトと並べて見比べて、ずれを自分で直すので、余白や配置みたいな細かいところまで寄せてくれる
・画像やフォントは元サイトから実物を抜き出して使うので、仮の画像や似たフォントで済まされない
・どのURLをどのページにするかまで調べるので、1ページだけじゃなく複数ページのサイトもまとめて組み直せる
・見た目を写すだけじゃなく、部品ごとのコンポーネントに分けて組み立てるので、あとから自分で編集しやすい
Next.jsでアプリを作る際に、一部でも良いなと思った部分があるサイトをこれで組み直して、良いと思うコンポーネントをピックアップする→組み合わせて調整
みたいな使い方はかなり良さそう
悪用やなりすましは厳禁
「Understand Anything」ってプラグイン知ってる?プロジェクトのコードを、ブラウザで触れる地図にしてくれるやつ
ファイル・関数・クラスと、そのつながりが1枚のグラフになって、ズームしたり検索したりしながら眺められる
中身を見てて「そこまでやってくれるの?」ってなったところ
・依存関係の順に、どこから読めばいいかをガイドツアーで案内してくれる
・初心者向け・PM向け・上級者向けみたいに、見る人に合わせて説明の細かさが変わる
・ジェネリクスやクロージャみたいな言語の仕組みが出てくると、注釈を付けてくれる
・この変更がどこまで影響するかも出してくれる
他人のコードを読むとき、最初の1ファイルを決めるのが一番しんどいので、そこを決めてくれるのはかなり助かるはず
くるしば | ソフトバンクよりReact本発売中 retweeted
くるしばさん (@shiba_program) のブログ記事です🐰
あなたの開発生産性を爆上げする、エンジニア向けAIツール22個
note.com/shiba_program/n/n78…
#CodeRabbit
フロントエンドのパフォーマンス改善を勉強したい人に、「画面がカクつくのはなぜか、どう直すか」をデモを触りながら学べる記事がある
「The Browser's Main Thread Is Expensive」
・JSとCSSのアニメーションを並べて重い処理を走らせるデモ → JSのほうだけ止まって、動きをCSSに任せると止まりにくい理由がわかる
・チャットが大量に流れるデモ → 「届いた瞬間に全部描画」と「20件ごとにひと息入れる」を切り替えて、処理を区切ると画面が固まらなくなるのを体感できる
・Markdownエディタのデモ → 「1文字ごとにプレビュー更新」と「入力が止まってから更新」を比べて、入力欄の引っかかりの直し方がわかる
・4,000個の粒子を動かすデモ → 重い計算を少しずつに分けると滑らかになるのが見える
対処法も「分割・まとめ打ち・優先順位・後回し」の4つに整理されてて、カクつく原因を探すときの見取り図になりそう
Reactで入力欄を作ってる人は、debounceのデモだけでも触ってみるといいはず
くるしば | ソフトバンクよりReact本発売中 retweeted
有名企業や一流開発者のノウハウをそのまま持ち込める、Claude Codeスキル11選|苦しんでプログラミングを学んだ柴犬(くるしば) note.com/shiba_program/n/nd2… b.hatena.ne.jp/entry?url=htt…
くるしば | ソフトバンクよりReact本発売中 retweeted
60以上のAWSサービスを手元のPCで動かせる無料のエミュレーター「MiniStack」、AWSの学習用にかなり良い
docker runを1行打って、AWS CLIやTerraformの接続先をlocalhost:4566に向けるだけで使える
使えるサービスはこのあたり
・保存とデータベース:S3、DynamoDB、RDS(本物のPostgresやMySQLが立ち上がる)、ElastiCache(本物のRedisが立ち上がる)
・サーバーレス:Lambda、API Gateway、Step Functions
・サービス同士をつなぐ:SQS、SNS、EventBridge、Kinesis
・ログインと権限:Cognito、IAM、Secrets Manager、KMS
・コンテナとネットワーク:ECS(本物のDockerコンテナが動く)、ALB、Route53、CloudFront、EC2(VPCやサブネットの設定まで)
・構築の自動化:CloudFormation、Terraform、CDK
学習に向いてると思ったところ
・アカウント登録もAPIキーも要らないので、請求を気にせず何度でも作って壊せる
・リセット用のURLを1回叩くと、全サービスが空の状態に戻る
・API GatewayからLambdaを呼んで、DynamoDBに保存する、みたいなサービスをつないだ構成を丸ごと手元で試せる
・接続先を変えるだけなので、練習で書いたコマンドやTerraformの書き方は本物のAWSと同じ
・起動は2秒くらい、待機中のメモリは30MBくらいで、ノートPCでも重くならない
AWSは、管理画面の操作を覚えるより「サービス同士をどうつなぐか」を手を動かして試すほうが身につくので、そこを請求ゼロで好きなだけ繰り返せるのが一番ありがたい
AWSの資格を勉強中の人や、Lambdaを触ってみたい人は、まずS3にバケットを1個作るところから試してみてほしい
60以上のAWSサービスを手元のPCで動かせる無料のエミュレーター「MiniStack」、AWSの学習用にかなり良い
docker runを1行打って、AWS CLIやTerraformの接続先をlocalhost:4566に向けるだけで使える
使えるサービスはこのあたり
・保存とデータベース:S3、DynamoDB、RDS(本物のPostgresやMySQLが立ち上がる)、ElastiCache(本物のRedisが立ち上がる)
・サーバーレス:Lambda、API Gateway、Step Functions
・サービス同士をつなぐ:SQS、SNS、EventBridge、Kinesis
・ログインと権限:Cognito、IAM、Secrets Manager、KMS
・コンテナとネットワーク:ECS(本物のDockerコンテナが動く)、ALB、Route53、CloudFront、EC2(VPCやサブネットの設定まで)
・構築の自動化:CloudFormation、Terraform、CDK
学習に向いてると思ったところ
・アカウント登録もAPIキーも要らないので、請求を気にせず何度でも作って壊せる
・リセット用のURLを1回叩くと、全サービスが空の状態に戻る
・API GatewayからLambdaを呼んで、DynamoDBに保存する、みたいなサービスをつないだ構成を丸ごと手元で試せる
・接続先を変えるだけなので、練習で書いたコマンドやTerraformの書き方は本物のAWSと同じ
・起動は2秒くらい、待機中のメモリは30MBくらいで、ノートPCでも重くならない
AWSは、管理画面の操作を覚えるより「サービス同士をどうつなぐか」を手を動かして試すほうが身につくので、そこを請求ゼロで好きなだけ繰り返せるのが一番ありがたい
AWSの資格を勉強中の人や、Lambdaを触ってみたい人は、まずS3にバケットを1個作るところから試してみてほしい
TypeScriptの定番教材「Total TypeScript」を作ったMatt Pocockが、自分のAIエージェント用の.agentsフォルダをそのまま公開してた
「mattpocock/skills」は、一流エンジニアが使っているテクニックや進め方をスキルにまとめたリポジトリで、Claude CodeでもCodexでも入れられる
・「grill-me」は、作り始める前にAIが計画をふかぼって、詳細化してくれる
・「tdd」は、テストを先に書いてから実装する流れをAIに守らせる
・「diagnosing-bugs」は、バグを追うときの手順を決まった順で踏ませる
・「wait-what」は、わかりにくい説明を平易な言葉で言い直してくれる
特にgrill-meは優秀。モデルがどんなに良くても、人間側の指示や要件が曖昧で手戻りが出るケースは多々あるが、grill-meはこれを防いでくれる
他のスキルも開発に役立つものばかりなので、ぜひ入れて試しに使ってみてほしい
くるしば | ソフトバンクよりReact本発売中 retweeted
Claude CodeやCodexのスキル、便利だけど何でも入れるのは危険。でもどうやってセキュリティ面をチェックしたらいい?
NVIDIAが公開してる「SkillSpector」は、Claude CodeやCodex、MCPのスキルを入れる前に検査できるツール
・プロンプトインジェクション、データの持ち出し、権限昇格など、17カテゴリの危ない書き方を調べてくれる
・フォルダ、zip、GitのURL、SKILL.md単体のどれでも渡せる
・--no-llmを付ければ、APIキーなしの静的解析だけで動く
・結果はJSONやMarkdown、CIやVS Codeで読める形式(SARIF)でも出せる
実行スクリプトが入ってるスキルは、ないものより2倍くらい脆弱になりやすいらしくて、どこを疑えばいいかの目安になるのがありがたい
AIエージェントのスキルを3万個以上分析したら、約26%に脆弱性があって、約5%は悪意がありそうだった、っていう調査結果があるぐらい
便利そうなスキルを見つけたら、入れる前に1回スキャンするクセをつけておくと安心なはず




















































