第24回未来祭の公式Webサイトを作成しました

 

2024/10/28

お久しぶりです、uiroです

みなさん未来祭お疲れ様でした!
初めて参加しましたが、とても楽しかったです~

image

今回、未来祭実行委員として、未来祭のWebサイトの制作をさせていただきました

未来祭 2024

その時のことを少しだけ紹介できればと思います

主な技術スタックは以下の通りです

  • Astro
  • Swup (軽量化、アニメーション)
  • GSAP (アニメーション)
  • TailwindCSS

今回は、静的サイトに適していることや、学習コストが低く引き継ぎが簡単そう(これは主観)なAstroを採用してみました

詳しくはAstroの 公式サイト を見ていただければ分かると思いますが、まとめると軽くてモダンなフロント用フレームワークという感じです。

コーポレートサイトや個人ブログなどにとても適していると思います。

React的な配列の展開や、条件分岐なんかもできます。

盛大に技術スタック選びを間違えました

本来は完全に静的なサイトを作るつもりだったので、最近アツそうなAstroを採用してみました

しかし、サークルをシャッフルしたり、マップ上に表示したりする機能を追加していく段階で、生のJavaScriptでDOMを触る羽目になってしまいました

こういうことが想定できる場合は、大人しくVueやReactあたりを使うべきでしたね、反省…


あと、SSGであってはいけなかった!!(大声)

スケジュールやシャッフルなど、コンテンツを動的に切り替える操作は、Astroでは本当に静的に書き出されます

今回、スケジュールに合わせて今やっているステージを表示する機能がついていたのですが、これの操作はなんと手動でした (たまに変更が遅れたかもしれません、申し訳ないです)

時間に合わせて自動で切り替わるのに、それのビルドを手動でしなければならないなんてヤバい話すぎました、これは次に活かしたいです

技術選定は入念に、今後の教訓にしたいと思います


以上で軽いまとめを終わります

改めて、みなさま本当にお疲れ様でした~!!

このページの情報は以上です