Code.gsとindex.htmlの役割を知る
この節で学ぶこと
前の節では、Googleスプレッドシートを作成し、そこからGoogle Apps Scriptを開きました。
この節では、今回使う2つのファイル、Code.gs と index.html の役割を学びます。
今回のアプリは、主にこの2つのファイルで動きます。
| ファイル名 | 役割 |
|---|---|
Code.gs | 裏側の処理を書くファイル |
index.html | 画面に見える部分を書くファイル |
初心者の方は、まず次のように覚えてください。
Code.gs
→ データを保存したり、計算したりする裏側
index.html
→ 入力フォームやボタンなど、画面に見える部分
この2つの役割が分かると、これからコピペする長いコードも少し見やすくなります。
まず全体のイメージをつかむ
今回のアプリでは、来場者が受付フォームに入力します。
その画面を作っているのが index.html です。
そして、入力された内容を受け取り、スプレッドシートに保存しているのが Code.gs です。
流れで見ると、次のようになります。
来場者がフォームに入力する
↓
index.html が入力内容を集める
↓
Code.gs にデータを送る
↓
Code.gs が入力内容を確認する
↓
Code.gs がスプレッドシートに保存する
↓
Code.gs が受付番号を作る
↓
index.html が受付番号を画面に表示する
つまり、index.html と Code.gs は別々に見えますが、実際には協力して動いています。
1. Code.gsとは何か
Code.gs は、Google Apps Scriptで使うプログラムを書くファイルです。
今回の授業では、Code.gs がアプリの裏側の処理を担当します。
たとえば、次のような処理です。
| 処理 | 内容 |
|---|---|
| 画面を表示する | Webアプリにアクセスされた時に index.html を表示する |
| 初期設定をする | 受付データ用シートや地域マスタを作る |
| 入力内容を確認する | 氏名カナや郵便番号が正しいか確認する |
| データを保存する | 入力された内容をスプレッドシートに保存する |
| 受付番号を作る | FES-日付-番号 の受付番号を作る |
| 管理画面の集計を作る | 来場者数や区分別人数を数える |
| パスコードを確認する | 管理画面に入れる人か確認する |
Code.gsは「受付スタッフの裏側の仕事」
たとえば、学校祭の受付を人間が行う場合を考えます。
受付スタッフは、次のようなことをします。
名前を確認する
受付表に記録する
受付番号を渡す
来場者数を数える
管理者に状況を伝える
この仕事を、プログラムとして担当するのが Code.gs です。
つまり、Code.gs は、見えないところで受付を処理するスタッフのような役割です。
2. index.htmlとは何か
index.html は、来場者や管理者が実際に見る画面を作るファイルです。
今回のアプリでは、index.html が次の画面を担当します。
| 画面 | 内容 |
|---|---|
| 受付フォーム | 来場者が入力する画面 |
| エラー表示 | 入力ミスがある時に表示するメッセージ |
| 受付完了画面 | 受付番号を表示する画面 |
| 管理画面 | 来場状況を確認する画面 |
| グラフ表示 | 来場者数や区分別人数を見える化する部分 |
| ボタン | 受付する、続けて受付する、管理画面を見るなど |
index.htmlは「受付カウンター」
学校祭の受付で考えると、来場者が直接見るのは受付カウンターです。
そこには、受付用紙や案内表示、受付番号の表示があります。
この見える部分を作るのが index.html です。
受付フォーム
ボタン
説明文
入力欄
完了画面
管理画面
これらはすべて、index.html の中に書かれています。
3. 2つのファイルの関係
Code.gs と index.html は、次のように役割が違います。
| 比較 | Code.gs | index.html |
|---|---|---|
| 役割 | 裏側の処理 | 画面の表示 |
| 見えるか | 普段は見えない | ユーザーに見える |
| 主な仕事 | 保存、チェック、集計 | 入力欄、ボタン、見た目 |
| たとえ | 受付スタッフの裏作業 | 受付カウンター |
| 今回の例 | 受付番号を作る | 受付番号を表示する |
たとえで理解する
飲食店で考えると分かりやすいです。
| 飲食店のたとえ | アプリのファイル |
|---|---|
| お客さんが見るメニュー表 | index.html |
| 注文を受ける画面 | index.html |
| 厨房で料理を作る処理 | Code.gs |
| 会計を記録する処理 | Code.gs |
| 売上を集計する処理 | Code.gs |
お客さんが見ている部分と、裏で処理する部分は別です。
アプリも同じです。
4. 今回のCode.gsで出てくる主な関数
Code.gs には、たくさんの関数が入っています。
関数とは、ひとまとまりの処理に名前をつけたものです。
今すぐ全部覚える必要はありません。
まずは、名前と役割だけ見ておきます。
| 関数名 | 役割 |
|---|---|
doGet(e) | Webアプリにアクセスされた時に画面を表示する |
setupApp() | 初期設定をまとめて行う |
setupSheet() | 受付データ用シートを作る |
setupAreaMasterSheet() | 地域マスタシートを作る |
setAdminPasscode() | 管理者パスコードを設定する |
submitReception(formData) | フォームの受付データを保存する |
validateReceptionData(formData) | 入力内容が正しいか確認する |
createReceptionNumber(rowNumber) | 受付番号を作る |
getDashboardData() | 管理画面用の集計データを作る |
getDashboardDataSecure(passcode) | パスコードを確認して集計データを返す |
初心者が最初に見るべき関数
最初に全部を見ると大変なので、まずはこの3つだけ意識します。
| 関数名 | まず覚えること |
|---|---|
doGet(e) | 画面を表示する入口 |
setupApp() | 最初に1回実行する初期設定 |
submitReception(formData) | フォーム送信時にデータを保存する処理 |
この3つが分かると、アプリの大きな流れが見えてきます。
5. 今回のindex.htmlで出てくる主な部分
index.html は長いですが、大きく分けると次の4つでできています。
| 部分 | 内容 |
|---|---|
| HTML | 入力欄やボタンなど、画面の骨組み |
| CSS | 色、余白、文字サイズ、レイアウトなどの見た目 |
| JavaScript | ボタンを押した時の動き |
| GASとの連携 | google.script.run で Code.gs の関数を呼び出す |
HTMLとは
HTMLは、画面の部品を作るものです。
たとえば、今回のコードには次のような部品があります。
<h1>学校祭デジタル受付</h1>
これは、画面の大きな見出しです。
<input id="name" name="name" type="text" placeholder="ヤマダ タロウ" />
これは、名前を入力する欄です。
<button id="submitButton" class="button" type="submit">
受付する
</button>
これは、受付するボタンです。
CSSとは
CSSは、画面の見た目を整えるものです。
たとえば、今回のコードでは、色や余白がたくさん設定されています。
--bg: #f5f6f8;
--surface: #ffffff;
--text: #111827;
--black: #111827;
これは、アプリ全体で使う色の設定です。
ボタンの色を変えたい時は、このような色の設定を変えることがあります。
JavaScriptとは
JavaScriptは、画面上の動きを作るものです。
たとえば、ボタンを押した時に入力内容を集めたり、受付番号を表示したりします。
今回のコードでは、次のような関数があります。
| 関数名 | 役割 |
|---|---|
initializePage() | フォーム画面か管理画面かを切り替える |
getFormData() | 入力された内容を集める |
handleSubmit(event) | 受付ボタンが押された時の処理 |
showSuccess(result) | 受付完了画面を表示する |
loadDashboard() | 管理画面のデータを読み込む |
renderDashboard(data) | 管理画面に数字やグラフを表示する |
6. index.htmlからCode.gsを呼び出す仕組み
今回のアプリでとても大切なのが、次のコードです。
google.script.run
.withSuccessHandler((result) => {
submitButton.disabled = false;
submitButton.textContent = '受付する';
showSuccess(result);
})
.withFailureHandler((error) => {
submitButton.disabled = false;
submitButton.textContent = '受付する';
showError(error.message || '受付に失敗しました。');
})
.submitReception(formData);
今は全部理解しなくて大丈夫です。
初心者向けに言うと、これは次の意味です。
index.htmlからCode.gsのsubmitReceptionを呼び出す
↓
成功したら受付完了画面を表示する
↓
失敗したらエラーメッセージを表示する
google.script.runとは
google.script.run は、index.html から Code.gs の関数を呼び出すための書き方です。
今回の例では、index.html から Code.gs の submitReception() を呼び出しています。
index.html
submitReceptionを呼び出して！
↓ google.script.run
Code.gs
submitReceptionを実行する
7. フォーム送信の流れ
受付フォームで「受付する」ボタンを押すと、次のような流れになります。
1. 受付するボタンを押す
2. index.htmlのhandleSubmitが動く
3. getFormDataで入力内容を集める
4. 入力内容を簡単にチェックする
5. google.script.runでCode.gsへ送る
6. Code.gsのsubmitReceptionが動く
7. validateReceptionDataで再チェックする
8. スプレッドシートに保存する
9. 受付番号を作る
10. index.htmlに結果を返す
11. 受付完了画面を表示する
ここで大切なのは、入力チェックが2回あることです。
| 場所 | チェック内容 |
|---|---|
index.html | 送信前に画面側で簡単に確認する |
Code.gs | 保存前に裏側でもう一度確認する |
このようにすることで、間違ったデータが保存されにくくなります。
8. 管理画面の流れ
管理画面を見る時は、次のような流れになります。
1. 管理画面を見るリンクを押す
2. URLに ?page=admin がつく
3. index.htmlが管理画面モードで開く
4. パスコード入力画面が出る
5. 入力したパスコードをCode.gsに送る
6. Code.gsがパスコードを確認する
7. 正しければ集計データを返す
8. index.htmlが数字やグラフを表示する
管理画面は誰でも見られると困るので、パスコードがあります。
初期設定では、管理者パスコードは次です。
2026
9. ここで覚える必要がないこと
この節では、すべての細かい意味を覚える必要はありません。
特に、次の内容は今すぐ完璧に理解しなくて大丈夫です。
正規表現
LockService
PropertiesService
Utilities.formatDate
conic-gradient
SVGの折れ線グラフ
HTMLの細かい属性
CSSの細かい指定
今は、次のように考えてください。
難しそうな部分は、あとで必要になった時にAIに聞けばよい
初心者にとって大切なのは、最初から全部覚えることではなく、どこを見ればよいかを知ることです。
10. わからない時にAIへ聞く方法
この節では、ファイルの役割やコードの流れが分からなくなることがあります。
その時は、次のようにAIに聞きます。
質問例1：Code.gsとindex.htmlの違いを聞く
Google Apps Scriptで学校祭デジタル受付アプリを作っています。
Code.gsとindex.htmlの違いがよくわかりません。
初心者にもわかるように、
受付フォームの流れに例えて説明してください。
質問例2：google.script.runの意味を聞く
Google Apps ScriptのHTMLサービスでWebアプリを作っています。
index.htmlの中にある google.script.run の意味がわかりません。
次のコードが何をしているのか、
初心者にもわかるように1行ずつ説明してください。
google.script.run
.withSuccessHandler((result) => {
showSuccess(result);
})
.withFailureHandler((error) => {
showError(error.message);
})
.submitReception(formData);
質問例3：関数の役割を聞く
Google Apps Scriptで学校祭受付アプリを作っています。
Code.gsの submitReception(formData) という関数が何をしているのか知りたいです。
初心者にもわかるように、
処理の順番を箇条書きで説明してください。
質問例4：index.htmlの中を整理してもらう
以下のindex.htmlは長くて、どこに何が書いてあるのかわかりません。
初心者向けに、
HTML、CSS、JavaScriptの3つに分けて、
どの部分が何を担当しているか説明してください。
ここにindex.htmlを貼ります。
11. この節のまとめ
この節では、Code.gs と index.html の役割を学びました。
大切なポイントは、次の通りです。
Code.gsは裏側の処理を書くファイル。index.htmlは画面に見える部分を書くファイル。- 受付フォームは
index.htmlにある。 - データ保存や受付番号発行は
Code.gsが担当する。 google.script.runを使うと、index.htmlからCode.gsの関数を呼び出せる。- フォーム送信時は、画面側と裏側の両方で入力チェックを行う。
- 管理画面では、
Code.gsが集計したデータをindex.htmlが表示する。 - 難しい部分は、今すぐ全部覚えなくてよい。
- わからないところは、AIに具体的に質問して調べる。
確認問題
問題1
Code.gs は、今回のアプリで主に何を担当しますか。
回答
データ保存、入力チェック、受付番号の作成、管理画面用の集計など、裏側の処理を担当します。
問題2
index.html は、今回のアプリで主に何を担当しますか。
回答
受付フォーム、受付完了画面、管理画面、ボタン、グラフなど、画面に見える部分を担当します。
問題3
index.html から Code.gs の関数を呼び出す時に使うものは何ですか。
回答
google.script.run です。
問題4
受付フォームで「受付する」ボタンを押すと、最終的に入力内容はどこに保存されますか。
回答
Googleスプレッドシートの受付データシートに保存されます。
問題5
この節で、初心者が今すぐ全部理解しなくてもよいものは何ですか。
回答
正規表現、LockService、PropertiesService、SVG、CSSの細かい指定など、難しい細部は今すぐ全部理解しなくても大丈夫です。まずはファイルの役割と大きな流れを理解することが大切です。