Zenn
📝

Reactを使って個人サイトを作ってみた

に公開
React
TypeScript
Web
Vite
idea

はじめに

Web開発未経験者がReactで個人サイトを作ってみました。
学んだことや反省点を記述していきます。

サイトの紹介

こんな感じのサイトになりました↓

https://kiku09020.github.io/my-page/

コードはこちらです↓

https://github.com/kiku09020/my-page

スクショ

alt
alt
alt
alt

参考サイト

https://qiita.com/it_tsumugi/items/fd18531f8a1fe0512d5f

https://kawamataryo.github.io/resume/

http://abehiroshi.la.coocan.jp/

環境

  • React(^18.3.1) + Vite(^5.4.10)
  • TypeScript
  • GitHubPagesに公開
  • CMS：Contentful, GraphQL

使用技術

ルーティング

  • ReactRouter

キャッシング

  • SWR

フォーム

  • ReactHookForm
  • EmailJS
  • zod
  • reCAPTCHA

UI, レイアウト関係

  • TailwindCSS
  • MUI

その他

  • カルーセル：embla-carousel
  • 動画プレイヤー：react-player
  • GitHubPagesへのデプロイ：gh-pages

開発概要

  • 開発期間：1週間+数日くらい
    • 現在無職なので、余裕もって開発できました
    • 開発中はダラダラしてたりしちゃってました
  • 開発人数：1人

開発当初の目標

  • とりあえず作って公開すること
  • 完璧主義をやめて、細かいところに考えすぎないようにする
  • 堅すぎず、自分の個性を活かしたサイトにする

学んだこと

環境構築

  • Viteでのセットアップ方法
  • npmでのパッケージ管理方法
  • ディレクトリ構成
    • 調べながらそれっぽく構成したものの、若干ごちゃごちゃしてしまった
  • デプロイ
    • まだGitHubPagesに公開する方法ぐらいしか知らない

基本文法

  • TypeScriptの型とかPropsについて
    • 他の言語と比べるとそこそこ独特な仕様で、現在も完全には理解できていないです。
  • JavaScriptの基本的なメソッドについて
    • 配列のメソッド、string, Date型のメソッドなどの仕様について

レイアウトなど

  • flexとかpaddingなどのCSSの基本的なプロパティ
    • 正直まだ理解しきれていない、ノリで調整してた
  • TailwindCSSの使い方
  • MUI
  • CSSでのアニメーション実装方法
  • レスポンシブ対応

フォームについて

  • react-hook-formの使い方
  • zodによるスキーマ定義
  • EmailJSでメール受信
  • reCAPTCHAの使い方

API, CMS

  • CMSについて
  • Contentfulを使用したコンテンツ管理方法
  • GraphQL APIを利用してフェッチする方法

その他いろいろ

  • SWRを用いたキャッシング方法
  • フェッチとかJSONのシリアライズとか

理解できていないところ

  • typeとinterfaceの違い
  • 非同期処理の詳細
  • lazyについて
  • その他パフォーマンス関連
  • エラーハンドリング

感想

Reactの学習について

事前にmosya-Reactという学習サイトでReactについて勉強していたので、そこまで時間を要さずに開発できてよかったです。
実際に開発で使える最新のライブラリなども紹介してくれたので、ライブラリの選択なども迷わずとりあえずmosya-Reactで扱ったものを使って開発しました。

おすすめです。↓

https://mosya.dev/react

CSSのレイアウトについて

開発しながら、プロパティの機能などを把握することができましたが、
中央寄せなどの親要素と子要素で設定が必要なプロパティなどはまだまだ理解ができていないです。

また、レスポンシブ対応がめちゃくちゃ大変だなと感じました。
一部対応しましたが、めんどくさくなって大部分は対応できていないです。

TypeScript愛してる

静的型付け言語がいい！

また、classではなく、typeを利用することに慣れたいです。

反省点

ダラダラしながら開発してた

無職になったので、時間にゆとりができたのでこのように開発を始めたのですが、
その中でどうしても動画を観まくったりしちゃったりしてしまいました。

1日中集中して取り組めた日もありましたが、もうちょっとメリハリをもって開発したかったです。

最低限のものになった

とりあえず公開することを目標としていたのでいいんですが、レスポンシブ対応とかパフォーマンス関連、エラーハンドリングとかはサボっちゃいました。

今後時間とやる気があれば追加していこうと思います。

コンポーネントの共通化など

ここらへんも先程と同様の理由でサボっちゃいました。
先に設計のフェーズをもうちょっとしっかりした方がいいな～と感じました。

今後の展望

  • バックエンド側の知識を深めたい
  • CI/CDらへんの知識を深めたい
  • 単体テストについて
  • 最適化方法
    • lazy()
    • useMemoなどのフック

今度はFireBaseとかを使ったコンテンツ管理、データベース操作などをしてみたいです。

また、CI/CDあたりの知識を身に着けたり、デプロイ周辺の操作をいい感じに行えるようになりたいです。

さいごに

自分が思うものを形にしながら学習していくのが楽しかったです。

今回はWebサイトを開発しましたが、今後はWebアプリ開発などに挑戦しようと思います。

Discussion