今までネットでさまざまな記事を読んでAtomic Designについて何となく分かった人は多いと思います。そして原子や分子といった概念を理解すること自体もそんなに難しい事ではないと思います。ですので細かい知識はここでは割愛させていただきます。以下の記事を参考にしてください。
ただ、初心者にとってはその知識がいつどのように役立つかがいまいち掴めない事や、私みたいにデザインをすっ飛ばしていきなりコードを書き始めてしまう人は、コンポーネントなどの概念も掴めないまま何度も同じ作業（コード）を繰り返してしまったりします。
初心者が陥りがちな問題点
ここでは初心者の超代表格として私を例にして全てお話をさせていただきますが、最初の頃はコンポーネントとういう概念を理解できていない為に同じパーツをどのページにも何度も繰り返して作成しようとします。これは初心者あるあるですね。そこで「コンポーネント化」や「Atomic Designとは」などと検索し分かった気になります。
しかし、いざエディタ上に戻ってみるとどこをどうコンポーネント化して良いか分からなくなります。そして泣きます。
原因
これらの原因として以下の事が考えられます。
- きちんとデザインを作っていない為、全てが見切り発車でアプリの全体像が見えていない。
- コンポーネント化できそうなパーツをあらかじめ把握できていない。
- いきなりエディタ上での作業は、他にも考えなければならない余計な要素（関数やオブジェクト、引数など）が多すぎてデザインに集中できず自力でコンポーネント化できない。
解決策
これらを解決する為に、デザインツールを使ってまずは全体のデザインをしっかりと作成することにしました。デザインツールはAdobeXdやFigma、その他何でも良いと思います。
今回私はなんとなくFigmaを使用しました。理由はありません。
プログラミング初学者がデザインツールを使用するメリットとして上記した問題点を解決することができます。
- まず見切り発車だったデザインを、便利なツールを使って綺麗に最後まで仕上げ全体像を把握する事ができます。これだけでもとても大きな違いです。
いくつもページを作っているうちに、同じような部品を繰り返し書きたくない事に気づきます。一番分かりやすのはWebアプリのヘッダーの部分です。どのページにもだいたい使う事になるでしょう。そこでコンポーネント化を体験します。同じような事をボタンだったり他のことでも出来ないかと考えながらデザインを作っていきます。
最も大きなメリットとしては、デザインツール上で行う事でエラーなどの実際のアプリの挙動といった他の要素を気にしなくていいことです。とりあえず目に見える範囲でコンポーネント化出来そうな部分はやっちゃえって感じで良いと思います。
Figmaを使用していると、グループ化という機能があります。グループ化とはアトミックデザインを意識した考え方で、どこまでの範囲をひとまとまりにすると便利になるかを考えた上でグループ化します。正解はありません。最初はパーツを揃えて、必要な時が来たらグループ化します。どこら辺でグループ化すれば良いかは使っているうちにだんだん分かってきます。必要であればコンポーネント化もしてください。
注意しなければならないのは、グループ化＝コンポーネント化ではありません。（似た部分はありますが説明はここでは割愛。）
苦労した事
私のようにデザインツールの使い方も全く分からないところからのスタートの人は、まずその使い方を調べて新しい事を覚える為の時間を別で作らないといけない事は事実です。更には、きちんとしたデザイン設計は意外と時間がかかってしまう為、とても遠回りしているように感じ心配になる事がありました。しかし一旦最後まで上記してきた事を意識しながらデザインを完成させると、アトミックデザインとコンポーネントについての理解がとても上がったように感じる事ができました。
まとめ
プログラミングをしていると関数などのデザイン以外もコンポーネント化できますが、デザインと違って目に見えるものではない為、最初は概念を掴みにくい部分だと思います。ですので、初心者こそデザインツールを使ってしっかりとAtomic Designを意識しながら、
- 使いまわせる部分はコンポーネント化する事
- 目に見える部分から最初に学ぶ事
が、その後の関数コンポーネントなどを理解しやすくしてくれると思います。
今回はReactなどのSPAを普段学習している人間からの観点となります。他の言語のことは分かりませんので何か当てはまらない事があったらすみません。
記事に間違いがあれば、是非ご指摘とアドバイスも宜しくお願い致します。
この記事が、少しでも同じ苦労を抱えている初学者のお役に立てれば嬉しいです。