Series
はじめよう、AI駆動開発
生成AIで作ったWebアプリを、自分で読み、直し、公開して運用するためのシリーズ。Next.js、Git・GitHub、TypeScript、API、データベース、認証、テスト、デプロイ、エラー調査、セキュリティ、パッケージ管理、監視を扱う。後半では、コードの分け方（モノレポを含む）とドキュメントも扱う。APIの契約と型はAPIの回に含めた。
全12本
このシリーズを共有
開発環境
AI駆動開発で困らないためのNext.js
Next.jsを開いたときに並ぶフォルダーや設定ファイルの役割、Reactとの関係、ページとコンポーネントの仕組み、エージェントの変更を確かめる見方を解説します。
開発環境
AI駆動開発で困らないためのGit・GitHub用語
Gitの基本を知った人向けに、status、stage、branch、push、pull、PR、restore、revertなどを、AIに安全に指示する観点で整理します。
開発環境
AI駆動開発で困らないためのTypeScript
HTML/CSSからNext.jsへ進んだ人が、TypeScriptの値とオブジェクトの型、null、Promise、型エラーを読み、エージェントがanyや型アサーションで問題を隠していないか確認するための案内です。
開発環境
AI駆動開発で困らないためのAPI
HTTP APIのリクエストとレスポンス、メソッド、JSON、status code、CORS、timeoutに加えて、APIの契約をTypeScriptの型と実行時の検証で守る方法までを扱う案内です。
開発環境
AI駆動開発で困らないためのデータベース入門
HTML/CSSでWeb制作ができる人が、SQLの種類、データベースサービス、マイグレーション、N+1などを知り、コーディングエージェントが作ったデータベース仕様と変更を確認できるようになるための入門です。
開発環境
AI駆動開発で困らないための認証と権限
ログイン機能をエージェントへ作ってもらう人が、認証と認可、Cookie、Session、Token、OAuth、role、所有者確認を区別し、権限漏れを確認するための案内です。
開発環境
AI駆動開発で困らないためのテスト
エージェントが報告するLint、型チェック、単体・結合・E2Eテスト、ビルドの違いを理解し、何が確認済みで何が未確認かを判断するための案内です。
開発環境
AI駆動開発で困らないためのデプロイ
HTML/CSSでWeb制作ができる人が、localhostとデプロイの違い、Vercel・Cloudflare・AWSの選び方、CI/CD、GitHub Actions、Secrets、永続化、ロールバックを理解し、エージェントが作った公開設定を確認できるようになるための案内です。
開発環境
AI駆動開発で困らないためのエラー調査
Webアプリの不具合を再現手順へ変え、ブラウザのConsole、Network、サーバーログから失敗地点を切り分け、エージェントの修正を確かめるための案内です。
開発環境
AI駆動開発で困らないためのセキュリティ
エージェントが作ったWeb機能について、外部入力、XSS、CSRF、権限、ファイルアップロード、Secrets、依存関係などの安全性を確認するための案内です。
開発環境
AI駆動開発で困らないためのnpmとパッケージ
エージェントがpackage.jsonやpackage-lock.jsonを変更したときに、npm、依存関係、バージョン、npm installとnpm ci、auditの意味を確認するための案内です。
開発環境
AI駆動開発で困らないための運用と監視
Webアプリ公開後のログ、メトリクス、トレース、アラート、障害対応、バックアップ、Cron、Queue、料金と定期保守を理解するための案内です。