diff --git a/README.md b/README.md index 3bfd5ec6..cb324ef7 100644 --- a/README.md +++ b/README.md @@ -11,6 +11,7 @@ - [環境構築](docs/installation.md) - [コマンド一覧](docs/commands.md) - [使用技術](docs/tech.md) +- [アーキテクチャ](docs/architecture.md) ## 参照 diff --git a/docs/architecture.md b/docs/architecture.md new file mode 100644 index 00000000..e48b1874 --- /dev/null +++ b/docs/architecture.md @@ -0,0 +1,44 @@ +# アーキテクチャ + +## コンポーネント + +BCCD Designを元に、以下のルールに沿ってコンポーネントの設計を行う。 + +### 分類方法 + +- Base + - 役割: 基礎 + - 品詞: 名詞 + - 説明: 基礎的な機能(名詞)や、事実上の型を表現する + - 例: Button/Icon/Image +- Case + - 役割: 状況 + - 品詞: 動詞/形容詞/名詞 + - 説明: 状況(動詞/形容詞)や状態(名詞)を表現する + - 例: Alert/Edit/Post +- Common + - 役割: サービス横断的な関心 + - 品詞: 名詞 + - 説明: + - 幅広く共通して利用可能な、横断的な関心を表現する + - 複数ページ/箇所で使えるレベルに特化されたコンポーネント + - 例: Category/Error/Tag +- Domain + - 役割: サービス限定的な関心 + - 品詞: 名詞 + - 説明: + - 人(ロール)や物(名詞)など、限定的な関心を表現する + - 特定ページ/箇所でしか使えないレベルに特化されたコンポーネント + - 例: Community/Product/User + +### 留意点 + +- 依存関係の方向はBase <- Case <- Common <- Domainとする +- Domain以外のコンポーネントは同じ分類同士で依存させない + - 本来、Baseに分類されるべきだが、Baseに依存してしまうようなコンポーネントは、Commonに定義する + +### 参照 + +- [https://qiita.com/misuken/items/19f9f603ab165e228fe1](https://qiita.com/misuken/items/19f9f603ab165e228fe1) +- [https://qiita.com/misuken/items/d51c181487cf611821f4](https://qiita.com/misuken/items/d51c181487cf611821f4) +- [https://qiita.com/misuken/items/09498a496511034627af](https://qiita.com/misuken/items/09498a496511034627af) diff --git a/docs/tech.md b/docs/tech.md index 2d9b5b18..bc77daec 100644 --- a/docs/tech.md +++ b/docs/tech.md @@ -21,11 +21,6 @@ - [Figma](https://www.figma.com/) -## アーキテクチャ - -- [BEM](https://en.bem.info) -- [BCCD Design](https://qiita.com/misuken/items/19f9f603ab165e228fe1) - ## スタイリング - [the-new-css-reset](https://github.com/elad2412/the-new-css-reset)