この記事は HTML + JavaScript で子ども向け宿題計画ツールを作った記録です。汎用性や知見はありません。宿題がまとまって出るという方はご判断でご利用ください。
経緯
小学生の子どもの宿題が、従来は日単位で出ていたのが、10 日分くらい一気に出るようになりました (先生の多忙化かもしれません)。そうなると計画が必要なので、一緒に計画を立てていましたが、子どもがもっと一人で取り組めるように計画ツールを作りました。
- ちなみに当初は Google スプレッドシートを使っていたのですが、入力しづらく、新しい宿題が出ると大人が入力を手伝う必要があったので HTML + JavaScript 化しました。
作成物
以下が作成した宿題計画ツールです。計画は localStorage に保存します。
https://cookiebox26.github.io/games/misc/keikaku.html
ソースは以下 (1ファイル) です。
工夫した点
子どもが一人でもミスしないよう、以下のような点を工夫しました (3. については単に HTML + JavaScript への移植にあたっての注意点ですが)。
- 通常、小学校の宿題は提出日にはもう取り組めません。「提出日を勘定に入れてしまっていた」という悲劇を防ぐため、提出日には計画を入れられない UI にしました。
- 後から「やはり開始日 (提出日) が間違っていた」となって変更すると、既に立てた計画が期間外になって予定表から消える可能性があります。予定表から消えたページをやり忘れる悲劇を防ぐため、開始/提出日変更があった場合は強制的に計画を期間内に変更するようにしました (開始日前なら開始日に変更、提出日以降なら提出日前日に変更)。
- このツールは宿題範囲の各ページについて localStorage に「宿題 1 の 10 ページ： 2025-10-28」といった計画を保存しますが、最新の宿題範囲のみを保存するようにし、localStorage が肥大化していくということがないようにしました。
挙動の説明
このツールは以下の挙動をします。(2.)(3.) は工夫した点に対応しています。
ページロード時
- localStorage があればロードします。
- 開始日・提出日をロードします。
- 宿題データをロードします。これによって対象ページが定まります。
- 対象ページの計画日データをロードします。
- 計画テーブルを作成します。
- 開始日・提出日が不整合なら作成しません (その旨を表示)。
- 整合的な場合、各対象ページの計画日を表示します。
- 予定テーブルを作成します。
- 開始日・提出日が不整合なら作成しません (その旨を表示)。
宿題データ変更時
- 計画テーブルを作成します。
- 開始日・提出日が不整合なら作成しません (その旨を表示)。
- 整合的な場合、各対象ページに既に計画日があればそれを表示します。
ただし既存の計画日が期間外であったら強制的に期間内にします (2.)。
その対象ページにまだ計画日がなければ開始日をセットして表示します。
- 予定テーブルを作成します。
- 開始日・提出日が不整合なら作成しません (その旨を表示)。
- localStorage をダンプします。
- 開始日・提出日をダンプします。
- 宿題データをダンプします。
- 最新の宿題データに基づく対象ページの計画日データのみダンプします (3.)。
計画日データ変更時
- 予定テーブルを作成します。
- 開始日・提出日が不整合なら作成しません (その旨を表示)。
- localStorage をダンプします。
- 開始日・提出日をダンプします。
- 宿題データをダンプします。
- 最新の宿題データに基づく対象ページの計画日データのみダンプします (3.)。
[補足] Safari での localStorage の寿命について
調べると Safari の localStorage は 7 日で消えるという情報がありました。実際に 7 日目に計画が消えるかは実験しておらずわかっていません。iPhone の Safari で 3 日後にアクセスした場合は計画は問題なく保存されていました。このツールの目的上、1, 2 日おきには予定表をみて宿題の進捗を確認してください。