祇園祭Webサイトのフロントについて
この記事は、木更津高専 Advent Calender 2023 24日目の記事です。
前の前→ 学園祭の企画管理システム(一部)と認証システムを作った話 by @naotiki
前→ 祇園祭WebサイトのDBについて by @NXVZBGBFBEN
次→ 祇園祭WebサイトのAPIについて by @kokastar
はじめに
皆さんメリークリスマスなないろきです！！！。
私達木更津高専プログラミング研究同好会で木更津高専の学園祭である祇園祭のホームページを作りました。
この記事では主にフロントエンドのことについて書きます。
フロントエンドで使った技術
Next.js
祇園祭webではフロント・バックエンドともにNext.jsを活用しました。SSRや画像の最適化のためにnext/imagesを使ったところ楽に高速化を行うことができました。
Chakra UI
UIを構築するためのライブラリです。
コンポーネントに引数を渡すだけでとても簡単にデザインの調整をすることができました。
また、画面サイズごとにコンポーネントの引数を変えることができ、レスポンシブデザインも楽にできました。
大変だったところ
buildしたときに大量のwarningが出た
デプロイ作業を行い始める直前までbuildをしてこなかったため、後半の方では大量のエラー対応にくるしめられました。warningが出た主な原因としてはkeyのつけ忘れと、型の無視がありました。来年以降はPullRequestの前にbuildを行って、事前に確認するようにしたいです。
長い企画名・団体名への対応
開発初期段階で想定していた長さを超える企画名・団体名があったので対応が大変でした。
レスポンシブ対応
開発初期段階のときにfigmaで作ったデザイン案がPCしか想定していなかったこともあり、レスポンシブ対応にはとても苦労しました。
来年以降導入したい技術
AppRouter
今年の祗園祭webのsrc以下のフォルダー構成はだいたいこんな感じでした。
src
├── assets #画像を保存
├── common #共通で使うコードを保存
│ └── utils
├── components #コンポーネントを保存
├── lib #prisma関連のコードを保存
├── pages #ページ用のfile
このフォルダー構成で運用している中で問題がありました、それはcomponentsフォルダーの中に1つのページでしか使わないコンポーネントと様々なページで共通で使うコンポーネントの両方が入って、分かりづらくなっていることです。
そこでAppRouterを導入して、共通で使うコンポーネントファイルとそうではないコンポーネントファイルを分離したいです。
しかしながらAppRouterの導入で生じるデメリットも多いので、今後開発メンバーとよく検討したいです。
終わりに
今年の祗園祭webにはまだ不完全な点や悔いが残る点が多くありますが、初めての試みにしてはうまく行ったのかなと思います。
来年以降弊同好会で引き継いで進化させていきたいです。
それではみなさんメリクリ、よいお年を。
Discussion