はじめに

この記事は、「長野高専アドベントカレンダー2024 1日目」の記事になります。
~~なんで主催者が1日目やらないかって...? テスト期間と丸被りで書いている余裕がなかったからです。~~ (物理の長い範囲に絶望しながら現実逃避をした結果1日目に書くことになりました)
そんな冗談はさておき、今回は文化祭の特設サイトを作る機会があったのでその際の技術スタックであったり、どんなことをしたのかを書いていこうと思います。
ちなみにですが、今年のトップページはこんな感じでした。¹

whoami

みなさんこんにちは! くりすたと申します。長野工業高等専門学校(通称: 長野高専)というところで学生をやっています。昨年の文化祭では、Vue.jsでクラス企画の特設ページを作ったり、ゲーム(Unity)側のスコアをウェブページに反映させるシステムをExpressで作っていました。²

本記事の内容は、長野工業高等専門学校に非公式で公開しているものです。
本記事に関する問い合わせはご遠慮ください。

きっかけ

今まで、工嶺祭(長野高専の文化祭)のサイトは先輩が一人で作っていたのですが、その先輩が今年卒業しまして、今年度は誰が担当するという話になりました。そこで私自身が所属している情報技術研究部という部活でその代わりを担う形で「デジタル部門」が発足、今年のWebサイトを委託されました。
情報技術研究部ってどんな部活？と感じるかもしれませんが、情報系が大好きな高専生が集まって技術を共有したり、「高専プログラミングコンテスト(通称: 高専プロコン)」というロボコンのプログラミングverみたいな大会に参加している部活です。

技術スタック

今回用いた技術スタックです。


言語	JavaScript / TypeScript
フレームワーク	React v18 / Next.js v14
スタイル、UI	Tailwind CSS / headless UI
アニメーション	Framer Motion
アイコン	Lucide Icon / MUI Icon
コード管理	Git / Github
デザイン管理	Storybook

今回はチームで開発することが多かったので、コード管理は欠かせませんでした。ただ、締め切り間近になると、ブランチ作成→プルリクを送るのが面倒になってきたため、mainに直接コミットしてコンフリクトを起こす³ということもやってました。(後悔してます)
本当は、今までやっていたVue等で作ろうかと思っていたのですが、新しい技術を学ぶチャンス！と思いReactを採用し、勉強しました。あとの後輩はもうReactやNext.jsを触っていたのでそのコードを見たりもしました。

サイトマップ

サイトマップはこんな感じです。ツリー形式になります。

トップページ (/)
- 交通アクセスページ (/access)
- クラス企画ページ (/class-events)
- 学科企画ページ (/department-events)
- タイムテーブルページ (/timetable)
- ランタンイベントページ (/local-events)
- 屋台ページ(/stall-events)

といった感じです。

担当箇所

ここから先は技術メインの話になります。私が担当した場所は、タイムテーブルの設計・デザインでした。といっても、タイムテーブルにどんなを情報表示したいかによって、実装する内容も変わってきます。今回は、シンプルに「各イベントの情報を時間軸で表示する」ようにしました。
時間軸で表示するといっても、どうやって実装しようかということで一通り探してみたのですが見つかりません。そこで、様々な文化祭のサイトのタイムテーブルを探したり、driddleのようなサイトをいくつか探しました。
そこで見つけたのが、「松ヶ崎祭」さんのサイトでした。見たところ、時間軸と横軸をflex要素で横に並べ、absolute要素で、上にデータを配置しているようでした。
これが簡単な予感がしたのでこれを採用することにしました。

Part1

まずは試作品を作成してみます。

いい感じですね。この時点では、親となるindex.tsxにTimeTableEventsを継承した変数にデータを直接ぶっこむという脳筋設計です。(この後ちゃんとtypes.tsとして専用のファイルを作りました)

Timetable/index.tsx

export interface TimeTableEvents {
    title: string;
    description: string;
    start: {
        hour: number;
        minute: number;
    };
    end: {
        hour: number;
        minute: number;
    };
}

export interface TimeTableEventsByVenue {
    id: number;
    name: string;
    events: TimeTableEvents[];
}

export interface TimeTableEventsByDate {
    id: number;
    name: string;
    eventsByVenue: TimeTableEventsByVenue[];
}

TimeTableEventsByDate ← TimeTableEventsByVenue ← TimeTableEvents という感じになっています。

Part1-1

カード部分のレンダリング、レスポンシブ対応についてここで軽く触れておきます。
カードの位置に関しては、開始時間と各時間軸の間隔から動的に算出し、表示しています。後半になると、レスポンシブ対応でスマホの時とパソコンの時で高さが変更されるということがあったため、useEffectで画面幅を監視させ、変更された瞬間にモバイル用・パソコン用の高さを切り替えるようにしました。
画面幅については次のコードで判定を行い、booleanで返すようにしています。

Timetable/index.tsx

  const [isSmallScreen, setIsSmallScreen] = useState(false);

  // 画面幅に基づいて、md以下かどうかを判定
  useEffect(() => {
    const checkScreenSize = () => {
      setIsSmallScreen(window.innerWidth < 768);
    };

    checkScreenSize();
    window.addEventListener("resize", checkScreenSize);

    return () => window.removeEventListener("resize", checkScreenSize);
  }, []);

Part2

試作品が完成したので、ここに複数のイベントを表示できるようにします。

リストボックスでの日付切替も問題なく動作します。

Part3

メインページのレイアウト・スタイルが確定したのでそれに合わせて変更していきます。
今回のテーマは、「Infinite」。ポスターイメージも宇宙をイメージして作られているのでそれに合うようにカードに半透明をいれたりしました。

Part4

次に、現在時刻を反映したバーを表示させます。
バーの設計が一番大変でした。時間軸は、9:00～17:30までで、時間についてはday.jsから現在時刻を取得、開始時間と比較してバーの高さを算出するため、この範囲を超えると、バーがとんでもない位置に行ってしまったりします。そのため、現在時刻で条件分けをする必要があるのですが最終的にはこうなりました。

Timetable/index.tsx

      {Number(dayHour) >= 9 &&
        !(
          Number(dayHour) > 17 ||
          (Number(dayHour) == 17 && Number(dayMinute) > 30)
        ) && (
          <div
            className='relative border border-red-500 flex-grow w-full'
            style={{ top: `${startTop}rem` }}>
            <div className='arrow' />
            <div className='arrow mirror' />
          </div>
        )}

      {Number(dayHour) >= 0 && Number(dayHour) < 9 && (
        <div
          className='relative border border-red-500 flex-grow w-full'
          style={{ top: `${isSmallScreen ? 2.7 : 2.8}rem` }}>
          <div className='arrow' />
          <div className='arrow mirror' />
        </div>
      )}

      {(Number(dayHour) > 17 ||
        (Number(dayHour) == 17 && Number(dayMinute) > 30)) &&
        Number(dayHour) <= 23 &&
        Number(dayMinute) <= 59 && (
          <div
            className='relative border border-red-500 flex-grow w-full'
            style={{ top: `${isSmallScreen ? 125.95 : 130.3}rem` }}>
            <div className='arrow' />
            <div className='arrow mirror' />
          </div>
        )}

0時～8時59分までは、9:00の位置で固定しておきます。9:00～17:30は計算した高さをそのまま用います。そして、17:30以降は、17:30の位置で固定させるというものです。
こうして、バーの処理部分が完成です。

Part5

今までの画像を見てお気づきの方もいると思いますが、項目が多い場合は横スクロールになります。が、Part4にある画像をパソコンで見るとしましょう。横スクロールが難しいことに気づくと思います。そこで、急遽ボタンで横スクロールを実装することにしました。
ボタン部分は次のように実装しています。

Timetable/index.tsx

const timetablesRef = useRef<HTMLDivElement | null>(null);

const scrollBefore = () => {
    const element = timetablesRef.current;
    if (element) {
      const scrollAmount = isSmallScreen ? 460 : 420;
      const newPosition = Math.max(element.scrollLeft - scrollAmount, 0);
      element.scrollTo({
        left: newPosition,
        behavior: "smooth",
      });
      setScrollPosition(newPosition);
    }
};

const scrollAfter = () => {
    const element = timetablesRef.current;
    if (element) {
      const scrollAmount = isSmallScreen ? 460 : 420;
      const newPosition = Math.min(
        element.scrollLeft + scrollAmount,
        maxScrollPosition
      );
      element.scrollTo({
        left: newPosition,
        behavior: "smooth",
      });
      setScrollPosition(newPosition);
    }
};
...
return(
    <div className='flex flex-row-reverse gap-4 mb-4'>
        <button
          className='flex justify-center items-center size-12 rounded-full bg-gray-500/40 disabled:bg-gray-500/10 disabled:cursor-not-allowed'
          onClick={scrollAfter}
          disabled={scrollPosition >= maxScrollPosition}>
          <ChevronRight className='text-white' />
        </button>
        <button
          className='flex justify-center items-center size-12 rounded-full bg-gray-500/40 disabled:bg-gray-500/10 disabled:cursor-not-allowed'
          onClick={scrollBefore}
          disabled={scrollPosition <= 0}>
          <ChevronLeft className='text-white' />
        </button>
    </div>
);

完成したものがこちらです。

Part6

ここまで、様々な実装をしてきましたが、まだ足りません。現在、どの企画が行われているかどうかを確認する手段はありません。そこで、開催中のイベントを表示する機能も実装しました。
コード量が長いので、Gistにしました。処理内容としては、現在の日付と時間を取得し、現在開催中のイベントとその次のイベントを取得します。開催中のイベントがあればそれを、なければ準備中として次のイベントが呼び出されます。また、時間外のものについては、終了という扱いにしました。

開催中:

終了:

開発の流れ

夏休み前(~8月)

高専の夏休みは、8月からです。テストも終わったしようやくプロジェクトが始まる...!と言いたいところですが、ポスターデータや各種データが届かずあまり活動できませんでした。ただ、Reactのリファレンスは結構読みました。Reactをやる前まではVueをやっていたのですが、書き方が少し変わっただけで自然に納得できました。

夏休み中

2週間ほどのインターンに行っていたため、正味ここも何もできていません。あと、まだデータが届きませんでした。多分誰かが「何やってんだお前～～！」と叫ぶことでしょう。

9月

ようやくもろもろのデータが届き、デザインも固まってきました。といっても、デザインやframer motionによるアニメーションは後輩が作ったものなので感謝しかないです。

10月

多忙の日々を送りながらひたすら書いていました。ちなみにですが、プログラムのバグを授業中に見つけて授業中にその訂正をしたりしていました。~~(ばれなきゃ犯罪じゃないんですよ...)~~
タイムテーブルのほとんどはここで実装しました。ただ、完全にわからないところはGithub Copilot君にも頼りながら書きました。

🥚こだわりポイントなど

ローディング編

最初アクセスする際に、ローディングアニメーションが出ていますが、これはテーマが「Infinite」に沿って無限(∞)の形をしたアニメーションを入れたいということで実装されました。

実装は、こちらのライブラリを用いました。

うーんどこが変なのかなぁ

タイムテーブルのページをデベロッパーツールで開いてもらうとわかるのですが、おわかりいただけましたか...?

テストコードが残ったままですね！時間や日付等のログが毎秒表示されます。これ、何気にuseEffectで2回発火させずに1回発火するように工夫しています。軽量化を思ってそうしたのですが、多分あまり意味がないような気もします。
ここを見るだけでもいかに脳筋かがわかると思います。(というかこれ以外の方法を私は存じ上げません)

コミットの数

総コミット数は... 138 Commit でした！
チーム開発だったのでまぁこのぐらいはどうしても行くと思っていましたが、ちょっとした修正のたびにプルリクないしコミットを入れていたので個人的には多かったような気もします。

感想

率直な感想としては、なんとかものにできてほっとしました。ただ、文化祭一週間前になっても公開できず、いろんな方から公開が遅いということを聞いたので、来年はなんとかしたいです。
タイムテーブルの部分は、個人的にはいろいろ実装できて満足でした。useEffectを勉強するいい機会になりました。

長くなりましたが、ここら辺でおしまいにします！Happy Coding!

同じドメインを使いまわす関係上、来年の夏ごろには新しいものになり、見れなくなります。 ↩
https://qiita.com/Crysta1221/items/627ae9b51f662b52946b ↩
最新のコミットを反映しないと起こる、いわば重複が発生している状況です。 ↩