Web系未経験者がReact×TypeScriptでポートフォリオサイトを作る

目的

Web開発企業への転職を思い立ったものの、これまで組み込み開発(C, C++)しか経験したことがなく、サイト制作に関する知識が全くありませんでした。
そこで、フロントエンドの基礎知識習得 ＆ 現状の実力値を知ってもらうための制作物として、ポートフォリオサイトの制作を行いました。

作成したサイト

※2023年現在停止中

リポジトリ

やったこと

• 基礎学習
  • ドットインストール ( HTML, CSS, JavaScript )
  • React教本一冊 ( モダンJavaScriptの基本から始める React実践の教科書 )
• 要件定義
  • 制作目的の明確化
  • 記載内容・ビジュアルイメージ決定
  • 開発言語・環境選定
• 設計
  • サイトマップ作成
  • ワイヤーフレーム作成
  • コンポーネント設計 (Atomic Design)
• 実装
  • Contact Form メール自動応答
  • レスポンシブ対応
  • Atomic Designでのコンポーネント分割・共通化
• 評価
  • メジャーなブラウザでの簡易動作確認
• リリース
  • サーバー契約
  • ドメイン取得
  • アップロード

要件定義

厳密な要件定義の手法についてイチから学習したことはないため、ここでは全体イメージ・迷走した時に立ち返るための指標を定めることとしました。

制作目的の明確化

Q. 誰に見てもらうため？
A. 企業の採用・営業担当者様

Q. どのようなイメージを持ってもらうため？
A. 独力での制作能力がある。シンプルで閲覧しやすい(隙間時間でチェックできる)。

Q. 何を学ぶため？
A. Web制作の全体像。モダンJavaScriptの記法。

記載内容・ビジュアルイメージ決定

• 記載内容
  • About
  • Works
  • Contact
    ※閲覧しやすさを再重要視するため、最低限の内容に絞りました。
• ビジュアルイメージ
  • シンプル
  • モノトーンカラー
  • 円形
  • １ページ内で遷移が完結する
• その他
  • メンテナンス性が高いこと

開発言語・環境選定

• 言語
  • HTML
  • CSS (Emotion ストリングスタイル)
  • TypeScript [4.6.3]
• FW
  • React [18.0.0]
• 公開方法
  • レンタルサーバー契約 ＆ 独自ドメイン

モダンJavaScriptを学習するにあたり、React×TypeScriptであれば、前職でのコンポーネント指向開発・静的型付け言語知識を活かしやすいと考え選定しました。
CSS-in-JSの記法については、
・SCSS記法がそのまま使用でき、移植が容易であること
・(styled componentsと比較して)タグ名がデフォルト名であるため、検索がしやすい
という点に魅力を感じ、Emotionを採用しました。

設計

サイトマップ作成

各コンテンツへはTopのメニューから遷移、
Worksの詳細はモーダルウィンドウで表示させるシンプルな構成にしました。

ワイヤーフレーム作成 / コンポーネント設計

実装前に完成図の詳細なイメージと、ファイル構成を具体的にするために、
cacooという図形描画サイトで簡易的なワイヤーフレームとコンポーネント関連図を作成しました。
※コンポーネント設計図については、後述するレスポンシブ対応にて一部崩壊したためメンテナンス中…

設計書作成についても形態的な知識がないため、これからの要学習ポイントです。

実装

工夫した点・苦労した点をピックアップして記載していきます。

Contact Form メール自動応答

問い合わせフォームからのメッセージ送信時、サイト管理者には新着メッセージ通知、問い合わせ者には内容確認をメールで送信したいと考えました。ただし、今回はフロントエンドの学習が目的であるため、バックエンドの処理を今作り込むのは本意ではありません。

そこで、「EmailJS」という外部サービスを利用し、メールの自動送信を実現しました。

詳細な方法としては、メールアカウント登録・テンプレート作成をして、ソースコード内でAPIを使用するだけでしたが、
環境変数の使用・自分の環境に合わせた外部APIの利用を体験できたのは、良い経験になりました。

Atomic Designでのコンポーネント分割・共通化

大枠の思想だけ理解して採用したため、分類の定義等の考慮が足りておらず、最大限の恩恵を受けることができなかった。
今一度、概念から学び直す必要があると感じた。

• 良かった点

  • ディレクトリ構成がわかりやすい
    • 部品のサイズ感でディレクトリを特定できるため、ファイル探しがスムーズでした
  • 処理の共通化を常に意識してコーディングができる
    • 部品を使い回すことが根底にある思想であるため、効率的なコーディングが意識しやすい

• 悪かった点

  • コンポーネント設計を簡略化すると痛い目を見る
    • PC用・スマホ用の両者を意識して部品設計しないと、後から設計の仕直しが発生する
  • 部品の分類基準を事前に定めなければ、迷いが生じやすい
    • 何を最小単位とするのかで迷いやすい(例：ボタン？ボタンの中のテキスト？)
  • ファイル数が膨大になりやすい
    • 如何せんAtomsが多いためファイル数が増える(それによりネーミングにも迷う)

レスポンシブ対応

今回最大の失態は、設計段階でレスポンシブ対応のことが完全に頭から抜けていたことです。
PCサイズのワイヤーフレームしか作成していませんでした。

それにより、
・予定工数の超過
・部品数の増大 (リファクタで部品共通化できる余地あり)
・付け焼き刃で対応したため、所々で表示崩れが起きる
等々、さまざまな問題が発生しました。

スマートフォン・タブレットがメインで使用されている時代だからこそ、モバイルファーストでの設計の必要性を痛感しました。

また、PCのようにウィンドウサイズがコロコロ変わる画面においても、全パターンで表示崩れが起きないように実装するのは、想像以上に難易度が高いのだということを実感しました。

所感・改善点

• React使いやすい
  • 部品単位の改修がしやすい
  • 状態管理が簡単かつ、どのコンポーネントが持っているのか分かり易い
• TypeScriptはundefinedの考慮が大変 (逆に良いところでもある)
  • コンポーネントが生成されなかった場合の処理も明確に書く必要があるため少々面倒
  • 面倒さの反面、堅牢なコードを書く癖がつくため、最終的にはプラス
• 一人で仕上げるにはデザインの勉強も必要だと感じた
  • カラーコーディネータの資格を取得してみるのも面白そう
• バージョンの選定は慎重にする必要がある
  • 今回何も考えず、リリースされたてのReact18を使用したが、まだ対応していない外部APIが多く苦戦した
  • 技術の更新速度が早いからこそ、バージョン管理・環境管理が重要だと学んだ
• 1個1個のHook, APIに関する知識がまだまだ浅い
  • 参考サイトで紹介されているHookやAPIを多数取り入れたものの、現状"使えている"だけで、真に理解して使えているものはまだまだ少ない。

最後に

ここまでお読みいただき、ありがとうございました。
学習サイトのコンテンツをなぞるだけでは分からなかった経験をいくつも積むことができました。
コーディングの技術はまだまだですが、開発のフローについては比較的カッチリ決めて作成したつもりですので、よろしければ参考にしていただけると幸いです。
次はサーバーサイドを学べる題材で、またひとつ制作物を作る予定です。

参考サイト

[構成]
https://hodalab.com/portfolio/
https://qiita.com/it_tsumugi/items/fd18531f8a1fe0512d5f
[CSS]
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet
https://qiita.com/cheez921/items/1d13545f8a0ea46beb51
[Hook]
https://qiita.com/ragnar1904/items/0a4338523863922952bb
[Form]
https://qiita.com/NozomuTsuruta/items/60d15d97eeef71993f06
https://coders-shelf.com/react-hook-form/
https://zenn.dev/azunasu/articles/3a49cc1a8c6839