TypeScript ツールチェインは多種多様で、毎回目的に沿ってプロジェクトを設定するのが非常に大変です。
なので、再現性のある環境構築手順を作って LLM に丸投げすることにしました。
(この記事の7割はAIに書かせて、自分で30分かけて書き直しました)
tl;dr
- Claude Code に読ませる前提のTypeScriptの環境構築ガイドラインを作った
- docs/ts-guide/ にドキュメントを配置して、LLM（Claude）にそれを読ませる
- プロジェクトの要件を伝えて、LLMに適切な設定を追加させる
- ベースラインとなる基礎部分から始めて、対話的に必要な機能を追加していく
How to use
すごい雑に実態を説明すると共通セットアップとただのライブラリの使い方のドキュメントです。
mkdir my-app
cd my-app
npx -y tiged mizchi/ts-guide/docs/ts-guide ./docs/ts-guide
claude 'docs/ts-guide/_init.md を参考にプロジェクトをセットアップして'
claude 'docs/ts-guide/eject.md を参考に、不要なドキュメントを消して'
出力されたもの。
$ tree -I node_modules
.
├── docs
│ ├── overview.md
│ └── ts-guide
│ ├── ci.md
│ ├── eject.md
│ ├── test-runner.md
│ └── typescript.md
├── package.json
├── pnpm-lock.yaml
├── src
│ └── index.ts
├── tsconfig.json
└── vitest.config.ts
手順書自体に、不要なドキュメントを捨てる指示が含まれています。不要なドキュメントがあるとAIが混乱するので、捨てるところまで必要です。
手元でこれを与えてCIが通るプロジェクトが生成される事自体を確認しています。
なぜ作ったか
TypeScript プロジェクトのツールチェインは多種多様です。毎回目的に沿ってプロジェクトを設定するのですが、それが非常に大変です。ドメイン知識の塊で、フロントエンドオタクの自分はこれで食っています。
飯の種とはいえ自分でも大変なので、LLM が読み込んで理解できる形式のドキュメント群を作りました。ツールの具体的な構成ではなく、「どう構成するか」のアプローチ自体を記述しています。
設計思想
各ツールのガイドラインでは、それをどう使うかだけでなく、なぜその選択をしたか、を明確に書くようにしています。
eslint か oxlint をセットアップさせる例です。
また、そのツールを入れた時に追記するエージェント向けのプロンプトも用意しています。
事後的に拡張を施せることを重視しています。単純なNode+TS実行環境から、lint, formatter, ワークスペース、あるいは CLI を作ってから Vite で WebUI を追加、みたいな流れを想定しています。
フロントエンドボイラープレートは大抵、過剰な設定の作り込みをしてしまい、あとからよくわからなくなります。今あるスナップショットではなく、その段階自体を LLM に教え込んで、それを再現させます。
今後の展望
現状、自分の主張である程度決め打ちにしています。基本は pnpm/typescript/vitest/oxlint/biome になります。(意見強いですね)
気に食わなかったらフォークして書き換えてください。class を使わない、例外を投げずに常に Result 型を返すみたいな思想強めなものも混じってます。
最近は自分が CLI ばかり作ってるので、フロントエンド周りは作り込んでません。vite の最小テンプレートがあるだけで、 Tailwind の設定例はぐらいは追加したいと思っています。毎回ハマるので…
LLM がもっと進化したら、このガイドライン自体も LLM が更新してくれるようになるかもしれません。
現状、これをメンテナンスすること自体が、たぶん一番大変です。
Views: 0
