Vue.jsのコンポーネント設計について勉強
単一コンポーネントの原則は理解したけどじゃあ具体的にどうコンポーネントを作ったらいいの？という問いにぶち当たった。
こちらの記事がわかりやすかったのでこれを自分なりに要約していこうと思う。
コンポーネントとは？
アプリの見た目を作る構成部品。
コンポーネントを作る目的
アプリの見た目を作る上では同じような部品がくり返し使われることが多々ある(フォームの送信ボタンなど) 。このような要素を一つの部品の単位として分けて作成することで再利用性やデザインのしやすさを高めるためにコンポーネントを利用する。
コンポーネントの構成要素
以下の4つ。今回は①について見る。
- 情報構造
- スタイル
- 状態
- インタラクション・機能
①情報構造
HTMLのこと。どのような単位で部品を分けるのか？ということですね。
Atomic Design
見た目を作るHTMLをどのような単位で分けるのか？についての最もメジャーな考え方の一つ。
--機能の役割--
Atoms(原子)…最小単位。それ以上分割できないボタンやテキストなど
Molecules(分子)…Atomを組み合わせて作られる要素。フォームなど
--レイアウトの役割--
Organisms(組織)…MoleculesやAtomsを組み合わせて作られる要素。ヘッダーなど。Moleculesと違い、複数の機能を担う
Template…Organismsを組み合わせたもの。いわゆるワイヤーフレーム。見た目の骨格の部分
Pages…実際の文言がTemplateに組み込まれたもの。つまり実際のページ
単一責任の原則
コンポーネントは一つのことに責任を持つべき。つまりコンポーネントの役割は一つにしぼりましょう、ということ。
コンポーネントの役割を一つに絞るべき理由は、ページによって再利用したりユーザーの状態に応じてページに表示する内容を変えたりする必要がある時にコンポーネント内部に条件分岐などを入れたりする必要が出てくるから。これでは開発しにくい。この考え方はAtomsやMoleculesの設計では特に重要。
じゃあOrganisms以上はどうすんのという話ですがこれは「アプリの見た目を一意に担うこと」を単一責任、とすれば考えやすそう。つまりヘッダーやフッターなどの部品がページによってデザインが変わったりしないということ。機能に対しての一意性を担っているのはあくまでAtomsやMoleculesなんですね。
じゃあ実際どう実装していくの？
ここまで理解したところでどう実装するのかですが、以下のようにやると進めやすそう(感想)
①設計書なり仕様書をみて部品の最小単位を割り出す
②最小単位で設計した際のスタイルを考える
③②で考えたスタイルのうち親要素に持たせたほうがよいものを選び親要素に持たせる
みたいな感じ。スタイルに関しても定義の仕方にルールがあるようなのでこちらは明日以降勉強していく。