【あべちゃんのフロントエンド塾】課題１を通して学んだこと

はじめに

「コンポーネント指向や、アトミックデザインを意識してポートフォリオサイトを作る」という課題を通して、
”苦労した点”や”それらをどう乗り越えたか”など、自分の考えをまとめるためにも、整理しながらアウトプットしていきたいと思います。

コンポーネント指向とは

コンポーネント指向とは、ソフトウエアを機能ごとに部品（ソフトウエアコンポーネント）として分割し、必要に応じて組み合わせて使うという考え方である。

例えば、ホームページ内の”ヘッダー”にはメニューアイコンや検索バー、そのサイトのロゴなどがあったりします。

『コンポーネント指向』を意識して、それらひとつひとつを「コンポーネント」として切り出して作成することで、後々の管理を行いやすくなる メリットがあります。

また、必要に応じてコンポーネントを”再利用”することで、コードの記述量を減らすことも出来るし、複数箇所の変更を”一箇所”で同時に行うこともできます。

【参考】

フロントエンドのコンポーネント設計に立ち向かう

Atomic Designとは（概念）

Atomic DesignはUIコンポーネントの切り出し方と組み上げ方ついて、UIの粒度を明確にし、組織的な指標となるよう考え出された概念です。

Atomic Designは自然界で起こっているのと同じプロセスを適用してUIを設計していきます。
自然界で起こっていることとは、すべての物質は原子で構成され、原子は互いに結合して分子を形成し、より複雑な生物に結合し、最終的には宇宙のすべての物質を創造している世界のことです。

小さなUIコンポーネントが集まり、一つのコンポーネントとなり、さらにそれらを組み合わさるとページになる画面UIの比喩としています。

Atomic Designは階層的なUI設計システムを作成するために、コンポーネントを以下の5つの単位に分別します。

1. Atoms（原子）
   フォームラベル、入力、ボタンなどの基本的なHTML要素。これ以上分けられないもっとも小さなUIパーツ。

2. Molecules（分子）
   原子を組み合わせてつくる比較的単純なグループ。たとえば、いいねボタン、コメントボタン、詳細ボタンを組み合わせてできるユーティリティ。

3. Organisms（生命体）
   原子と分子を組み合わせてできる大きなグループ。ヘッダーやフッターなど。

4. Templates（テンプレート）
   原子〜生体までのコンポーネントを配置した、ページレベルのフレーム。中の画像や文章などは「サンプル」になる。

5. Pages（ページ）
   テンプレートに具体的にコンテンツを埋め込んだもの

ー参照ー
Atomic Designとは 〜Atomic Designを使ったコンポーネント指向のUI開発：序〜

どの”粒度”でATOMSやMOLECULESなどに分けていくのか、という尺度は個人や所属しているグループによって変わると思います。

個人で開発している分には、厳密に意識しなくても今のところ困ることはそんなにありませんでした。

しかし、”ルール”をきちんと設けることで「もっとわかりやすいディレクトリ構造などに出来るんだろうな」と思うので、アトミックデザインの考え方は今後のためにもさらに深めていく必要があると思っています。

会社などに所属した場合にどのようなルールがあるのか、不安でもあり楽しみでもあります。

課題をこなす上で苦労した点

「エラーに遭遇したとき」や「全く知らないことを取り入れるとき」は当たり前ですが”精神的”にきつかったです笑

具体的な部分でいうと、

”モーダル作成”
”コンタクトフォームのバリデーション”

は、考え方やコードの記述方など頭を使いました。

苦労をどのように克服したか

【エラーや、全く知らないことに遭遇したとき】

まずひたすらググります。笑
エラー文をそのまま検索したり、英文でわからないときはDeepLというアプリを使って日本語に翻訳しました。

それでもわからない場合は、『あべちゃんのフロントエンド塾』にて質問を投げかけました。

質問をする際は「テンプレートに沿って」質問に答えてくれる側がわかりやすくなるようにまとめます。

●　タスクのゴール
●　現状
●　何がわからないのか
●　自分が試した方法
●　リモートリポジトリのURL

上記項目に沿って、そのときの状況を整理しました。

【モーダル作成】

ここでは、useState()を使って状態を管理したり、onClick()でモーダルやoverlay(※モーダル以外の部分を黒い画面にする)を出現させたり、というプログラムを実装していきました。

propsを使って他のコンポーネントにstateの情報を渡したりもしたので、モーダルの実装を行う過程でReactの基本的な機能を学習することができたように思います。

あとは、余計なエラーに見舞われないように、検索して出てきたコードをまずはCodeSandboxなどで挙動を確かめて、そのあと自分のプログラムに組み込んでいきました。

Githubへの適宜commitやpushも、粒度をなるべく細かくして頻繁に行いました。
ブランチを切って、マージしたりプルリクを出したり、といった部分の理解がまだしっかり出来ていないので、このあたりの学習も今後すすめていこうと思っています。

【コンタクトフォームのバリデーション】

バリデーションはReact Hook Formを使って実装しました。

「名前」
「メール」
「メッセージ」

という項目に分けてコンタクトフォームを作ったのですが、「メール」の部分が苦労しました。

”@gmail.com”のような記述がないとエラーになるというバリデーションを作りたかったので、まずはその記述方法を検索し、さらに、複数のエラーメッセージに対応させる方法も調べ実装しました。

下記コードがその部分に該当します。

contact.tsx

   <p className={scss.validateMsg}>
     {errors.Email?.type === "pattern" && "*Please enter a valid email address."}
     {errors.Email?.type === "required" && "*Email is required."}
   </p>

contact.tsx

 {...register("Email", {
   required: true,
   pattern: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
 })}

参考サイト

【Figma】

【デザイン】

【React関連】

【TypeScript関連】

【HTML, CSS関連】

【AWS Amplify】

【ファビコン】

【ドメイン取得】

まとめ

Reactを使うことでSPA（シングルページアプリケーション）として、挙動がサクサクと快適なポートフォリオが作れました。

TypeScriptは、stringやbooleanなどのデータ型をあらかじめ指定することで、セキュリティ的に堅牢なアプリを作れるみたいですが、正直全然使いこなせていないです。

Atomic Designもそうですが、ひとまず”基礎的な概念”などがわかったので、しっかり理解して活用していきます。

”１ヶ月”という期間(まだ実質は半月程度)、一つの制作物と向き合うことで、詰まっているときは時間に追われる感じがして焦ってしまいますが、そうでないときは、逆にその領域の知見を落ち着いて深められて、そういう環境を提供してくれている『あべちゃんのフロントエンド塾』に入って良かったなと、改めて思いました。

基本的には”自走力”を付けることに重きを置いている塾なので、ひとりでコツコツやることになるのですが、困ったときは質問できる環境がある、また、同じ課題に取り組んでいる仲間がいるという状況は心にゆとりを持たせてくれます。

今後も、今回のポートフォリオのブラッシュアップをしながら、さらに知識を深め、技術も高めていきたいと思います。