1.2 カレンダーを作る

本項では、Codex を使って、ブラウザ上で（JavaScriptを使って）動く万年カレンダーを作る。
日本語で1行の指示を入力するだけで、前月・翌月への移動、今日への復帰、土日の色分け、日本の祝日の赤文字表示まで実装できる。
Codex への指示の手順と、でき上がったファイルをブラウザで確認する方法をあわせて学ぶ。
なお、作成されるプログラムは、毎回必ずしも同じものができるのではない点に留意いただきたい。これは、すべての生成AIに当てはまる特性である。

カレンダーを作る（プロジェクトをはじめる）

「最初から始める」を選ぶ

Codexを起動し、左サイドバーの「プロジェクト」から「最初から始める」を選ぶ。プロジェクトは、一連の開発作業をまとめて管理する単位である。

プロジェクト名を入力して「保存する」

「プロジェクト名を入力」ダイアログが表示されたら、わかりやすい名前（ここでは「プログラム開発」）を入力して「保存する」をクリックする。プロジェクト名は後から変更できる。

チャット欄に指示を入力して送信する

プロジェクトが作成されると、チャット入力欄（プロンプト入力欄）が表示される。ここに日本語で下記の指示を入力する（右上の「コピー」ボタンをクリックすると、プロンプトの内容をクリップボードにコピーする；以下同様）。今回は次のようにプロンプトを入力して送信ボタンをクリックする。

プロンプト

JavaScriptでカレンダーを作って下さい。

Codexが指示を受け取り、作業を開始する。「作成中 calendar.html +89 -0」のように、作成・変更したファイルとその行数が表示される。数十秒ほどで作業が完了する。

「次で開く」メニューからリンクをコピーできる

「次で開く」ボタンの横にある矢印をクリックすると、「Codexブラウザ」と「リンクをコピー」のメニューが表示される。「リンクをコピー」を選ぶと、作成したファイルのURLをクリップボードにコピーできる。コピーしたURLを、ふだんお使いのブラウザ（Edge、Chrome、Firefoxなど何でもよい）の URL欄に貼り付けて開いてみよう。

作成されたファイル "calendar.html"は、プロジェクトに紐付いたローカルフォルダ（ドキュメント → プログラム開発）にも保存されている。

土日の色を変える

最初に作ったカレンダーは、土日も平日と同じ文字色で表示されている。これを、日曜日は赤、土曜日は青で表示するよう指示する。チャット欄に次のように入力して送信する。

プロンプト

土日の色を変えて下さい。日曜は赤、土曜は青にして下さい。

Codex は、先ほど保存した "calendar.html" を自動で書き換える。変更が完了したら、ブラウザで再読み込みボタンをクリックしてほしい。下図のように、日曜列が赤、土曜列が青で表示されるようになる。

このように、すでに作ったプログラムに対してもチャットで追加の指示を出すだけで機能を追加・変更できる。プログラムのコードを直接編集する必要はない。

祝日の色を変える

土日の色分けができたら、次は日本の祝日も赤文字で表示するよう指示する。

プロンプト

祝日を赤文字にして下さい。

Codex は指示を受け取り、「通信なしで開ける単体HTMLのままにしたいので、JavaScript内で日本の祝日を判定し、振替休日と国民の休日も赤文字扱いにします」と説明したうえで、祝日判定ロジックを "calendar.html" に追加する。外部のAPIや通信は一切使わず、すべてJavaScriptのコードだけで祝日を計算する実装になっている。
変更が完了したら、ブラウザで再読み込みボタンをクリックしてほしい。2026年（令和8年）5月を表示すると、下図のように、昭和の日（4/29）、憲法記念日（5/3）、みどりの日（5/4）、こどもの日（5/5）、振替休日（5/6）が赤文字で表示されていることを確認できる。

このように、Codex への日本語の指示だけで、プログラムに機能を積み重ねていくことができる。指示を出すたびに、どのように実装するかを Codex が説明しながら作業を進めるため、プログラムの中身を学びながら開発を進める上でも参考になる。

プログラムは目標達成のための手段

じつは、カレンダーをプログラムにするとき、祝日の実装は難易度が高い。
「秋分の日と敬老の日の微妙な関係」で紹介しているが、「春分の日」「秋分の日」は毎年定まった日ではないのだ。
内閣府のページに、来年前の国民の祝日がCSVファイルとして公開されているので、これを読み込めばいいのだが、今回のプログラムはセキュリティに配慮して外部アクセスしないようになっている。

このため、プログラムの中で「春分の日」「秋分の日」を計算している。厳密に言えば内閣府が官報で公示する「春分の日」「秋分の日」をズレる可能性はあるのだが、初学者が作ったプログラムとしては十分すぎる仕上がりと言えよう。

興味がある方は "calendar.html" の中を見ていただきたい。生成AIの性質上、かならずしも毎回同じコードが出力されるとは限らないが、だいたい500行くらいの量があるだろう。その3分の2をJavaScriptが示している（残りは画面表示のデザインなど）。
これをゼロから作ろうとすると、熟練したプログラマでも半日はかかるだろう。

プログラムは、なにかの課題（目的）があって（ここでの課題は「カレンダーを表示させたい」）、それを解決するための手段である。実装の難易度がどうあれ、必要な機能を実装できなければ目的を果たしたことにならない。そして、短時間で（低コストで）目的が果たされるのなら、それが大きく評価される。とくにビジネスにおいては。
そこで本講座では、手段であるプログラム（コード）の解説には立ち入らず、課題（目的）の解決に重点をおいて説明を進めていくことにする。
なお、作成されるプログラムは、毎回必ずしも同じものができるのではない点に留意いただきたい。これは、すべての生成AIに当てはまる特性である。