- 投稿日:2025/09/15
- 更新日:2025/09/29

この記事のブックマークはおすすめしていません
↓こちらの記事がスプシのトリセツの目次(まとめ記事)になりますので
こちらの記事のブックマークをおすすめします👍️
【保存版】スプシのトリセツ〜見て・触って・覚える!初心者のためのスプレッドシート練習帳付〜【目次】
はじめに
「在庫や販売データを入力するのに、毎回手作業で入力して時間がかかる…」
そんな経験はありませんか?
スプレッドシートは便利ですが、商品数が多いと入力作業が大きな負担になってしまいます。
そこで活躍するのが Google Apps Script(GAS) です。
今回は、初心者でも挑戦できる
「売上情報を一括入力できるフォーム」 を作成していきます。
最終的に、以下のようなことができるようになります。
・メニューから「売上情報入力」をクリック
・ダイアログ(フォーム)に情報を入力
・入力内容が自動でシートに反映される
👉 この記事を読み終わるころには、あなたも「GASでスプレッドシートをカスタマイズできる!」という自信がつくはずです。
✍️ ポイントは「小さな達成体験を積み重ねること」です。
GASってなに?(初心者向けの理解)
まずは簡単に「GASとは?」を押さえておきましょう。
正式名称:Google Apps Script
できること:Googleスプレッドシート、ドキュメント、Gmailなどを拡張したり、自動化したりできる
特徴:無料で使える、JavaScriptに似た文法なので初心者でも入りやすい
今回の目的:スプレッドシートに「売上入力フォーム」を追加して、入力作業を効率化する
💡 難しい専門知識は不要!「ちょっとしたコード」で作業が一気にラクになります。
Step 1:GASを体験しよう
(ハムすけの練習帳を使う)
まずは、今回のゴールである「売上入力フォーム」を 体験 してみましょう。
ここで大切なのは、コードを書く前に 「GASでどんなことができるのか」 を直感的に理解することです。
① ハムすけの練習帳を開く
👉 用意してあるサンプルファイル 「ハムすけの練習帳」 を開いてください。
② メニューを確認する
スプレッドシートの上部に「在庫管理」というメニューが追加されています。
その中に 「売上情報入力」 という項目があるはずです。
📷 メニュー画面のスクショ
※最初だけ、GASの権限承認をする必要があります
③ 売上情報を入力してみる
メニューから「売上情報入力」をクリック
画面中央に 入力フォーム(ダイアログ) が表示されます
📷 入力フォームのスクショ
④ 自動でシートに反映される!
必要な情報を入力し「OK」を押すと…
シート上に自動で売上情報が反映されます。
手入力で1件ずつ書いていた作業が、
フォーム入力 → 自動反映 で一瞬に!
特に、在庫数が多いときに一覧からわざわざ探す必要がなく
管理番号だけわかっていれば入力できちゃいます👍️
📷 入力完了後のシート
⑤ ここでの学び
・GASを使うと、スプレッドシートに 独自のメニューやフォーム を追加できる
・作業を自動化できると、手作業の繰り返しから解放される
Step 2:スクリプトエディタを開いてサンプルコードを実行
① スクリプトエディタを開く
まずは、スプレッドシートから スクリプトエディタ を開きましょう。
1. スプレッドシートを開く
2. 上部メニューから 「拡張機能」 → 「Apps Script」 をクリック
3. 新しいタブでスクリプトエディタが開きます
📷 拡張機能 → Apps Script の操作画面
② サンプルコードを貼り付ける
スクリプトエディタが開いたら
「ファイル」の右にある+ボタンをクリック→スクリプト
既存のコードを削除して下のコードを貼り付けてください。
/** * 在庫管理シート用 売上情報一括入力ダイアログ */function onOpen() { SpreadsheetApp.getUi() .createMenu('在庫管理2') .addItem('売上情報入力2', 'showSaleInputDialog') .addToUi();}function showSaleInputDialog() { var htmlContent = ` <style> body { margin: 16px; font-family: Arial, sans-serif; } label { display:block; margin-top:8px; font-size:14px; } input { display:block; margin-top:4px; width:88%; height:24px; font-size:14px; padding:2px; } button { margin-left:6px; margin-top:4px; height:28px; font-size:14px; } .btn-area { margin-top:12px; text-align:right; } button.ok { width:70px; } button.cancel { width:90px; } </style> <form id="saleForm"> <label>管理番号:<input name="id"></label> <label>販売日(MM/DD):<input id="saleDate" name="saleDate"></label><button type="button" onclick="setToday()">今日</button> <label>売却価格:<input name="price" type="number"></label> <label>発送料:</label> <input name="shipping" type="number"> <div class="btn-area"> <button type="button" class="ok" onclick="submitForm()">OK</button> <button type="button" class="cancel" onclick="google.script.host.close()">キャンセル</button> </div> </form> <script> function setToday() { var today = new Date(); var mm = String(today.getMonth() + 1).padStart(2, '0'); var dd = String(today.getDate()).padStart(2, '0'); document.getElementById('saleDate').value = mm + '/' + dd; } function submitForm() { var form = document.getElementById('saleForm'); if (!form.id.value || !form.saleDate.value || !form.price.value || !form.shipping.value) { alert('全ての項目を入力してください'); return; } var data = { id: form.id.value.trim(), saleDate: form.saleDate.value.trim(), price: form.price.value.trim(), shipping: form.shipping.value.trim() }; google.script.run.withSuccessHandler(function(){ google.script.host.close(); SpreadsheetApp.getUi().alert('完了', '売上情報の入力が完了しました。', SpreadsheetApp.getUi().ButtonSet.OK); }).processSale(data); } </script> `; var html = HtmlService.createHtmlOutput(htmlContent) .setWidth(480) .setHeight(400); SpreadsheetApp.getUi().showModalDialog(html, '売上情報一括入力');}function processSale(form) { var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet(); var id = form.id; var values = sheet.getRange('B3:B' + sheet.getLastRow()).getValues(); var rowIndex = values.findIndex(function(r){ return r[0] === id; }); if (rowIndex < 0) { SpreadsheetApp.getUi().alert('エラー', '管理番号「' + id + '」が見つかりませんでした。', SpreadsheetApp.getUi().ButtonSet.OK); return; } var targetRow = rowIndex + 3; var parts = form.saleDate.split('/'); var year = new Date().getFullYear(); var saleDate = new Date(year, parseInt(parts[0], 10) - 1, parseInt(parts[1], 10)); sheet.getRange(targetRow, 5).setValue(saleDate); sheet.getRange(targetRow, 6).setValue(parseFloat(form.price)); sheet.getRange(targetRow, 8).setValue(parseFloat(form.shipping));}
👉 保存ボタンを押して変更を保存
これで、シートを開いたときに「在庫管理2」というメニューが追加されるようになります。
③ スプレッドシートに戻って確認
・スプレッドシートを再読み込み(⌘ + R)すると、上部に 「在庫管理2」メニュー が追加されます。
・メニューをクリックすると「売上情報入力2」が表示される
・クリックするとフォームが立ち上がる
👉 これで「GASでメニューを追加する」ところまで体験できました!
④ ここでの学び
・GASを使うと、シートに独自のメニューを追加できる
・実際にコードを貼り付けて動かすことで「自分にもできる!」という実感が持てる
ここまでできれば、もう立派に「GASを使いこなしている」と言えます!
Step 3:応用編
💡 チャレンジしてみよう!
ここからは応用編です。
Step1〜3でフォーム作成の流れを学んだあなたなら、少しの工夫でさらに便利な仕組みを作れるようになります。
✅ 応用課題の例
入力フォームに新しい項目を追加
(例:購入者名や決済方法を追加)
自動計算を組み込む
(例:売上 − 送料 = 利益 を自動表示)
入力補助を工夫する
(例:「今日」ボタンで日付を自動入力する)
✅ ChatGPTを活用してみよう
「どうやってコードを書けばいいかわからない…」
そんなときは ChatGPTに相談 してみましょう。
実際に私がChatGPTとやり取りしながらコードを作成していった会話はこちら👇
➡️ 売上入力フォーム作成依頼
👉 どんな質問を投げればよいかが見えるので、真似するだけでも十分学べます。
※少し前のやりとりなので、反省点はたくさんあります🌀
いまならスクショ📷️をもっと追加しながらチャッピーに情報を共有すると思います!
💪 自分で挑戦!
・「ハムすけの練習帳」 をコ自分用にカスタマイズ
・チャッピーに「この表に〇〇を追加したい。コードを直して」と指示
👉コツは具体的にセル番地などを教えてあげること
👉エラーが発生した場合にはスクショを使うと修正が楽
・出てきたコードをスクリプトエディタに貼り付けて試す
👉 上手く動けば自信に、動かなくても学びに変わります
✅ まとめ
今回の記事では、「売上入力フォームをGASで作る」 というテーマを通して、次のステップを体験しました。
Step1:「ハムすけの練習帳」でゴールを先に体験
→ GASでどんなことができるのかイメージをつかめた
Step2:スクリプトエディタを開き、サンプルコードを実行
→ シートに独自メニューを追加できることを学んだ
HTMLフォームを作成し、売上情報をシートに自動反映
→ 「フォーム入力 → 自動反映」の流れを実装できた
Step3(応用編):フォームの拡張やChatGPTを活用したカスタマイズ
→ 実務に合わせて機能を広げられることを知った
✍️ 今回の学びの本質
・GASを使えば、スプレッドシートは「ただの表計算ツール」から 自分専用アプリ に進化する
・大切なのは 小さな体験 → 少しの応用 → 自分の工夫 というステップを踏むこと
・インプットだけでなく、練習帳や自作の表を使って アウトプットすることが上達への近道
これからもスプシの関数や便利な情報について記事を投稿していき、
少しでもスプシへのハードルを下げていきたいと思っています✨️
随時、更新していきます♪
いいねやブックマークをしていただけると走り回って喜びます😆
最後まで読んでいただきありがとうございました♪
何かわからないことなどありましたら、お気軽にDMください📥️✨️