🦉

フロントのコンポーネント設計ベストプラクティスを探してみた話

2021/02/24に公開

Next.js

コンポーネントの設計方法って 「大体の場合はこのやり方で設計したら勝手に良い感じになるから！」 みたいなベストプラクティスは無いのか気になった(楽して設計したい)。

私は React をメインで使用していますが、コンポーネント設計の話なので Vue メインの方でも読んでいただけると思います。
サンプルや参考記事は React ベース・Vue ベースどちらも出てきます。

また、この記事ではコンポーネントの分割方法のみに注目しており、コンポーネントのスタイルや状態保持の設計については基本的に言及しません。
それらの内容についてはこちらの記事が大変参考になりますのでオススメです。

ベストプラクティス

結論としてはベストプラクティスのようなものは見つかりませんでした。
結局は良い設計は作るものによる、というのが答えになってしまいそうです。
しかしヒントになる情報や勉強になる事例も見つけたので記事にします。

React の流儀

React 公式がデザインモックを React コンポーネントに落とし込む流れを公開してます。

オフィシャルが提示している間違いの無いやり方です(ベストプラクティスと言って良いのかも)。
ただサンプルコンポーネントの規模が小さめなので、このページを見て実務で通用するコンポーネント設計ができるかと言われると微妙なところです(実際には hooks や ContainerComponent の思想も出てくることが多いので)。
書いてる内容自体はわかりやすく大変素晴らしいので、読んだことない方は是非。

Virtual Event Starter Kit

Next.js Conf2020 はオンライン開催となったのですが、そのイベントページを Next.js 開発元である Vercel が作成してソースコードを公開しています。

当然ですが Next.js を使用しており、CMS との連携もあったりと結構多機能です。
ソース内容も素晴らしくコンポーネント設計を考える上でも大変参考になります。
ちなみにAtomicDesign(後述)は採用されてないです。

AtomicDesign

画像引用元

フロント設計におけるデファクトスタンダードと言えるAtomicDesignですが、これをそのままコンポーネント設計に適用しようとすると色々苦労します。
(AtomicDesign についての分かりやすい記事はこちら)

でも Web アプリを AtomicDesign で構成する記事はよく見るし、良さそうな話もたくさん聞きます。
私が React 初学者の頃に読んだ技術書でも推奨されてました。

AtomicDesign はコンポーネントの設計思想ではなく、デザインの設計思想

AtomicDesign はデザインシステムの話です。それをそっくりそのまま React、Vue のコンポーネントシステムに適用すると色々不都合が出てきます。

Atoms に分割しようと思えばできるけど再利用性は皆無な場合
これは Molecules？Organisms？どれでもない？単位がよくわからない場合
データを pages から流そうとするとデータ取得部がとんでもなく FAT になる場合

コンポーネント指向の大きなメリット(目的)である

再利用性の担保
メンテナンス性の担保

この２点はコンポーネント設計を行う上で常に意識するべきです。
そして意識すればするほど AtomicDesign がコンポーネント設計にハマらなくなっていくことが多いです。
多くの方が一度通る道なのではないでしょうか。

みんなどうしてるの？

優秀な方達は皆 AtomicDesign に独自の構造・仕組みを加えてコンポーネント設計にうまくフィットさせているようです。
下記で Airbnb など大企業の事例が簡単に紹介されており面白いです。
https://logmi.jp/tech/articles/300657

国内の事例でも大変勉強になるものがありましたのでリンクを貼っておきます。

大切なのは AtomicDesign のエッセンスを上手にコンポーネント設計に取り入れることみたいです。
思考停止で AtomicDesign の思想通りにコンポーネント設計を行うと苦労します（私）。

AtomicComponents

簡単に言うと AtomicDesign の考え方を Web アプリ開発に向けて派生させたもの。
下記は原文の日本語訳ですが、現在原文本体は削除されており読むことができないようです(何故…)。

私は今回色々調べる中で初めて知りましたが、2015 年の jsconf で発表されていたそうです。
ベストプラクティスになり得る…？一度試してみたいところです。

終わりに

結局は作るものによって最適な設計は変わるので、ベストプラクティスは存在しない、というのが現状の答えでしょうか。
AtomicComponents については一度試してみたいと思っており、その際にはまた記事にします。

読んでいただきありがとうございました。