はじめに

React を学習していくにあたり、これからの成果物を掲載していくポートフォリオサイトを作成しました。Atomic Design の考え方を参考に、コンポーネントを意識しながらのサイト作成は、React の技術だけでなく、サイト設計の考え方、html、css の書き方についても改めて気づくことの多い経験となりました。

デザイン

今回は AdobeXD を利用してデザインを作成しました。
デザインをする機会はめったにないので、まずはショートカットキーを中心に操作方法から学びます。操作方法は Udemy の下記講座を参考に基本的な使い方を学習しました。

デザインのイメージについてはnicepageというテンプレートサイトからイメージにあうデザインを検索し、最終的に下記テンプレートを参考にさせていただきました。

上記デザインを参考にしながら試行錯誤を 1-2 日繰り返して出来上がったデザインがこちら。

色々と発想を切り替えようとはしましたが、デザイン時にコンポーネントを意識したり、コーディングの再現性を考えてしまうとなかなか思い切ったデザインにするのは難しいと感じました。。。早速今後の大きな課題です。

Atomic Design とコンポーネント設計

デザイナーである Brad Frost 氏の UI 設計に基づいたデザインシステムのこと。デザインパーツを 5 つの分類に分けて構造構築していくということのようです。この形が Atomic Design であるという正解を見出すことは難しいようですが、Atomic Design の思想を参考に、コンポーネント設計していこうというのが今回の目的です。

Atoms（原子）・・・ボタン、アイコン、インプットエリアなどの要素の最小単位。
Molecules（分子）・・・Atoms の集合体、アイコン付きのボタンや検索ボックスなど。
Organisms（有機体）・・・Atoms、Molecules の集合体。ヘッダーや検索エリアなど。
Templates（テンプレート）・・・Organisms の集合体。ページレイアウトなど。
Pages（ページ）・・・表示するページそのもの。

作成したデザインを Atomic Design を想定したコンポーネントに分割していきます。今回は 1 ページものということもあり最終的には Template は作成しませんでした。

Storybook をちょいかみしながら、なんとなくのコンポーネント駆動開発

コーディングにあたっては、一度使ってみたかった Storybook を利用して、コンポーネント駆動開発的なものに挑戦しました。

コンポーネントを考えてサイト制作をすることで、表示とロジック部分の分離や、パーツの流用、更新など保守に強いサービスを作っていくことができます。チーム開発でのイメージがありましたが、今回体験してみて個人開発でも当たり前のように必要な考え方なのだと知ることができました。

使用方法が全く未知数だったので、公式のチュートリアルと下記動画で触りを学習してから構築を行いました。v5 と v6 で大きく変わっていることもあり、ネットの情報も注意しながら取捨選択していきます。

途中何度も挫けそうになりながら毎日少しずつ少しずつコンポーネントを作成していきます。
部品はなんとなく出来上がっていきますが全体がどうなるかが未知数のまま進むので不安が募ります。。
その分、最後に一つの Pages に Organisms たちを設置、突然デザインのページが出来上がったときにはちょっとした感動を覚えました。

今回各コンポーネントは CSS modules を利用して設計しましたが、ロジックによって props を渡して style を変更したい時など、クラス名を当てたい時に不便さを感じました。CSSS modules だと通常のhtmlコーディングと同じような思想で書くことができるので書きやすくはありますが、今回のようにコンポーネントを小さく分けていく場合は styled-components が使いやすそうだと感じました。次の開発では styled-components または emotion を利用して試してみようと思います。

ロジックの組み込み

今回のロジックを組んでいくにあたって、あえて props drilling を経験してみるという謎のテーマで進めていきます。
React を学び始めたのが最近ということもあり、学習当初から Context や Redux、その他状態管理の情報が豊富にあるので props をバトンし渡していくということの理解がいまいち足りていないと感じていたからです。もちろん、そのおかげでこの先もたくさん苦労することとなりましたが。。

モダール部分はライブラリは使わずに、CSS と Hooks を利用して設置、CONTACT 部分は React Hook Form を使って実装を行いました。

Amplify との連携

サイトを Amplify にデプロイするにあたって、またここで新たに欲が出てきます。
PORTFOLIO 一覧部分は、制作当初は json ファイルから出力をしていたのですが、GraphQL を試してくなり、最終的に AppSync を利用して DynamoDB のデータを出力する形に。
CONTACT フォームもダミーで済ませようとしたところから、API Gateway、Lambda を利用して、SendGrid から送信と 1 日、また 1 日と、3 歩進んで 2 歩下がる日々が続きました。。。

今回初めて Amplify を使いましたが、裏で何が動いているかわからず、問題が起きても解決方法がなかなか見えない、何がわからないかわからない事態が 2 日程度続いたので、ポートフォリオサイト作成の中、この部分が一番苦労したところかもしれません。

リリース

デザイン着手から 2 週間程度かかりましたが、なんとか世に公開することができそうです。
内容がまだ何もないので、これからは掲載していく作品数を増やすべくさらなるステップアップを目指します！

さいごに

デザインからデプロイまでを経験することで、はまりどころたくさんあり何度も遭難しかけましたが、ひたすら調べる、試すの繰り返しでなんとかまとめきることができました。自分にとってこの 2 週間という時間以上にとても大きな経験を積むことができたと感じています。今まではインプット中心で学習を続けてきましたが、こういったアウトプットできるものを作ることで大きな一歩を踏み出すことができました。

参考サイト

Design

CSS

Modal

Intersection Observer

Form

Storybook

Amplify

SendGrid