はじめに
こんにちは、かずん(@kazoonLab)です。
Googleスプレッドシートを使ったアプリを作るのが比較的簡単だったので、それを題材に記事を書こうと思いました。
使用するのはGAS(Google Apps Script)というスクリプト言語です。
GASを使うことで、GoogleスプレッドシートやGoogleドライブを操作することができます!
グーグルアカウントさえあれば環境構築などが必要ないので、初心者の方にもオススメです!
またコードがJavaScriptによく似ているため、Web系プログラミングの1つとして勉強のテーマにはぴったりかと思います!
今回の記事では、GASの基本的な使い方や、Google スプレッドシートの値を取得したりしてみます!

この記事を読むと、GASの基本的な使い方がわかるよ!
こんな人に読んで欲しい
・JavaScript勉強したての方
・Webアプリケーションを作ってみたい方
・Google Apps Script(GAS)をよく知らない方
・プログラミングに興味がある方
GASとは?
GASとは、ドライブやスプレッドシート、フォームなど、Google系サービスをカスタマイズできるスクリプト言語です。
JavaScriptベースで書かれているため、JavaScriptの簡単な知識があればとっつきやすい言語となっています(というか、文法はJavaScriptとほとんど変わりません)。
JavaScriptと同様、インストール作業は不要です。また、ウェブブラウザ上で動作するエディタでコーディング・デバッグができます。
GASエディタを使ってみよう!
GASを書くにあたって、まずエディタを開いてみましょう。
Googleアカウントをお持ちの方はログイン、持っていない方はアカウントを新規作成してください。また、 今回ブラウザはGoogle Chromeを使用します。
お使いのGoogleアカウントのホーム画面で、Google アプリを開き、「ドライブ」をクリックします。

ドライブに移動したら、今回の作業用フォルダを作成しましょう。
フォルダを作成し移動したら、「右クリック」→「その他」→「Google Apps Script」と選択します。
選択すると、空のエディタ画面が開くかと思います。GASは、このエディタでコーディング・デバッグなどを行うことができます。試しに、下の画像のようなサンプルコードを入力してみましょう。
function myFunction() { var data = 'Hello World!'; Logger.log(data); }
Logger.log()関数は、JavaScriptでいうconsole.log()のようなものです。後ほどログを見るために使用しています。
入力したら、「ファイル」->「保存」もしくは「ctrl + s」でプロジェクトを保存します。プロジェクト名は好きな名前を入れてください。
保存したら、コードを実行してみましょう。メニューバーの下に、再生アイコンや虫アイコンが並んでいるかと思います。実行する関数名が正しいことを確認し、再生ボタンをクリックします。
コードを実行すると、実行ダイアログが一瞬表示されます。ダイアログが消えたら、「ctrl + Enter」でログを表示してみましょう。
変数定義したdata(Hello World!)がログに表示されれば成功となります。
スプレッドシートの値を取得してみよう!
Google Appsには様々なアプリが用意されています。その中の一つに、Microsoft Excelを模した「Google スプレッドシート」があります。
スプレッドシートのそれぞれの値は、GASを使うことで内・外部から取得・設定することができます。早速試してみましょう。
先ほどと同様、Googleアカウントのホーム画面でGoogle アプリを開き、「Google スプレッドシート」をクリックします。
クリックすると、スプレッドシートの作成画面が表示されるので、「空白」のスプレッドシート選択し、シートを新規作成します。
空のスプレッドシートが作成されたら、テストデータをシートに入力します。今回はキャラクターの名前と、それぞれの好きな食べ物を入力してみます。
データをループで取得するため、キャラと食べ物のセットは2セット以上用意しましょう。今回は、このようなデータを用意しました。
データができたら、スクリプトを書いていきましょう。メニューの「ツール」から「スクリプトエディタ」を起動すると、先程と同じスクリプト画面が表示されます。
今回用のスクリプトを以下に載せたので、解説していきます。
const getSheetData = () => { const sheet = SpreadsheetApp.getActiveSheet(); const lastRow = sheet.getLastRow(); for (let i = 1; i <= lastRow; i++) { Logger.log(`${sheet.getRange(i, 1).getValue()}は${sheet.getRange(i, 2).getValue()}が好き`); } }
変数sheet
には、開かれている(アクティブな)スプレッドシートの情報(シートオブジェクト)が入っています。シートは1つしか作っていないため、データを載せたシートが選択されます。
変数lastRow
には、シートの中で、データが入力されている末尾の行番号が入っています。例では2列目までデータが入っているので、lastRowには2が代入されます。lastRowを取得することで、データの列が増減しても、コードを変えることなくループさせることができます。
さて、スプレッドシートではJavaScriptと同様、for文などのブロック構文を利用できます。初期値を1(列目)、最後の値を末尾(2列目)として、ループさせましょう。
新しいGAS(Chrome V8)では、モダンなJavaScriptのような構文を利用できます。5行目のようなテンプレート構文もその一つです。ちょっと戻りますが、関数getSheetDataの宣言(アロー関数)もそうですね。
シートオブジェクトに対してgetRange(a, b)
とすると、a列目・b行目のセルを指定できます。その後にgetValue()
することで、セルの値を取得できます。
for文でループさせることで、最初は(1, 1)と(1, 2)、つまり「かずん」と「ラーメン」を取得できます。2つの値がテンプレートに埋め込まれ、「かずんはラーメンが好き」という文がログに出力されます。
次のループでは(2, 1)と(2, 2)、つまり「かなきち」と「うに」を取得できます。ログは「かなきちはうにが好き」となりますね。
ログは各自違うものが出力されるかと思いますが、下の画像のように出力されていればOKです!
まとめ
GASを触ってみていかがだったでしょうか。
個人的にはExcelをJSで操作する感じがあり、Excelのマクロよりとっつきやすいんじゃないかな、と思います。
引き続きGASの記事を書いていくので、よかったら見ていってくださいね。
この記事がいいなっと思ったら読者登録をお願いいたします!
【ツイッターでは主に、仕事や技術系の内容をつぶやいています】
技術者の方ともっと繋がりたいっす!お気軽にフォローもお願いします!
かなきち(@kanakichi0801)
かずん(@kazoonLab)