はじめに

この連載ではフロントエンドでの設計およびアーキテクチャについて解説します。
フロントエンドの責務、適切なレイヤー分け、ディレクトリ構成、テスト設計など、フロントエンドエンジニアが保守性を高めるために考える必要がある様々なトピックについて、一貫した観点から説明します。
いいね、ストックをよろしくお願いします！

前提知識

この記事では、フロントエンドである程度のアプリケーション（TODOアプリなど）を一通り作ることができる程度の基礎知識を仮定しています。
また、基礎的なソフトウェア設計についての知識があると理解しやすいです。興味がある方は、筆者の別の連載記事を参考にしてください。

開発環境

この記事では、サンプルコードに次のような技術を利用します。記事の題材はアーキテクチャであるため、細かい知識は不要ですが、ある程度の知識があると読みやすいと思います。

フレームワーク：Astro

Astroは、コンテンツ主導のWebページを作成するためのシンプルなWebフレームワークです。フレームワーク独自の要素が少なく、標準のWeb技術やデファクトスタンダードを臨機応変に選択できるという利点があります。
コンテンツ主導という名前から、静的サイト専用というイメージを持たれているかもしれませんが、実はSSRに対応しており、動的なWebサービスも簡単に作成可能です。

UIフレームワーク：React

Reactは、もっともメジャーなUIフレームワークです。この記事では、単にコンポーネントに状態を持たせるために利用します。

UIコンポーネントの表示ツール：Storybook

Storybookは、フロントエンドのUIコンポーネントを個別にレンダリングし、分かりやすく表示するツールです。コンポーネントのカタログとしての役割や、テストツールとしての役割、開発の補助ツールとしての役割を果たします。

ビルドツール：Vite

Viteは、フロントエンドのためのビルドツールです。TypeScriptのコンパイルやファイルの変換・バンドル、開発サーバーの立ち上げなどを行ってくれます。
ViteはAstroの標準のビルドツールです。

単体テストツール：Vitest

Vitestは単体テストツールです。Viteとの相性が良いため、Astroを使った開発では標準的なテストツールです。Jestと互換性があるため、標準的な書き味でテストを書くことができます。

目次