導入
こんにちは。
とある納豆高専で学生やってます。
今年の10月末に実施した茨香祭（本校の文化祭）でクラスのWebページを作ったのでブログにまとめようと思います。
サイト概要
僕のクラスではクレープを出店しました。
「丸亀クレープ」ということで具材を自由にカスタマイズできるシステムでした。
サイトの内容は以下のとおりです。
- 開催日時
- 出店内容の説明
- メニュー表
- 場所など
- Instagramのリンク
それぞれの内容をタイル形式で配置しました。
反省点として、レスポンシブデザインを作る時間がなかったためスマホ専用の構成で開発したことです（PCでは見ないで）。
技術スタック
基本的にHTMLで直書きしてます。イベント当日までのカウントダウンはJavaScriptで動かしました。唯一のフレームワークとしてTailwindCSSを使っています（すごい便利だった、特にクラス名を管理しなくていいのが）。
今度作る時はAstroとかReactを使いたいです（実行委員会のWebページは使ってました）。
タイムライン
以下、開発の軌跡になります。
詳しくは後述しますが、サーバーにデプロイする過程で1番苦労しました（しかも原因がダサすぎる…）。
7月
部活の先輩が前回の茨香祭でWebアプリを作っていたのを思い出し作ろうと決心。この時はWebアプリを作ろうと志していましたが技術が足りずすぐに諦めて静的サイトに逃げました。
8月
前期期末テスト終了後に開発を始めました。
最初はHTMLとCSSのみを使ったシンプルなサイトをイメージしていました（Figmaは使いませんでした、後悔…）。
Webページで使うために作ったアイコンがクラスのサークルカットにも起用されたので嬉しかったです。
9月
夏休みということもあり少しJavaScriptに挑戦してみました。
結構コピペしましたが、結果的にイベント当日までのカウントダウンを入れることに成功しました。
また、公式ドキュメントとチートシートを使いながらTailwindCSSも取り入れました。最初は結構難しかったですが、慣れるととても便利でした（特にクラス名）。
ここで1つ問題が、先述したとおりサーバーへのデプロイです。
部活の先輩が前に使っていたVercelを使おうとしましたが、サイトへ飛んでも404…。クラスでLinux使ってるイケメンに聞いたところファイル名が原因とのこと…。修正したら一発でデプロイに成功しました。
10月
クラスの出し物のコンセプトが「冷たいクレープ」になったため、サイトのデザインを暖色系から寒色系に変更しました。
あとはメニュー表を追加しました。
土台は夏休み中に作れていたので直前で焦ることがなくてよかったです。
終了後
実は1年生の後輩も同じようにクレープを出店していて、そのサイトを作っていました。ちなみにクオリティは完敗です…。
次に開発する時はもっとフレームワークを使って機能的なサイトにしたいです。
加えて別の後輩が会計アプリを開発していたと知り、バックエンドが羨ましくなりました。ただ、「先輩はまずフロントエンドのお勉強を」と言われ冷静になりました。React頑張ります。
感想
今回の開発を通して様々な技術に触れることができました。
やはりプログラムを学ぶうえで大切なことは理論のインプットだけでなく実装を通してアウトプットをしていくことだと思います。
初めてのWeb開発でしたがとてもいい経験になりました。
今後はもっとハイクオリティな開発をしていけたらなと考えています。
ここまで読んでいただきありがとうございました。