こんにちは。Findyで副業をしている、桑原（@k-kuwahara）です！

Facebook社が開発した、コンポーネント指向のJavaScriptライブラリ React を皮切りに、世のJavaScriptフレームワークは一気にコンポーネント指向に方向転換し、現在のフロントエンドの開発はコンポーネント指向が主流となりました。

またそこに、Brad Frost氏の著書のタイトルでもある「Atomic Design」という、デザインシステムをベースとしたUI設計の方法も登場し、コンポーネント化の流れは加速して行きました。

今回は、Atomic Designに基づいてWebアプリケーションの開発をした経験や知見をまとめたいと思います。

Atomic Designとは

重複してしまいますが、Atomic Design とは 、Brad Frost氏が提唱したUI設計の方法・思想です。（氏の著書がwebで公開されておりますので、もしご興味ある方は先程のリンクにアクセスしてみてください）フロントエンドの設計思想のように語られている事もありますが、あくまでデザインの設計についてのものです。

※既にインターネット上には数多くの解説記事が投稿されておりますので、詳細は省かせていただきます。

何故このように語られている事が多いかと言いますと、その設計思想がコンポーネント指向との親和性が高く、ある意味で裏表のような存在とも言えるからかと筆者は考えています。少しだけ具体的に見てみましょう。

（参照：http://atomicdesign.bradfrost.com/ ）

言ってしまえば、この画像が全てを物語っています（笑）Webページを、パーツとしてどんどん細分化して行くことがこの設計の肝です。そのパーツの最小単位が Atoms（原子） となります。例えば、テキストラベル・ボタン・アイコン画像などが該当します。

Webページはこの Atoms の組み合わせて作られているということになります。ただ、Atoms だけでやるには細かすぎるので、ちょっと組み合わせて意味のあるパーツ（Molecules, Organisms）にしていき、それを更に組み合わせることを繰り返しページ大枠としての部品を作り（Templates）、最終的に画面（Pages）を完成させる形となります。

コンポーネント指向とは

Component（要素、成分、部品）という意味の通り、Webページ、より具体的にはDOMをコンポーネントと呼ばれる単位で区切り、そのコンポーネントの組み合わせでページやアプリケーションを作る手法のことです。現代の三大JavaScriptフレームワークである、React, Angular, Vueも、コンポーネント指向です。

一つ一つのコンポーネントを意味のあるもので区切る事がポイントで、よくやる方法としては機能単位でコンポーネントに分け、責務をそこで閉じる事が多いかと思います。

このように、コンポーネント指向は Atomic Design と思想がよく似ており、相性が良い事がわかるかと思います。

実際に開発で利用してわかった事

ここからが本題となります。触ってみたところ、とても便利で良いな、と思う反面、ここはネックだなとか、弊害もあるな、と感じた事を書いていきます。

○メリット

• 作業分担がしやすく、コンフリクトを減らせる
• コンポーネントが再利用できる
• 汎用性を考えるなど、設計力が鍛えられる
• デザイナーとの意思の疎通がしやすい
• 仕様や、UIの変更に強い

全体的にメリットとしては、現代のチーム開発にマッチしているという印象です。機能開発の責務を分けていること、単位を小さくしていることがとても良く、誰が何をやっているかという事も明確化できますので、タスク管理がとても楽になります。

また、細かく切り分けたことで一人一人の進捗が出やすく、モチベーションも維持しやすいので、とても素晴らしいなと感じています。現代の開発現場にはとても大きなメリットではないでしょうか。

○デメリット

• 1画面しか使わないコンポーネントも作りがち
• コンポーネントが増えた時のビルドが重くなる
• 目的のコンポーネントまでの検索性が下がる
• データの受け渡し（いわゆるバケツリレー）による管理が難しくなる
• 共通化する事で、障害点も大きくなる

デメリットしては、システムに特化した構成になる分、人が管理する範囲が増える事によるコスト増や、気にしないといけない点が増える事でバグを発生させやすいかな、と感じました。

また目的のコンポーネントを検索する場合、明確な名前が分かっていれば現代のエディタやIDEならば直接開く事ができますが、それが利用されているコンポーネントを探すときや、イベントハンドラの定義を探す時に、いくつものコンポーネントを経由する事があるので、割と検索性は悪いなと思います。

何をどこまでコンポーネント化（Atoms？ molecules？など）するか、何はPagesのまま実装するか？などを考える必要があると思います。ここをしっかり話して認識を合わせておかないと、各々で独自のコンポーネントを作りかねなく、ソースが肥大化する恐れがあります。

コンポーネント指向にチャレンジ

繰り返しになってしまいますが、筆者が利用したところで申し上げますと、コンポーネント指向は現代の開発にとても合っていると思います。また、Atomic Designはデザイナーと協業する時とても効果を発揮しますので、是非一度チャレンジしてみて頂けるととても学びがあって面白いと思います！

いずれにしても、今回お話しした手法はチーム開発で威力を発揮するものですので、大事な事はしっかりチーム内でコミュニケーションを取りながら進める事だと感じましたので、足並み揃えて利用していただければと思います！

Findy では、GitHubのリポジトリから、エンジニアのスキル偏差値を計算する機能がありますので、個々人のアウトプットを頑張られている方はぜひ一度試してみてください！

また、Findy Freelance というフリーランス・副業エンジニア向けのサービスでも、フリーランスとして、または副業としてどうキャリアを作っていくかのサポートも行っております。

何か小さな事からでもチャレンジしてみたい！という方は、まずはこちらから自身のスキル偏差値を計測して、自分の実力を見てみてください！

読んで頂きありがとうございました！ 宜しければ、エンジニアの皆様はFindyでご自身のスキル偏差値を測定してみてください。

[正社員の方]
ハイスキルなエンジニアのプレミアム転職サービス Findy

[フリーランスの方]
フリーランス・副業エンジニア向けの単価保証型の案件紹介サービス Findy Freelance

また、Findyでは年齢や勤務形態を問わず、様々な働き方で採用をしています。興味のある方は、こちらからご応募どうぞ！