---
lang:`ja-jp`
robots:content="noindex,nofollow,noarchive"
---
###### tags: `vue.js` `fee`

# FEE 11月定例 - コンポーネント設計について

:::info
- **Date:** 2019/11/01(金) 14:00 〜 15:00
- **Location:** 東京会議室B, GP大阪会議室B
:::

[TOC]

## 目的・概要

* アニメ・マンガの日本語の受注
* 複数人開発でも耐えうるコンポーネント設計・ディレクトリ構成が必要
* 雛形となるものを調べてみました

## キーワード

### Atomic Design
* 以下５要素にコンポーネントを分割していくデザイン手法
* Atom：UIの最小単位。それ以上機能的に分割できないもの。
* ボタンとかテキスト
* Molecule：Atomを組み合わせて作られる要素。
* 検索フォーム
* Organisms：MoleculesやAtomを組み合わせて作られる要素。
* ヘッダーなど。Moleculeとの違いは単一の機能でなく**複数の役割**を持つこと
* Template：Organismsを組み合わせたもの。
* ワイヤーフレーム
* Pages：実際の文言などのデータがTemplateに注ぎ込まれたもの。

### 単一責任の原則
* 原則としてコンポーネントは**一つのことに責任を持つ**べき
* 一つのコンポーネントが複数の機能・役割を持ってしまっているのはよくない設計
* （疑問）複数の役割を持っているORGANISMSは？
* Organisms以上のコンポーネントは「機能としての役割」は持たず「**レイアウトとしての役割**」を持つ
* ヘッダーにドロップダウンやお知らせがあった場合
* 
* ヘッダーはあくまで「これらのMolecule or Atomたちをどうレイアウトするか」にだけ責任を持つ
:::info
**コンポーネントの責務の種類**
* 機能としての役割
* レイアウトとしての役割
:::

### fluxアーキテクチャ
* データの流れを一方向に限定して、状態管理をしやすくするためのアーキテクチャ

### prop drilling問題
* コンポーネントの階層が深くなってくると表出してくる問題
* Vueではprovideとinjectで解決
* https://jp.vuejs.org/v2/api/index.html#provide-inject

## 構成案

Root::
├─build                    : webpackのconfigファイル格納
├─config                   : webpackで使う定数関係の設定ファイル格納
├─dist                     : buildしたときにファイルが出力されるディレクトリ
├─static                   : Vue.jsで管理されない静的ファイル群
├─test                     : ユニットテスト、E2Eテストを格納
├─src
│  ├─assets                : webpackで結合されるファイルを格納
│  ├─components            : Vue.jsの単一ファイルコンポーネント群
│  │  ├─mixin              : 
│  │  ├─partial            : 複数ページで使い回すパーツ
│  │  │  ├─modal
│  │  │  └─plugin
│  │  └─pages              : ページそのもの,基本的にpagesに入っているファイル数＝ページ数
│  │       ├─member
│  │       ├─register
│  │       └─.....(etc)
│  ├─lib                   : サイト全体で使う処理や設定を格納
│  │  ├─lang
│  │  │   ├─en
│  │  │   ├─ja
│  │  │   ├─ch
│  │  │   └─.....(etc)
│  │  │─functions          : 汎用処理関数群
│  │  └─definition
│  ├─router                : vue-routerの設定ファイルを格納
│  ├─setup                 : アプリケーション固有の設定ファイルを格納
│  └─store                 : Vuexモジュールを格納

## 参考

* [フロントエンドのコンポーネント設計に立ち向かう](https://qiita.com/seya/items/8814e905693f00cdade2)
* [Vue.js: Vue I18nでアプリケーションを多言語に対応させる](https://qiita.com/FumioNonaka/items/bb994ab520bb0b268f65)
* [大規模Vue.jsアプリを開発するときのディレクトリ構成考えた](https://qiita.com/wonohe/items/529321475d68b9191036)
* [Vue.jsアーキテクチャリング勉強会](https://cw-engineers.connpass.com/event/146975/)