FSD(Feature-Sliced Design)
h.watahikiFeature-Sliced Design
Feature-Sliced Design (FSD) とは、フロントエンドアプリケーションの設計方法論です。
後でまとめなおしたい。
h.watahikiディレクトリ構成の方法論だけでなく、linterやフォルダのジェネレーターもある。
構造
app
pages
shared
トップレベルのこの3つはレイヤーと呼ばれる。
Laysers, Slices, Segmentのイメージ図
h.watahikitutorial
h.watahiki第1章
スライス内のモジュール（ファイル）は、仮想にあるスライスのみをインポートできる。
共通コードの再利用
スライス内のモジュール（ファイル）は、仮想にあるスライスのみをインポートできる。
あー、つまりsharedが最下層にあるからそれは上の層からだったらどこでもimportできるって感じか。
sharedに共通部分のコードを分ける。
で、最初からsharedは作らない、事前に作成されない。ただ、どんなコードが入るかは把握しておく必要がある。
Shared層は上層のレイヤーについて何も知らないべきです。
good
shared
business domain なるべく入れるな
に関してはnot necessaryなので入れてやむを得ないときはok
entities
entitiesからslices列が、slices列内部のpostからsegments列が生えている
Entities（エンティティ） — プロジェクトが扱うビジネスエンティティ、例えばuserやproduct
entities層の話がまだ分け方が分からん...。ここからデータ関連のmodelセグメントを作っている。
memo
完成品のブログから必要になりそうなページをリストアップしている。
フィードページの3つの動的領域があります -> 動的領域で分けている。
h.watahiki第2章
ReactとRemixを使用してWebApp作っている。
pages/feed/uiにFeedPage.tsxコンポーネントを作成
openapi-fetchパッケージを使用
APIの最新の型生成
セグメントの名前は内容の本質（何）ではなく、目的（なぜ）を説明するものでなければなりません。
componentsとか、hooksとかmodalsとかの名前は付けない方がいい。
Q. 本質(何)をつけるより、なぜで分けるべき。なんで...?
A. ディレクトリが探しにくい
具体わかってないあんまり。
Q. セグメントってなんだっけ。
用語集ほしい...
-> A. あったわ、レイヤーの図を壁に貼りたい
h.watahikirefarence ()
リファレンス見ないとわからなくなってきたので読む。
- Layer
- Slice & Segment
- 公開API