Ship Coding技術スタック
Ship Codingを支えている技術スタックと、その選定理由。 AIコーディングではルールがバラつきやすい。だからLinterや型チェックで機械的に検出できる状態にしておくことと、それらが速く回ることを重視している。
Stack
- Next.js 16 (TypeScript)
- 一番慣れているフレームワーク。App Router + RSCでサーバーファースト。
- Tailwind CSS v4
- v4のCSS-first config。デザイントークンをCSSカスタムプロパティで管理。
- Bun
- パッケージマネージャー、テストランナー、スクリプト実行をBunに統一。速い。
Architecture
- Feature-Sliced Design
- レイヤーとスライスによる依存方向の強制。Steigerで自動検証している。小規模でも入れる価値がある。
Quality
- Biome
- フォーマットとLintを一つのツールで。設定が少なく速い。
- Bun Test
- Jest互換API。Happy DOMでコンポーネントテスト。速くて設定が少ない。
- Knip
- 未使用コード検出。AIコーディングはデッドコードが増えやすい。放置するとコンテキストが膨らむので、こまめに消す。
- Steiger
- FSDのレイヤー依存ルールを自動検証。アーキテクチャの劣化を防ぐ。
Infrastructure
- Cloudflare Pages
- エッジでの静的配信とSSR。GitHub連携でプレビューデプロイ。グローバルCDNが速い。
Content
- MDX
- Markdownにカスタムコンポーネントを埋め込める。CMSを挟まずファイルベースで管理。
Toolkit
このサイトに限らず、普段の開発でよく使っている技術。
Development
- Claude Code
- メインの開発ツール。コード生成、レビュー、リファクタリングまで。
- Cursor
- エディタ。Claude Codeと併用している。
Web
- Next.js
- Webアプリのデフォルト選択肢。このサイトもNext.js。
- Hono
- Cloudflare Workers上の軽量Webフレームワーク。APIサーバーに使っている。
- Drizzle ORM + Turso
- TypeScriptファーストのORM + エッジで動くSQLite。型安全にDBを扱える。
- Turborepo
- モノレポのタスク管理。キャッシュが効いてビルドが速い。
Mobile
- Expo
- React Nativeアプリの開発・ビルド・配信。NativeWindでTailwindの書き味をそのまま持ち込める。