学籍番号をランダムに

学籍番号をランダムに

(このページは台本を兼ねています)

概要

シス研において一年生主体となり自己紹介ハッカソンを開催することにしました。
2週間程度で自己紹介サイトをつくるというものです。

そこでの発表順を決めるためにランダムに学籍番号を表示してくれるサイトを作りました。

サイト

台本

ポイント

第一にシンプルにすることを意識しました。
ボタンを極限まで減らし、操作は スクロール と 画面のクリック のみです。

自己紹介サイトに操作ってなんだ…

実際のページ

さっそく実際のサイトをお見せします。
実際のページはこのようになっています。=> サイト

ランダムに - 専攻はコンピューターシステム専攻です - フロントエンドを主体としています - プログラミングが好きです etc.

自己紹介はこんな感じで、このサイト実は学籍番号をランダムに表示してくれるサイトです。
右側にスクロールすると 学籍番号 を追加/削除できます。

チェックが入っているものはすでに選ばれたものを意味しています。

リセットするには下にスクロールします。
そうするとすべてのチェックが外れ、はじめから選ばれます。

さらにデータはローカルストレージというものに保存されており、画面をリロードしても復元されるようになっています

結果

はじめの目標となる シンプルさ と 操作の簡単さ を達成できました。

あらかじめ必要な機能を絞り、完成後に機能を追加するということがなかったお陰でコードが複雑になることを防げました。
また、コーディング時には Github Copilot という拡張機能を使い、AIに頼りながら書くことで効率的にコーディングできました。

今後

今後は学籍番号を k23075 - k23085 のように範囲追加できるようにしたいです。