この記事は何?
公式のドキュメントやチュートリアル、exsample を読んで理解するのが一番いいですが、備忘録として残しておきます。特に後述の Skills, Steiger については開発する際にあった方が便利なので、それについても記事にします。
FSDとは?
FSD (Feature-Sliced Design) はフロントエンドのアーキテクチャの一つです。
FSDとは責務で分けていくアーキテクチャと違い、ページやエンティティで分けていくアーキテクチャというとわかりやすいと思います。
コードの分離の仕方について話す前に、FSDで前提となる
- レイヤー
- スライス
- セグメント
この3つについて理解する必要があります。
レイヤー
より細かく分けていく方法がありますが、この記事では導入だけ触れたいので、3つのレイヤーのみ説明します。
- app
- pages
- shared
です。この流れは上(app)に向かえば向かうほどアプリケーション固有、下(shared)に向かうほど汎用的になります。
原則として上位レイヤーは下位レイヤーを利用できるが、下位レイヤーから上位レイヤーへ依存できません。
始め方としては小さく初めて、必要になったらレイヤーを増やしてくようです。
スライス
ブログアプリであればレイヤーの pages には
- pages
- blog-list
- blog-detail
- user
といったページに分けられるため、このような構成になります。このblog-list, blog-detail, user がスライスです。これらはページやエンティティによって分けられます。
セグメント
- pages
- blog-list
- model
- ui
- index.ts
- blog-detail
- model
- ui
- index.ts
- user
- model
- ui
- index.ts
- blog-list
- shared
- ui
- api
- model
- lib
- config
これらのmodel, ui といった部分がエンティティです。これらは責務にあたります。sharedに関しては直下にスライスではなくセグメントが入ります。
FSD 2.1 で重要なのは Pages First です。とにかくPagesから作って、細分化の必要ができたら、下位レイヤーに抽出します。
Steiger
Steiger とはアーキテクチャリンターです。以下でインストールできます。
pnpm add -D steiger @feature-sliced/steiger-plugin
AIコーディングのために
Claude Skills
https://github.com/feature-sliced/skills?utm_source=chatgpt.com
このリポジトリが公式に公開されています。
npx skills add feature-sliced/skills
これで Skills を追加できるので、claude にFSDの設計知識を共有できます。


