【2026年01月版】完全スクショ解説｜#10 小学生でもできる！Google Apps Script（GAS）で日本地図の県名4択クイズWebアプリを作ろう🤖

💡この記事は
「小学生でもできる」シリーズの第10弾です。
（プログラミング初心者の大人にもピッタリのシリーズです。）
GoogleAppsScript（GAS）で「ブラウザで動く 日本地図の県名4択クイズ（Webアプリ）」が作れるようになる、ちょっと“プロっぽい”体験をしてみましょう！

自分で4択クイズのアプリを作るから、楽しみながら都道府県を覚えることができます！

🌟 はじめに — 「プログラミングって難しそう…」と思っているあなたへ

プログラミングを始めたいのに、
「何からやればいいの？」
「専門書を読んでも全然わからない…」
「設定でつまずいて先に進めない…」

そんな経験、ありませんか？
実は、これは 昔の私自身がまさにそうだった んです。

専門書には難しい言葉ばかり並び、
肝心の「どこを押す？」「画面はどうなる？」が書いていない。
聞ける人もいない。
そして気づけば、“始める前”に挫折していました。

でも今は、AIでコードを調べたり、質問したりできますよね。
しかし——

🔸 そもそも画面のどこを開くのか？
🔸 どの設定が必要なのか？
🔸 何をどこに入力するのか？

こういった“最初の1歩”がわからないと、
AIすらうまく使いこなせません。

だからこそこのnoteシリーズは、
AIや専門書を使う前に読む「はじめの一冊」 として作りました。

🎒 このnoteシリーズのテーマは「理解よりも、できた！」です

小学生でも、中学生でも、大人でも、
とにかく 自分の手で「動いた！」「できた！」を体験することが最優先。

そのために私は、
可能なかぎり 画面を“完全スクショ”で解説 しています。

✔ どのボタンを押す？
✔ どこに入力する？
✔ 実行するとどう見える？

すべてが一枚ずつわかるように作っています。

👨‍👩‍👧 こんな人に向けて書いています

• 小学生・中学生・高校生

• 保護者の方

• プログラミング初心者

• 過去に挫折した人

• 「何から手をつければいいのか分からない…」という方

• AIで調べても、前提知識がなくてつまずいた人

🚀 まずは“成功体験”を一緒に作りましょう

プログラミングは、できることがわかった瞬間に一気に楽しくなる学びです。
このnoteは、あなたの 「はじめての成功体験」 を作り、
次のステップへワクワク進めるように設計しています。

さあ、それではいっしょに、
かんたんで楽しい“最初の一歩”を踏み出しましょう。

こんにちは！
このnoteは、「小学生（しょうがくせい）でもできる」「プログラミング初心者（しょしんしゃ）でも迷（まよ）わない」を大事（だいじ）にした、完全（かんぜん）スクショ解説（かいせつ）シリーズです。

今回（こんかい）作るのは、ただの練習（れんしゅう）ではありません。
日本地図（にほんちず）を見ながら、都道府県（とどうふけん）の名前を当てる「4択（よんたく）クイズ」のWebアプリです。

このnoteでねらっている体験（たいけん）は、つぎの相乗効果（そうじょうこうか）です。

「自分でWebアプリを作れるようになる」
「日本地図から全国（ぜんこく）都道府県の県名（けんめい）がわかるようになる」
「自分で作ったWebアプリだから、勉強（べんきょう）へのやる気が上がる」
「4択だから、最初（さいしょ）のハードルが低（ひく）くて続（つづ）けやすい」

そして、このシリーズの合言葉（あいことば）はずっと同じです。

「理解（りかい）よりも、できた」

最初はぜんぶ分からなくてOK。
まずは、あなたの手で動（うご）かして「できた」を1個（こ）増（ふ）やしましょう。

この回（かい）は、シリーズの中でも少しだけ「プロっぽい」体験（たいけん）です。
でも大丈夫（だいじょうぶ）。まずはコピペして動（うご）かすだけでOKです。

この記事でできるようになること

この記事を読み終（お）わったころには、こうなります。
GoogleAppsScript（GAS）でWebアプリを動かす流（なが）れが分かる。
GASの画面でHTMLファイルを追加（ついか）して保存（ほぞん）できる。
デプロイ（公開（こうかい））してURLで開けるようにできる。
日本地図（にほんちず）を使った4択クイズが動く。
よくある失敗（しっぱい）ポイントを避（さ）けられる。

この記事どおりに進めて、スクショを見ながら同じ画面になればOKです。

まず最初に知っておく言葉（ことば）

むずかしく聞こえる言葉も、イメージだけ分かれば大丈夫です。

GoogleAppsScript（GAS）

Googleが用意（ようい）した、ブラウザで動くプログラミング環境（かんきょう）です。
Gmailやスプレッドシートなど、Googleのサービスとつながりやすいです。

Webアプリ

インターネットのブラウザで開いて使うアプリです。
URLを開くと動きます。

HTML（えいちてぃーえむえる）

Webページの骨組み（ほねぐみ）です。
文字やボタンを置くための言葉です。

JavaScript（じゃばすくりぷと）

Webページを動かすための言葉です。
ボタンを押したら動く、時間を数える、などができます。

デプロイ

作ったアプリを「使える状態（じょうたい）」にして、URLを出す作業です。
公開（こうかい）と呼ぶこともあります。

完成（かんせい）イメージ

今回のクイズは、こんな流れです。

1 日本地図が表示（ひょうじ）される。
2 「はじめる」を押す。
3 どこかの都道府県が強調表示（きょうちょうひょうじ）される。
4 4択ボタンから正しい県名を選ぶ。
5 正解（せいかい）なら、つぎの問題へ進む。

地図を使い、4択クイズなので、楽しみながら学べます。
そして、作った本人（ほんにん）が一番（いちばん）うれしい内容です。

全体（ぜんたい）のしくみ

今回のWebアプリは、ファイルが2つです。

コード.gs

Webアプリの入口（いりぐち）です。
アクセスされたときに、どのHTMLを返すかを決めます。

Index.html

画面（がめん）そのものです。
地図を表示して、4択のクイズを動かします。

ここで大事なのは、名前です。
コード.gsで指定したHTMLの名前と、実際に作るHTMLファイルの名前が同じでないと動きません。

Index という名前でそろえる
これが最重要（さいじゅうよう）です。

事前（じぜん）に用意（ようい）するもの

必要（ひつよう）なもの

Googleアカウント（Gmailが使えるアカウント）。
パソコン、またはChromebook（タブレットでも可（か）ですが、パソコンが楽です）。
Chromeなどのブラウザ。
ネットにつながる環境。

あると安心なもの

マウス（地図を指（さ）しやすい）。
親御（おやご）さんの見守（みまも）り（最初だけでも）。

作り方

1 Googleスプレッドシートを開く

2 メニューの「拡張機能」→「Apps Script」を押す

3 GASエディタが開く