学習補助Webアプリ「Base」③：時間割を管理するデータ設計【高校生の開発メモ004】

Posted at 2026-07-06

紹介する作品は実際に公開しています。覗いて頂けると嬉しいです|д･)!!!!!

探究活動で開発したWebアプリ「Base」を題材に，設計や開発時の工夫を全5回で紹介します。

連絡共有のための時間割表示

学校では，

先生が今どの教室にいるのか
どのクラスを担当しているのか
空き時間なのか

といった情報を確認したい場面が多くあります。

そこでBaseには，時間割データを利用して教員の担当授業や教室をすぐ確認できる機能を実装しました。

しかし，学校の時間割には 学年・クラス・選択授業・教室 など様々な情報が含まれており，そのままでは扱いづらい構造です。

個別の時間割のままでは扱いが難しいため，一旦スプレッドシートに集計し，管理をすることにしました。縦軸が時間・横軸が教員名となっており，それぞれに教科名・使用教室・生徒属性を記入します。

このデータをJavaScriptへ変換すると，次のような構造になります。

// [曜日][時限][教科][教員]
// =[学年,[クラス],授業名,教室]
const ListTimeschedule=[
    ...
];

教科名や教員名は別配列で管理しています。

const ListSubject=[
    ...
];

const ListTeacher=[
    ...
];

データを分離することで，可読性が上がるだけでなく，同じ文字列を何度も保持する必要がなくなります。

スプレッドシートのデータは，人が編集しやすい反面，プログラムから利用するには少し扱いづらい構造です。そこで起動時に一度だけ走査し，利用しやすい形へ変換しています。

生成するデータは次の3つです。

1. 授業名一覧 (GroupName)
2. 授業ごとの担当教員 (GroupTeacher)
3. 授業・教員ごとの受講クラス (GroupClass)

イメージすると次のようになります。

GroupClass
 └ 学年
    └ 授業
       └ 教員
          └ クラス
             =0 対象外
             =1 選択授業
             =2 全員受講

授業には選択授業も含まれるため，同じ学年・クラスでも受講する授業が異なる場合があります。そこで，ユーザが登録した選択授業をもとに，教員一覧へ対応するビット列を生成しています。こちらの詳細については，学習補助Webアプリ「Base」②：制約から考えたユーザ名生成【高校生の開発メモ003】にて解説を行っています。

数学A　○
数学B　×
英語演習 ○
物理演習 ×

↓

1010

このビット列を利用することで， 担当教員の抽出・時間割表示・連絡共有 などをシンプルな判定で実現しています。

学校の時間割は複雑な授業展開など，管理が難しい箇所が多くあります。

今回は，
・スプレッドシートで編集しやすい形
・JavaScriptで処理しやすい形
を分けることで，保守性と実行速度の両立を目指しました。

入力しやすい形式と処理しやすい形式を分けるという考え方は，学校向けシステムだけでなく，他のWebアプリでも応用できる設計ではないでしょうか。

次回は，成績データのグラフ表示のために制作したグラデーション生成関数について紹介します。

前回 → ②：制約から考えたユーザ名生成

今回 → ③：時間割を管理するデータ設計

次回 → ④：グラフ表示のためのグラデーション生成関数
投稿次第，掲載します。