くるしば | ソフトバンクより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に書かせるのは不安という人も多いと思うので、公式が提供しているスキルがあるのは嬉しい
くるしば | ソフトバンクよりReact本発売中 retweeted
GitHubが無料で公開してる「Spec Kit」、AIとの開発の進め方をそのまま型にしてくれてて良さそう
AIに「〇〇作って」といきなり投げるんじゃなくて、何を・なぜ作るかを先に仕様書にしてから実装させる「仕様駆動開発」のためのツールキット
Claude CodeやCopilot、Codexなど、38種類のAIエージェントで使える
流れはこんな感じ
・最初に1回だけ、テストやコードの品質など、プロジェクトで守る原則を決める
・作りたい機能を普通の言葉で伝えると、仕様書にまとめてくれる
・使う技術を伝えると、設計の計画に落としてくれる
・計画を、順番つきの作業リストに分けてくれる
・作業リストの順に実装する
・最後に仕様と実装を突き合わせて、足りない部分があれば作業を足してくれる
各段階でできた仕様書や計画が次の段階の材料になるので、作り始める前に「思ってたのと違う」に気づけるのが嬉しい
AIに頼むたびに作り直しになってる人、僕だけじゃないはずなので、READMEにある写真整理アプリの例をそのままなぞってみるのがおすすめ
くるしば | ソフトバンクよりReact本発売中 retweeted
くるしばさん (@shiba_program) のブログ記事です🐰
あなたの開発生産性を爆上げする、エンジニア向けAIツール22個
note.com/shiba_program/n/n78…
#CodeRabbit
くるしば | ソフトバンクより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個作るところから試してみてほしい
くるしば | ソフトバンクより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回スキャンするクセをつけておくと安心なはず
くるしば | ソフトバンクよりReact本発売中 retweeted
「技術書苦手…」な自分でも楽しく学べた一冊📕
手を動かしながら学ぶことで、実際読んでいるだけよりもちゃんと理解できた気がする!
何回も読んで身につけます💪
【Reactの本出します!】
ソフトバンククリエイティブより、React初心者向けの本
「挫折しないReactの教科書 作りながら学ぶWeb開発」
を出します!
僕自身、プログラミングを学び始めたころ、技術書の内容がすごく難しく感じていました。
その後ある程度プログラミングができて、エンジニアの知り合いも増えた際に、気づいたことがあります。
それは世の技術書はわかりやすさよりも正確性や網羅性を重視しているものが多いということです。
これはエンジニアの気質や仕事の性質を考えるともちろんそうあるべきと思うんですが、一方プログラミング初心者にとっては、こうした部分が分かりづらさ、読みづらさの要因となっている部分があるのではと思っていました。
本書はそういった部分を踏まえて、とにかくできる限り比喩や例えを使ったり、混乱を招きそうなところは大胆に削ったりなど、初心者の方への分かりやすさというものを重視して書きました。
それでも当初の予定よりも100ページ以上多い、内容もりもりの一冊となってしまいましたが、Reactを学び始めた人、学びたいと思ってる人、ぜひ手に取っていただけると嬉しいです!
発売は1/29予定ですが、Amazonでの予約は開始しておりますので、4月の新生活に向けてポチってもらい、Reactを学習してみてくださいー!
amzn.asia/d/aFOkues
くるしば | ソフトバンクよりReact本発売中 retweeted
#技育祭
さっきAIのコードに責任を持とう!って思ったらすごいタイムリーなものが...
助かる( * ॑꒳ ॑*)
AIが書いたコードを、何をしてるか、なぜそう書いたかまで解説する学習ガイドにしてくれる「AntiVibe」がかなり良さそう
コードを指定して「/antivibe」と打つと、
・そのコードが何をしてるか
・なぜそう書いたのか
・どんな場面で使うパターンか
・他にどんな選択肢があったか
などをファイルごとにMarkdownでまとめてくれる
・知ってる概念を設定しておくと、その説明を飛ばしてくれる(毎回「変数とは」から始まらない)
・作業が終わるたびに自動で解説を書かせる設定もある
・「audit this」と頼むと、基礎の説明じゃなくてシニア目線の設計レビューに切り替わる
など、細かい使い心地も良さそう
プログラミングの知識がなくバイブコーディングしてる人も、知識がある人もこのスキルを入れて毎回作った機能の実装意図を把握しておくことは、長期的に必ず役にたつはず
くるしば | ソフトバンクよりReact本発売中 retweeted
AIが書いたコードを、何をしてるか、なぜそう書いたかまで解説する学習ガイドにしてくれる「AntiVibe」がかなり良さそう
コードを指定して「/antivibe」と打つと、
・そのコードが何をしてるか
・なぜそう書いたのか
・どんな場面で使うパターンか
・他にどんな選択肢があったか
などをファイルごとにMarkdownでまとめてくれる
・知ってる概念を設定しておくと、その説明を飛ばしてくれる(毎回「変数とは」から始まらない)
・作業が終わるたびに自動で解説を書かせる設定もある
・「audit this」と頼むと、基礎の説明じゃなくてシニア目線の設計レビューに切り替わる
など、細かい使い心地も良さそう
プログラミングの知識がなくバイブコーディングしてる人も、知識がある人もこのスキルを入れて毎回作った機能の実装意図を把握しておくことは、長期的に必ず役にたつはず
くるしば | ソフトバンクよりReact本発売中 retweeted
AIにChromeを開かせて、フロントのデバッグまでやらせられるGoogle公式の「Chrome DevTools MCP」が良さそう
Claude CodeやCursorなどから使えて、AIが自分でページを開いて、クリックやフォーム入力をして、コンソールのエラー、通信、パフォーマンス、スクショまで見て原因を探してくれる
Playwrightでもできるんだけども、
・Lighthouseの監査や画面の録画、スマホの画面サイズの再現まで入ってる
・メモリリークの調査用に、ヒープスナップショットを解析するツールもある
など、こういったパフォーマンス観点での機能はPlaywrightにはない
ブラウザ、Chromeを使ってる人はこっちの方が開発には使いやすいかも
くるしば | ソフトバンクよりReact本発売中 retweeted
AI開発してセキュリティガバガバなアプリを公開してしまうのはあるあるですよね。
個人開発ではセキュリティ攻撃にあったら直接自分の責任になるし、実務では上長が基本指摘すると思うが自分でできると評価されると思う。
個人開発でも実務エンジニアも使うと良さそう
Cloudflareが、社内で使ってるAIにコードのセキュリティ監査をさせるスキルを無料で公開してた
「security-audit-skill」は、Claude Codeなどに入れて「このコードをセキュリティ監査して」と頼むだけで、脆弱性の探索を6段階で回してくれる
・脆弱性を見つけるAIと、「それ本当に危険なの?」と反証するAIを分ける
・実際に影響が出るものだけに重大度をつけるので、本当に重要な点だけ指摘してくれる
・結果は「確定」「要検証」「却下」の3つに分けてレポートにしてくれる
・1回だけだと見落としがある場合もあるので、同じコードに対して複数回回す前提
バイブコーディングでAIに作ってもらったアプリ、動いてはいるけどセキュリティは大丈夫かな…って気になってる人、増えてる気がする
個人開発で何か公開する前に一度回しておくと、安心感がだいぶ違いそう
くるしば | ソフトバンクよりReact本発売中 retweeted
Cloudflareが、社内で使ってるAIにコードのセキュリティ監査をさせるスキルを無料で公開してた
「security-audit-skill」は、Claude Codeなどに入れて「このコードをセキュリティ監査して」と頼むだけで、脆弱性の探索を6段階で回してくれる
・脆弱性を見つけるAIと、「それ本当に危険なの?」と反証するAIを分ける
・実際に影響が出るものだけに重大度をつけるので、本当に重要な点だけ指摘してくれる
・結果は「確定」「要検証」「却下」の3つに分けてレポートにしてくれる
・1回だけだと見落としがある場合もあるので、同じコードに対して複数回回す前提
バイブコーディングでAIに作ってもらったアプリ、動いてはいるけどセキュリティは大丈夫かな…って気になってる人、増えてる気がする
個人開発で何か公開する前に一度回しておくと、安心感がだいぶ違いそう
くるしば | ソフトバンクよりReact本発売中 retweeted
AIにコードを書かせる前に、作るものの仕様をAIと合意しておける「OpenSpec」が良さそう
チャットで頼むだけだと、途中で何を作ってたのかブレたり、最初に言ったことが抜け落ちたりするけど、それを「先に仕様をファイルに書かせる」ことで防ぐ仕組み
例えば「ダークモードを追加したい」と頼むと、コードを書く前にAIがこの4つを作ってくれる
・なぜやるのか
・要件と「〜したら〜になる」のシナリオ
・技術的な進め方
・実装のチェックリスト
人間はそれを読んでOKを出してから実装させて、終わったら仕様が履歴として残る
仕様ファイルは特別な書き方じゃなくて普通のMarkdownなので、読むのも直すのも気軽なのがいい
しかもOpenSpec自体がOpenSpecで開発されてて、リポジトリに本物の仕様と進行中の変更がそのまま置いてあるので、書き方の見本にもなる
Claude CodeやCursor、Codexなど30以上のAIツールで使える
AIで1つアプリを作り切ったあと、2つ目を作るときに入れてみると違いがわかりやすいはず
くるしば | ソフトバンクよりReact本発売中 retweeted
仕様の正本(Source of Truth)が積み上がっていく安心感がありますね
AIにコードを書かせる前に、作るものの仕様をAIと合意しておける「OpenSpec」が良さそう
チャットで頼むだけだと、途中で何を作ってたのかブレたり、最初に言ったことが抜け落ちたりするけど、それを「先に仕様をファイルに書かせる」ことで防ぐ仕組み
例えば「ダークモードを追加したい」と頼むと、コードを書く前にAIがこの4つを作ってくれる
・なぜやるのか
・要件と「〜したら〜になる」のシナリオ
・技術的な進め方
・実装のチェックリスト
人間はそれを読んでOKを出してから実装させて、終わったら仕様が履歴として残る
仕様ファイルは特別な書き方じゃなくて普通のMarkdownなので、読むのも直すのも気軽なのがいい
しかもOpenSpec自体がOpenSpecで開発されてて、リポジトリに本物の仕様と進行中の変更がそのまま置いてあるので、書き方の見本にもなる
Claude CodeやCursor、Codexなど30以上のAIツールで使える
AIで1つアプリを作り切ったあと、2つ目を作るときに入れてみると違いがわかりやすいはず
くるしば | ソフトバンクよりReact本発売中 retweeted
OpenSpec!気になるので調べる。
AIにコードを書かせる前に、作るものの仕様をAIと合意しておける「OpenSpec」が良さそう
チャットで頼むだけだと、途中で何を作ってたのかブレたり、最初に言ったことが抜け落ちたりするけど、それを「先に仕様をファイルに書かせる」ことで防ぐ仕組み
例えば「ダークモードを追加したい」と頼むと、コードを書く前にAIがこの4つを作ってくれる
・なぜやるのか
・要件と「〜したら〜になる」のシナリオ
・技術的な進め方
・実装のチェックリスト
人間はそれを読んでOKを出してから実装させて、終わったら仕様が履歴として残る
仕様ファイルは特別な書き方じゃなくて普通のMarkdownなので、読むのも直すのも気軽なのがいい
しかもOpenSpec自体がOpenSpecで開発されてて、リポジトリに本物の仕様と進行中の変更がそのまま置いてあるので、書き方の見本にもなる
Claude CodeやCursor、Codexなど30以上のAIツールで使える
AIで1つアプリを作り切ったあと、2つ目を作るときに入れてみると違いがわかりやすいはず
くるしば | ソフトバンクよりReact本発売中 retweeted
AWS公式の実技評価「AWS Microcredentials」って知ってる?本物のAWS環境を触ってスキルを証明できる実技資格
座学の選択式試験と違って、実際の環境でトラブルシューティングや構築をするから、実務で使えるか不安な人の自信やスキルの証明になるのが大きなメリット
元々は有料サブスク限定だったのが、2026年4月から完全無料で受けられるようになってる
・Serverless、Agentic AI、Application Networking、Incident Responseの4分野
・90分の制限時間で本物のAWS環境を操作する実践形式
・メールアドレス(Builder ID)の登録だけでクレカも不要
インフラの勉強って範囲が広くてどこまでやればいいか迷いがちだけど、こういうわかりやすい目標があると学習を進めやすいのが本当にありがたい
この4分野ならどれが一番気になる?
くるしば | ソフトバンクよりReact本発売中 retweeted
コードの可視化に利用する価値大いにあり!
AIに書かせたコードのチェックで疲弊してる人、僕だけじゃないはず
書く速度だけ上がって、読む速度は人間のままだからこうなる
「CodeBoarding」は、コードベースを解析してシステム全体の構造図に起こしてくれるオープンソースの無料ツール
・全体像からサブコンポーネント単位までクリックで掘っていけるので、どこが何と繋がってるかを図で追える
・1箇所いじったらどこに影響が波及するのかを、目で見て確認できる
・図はMermaidやMarkdownでも出力できるから、READMEやPRの説明にそのまま貼れる
・プルリクレビュー用に、図とコードの差分を連携させて表示する機能がある
・Python、TypeScript、Java、Go、Rustなど8言語に対応してて、VSCode拡張とGitHub Actionもある
この手のコード可視化ツール、多くがエンプラ向けの有料ツールだけども、CodeBoardingは無料で使えるから、個人開発者の人にもおすすめ
ちょい気になり
AIに書かせたコードのチェックで疲弊してる人、僕だけじゃないはず
書く速度だけ上がって、読む速度は人間のままだからこうなる
「CodeBoarding」は、コードベースを解析してシステム全体の構造図に起こしてくれるオープンソースの無料ツール
・全体像からサブコンポーネント単位までクリックで掘っていけるので、どこが何と繋がってるかを図で追える
・1箇所いじったらどこに影響が波及するのかを、目で見て確認できる
・図はMermaidやMarkdownでも出力できるから、READMEやPRの説明にそのまま貼れる
・プルリクレビュー用に、図とコードの差分を連携させて表示する機能がある
・Python、TypeScript、Java、Go、Rustなど8言語に対応してて、VSCode拡張とGitHub Actionもある
この手のコード可視化ツール、多くがエンプラ向けの有料ツールだけども、CodeBoardingは無料で使えるから、個人開発者の人にもおすすめ
コードのビジュアル表現、可能性を信じたいところではあるんだけど、昔、UMLが持て囃されて流行った事があったんだけど、結局、そこまで定着しなかったというか、一定の利用はあれど、コードよりもUMLとならなかったあたり、何かマッチしてないんだろうという感触がある🤔
AIに書かせたコードのチェックで疲弊してる人、僕だけじゃないはず
書く速度だけ上がって、読む速度は人間のままだからこうなる
「CodeBoarding」は、コードベースを解析してシステム全体の構造図に起こしてくれるオープンソースの無料ツール
・全体像からサブコンポーネント単位までクリックで掘っていけるので、どこが何と繋がってるかを図で追える
・1箇所いじったらどこに影響が波及するのかを、目で見て確認できる
・図はMermaidやMarkdownでも出力できるから、READMEやPRの説明にそのまま貼れる
・プルリクレビュー用に、図とコードの差分を連携させて表示する機能がある
・Python、TypeScript、Java、Go、Rustなど8言語に対応してて、VSCode拡張とGitHub Actionもある
この手のコード可視化ツール、多くがエンプラ向けの有料ツールだけども、CodeBoardingは無料で使えるから、個人開発者の人にもおすすめ
くるしば | ソフトバンクよりReact本発売中 retweeted
これは早速使ってみます。
知見を深めるため、というか
シンプルに学習するときに超役立ちそう。
視覚的に分かるとイメージもしやすいし
スッと頭に入ってきますもんね。
学ぶハードル自体はどんどん下がっていて
あとはもうほんとにやるかどうか、
っていう気がする😌
AIに書かせたコードのチェックで疲弊してる人、僕だけじゃないはず
書く速度だけ上がって、読む速度は人間のままだからこうなる
「CodeBoarding」は、コードベースを解析してシステム全体の構造図に起こしてくれるオープンソースの無料ツール
・全体像からサブコンポーネント単位までクリックで掘っていけるので、どこが何と繋がってるかを図で追える
・1箇所いじったらどこに影響が波及するのかを、目で見て確認できる
・図はMermaidやMarkdownでも出力できるから、READMEやPRの説明にそのまま貼れる
・プルリクレビュー用に、図とコードの差分を連携させて表示する機能がある
・Python、TypeScript、Java、Go、Rustなど8言語に対応してて、VSCode拡張とGitHub Actionもある
この手のコード可視化ツール、多くがエンプラ向けの有料ツールだけども、CodeBoardingは無料で使えるから、個人開発者の人にもおすすめ


















































