はじめての道具箱 — データを整理する
— 中身を直しても、画面は作り直さない —
クイズなら、問題・正解・解説といった中身と、それを1問ずつ出して◯✕を選ばせる画面は、別々のファイルに分けて持てます。この記事では、分ける考え方と、分けると何が楽になるのかを、はじめての人向けに説明します。
この記事を読むとできること
想定している使い方
ブラウザで開くチャット型の AI（Gemini や ChatGPT など）にコードを書いてもらい、 それを自分の Mac に保存して動かす使い方です。この記事の操作や画面の説明は、すべて Mac を前提にしています。
読む目安：約12分 ・ 道具箱の項目 B3（データを整理する）・ 図4枚
画面に出す中身（データ）と、それを見せる画面を、別々のファイルに置く考え方です。画面は「中身のファイルを読み込んで並べる」だけにして、中身は画面の外で直します。
ここでいう「データ」は、問題文・正解・解説のような、画面に出す中身そのものです。「画面」は、その中身をブラウザ（Safari など、Web を見るアプリ）に並べて見せる、ボタンや見た目・動きの部分です。
AI にクイズを作ってもらうと、手軽なので、問題が画面のファイルの中に直接書き込まれた形になりやすいです。動きはしますが、1問直すたびに長いファイルから該当の場所を探して書き換えることになり、動きを決めている部分まで、うっかり消してしまう心配があります。
問題を別のファイルに出し、画面には「読み込んで並べる」ことだけをさせておけば、問題の直しは中身のファイルの中で済みます。直す場所が1つに決まるのが、この考え方の利点です。
図の見方：上の段は、問題が画面のファイルの中に直接書いてある場合です。1問直すだけでも画面のファイルを開いて探すことになり、動きを壊すおそれがあります。下の段は、画面のファイルには動きだけを書き、問題は中身のファイルに出した場合です。画面が中身を読み込みに来るので、直すのは中身のファイルだけで済みます。
たとえるなら、画面は本棚、中身は本です。本棚は「本を並べて手に取れるようにする」役目だけを持ち、どんな本が入るかは決めていません。本を入れ替えても本棚は作り直さずに済み、本棚を新しくしても本はそのまま使えます。
下の図の左が画面のファイル、右が中身のファイルです。画面のファイルには「問題を1問ずつ出す」「◯✕を選ばせる」「正解と解説を見せる」という動きだけが書かれ、問題そのものは1つも書かれていません。画面は開くときに、右の中身を読み込みに行きます。
※ 中身のファイルの形式は JSON（文字だけで書かれた、項目名つきのデータの形式）です。ファイル名の最後の「.json」がその印で、くわしくは A2 で説明しています。画面を書く言葉やファイルを扱う裏方との分担は A3 を見てください。
筆者の体験メモ
のちに（エージェント型コーディングに移ってから）作り直した筆者の法律の過去問クイズは、画面が1枚の HTML ファイル、問題が questions.json という別のファイルに分かれています。画面は開くたびに、このファイルを読み込んで問題を並べます。解いた記録（成績）は、問題とは別のファイルに保存しています。
中身を別のファイルに出すとき、もう1つ大事なのが、中身を決まった「欄」に分けて持つことです。クイズなら「問題」「正解」「解説」の3つの欄です。
1つの長い文章に「【問題1】…【解答 6】…」のような目印で混ぜておくと、画面は「どこからどこまでが問題か」を目印から推理して切り出すことになり、目印の書き方が少し揺れただけで（[問題]・【問題1】・【解答 6】のように）外れます。欄に分けておけば、画面は「問題の欄」「正解の欄」を名前で取り出すだけで済みます。
人が中身を直すときも、問題の欄だけを見れば済みます。
筆者の体験メモ
筆者は最初、問題文・解答・解説を Google ドキュメントにそのまま保存し、そこから文字を取り出して、正規表現（決まった目印から文字を切り出す書き方）で抜き出していました。[問題]・【問題1】・【解答 6】のような目印の揺れや改行のずれで切り出しが壊れ、「ドキュメントから問題を読み込めませんでした」という表示が何度も出ました。Google スプレッドシート（ブラウザで使える表計算）に替え、問題・解答・解説を別々の列に区切ったところ、読み込みエラーはなくなりました。のちに（エージェント型コーディングに移ってから）、スプレッドシートへの変換が遅かったので、Word 形式（.docx）で書き出したものを Mac の中で questions.json に変換する形に替えています。
問題を直したいときは、中身のファイルだけを書き換えます。見た目や動きを直したいときは、画面のファイルだけを書き換えます。どちらの場合も、もう一方にはさわりません。
解いた記録（成績）のように、あとから増えていく情報も、別のファイルに置いておけます。問題を入れ替えたり画面を作り直したりしても、記録のファイルそのものは書き換わりません。下の図の濃い箱が、その場面で書き換えるファイルです。
迷ったら「この情報は、画面を作り直しても残したいか」と考えます。残したいものは、画面のファイルの外に出しておきます。中に入れたままだと、画面を作り直したときに一緒に消えるおそれがあります。
筆者の体験メモ
のちに作り直した筆者のクイズでは、成績を問題とは別のファイル（quiz_stats.json）に保存しています。問題の中身を作り直しても、このファイルは書き換わりません。また、問題の中身のファイル（questions.json）が見つからないときは、画面が以前のスプレッドシートから読み込む作りにもしてあります。
起きていることから探してください。
| 起きていること | 原因 | どうするか |
|---|---|---|
| 中身を直したのに、画面に出てくる問題が変わらない | 画面が前に読み込んだ古い中身を使っている。または、直したファイルが画面の読む場所と別にある | ⌘ を押しながら R で再読み込みします。変わらなければ ⌘・Shift・R を同時に押し、それでも同じなら直したファイルが読み込み先のものかを確かめます |
| 画面を開いても問題が1問も出ない。「読み込み中」のまま止まる | 画面が中身のファイルを読めていない。置き場所や名前の食い違い、中身の書式の壊れ（かっこや引用符の欠けなど）が多い。ダブルクリックで開くと、ブラウザの安全のための制限で読めないこともある | 中身のファイルが、画面が呼ぶ名前で同じ場所にあるかを見ます。画面に出ている文字を AI に貼って相談します。ダブルクリックで開いているなら、localhost で開く形にしてもらいます（A4） |
| 公開した画面をスマホで開くと、ずっと読み込み中になる | 画面は開けても、中身のファイルが読み込めていない（通信の制限など） | 画面と中身を同じ場所から一緒に配る形にしてもらいます。分からないときは、出ている文字を AI に貼ります |
| 一部の問題だけ、正解の欄が空になる・解説に別の文字が混ざる | 中身の欄の区切りが、その問題だけ揃っていない（目印の書き方の揺れ） | おかしい問題を AI に見せ、欄の区切りがどこで揃っていないかを聞きます。同じ形の問題がほかにもないかも見てもらいます |
| 画面を作り直してもらったら、問題が全部消えた | 問題が画面のファイルの中に書かれていたので、新しい画面に置き換わったときに一緒になくなった | 作り直してもらう前に、画面のファイルのコピーを残します。そのうえで「問題を別のファイルに出して」と頼みます |
※ この道具箱は対話型コーディング（ブラウザの画面でチャットの AI と文章をやりとりして、コードを書いてもらうやり方）の前提です。 チャットの AI はあなたの Mac を見られないので、頼むのは「コードを書いて」、困ったら出た文字を貼って伝えます。 コツは、分けることと、中身の形を決めることを、1つずつ頼むことです。分けるときは、画面の見た目と動きは変えないと先に伝えます。 下の文は、そのまま写すためのものではなく、言い方の見本です。
① 中身を別のファイルに出してもらうとき
「いまのクイズは、問題が画面のファイルの中に直接書いてある。問題だけを別の JSON ファイル（questions.json）に出して、画面はそのファイルを読み込んで表示する形に作り直して。画面の見た目と動きは、いまのまま変えないで」
② 中身の欄を決めるとき
「問題は1問ごとに『分類』『問題』『正解』『解説』の4つの欄に分けて持たせて。画面は欄の名前で取り出す形にして。欄が足りない問題があれば、読み込むときに知らせて」
うまく動かないとき
「画面を開くと『読み込み中』のままで、問題が出ない。画面のファイルと questions.json は同じフォルダにある。画面に出ている文字は：（ここに貼る）。原因の候補を教えて」
※ ②のように「知らせて」と頼んでおくと、欄の抜けがあるときに、画面が黙って空欄を出す事態を防げます。
ちゃんと分かれているかは、中身のファイルを少し動かして、画面の反応を見ると分かります。試す前に、中身のファイルのコピーを別の名前で残しておくと安心です。
問題を1つ直す。中身のファイルの問題文を1文字だけ変えて保存し、画面を再読み込みします（⌘ を押しながら R）。画面の問題文が変わっていれば、画面は中身を読み込んでいます。
画面のファイルが変わっていないことを見る。Finder（Mac でファイルを見るアプリ）で画面のファイルを選び、⌘ を押しながら I を押すと情報が出ます。その「変更日」が、さっき直した時刻より前のままなら、画面にはさわっていません。
問題を1つ足す。中身のファイルに、同じ欄の形で問題を1つ足して保存し、画面を再読み込みします。問題が増えて出てくれば、画面を直さなくても中身だけで増やせる形になっています。うまくいかなければ、コピーに戻してから AI に相談します。