1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@celery-ext

gasでフォームとスプレッドシートを一元管理する話③

1
Posted at

前提と環境

　この記事は前回の内容を踏まえて話を進めているのでもし前提で気になることがあればこちらを先にご覧ください。

　今回はGASをローカルで記述する際に便利に作成するためのGitの使用とエディタの補完の機能の導入方法とについて解説しようと思います。本腰の作成までの準備の道のりが長くなっていますが、ここを制することで快適で正確な開発環境を用意することができるのでもう一息頑張りましょう。

補完とは

エディタにおいての補完とはプログラムを作成する際に重宝するものです。これが無くてはプログラムを作成する手間や難易度が格段に上がるといえます。一般的に聞きなじんだ言葉でいうと予測変換です。エディタが自動で入力した文字から推測して候補を挙げてくれます。それを使用することでミスをなくしたり手早く作成を進めることができるようになります。

GAS専用の補完を導入しよう

手順1：空のフォルダでターミナルを用意しよう

  • 手順1-1：エディタを開いて新規作成を行い、空のプロジェクトを作成する
    ▽この画像ではGas_Automateというフォルダが作業フォルダになります。
    image.png

  • 手順1-2：ターミナルを開く
    VScodeの場合：ctrl + shift + @
    WebStormの場合：左下のターミナルアイコンをクリック
    image.png
    このように下にターミナルが出てコマンドを入力できるようになれば完了です。

手順2：gitとnpmを初期化しよう
  • 手順2-1：gitの作成をしよう
    先ほど用意したターミナルで以下のコマンドを順に実行しましょう。
    ※解説は後述しますがなんとなくの理解でも大丈夫です。
ターミナル
git init
npm init -y

▽正しい実行結果

ターミナル
//git initの結果
Initialized empty Git repository in プロジェクトのカレントディレクトリ/.git/

//npm init -yの結果
Wrote to プロジェクトのカレントディレクトリ\package.json:

{
  "name": "プロジェクト名",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

*カレントディレクトリとはそのファイルやフォルダのパソコン上の位置

そうすると.gitという隠しフォルダとpackage.jsonというファイルが作成されます。
.gitというのはgitのリポジトリというものを管理するためのものです。このファイルは設定によって見えない可能性がありますが基本的に操作する必要はないので見えなくても大丈夫です。
package.jsonはnpmでインストールするパッケージなどを管理することができるファイルです。

コマンドの解説

はじめについているgitとnpmというものはそのコマンドが何のコマンドかを表すものです。

  • git：Git専用のコマンド
  • npm：Node Package Managerの略でありNodeのパッケージのインストールや管理するためのコマンド

　次のinitというのはInitializeの略で初期化するという意味があります。このinitというワードはプログラミングをしていく中で定期的出会うワードです。
　最後の -yというのはコマンド入力後の質問される内容をすべてyesで答えてスキップするというものです。

これでgitでバージョン管理するための準備とNodeでパッケージをインストールして使用するための準備が完了しました。
手順3：GASのプロジェクトを作成しよう

　ここではクライアントからGASのプロジェクトを作成します。以前 にclaspをインストールしている前提でclaspコマンドというものを使用するのでもしも不安な場合やまだの場合はそちらを確認してインストール、ログインまでしてみてください。

  • 手順3-1：clasp コマンドを実行してみよう
    以前の記事で一度作成していますが改めて手順通りに作成していきます。
    先ほどと同じようにターミナルにコマンドを入力するだけです。
ターミナル
clasp create

▽正しい実行結果

ターミナル
└─ appsscript.json
Cloned one file..

これでGoogle Drive上にGASのプロジェクトが自動で作成されています。
もし気になる方はこちらから確認してみてください。
これでプロジェクトの作成は完了です。

手順4：GASのコード補完を設定しよう 　突然ですが、何もしなければどんなコードエディタでもGASの補完を行うことができません。これではあまりにも不便でなりません。なので快適に作業を行うためにその設定を行っていきたいと思います。 補完とは以下のような**入力候補の提案**のことです。GASは特にお決まりのフレーズが長かったりするのでほぼマストで用意していいものです。

image.png
それでは実際に導入していきましょう。

  • 手順4-1：TypeScriptを導入しよう！
    また新しい要素？？と思われるかもしれませんがそこまで難しいことをする必要はありません。下準備自体はNodeのインストールによって完了しています。これは絶対に必要というわけではありませんが今後の内容が変わるわけではないのでしているほうが無難に良いだろうと思われる内容です。TypeScript導入する利点としては以下のようになっています。

    • 型補完が強力
    • リファクタリング(コードの整理)しやすい
    • 大きいGASで楽
    • エラーを事前検知

    でもそこまで仰々しいことはしたくないという方も多いと思います。
    なので今回は補完の部分のみをTypeScriptを使用して設定し、あとはすべてJavaScriptで済ませるところをメインでご紹介します。その場合何が変わるの？という疑問のためにもその場合のためにいかにその利点を記述します。

    • 手軽
    • claspと相性いい
    • 既存GASをそのまま使える
    • TSの恩恵だけ受けられる

    ざっくりと上げるとこのようになっています。しかしデメリットも存在するのでそちらも紹介します。

    • TypeScriptの型指定などの専用の機能は使用できない
    • 一部使用しずらい機能が存在する

専用機能が使用できないとありますが今回に限った話をするとそこまで差し支えありません。TypeScriptに縛られることなく作成を進めることができるのであまり気にしないでください。よくわからないし必要ないという場合はTypeScriptなしの場合の方法もタブを閉じて手順4の最後に乗せておくのでそちらをご覧ください。今後の記事はすべて設定のみTypeScriptを使用した私の環境で紹介します。

長くなりましたがターミナルで以下を入力してTypeScriptを導入していきましょう。

ターミナル
npm install --save-dev typescript

▽正しい実行結果

ターミナル
added 1 package, and audited 2 packages in 4s

found 0 vulnerabilities

まずこちらでTypeScriptのコンパイラというものを使用できるようにします。
こちらを実行後

ターミナル
npx tsc -v

▽正しい実行結果

ターミナル
Version 6.0.2 //数値は変化します

でバージョンが確認できればTypeScriptの導入の準備が成功です。

  • 手順4-2：GASの型補完を導入しよう！
    以下をターミナルで実行
ターミナル
npm install --save-dev @types/google-apps-script

▽正しい実行結果

ターミナル
added 1 package, and audited 3 packages in 2s

found 0 vulnerabilities

これで完了です。
ただし、もう一つ確認したほうが良い点がもう一つあります。
それはpackage.jsonです。そのファイルの中に

package.json
  "devDependencies": {
    "@types/google-apps-script": "^2.0.8",
    "typescript": "^6.0.2"
  }

という記述があればここまでは完了です。

  • 手順4-3：tsconfig.jsonを用意して全体をまとめよう
    ここでは最後にtsconfig.jsonというファイルを作成します。
    そして中身を以下のように記述してください。(コピペ推奨)
tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",

    "allowJs": true,
    "checkJs": true,

    "types": ["google-apps-script"]
  },
  "include": ["**/*.js"]
}

こちらは全体を監視してプロジェクトを補完するための設定のようなものです。
ここまでできれば完全に補完を聞かせながら作成をすることができます。これにより格段に便利かつ正確な開発を行うことができます。

TypeScriptを導入しない場合の方法
  • 手順1：型補完を導入しよう！
    ターミナルで以下を実行
ターミナル
npm install --save-dev @types/google-apps-script
  • 手順2：jsconfig.jsonを作成しよう！
    jsconfig.jsonという空のファイルを作成し、そちらに以下を記述しましょう。(コピペ推奨)
package.json
{
  "typeAcquisition": {
    "include": ["google-apps-script"]
  }
}

こちらで完了です。これによりTypeScriptなしに型補完を使用することができます。

ファイルをGitで管理できるようにしよう

遂にJavaScriptのファイルの作成へ移りたいと思います。
ここからがGAS開発の始まりです。

手順1：index.jsを作成しよう まずindex.jsという名前のファイルを作成します。 これがJavaScriptで作成しますよと明示したファイルでありこのGAS開発の第一歩となるものです。 その中身を以下のようにしてみましょう
index.js
console.log('Hello World');

これで記述は完了です。まずはテストのようなものなので一行で問題ありません。
それでこれを実行してみましょう。
ターミナルで以下を実行してみましょう。

ターミナル
node index.js

▽正しい実行結果

ターミナル
Hello World

これでファイルを実行すること確認でき正しい動作を確認できました。
これをGitで最初の変更として記録しましょう。

手順2：indexファイルをコミットしよう index.jsにステージという処理を施します。これはこのファイルの変更がバージョン管理の対象としますよという前宣言です。まずはこれを行うために以下のコマンドを実行しましょう。
ターミナル
git add index.js

　次に以下のコマンドでGitの状態を調べます。これを行わないともし誰かと共同で作業を行っているときや並行的に進めているときなどに齟齬が生じてしまったり、思わぬバージョン更新を行ってしまう可能性があります。

ターミナル
git status

▽実行結果

ターミナル
on branch main

No commits yet

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)
        new file:   index.js

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        .idea/
        node_modules/
        package-lock.json
        package.json
        tsconfig.json

このようになると思います。重要なのはnew fileという欄であり今コミットするとここにあるフォルダをまとめてコミットするというような意味があります。

　最後に本命のコミットです。これではじめのバージョンとして記録し一番初めのバージョンとして用意することができます。どのような変化を行ったかを表すためにコメントをつけることができますが今回は"my first commit"としたいと思います。これをコミットコメントといいます。これにも法則性などがあったりするのでどこかで紹介できればと思います。

ターミナル
git commit -m "my first commit"

▽実行結果

ターミナル
[main (root-commit) "ID"] my first commit
 1 file changed, 1 insertion(+)
 create mode 100644 index.js

　最後に以下のコマンドでもう一度状態を確認して確認が取れればすべて完了です。

ターミナル
git status

▽実行結果

ターミナル
On branch main
Untracked files:
  (use "git add <file>..." to include in what will be committed)
        .idea/
        node_modules/
        package-lock.json
        package.json
        tsconfig.json

これでいつでもここまで戻ってくることができます。

ここまでで今回の内容は終了です。次回からはこのindexのファイルへどんどん記述してGitHubへもリポジトリを上げていけるようにしたいと思います。
次回はgasでForm,SpreadSheetを作成する方法と管理方法についての内容とGitHubへのアップロード方法を紹介します。

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?