丁寧に学ぶフロントエンドアーキテクチャ：目次 #設計 - Qiita

丁寧に学ぶフロントエンドアーキテクチャ：目次 #設計 - Qiita 12 いいねしたユーザー一覧へ移動 10 X（Twitter）でシェアする Facebookでシェアする はてなブックマークに追加する more_horiz 記事を削除する close 一度削除した記事は復旧できません。 この記事の編集中の下書きも削除されます。 削除してよろしいですか？ キャンセル 削除する delete info この記事は最終更新日から1年以上が経過しています。 @ wolfmagnate ( 進捗ゼミ ) 丁寧に学ぶフロントエンドアーキテクチャ：目次 設計 アーキテクチャ フロントエンド astro BFF 12 最終更新日 2025年02月15日 投稿日 2025年02月15日 はじめに この連載ではフロントエンドでの設計およびアーキテクチャについて解説します。 フロントエンドの責務、適切なレイヤー分け、ディレクトリ構成、テスト設計など、フロントエンドエンジニアが保守性を高めるために考える必要がある様々なトピックについて、一貫した観点から説明します。 いいね、ストックをよろしくお願いします！ 前提知識 この記事では、フロントエンドである程度のアプリケーション（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と互換性があるため、標準的な書き味でテストを書くことができます。 目次 12 いいねしたユーザー一覧へ移動 10 comment 0 コメント一覧へ移動 新規登録して、もっと便利にQiitaを使ってみよう あなたにマッチした記事をお届けします 便利な情報をあとで効率的に読み返せます ダークテーマを利用できます ログインすると使える機能について 新規登録 ログイン 12 いいねしたユーザー一覧へ移動 10 more_horiz 記事を削除する close 一度削除した記事は復旧できません。 この記事の編集中の下書きも削除されます。 削除してよろしいですか？ キャンセル 削除する delete