本文へ移動

開発環境

Terminal、Git、エディター。ものをつくる裏側で働く道具と、そのつながりを整理します。

開発環境

①実践する自動化 — 毎回AIに説明するのをやめ、文脈をファイルで管理する

AIチャットで毎回前提を説明し直していた状態を、フォルダとファイルで文脈を管理する形に変えた記録です。

  • Git
  • Markdown

開発環境

AI駆動開発で困らないためのAPI

HTTP APIのリクエストとレスポンス、メソッド、JSON、status code、CORS、timeoutに加えて、APIの契約をTypeScriptの型と実行時の検証で守る方法までを扱う案内です。

  • AI開発
  • API
  • HTTP

開発環境

Claude Codeで、予想問題と解説を作る

出力の形を指示で決められて、作ったものがファイルとして残る道具です。何を渡し、何を指定できるかをまとめます。

  • Claude Code
  • 試験対策
  • Markdown

開発環境

AI駆動開発で困らないための運用と監視

Webアプリ公開後のログ、メトリクス、トレース、アラート、障害対応、バックアップ、Cron、Queue、料金と定期保守を理解するための案内です。

  • AI開発
  • 運用
  • 監視

開発環境

AI駆動開発で困らないためのnpmとパッケージ

エージェントがpackage.jsonやpackage-lock.jsonを変更したときに、npm、依存関係、バージョン、npm installとnpm ci、auditの意味を確認するための案内です。

  • AI開発
  • npm
  • パッケージ

開発環境

AI駆動開発で困らないためのセキュリティ

エージェントが作ったWeb機能について、外部入力、XSS、CSRF、権限、ファイルアップロード、Secrets、依存関係などの安全性を確認するための案内です。

  • AI開発
  • セキュリティ
  • XSS

開発環境

AI駆動開発で困らないためのエラー調査

Webアプリの不具合を再現手順へ変え、ブラウザのConsole、Network、サーバーログから失敗地点を切り分け、エージェントの修正を確かめるための案内です。

  • AI開発
  • デバッグ
  • エラー調査

開発環境

AI駆動開発で困らないためのデプロイ

HTML/CSSでWeb制作ができる人が、localhostとデプロイの違い、Vercel・Cloudflare・AWSの選び方、CI/CD、GitHub Actions、Secrets、永続化、ロールバックを理解し、エージェントが作った公開設定を確認できるようになるための案内です。

  • AI開発
  • デプロイ
  • GitHub Actions

開発環境

AI駆動開発で困らないためのテスト

エージェントが報告するLint、型チェック、単体・結合・E2Eテスト、ビルドの違いを理解し、何が確認済みで何が未確認かを判断するための案内です。

  • AI開発
  • テスト
  • Next.js

開発環境

AI駆動開発で困らないための認証と権限

ログイン機能をエージェントへ作ってもらう人が、認証と認可、Cookie、Session、Token、OAuth、role、所有者確認を区別し、権限漏れを確認するための案内です。

  • AI開発
  • 認証
  • 認可

開発環境

AI駆動開発で困らないためのデータベース入門

HTML/CSSでWeb制作ができる人が、SQLの種類、データベースサービス、マイグレーション、N+1などを知り、コーディングエージェントが作ったデータベース仕様と変更を確認できるようになるための入門です。

  • AI開発
  • データベース
  • SQL

開発環境

AI駆動開発で困らないためのTypeScript

HTML/CSSからNext.jsへ進んだ人が、TypeScriptの値とオブジェクトの型、null、Promise、型エラーを読み、エージェントがanyや型アサーションで問題を隠していないか確認するための案内です。

  • AI開発
  • TypeScript
  • Next.js

開発環境

AI駆動開発で困らないためのGit・GitHub用語

Gitの基本を知った人向けに、status、stage、branch、push、pull、PR、restore、revertなどを、AIに安全に指示する観点で整理します。

  • Git
  • GitHub
  • AIコーディングエージェント

開発環境

AI駆動開発で困らないためのNext.js

Next.jsを開いたときに並ぶフォルダーや設定ファイルの役割、Reactとの関係、ページとコンポーネントの仕組み、エージェントの変更を確かめる見方を解説します。

  • Next.js
  • React
  • TypeScript

開発環境

ローカルLLMを動かす道具の役割

PythonからローカルLLMを動かすとき、Terminal、VS Code、Python、pip、Ollama、AIモデルはそれぞれ何をしているのか。文章整形アプリの処理をたどりながら説明します。

  • VS Code
  • Python
  • pip

開発環境

ローカルLLMを自分のPCで動かす

LLMとクラウド型AIチャットの仕組みから始め、PCに合うモデルの探し方、Ollamaの基本コマンド、APIとPythonからの呼び出しまでを順に案内します。

  • Ollama
  • ローカルLLM
  • Python

開発環境

GitとGitHubとは何か、なぜ使うのか

Gitは変更を記録する仕組み、GitHubはその履歴を共有する場所です。完全初学者向けに、一つの変更が記録・共有されるまでを順に説明します。

  • Git
  • GitHub
  • AIコーディングエージェント

対話AI

「AIがアプリを作った」って、実際には何をしているの?

ChatGPTしか使ったことがない人向けに、Codexのようなコーディングエージェントが実際に何をしているのかを説明する

  • ChatGPT
  • Codex
  • コーディングエージェント