Leon . Kang
日本語
English 中文 日本語
Back to articles
Coding • 2/2/2026 • 8 min read

秩序と美：私が個人の Web 空間を構築した手法 (React 19 + TS 5 + Tailwind 4)

🌟 ビジョン

私は常に「素早いプロトタイプ」と「工業製品」の中間に位置するようなものを作りたいと考えていました。TDD（テスト駆動開発）プロセスとコンポーネント驱动開発（CDD）を徹底することで、複雑なロジックを支えながら、視覚的に滑らかなインタラクティブ体験を提供する Web アプリケーションフレームワークを自分自身のために構築しました。

🚀 技術方案

「フロントエンド三種神器」の使用感

  • React 19: なぜ React 19 なのか？それはもはや単なる UI ライブラリではなく、私の思考の土台だからです。特に React 19 の Actions パターンや use 原語により、かつては煩雑だった非同期ロジックや状態管理が驚くほど洗練されました。この宣言的な開発手法こそが、高度に抽象化された RT コンポーネント群を構築するための物理的な基盤なのです。
  • TypeScript 5: 私にとって TS は単なる型定義ではなく、「ミスの防護網」です。TS 5 の宣言的な特性を深く活用してコンポーネント間に強力な型契約を結ぶことで、大規模なリファクタリング時でも安心して作業できています。
  • Tailwind CSS 4: 以前の煩雑な設定から解放され、Tailwind 4 の純粋な CSS 設定モードにより、デザイントークンの管理が非常にスムーズになりました。

インフラストラクチャの選択

  • Ant Design 6: コンポーネントの一貫性が非常に高いため、視覚的な基盤として採用しました。
  • React Router v7: 私が特に気に入っている選択肢です。データの読み込みと状態の永続化を統合し、この Web アプリにネイティブアプリのような流動性をもたらしてくれました。
  • Redux Toolkit & TanStack Query: 現時点で私が最も推奨する状態管理の組み合わせです。RTK が UI 状態を管理し、Query がサーバーとのデータ同期、キャッシュ、プリフェッチを完璧にこなしてくれます。

📁 RT コンポーネント群

アトミックデザインの理念に基づき、独自の RT (React-Toolkit) コンポーネント群を開発しました。これらは私のアプリケーション全体の視覚的な魂です。

src/components/
├── RTHeading/      # 私が設計した見出しシステム。SEO と視覚的なリズムを両立
├── RTText/         # 多言語の排版と行高を精密に制御するテキストコンポーネント
├── RTButton/       # インタラクションの核。デバウンスや触覚フィードバックを統合
├── RTStack/        # Flexbox 補助コンポーネント。散らかった CSS を大幅に削減
├── RTImage/        # プログレッシブ表示に対応した、スマートな画像ローダー
└── RTContainer/    # レスポンシブなセーフエリア制御

🛠 開発者体験 (DX) への「こだわり」

優れたプロセスからこそ、優れた製品が生まれると信じています。このプロジェクトを開発する際、いくつかの譲れない点がありました。

  • Biome: 従来の ESLint + Prettier という重い設定を捨てました。Biome は驚くほど高速に動作し、フォーマットの修正ではなく、コードそのものに集中させてくれます。
  • Storybook 10: すべてのコンポーネントは Storybook の中で独立して「鍛え上げられた」ものです。ここでエッジケースまでテストすることで、どこに配置しても完璧に動作することを保証しています。
  • Strict TDD: コアロジックについては「テストを先に、コードを後に」を徹底しています。この契約精神が、プロジェクトを長期的にメンテナンスしていく自信を与えてくれます。

🎨 视觉とインタラクションの「ちょっとした工夫」

私は細部にこだわるのが好きです。tsparticles や TextTypewriter といった軽量なライブラリを統合し、データが無機質に見えないようにしました。Tailwind のマイクロトランジション効果と合わせ、ボタンをクリックするたびに即座の「呼吸感」を感じていただけるようにしています。

🌍 多言語対応の「魂」

react-i18next を通じて、日本語、英語、中国語の 3 言語切り替えを実現しました。単にテキストを翻訳するだけでなく、言語ごとの長さの違いに合わせてレイアウトが自律的に调整されるように設計し、どの言語で読んでも一貫した高品質な体験を提供できるようにしました。

📁 プロジェクトディレクトリ概要

src/
├── app/
│   ├── core/           # 核心アプリ設定（Providers, Store, Theme）
│   ├── resume/         # モジュール化された業務ビュー
│   └── nav/            # ルーティング設定
├── components/         # 独自開発の RT (React-Toolkit) コンポーネント群
├── shared/
│   ├── api/            # 型安全な API クライアント (Axios)
│   ├── hooks/          # 高度に抽象化されたカスタムフック
│   ├── utils/          # 関数型ユーティリティ
│   └── forms/          # RHF + Zod ベースのフォームソリューション
├── i18n/               # 国際化多言語リソース
└── styles/             # Tailwind 4 モダンスタイルシステム