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

AIの教材は色々あるけど、バイブコーディングの本格的な教材って初めて見た しかも、複数のAIを並列で回すマルチエージェント開発まで含まれてる 「Easy-Vibe」は、AIに指示してソフトを作るVibe Codingを、完全初心者向け→フルスタック→上級の3段階で学べる無料チュートリアルで、日本語でそのまま読める ・最初は、アイディアの出し方、課題発掘の仕方から始まる ・2段階目で、デザインをコードにする、実際のデータを扱う、デプロイして公開する、まで進む ・上級ではClaude CodeのMCPやスキル、Agent Teamsまで扱う ・付録に、フロントエンドの基礎やAPI設計を動くデモで触りながら理解できる解説がある コードの外側の「ユーザーへの話の聞き方」みたいな製品づくりの章まであるのが面白いし本格的 Claude Code入れて、さあこれから何か作ろうというフェーズの人、絶対見てほしい

GoogleでAndroid Studioを開発していたエンジニアが、自分で使ってるAGENT.md（AIにコードを書かせるときのルールファイル）を、ルールごとの理由つきで全文公開してる ルールは14個＋コミットメッセージの書き方7つ ・関数名は30文字未満 ・if文を深く入れ子にせず、早めにreturnして平らに書く ・引数にtrue/falseを渡すより、名前のついた選択肢（enum）を使う ・意味のある数字や文字列は、名前のついた定数にする ・バグ修正は、先に失敗するテストを書かせて、落ちるのを確認してから直させる ・privateをpublicに変えるときは、必ず人間の許可を取らせる 運用のコツも書いてあって、会話が長くなって品質が落ちてきたら「Reload AGENT.md」と一言言ってAGENT.mdを明示的に読み直させるらしい 理由、解説まで含めて公開されてるものは珍しい気がするのでぜひ参参にしてみて

Anthropicが公開してる「Claude Academy」って知ってる？Claude Codeの使い方を、作ってる会社自身が日本語でまとめた無料の学習サイト アカウントなしでそのまま読めて、コースの最後にはクイズで理解度も確かめられる まず見てほしいのは「Claude Code 101」。12レッスン・約1.5時間で、こんな内容が順番に並んでる ・Claude Codeが裏で「情報を集める→動く→結果を確かめる」を繰り返してる仕組み ・調べる→計画する→書く→コミットする、の毎日の進め方 ・会話が長くなってきたときの、/compactや/clearの使いどころ ・CLAUDE.mdにプロジェクトのルールを書いて、毎回説明しなくて済むようにする ・大きな作業を、サブエージェントに分担して任せる ・決まったタイミングで整形を走らせたり、危ないコマンドを止めたりする 基礎的な内容はこの101を見れば大体わかる Claude Codeを触り始めた人は、まずここからはじめるのが良さそう

Claude CodeやCursorに、構成図・ER図・シーケンス図などを読みやすく描かせられるスキル「diagram-design」が良さそう 1枚が1つのHTMLファイルで完結してて、ビルドもJavaScriptも要らない ・座標や幅、間隔はすべて4で割り切れる値にする、と決めてる ・図形の重なりやはみ出しは、自動でチェックしてる ・自分のサイトのURLを渡すと、ブランドの色やフォントを読み取って全部の図に反映してくれる ・draw.ioで描いた図を読み込んで、描き直すこともできる などなど、見た目のルールをかなり厳格に縛ってるから、こっちが細かく指示しなくても整った図になるのが嬉しい 構成図などの資料作成は割とこれ入れておけばOKぐらいのクオリティがある

Claude Codeを作ってるチームが、自分たちのコードレビューの回し方を「How the Claude Code team does code review」でそのまま公開してた コードの約90%をClaudeが書いてるチームなので、AIが書いたPRが大量に来る前提 全部人がレビューしてたら追いつかないので、レビュープロセスもAIで極限まで効率化してある 効率化のやり方が具体的で「そこまで決めてるんだ」ってなったところ ・人が見る量を変更の中身で決める。ドキュメントや文言の修正は自動チェックが通れば人の承認なし、普通の機能変更は1人、一番危ないところだけ2人 ・AIレビューは、複数のエージェントが同時にバグを探したあと、別のエージェントたちが「これは本当に直す必要があるバグか」を投票する。十分な数が同意した指摘だけがPRに載る ・AIレビュアーには、REVIEW.mdで「このリポジトリでの失敗とは何か」「細かい指摘は何件まで」「見なくていいファイル」などの情報を先に渡しておく ・エージェントに書かせたPRは、そのエージェントに指示した本人がレビュアーに必ず入る PRのテンプレなども公開されてて、すぐ真似できる形でまとまってるのがありがたい

AIエージェントに書かせたコード、動くけど中身はよくわからない…という人にちょうどいい「学習モード」をClaude Codeに追加しよう Anthropic公式のプラグイン「learning-output-style」を入れると、Claudeがコードを全部書くんじゃなくて、要所の5〜10行だけをこっちに書かせてくれる 例えば認証の仕組みはClaudeが用意したうえで 「セッションは操作中に延長する？固定にする？セキュリティと使いやすさのトレードオフだから、handleSessionTimeout() を実装してみて」 みたいに、考えどころの関数だけを渡してくる ・定型コードや設定、単純なCRUDはClaudeがそのまま書く ・人間にかかせるのは処理の中身・エラー時の対応・データの持ち方みたいな、コードの意味がつかめてくる部分 ・なぜその書き方にしたか、コードのどこにどんなパターンがあるかを「★ Insight」で2〜3点ずつ解説してくれる 教材を別に用意しなくても、いつもの開発の流れのまま数行ずつ自分で書くことになるので、読める・書けるが少しずつ増えていきそう 全部任せると速いけど、中身がわからないままだとエラーが出たときに自分で直せない 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に書かせるのは不安という人も多いと思うので、公式が提供しているスキルがあるのは嬉しい

GitHubが無料で公開してる「Spec Kit」、AIとの開発の進め方をそのまま型にしてくれてて良さそう AIに「〇〇作って」といきなり投げるんじゃなくて、何を・なぜ作るかを先に仕様書にしてから実装させる「仕様駆動開発」のためのツールキット Claude CodeやCopilot、Codexなど、38種類のAIエージェントで使える 流れはこんな感じ ・最初に1回だけ、テストやコードの品質など、プロジェクトで守る原則を決める ・作りたい機能を普通の言葉で伝えると、仕様書にまとめてくれる ・使う技術を伝えると、設計の計画に落としてくれる ・計画を、順番つきの作業リストに分けてくれる ・作業リストの順に実装する ・最後に仕様と実装を突き合わせて、足りない部分があれば作業を足してくれる 各段階でできた仕様書や計画が次の段階の材料になるので、作り始める前に「思ってたのと違う」に気づけるのが嬉しい AIに頼むたびに作り直しになってる人、僕だけじゃないはずなので、READMEにある写真整理アプリの例をそのままなぞってみるのがおすすめ

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個作るところから試してみてほしい

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回スキャンするクセをつけておくと安心なはず

AIが書いたコードを、何をしてるか、なぜそう書いたかまで解説する学習ガイドにしてくれる「AntiVibe」がかなり良さそう コードを指定して「/antivibe」と打つと、 ・そのコードが何をしてるか ・なぜそう書いたのか ・どんな場面で使うパターンか ・他にどんな選択肢があったか などをファイルごとにMarkdownでまとめてくれる ・知ってる概念を設定しておくと、その説明を飛ばしてくれる（毎回「変数とは」から始まらない） ・作業が終わるたびに自動で解説を書かせる設定もある ・「audit this」と頼むと、基礎の説明じゃなくてシニア目線の設計レビューに切り替わる など、細かい使い心地も良さそう プログラミングの知識がなくバイブコーディングしてる人も、知識がある人もこのスキルを入れて毎回作った機能の実装意図を把握しておくことは、長期的に必ず役にたつはず

AIにChromeを開かせて、フロントのデバッグまでやらせられるGoogle公式の「Chrome DevTools MCP」が良さそう Claude CodeやCursorなどから使えて、AIが自分でページを開いて、クリックやフォーム入力をして、コンソールのエラー、通信、パフォーマンス、スクショまで見て原因を探してくれる Playwrightでもできるんだけども、 ・Lighthouseの監査や画面の録画、スマホの画面サイズの再現まで入ってる ・メモリリークの調査用に、ヒープスナップショットを解析するツールもある など、こういったパフォーマンス観点での機能はPlaywrightにはない ブラウザ、Chromeを使ってる人はこっちの方が開発には使いやすいかも

Cloudflareが、社内で使ってるAIにコードのセキュリティ監査をさせるスキルを無料で公開してた 「security-audit-skill」は、Claude Codeなどに入れて「このコードをセキュリティ監査して」と頼むだけで、脆弱性の探索を6段階で回してくれる ・脆弱性を見つけるAIと、「それ本当に危険なの？」と反証するAIを分ける ・実際に影響が出るものだけに重大度をつけるので、本当に重要な点だけ指摘してくれる ・結果は「確定」「要検証」「却下」の3つに分けてレポートにしてくれる ・1回だけだと見落としがある場合もあるので、同じコードに対して複数回回す前提 バイブコーディングでAIに作ってもらったアプリ、動いてはいるけどセキュリティは大丈夫かな…って気になってる人、増えてる気がする 個人開発で何か公開する前に一度回しておくと、安心感がだいぶ違いそう

AIにコードを書かせる前に、作るものの仕様をAIと合意しておける「OpenSpec」が良さそう チャットで頼むだけだと、途中で何を作ってたのかブレたり、最初に言ったことが抜け落ちたりするけど、それを「先に仕様をファイルに書かせる」ことで防ぐ仕組み 例えば「ダークモードを追加したい」と頼むと、コードを書く前にAIがこの4つを作ってくれる ・なぜやるのか ・要件と「〜したら〜になる」のシナリオ ・技術的な進め方 ・実装のチェックリスト 人間はそれを読んでOKを出してから実装させて、終わったら仕様が履歴として残る 仕様ファイルは特別な書き方じゃなくて普通のMarkdownなので、読むのも直すのも気軽なのがいい しかもOpenSpec自体がOpenSpecで開発されてて、リポジトリに本物の仕様と進行中の変更がそのまま置いてあるので、書き方の見本にもなる Claude CodeやCursor、Codexなど30以上のAIツールで使える AIで1つアプリを作り切ったあと、2つ目を作るときに入れてみると違いがわかりやすいはず