コンポーネント指向について

はじめに

私は、何かを学ぼうとするとき、ついつい基本的な概念を飛ばして、
真っ先にテクニックなどを学ぼうとしてしまいます。

ゲームの説明書は、お出かけ中とかゲームのできない状況だと
夢中で読みますが、ゲームができる時にわざわざ説明書を読みません。

読まずにゲームを始めます。
なぜかゲームをクリアした後に読んだりはしますw
（今でも本棚にあるFF１２の完全攻略本を見るとあの頃を思い出し胸が高鳴ります）

プログラミングの学習においてもそうです。

Reactを学ぶ際、生まれた経緯、コンセプト等は全く調べず、
とりあえずUdemyとかで何か学習教材を探して勉強をはじめました。

改めて今、それを反省し、Reactの基本概念に立ち返るという意味で、
Reactの重要なコンセプトである「コンポーネント指向」について
自分なりにまとめようと思いました。

コンポーネントとは

まずコンポーネントの言葉の意味を調べてみると

「構成要素、部品」

と書いてあります。

ホームページやアプリは様々なコンポーネントが集まって成り立っています。

例えばTodoアプリであれば、
①Todoを登録するInputエリア。
②登録したTodoを表示するエリア。
③完了したTodoを表示するエリア。

たったこれだけのアプリでも３つのエリアに分類されていますし、
①であればさらに細かく言うとTodoを入力する部分と確定ボタンに
分けることができます。
②と③はよく見ると使い回しすれば簡単に作れそうですよね？

そういった部分を一つのコンポーネントとして作成して、
あらゆる部分でそのまま使ったり、ごく一部を書き換えて再利用する。

そうすることで早く作ることができます。

そして何より修正があった時、元のコンポーネントを修正するだけで
いいので、エラーにも強い。

こういったコンポーネントを意識することが、Reactの大前提であると
天下の公式様もトップページで仰っております。

コンポーネントの分け方

React公式より引用します。

単一責任の原則 (single responsibility principle) があり、これはすなわち、
ひとつのコンポーネントは理想的にはひとつのことだけをするべきだということです。
将来、コンポーネントが肥大化してしまった場合には、小さなコンポーネントに分割するべきです。

先ほどのTodoアプリの例を用いるならば、①で使用した青色の確定ボタン。
これは後々別の部分で使用しそうだな、と思ったら、
このボタンだけのファイルを作成します。
このファイルには、ボタンの機能しかありません。

なんと贅沢なファイルの使い方！
と思った方もいるかもしれませんが、それが上記の

ひとつのコンポーネントは理想的にはひとつのことだけをするべき

ということなのです。

ひとつのファイルにいろんな関数などをごちゃごちゃ書いていては後々
どこに何が書いてあるかわからなくなります。

「いっぱい書きすぎて訳分からなくなりそう....」
と思ったらファイルを分けてみましょう。

Atomic Designについて

「ファイルを分けるといっても、どうやって分けるの？」

そんな時参考になる考え方がAtomic Designです！

Atomic　Designとは、コンポーネントを５段階に分けて
完成品を作っていく手法のことです。

1.　Atom

１段階目はアトムと呼ばれる段階です。

日本語に訳すと「原子」。
つまりこれ以上分解できない最小の単位のことを指します。

またまた先ほどのTodoアプリの例で例えると、①のインプットゾーンや
ボタン、②ならTodoの内容、またはチェックボタン、ゴミ箱ボタンがそうです。
１つの要素しかないファイルがAtomです。

1. Molecure

２段階目はモルキュールです。
先ほど作ったAtomを組み合わせて、さらに使いやすいコンポーネントを
作成していきます！
Todoアプリで例えると
②のTodoの内容＋チェックボタン＋ゴミ箱
のAtomを足し合わせて一つのファイルを作成すれば、
どれだけTodoが増えてもそのファイルを使いまわせばいいだけなので楽ちんですね。

1. Organism

3段階目はオーガニズムです。
AtomやMolecureを足し合わせてファイルを作成します。

Todoアプリで言うところの①や②、③のそれぞれのエリアが当てはまります。

1. Templates

4段階目はテンプレートです。
Atom、Molecule、Organismを組み合わせてファイルを作成します。

Todoアプリで例えると.....あれ、ありませんね。
かなり小規模のアプリなのでそういうこともあるでしょう。うん。
...ちゃんと例えられるアプリを例に出せよ？
はい、仰るとおりです。次は頑張ります。

1. Pages

5段階目はページです！これが最後となります。
Atom、Molecure、Organism、Templatesを組み合わせて作成します。

Todoアプリで例えるならタイトル＋①＋②＋③です。
Todoアプリそのものといってもいいかもしれません。

こういった具合にコンポーネントに分けて、利用できるものは再利用して
作成していきます。

注意点

ここまで長々と書いてきましたが、注意点としてはただ闇雲に全ての要素を
コンポーネント化する必要はないということです。

Atomとして作成するのはあくまで何度も再利用しそうなものだけで構いません。
なんでもほどほどが肝心です。

コンポーネント化しすぎて逆に時間がかかるようではいけないので
何度も練習して感覚を磨くのが大事かなと思います。

さいごに

コンポーネント化は何もReactのみに使える話ではありません。

例えばTwitterのアカウント。

作成当初は１つのアカウントに色んなことを呟くと思います。
ゲーム、漫画、アニメ、グルメ、学校、勉強、ムカつく上司への愚痴etc...

しかし途中で自分のツイートを見返した時、多くの情報が混ざりすぎて
関連する内容だけ見たいのに！ともどかしくなるかもしれません。

そのため私は趣味用と学習用で2つアカウントを所有しています。
こうすれば趣味のアカウントを開くときはのほほんと、
学習用をアカウントを開く時は、身が引き締まります。

これもコンポーネント化じゃないかなと思います。

とりあえず長くなったり見づらくなったら整理！
コンポーネント化とはそんな感じだと捉えてます。

以上。ありがとうございました！

参考

React公式
React初学者が必ず押さえておきたい考え方とは？【コンポーネント指向のフロントエンド】
アトミックデザインとは？ コンポーネント単位で創るUIデザイン手法