初めてWebサイトを作った時にやったこと
概要
Wathematica adventalender2025の9日目を担当しますとりさんです。本記事ではこのイベント用のホームページをWeb開発経験がゼロの状態からどのような技術を選んだのか、またどのような機能を捨てて作っていったのかを紹介できたらなと思っています。
作ったもの
毎日記事が解禁されるようなUIとWathematicaのサーバーに入っているユーザーだけが記事を投稿できるような認証の機能を兼ね備えたアドベントカレンダーのポータルサイトを作りました。
↑こんな感じのUI
ここから飛べるのでぜひ見ていってください
使ったライブラリや技術
サイトを作成するにあたって以下の技術を用いました。
- Next.js
フロントエンドとバックエンドをまとめて開発できることに魅力を感じて選びました - Tailwind CSS
create-next-appに従うままに導入しました。これがなかったらもっと時間が掛かってただろうと思うと...。 - NextAuth
Discord認証を実装しようと思った時に調べたら出てきたライブラリです。OAuth認証がお手軽にできるえらいやつ - Prisma
Node.jsからDBを触れるORMマッパーです。PythonでいうところのSQLAlchemy的なやつ - file-type
fileの種類を調べられるライブラリー。入力されたファイルが画像ファイルかどうかを判定するのに使いました。 - zod
入力のバリデーションのために導入しました - Docker
開発サーバーや開発用DBのために使いました。 - PostgreSQL
ローカル開発用DBでつかいました - Vercel
Webサイトをボタンポチポチしてるだけでデプロイできるすごいホスティングサービス。 - VercelBlob
投稿者のアイコン画像の保存用に使いました。ライブラリから簡単に使えてとても便利。 - Neon
記事のデータを保存するために使いました。Vercelから使うと環境変数などを勝手に設定してくれて最高でした。 - Google Analytics
どれくらいのPVがあるのか、どこから流入するのかを調べておいたら今後のためになるかなと思って導入しました。
開発を始める前の自分のレベル感
プログラミング自体は少しできる(Atcoder茶色くらい)、HTMLはタグの名前が覚えられないけど読めはする(CSSは...)という状況でした。
デザイン
とりあえずデザインとしてどんなふうな形にすればいいのかを具体的にするために、2023年や2024年のサイトを参考にしたりAIに仮でサイトの雛形を作ってもらいました。そのあとFigmaでささっと書いてイメージをより具体的なものにしました。そのあとはCopilot君やこの記事を参考にtailwindを勉強しながらダラダラと進めていきました。
↑Figmaで作ったデザインの案
データベースとOAuth
バックエンド周りを実装するにあたって、まずデータベースから記事のリストを取得するAPIとAPIを叩いて記事のリストをレンダリングするコンポーネントを実装しました。
次に、この記事を参考にDiscord認証機能を実装しました。この機能を実装したことで、サーバー側でセッションを取得して投稿権限がある場合のみ入稿フォームを表示して、サークル外の人が投稿ができないようになりました。
そのあと、アイコンを投稿できる機能や、カレンダーにアイコンを表示できるようにフロントエンド側のコンポーネントの修正を行いました。
こんな感じで増築を繰り返してしまったせいで実装がかなり汚くなってしまったので、どこかのタイミングで書き直したいです。
捨てた機能
多くても30人ほどしか投稿しないため、更新や削除などの作業は自分がDBを直接操作する運用にしました。このような方式にしたおかげで、セッション情報で投稿権限の確認だけするため、データベース側でユーザーデータを持つ必要がない実装になり手間も省けたので良い選択をしたと思っています。またPDFを直接投稿できる機能も実装の手間の割に、オブジェクトストレージの容量を逼迫するなどのデメリットを上回るほどのメリットがないと感じたため省きました。
デプロイ後
デプロイして悦に浸っていたのですが、chromeのlighthouseを実行したところサイトの読み込みがとてつもなく遅いことに気づき急いで読み込みを早くするための修正を始めました。例えば、
-
<image>タグをNext/Imageの<Image>タグに差し替える。 - カレンダーのアイコンの取得とレンダリングをサーバー側で行う実装に変更する。
といった修正をしました。
記事のリストに関してはまだAPIから取得する実装になっているのですが、これもいずれサーバー側でリストを取得してレンダリングする実装に差し替えようと思っています。
このほかにも、Vercelの設定が間違っていてログイン不要のところでもログインが必須になっていたり、取得した時間のタイムゾーンがアメリカ時間で予定していた時間に記事が公開されないなどの不具合が出ては修正を繰り返して今に至ります。
終わりに
拙い記事ですが最後まで読んでくれてありがとうございました。この記事が誰かの参考になれば幸いです。
ソースコードのレポジトリはアドカレが終わった頃にPublicにしようと思っています。
ソースコード公開しました。
参考にした記事
Discussion