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