【入門者向け】React + Google Apps Scriptの開発環境を構築しよう

Home > TECH BLOG > 【入門者向け】GAS(Google Apps Script) + Reactの開発環境を構築しよう
公開日:2022年9月30日 更新日:2022年9月30日

記事概要


これからReact + GAS(Google Apps Script)の開発に挑戦しようという方が、スムーズに開発スタートできるように開発環境の方法をまとめた記事です。
ローカル(自分PC)に開発環境を構築する必要があり、Node.js等のインストールなど難易度が高いのですが、この記事では詳しい解説はせず、最短で構築できるようにします。

対応OS


  • Mac
    • Windowsは対応してないのでご注意ください

1. Node.jsのインストール


Bash

参考記事

nvm(Node Version Manager)を使ってNode.jsをインストールする手順 - Qiita
Node.jsの開発環境を構築するにあたって、nodebrew、nvmのようなバージョン管理できるライブラリを使うことが必須になっていると思います。 個人的には、nvmがオススメなのでをnvmを使ったNode.jsのインストール&バージョンアップ手順を紹介します。 結論:人気度からnvmがオススメ Googleトレンド(2021年4月27日時点)で、nvmがnodebrewを圧倒的に上回っている。 * Homebrewでのインストール方法を掲載しているブログもありますが、現在、 Homebrewでのインストールは公式でサポートしてない のでHomebrewでのインストールはしない方が良いです。 以下、 https://github.com/nvm-sh/nvm より引用 次に正常にインストールされているか検証します。 nvm と表示されたらOKです。 もしここで、 nvm: command not foundと表示されたら、以下コマンドを実行して、もう一度、 command -v を実行してみてください bashの場合 zshの場合 stableは、Node.jsの安定したバージョンをinstallするというオプション。 alias defaultで、安定したバージョンをdefaultにします。 LTS(Long Term Support)バージョンを使う場合 LTSとは長期間に渡って、安全なメンテナンスリリースのみが実施されるバージョンです。 最新バージョンを使う理由が特に無ければ、安定しているLTSを使うのがオススメです。 LTSのリリースは以下、6つの修正に限定されます。 Bug fixes; Security updates; Non-semver-major npm updates; Relevant documentation updates; Certain performance improvements where the risk of breaking existing applications is minimal; Changes that introduce large amount of code churn where the risk of breaking existing applications is low and where the change in question may significantly ease the ability to backport future changes due to the reduction in diff noise.

2. Visual Studio Codeのインストール

以下サイトから、Macを選択してダウンロードしてください。

3. Visual Studio Codeの拡張機能8選のインストール


Japanese Language Pack for VS Code

VSCodeメニューなどを日本語化する拡張機能です。

Auto Rename Tag

HTMLの開始タグを修正すると閉じタグも修正できるようになります。

IntelliSense for CSS class names in HTML

CSSファイルにあるクラス定義からHTMLのクラスを入力する際に、自動補完してくれる拡張機能です。

indent-rainbow

インデントごとに違う色がついてインデントが見やすくなります。

material-icon-theme

ファイルの種類に応じてアイコンを設定してくれます。
例えば、tailwind.confg.jsは、tailwindの設定ファイルなので、ロゴがiconとして設定されています。
material-icon-themeが適用された画面
material-icon-themeが適用された画面

Path Intellisense

ファイルパスを自動で補完してくれる拡張機能です。
例えば、imgタグのsrcでファイルを探す時にファイルを自動検索できるようになります。

Prettier - Code formatter

HTMLコードなどをきれいにFormat(コード整形)できるようになります。
インストール後、VSCodeに以下設定します。
  1. 保存時にコード自動整形するように設定する
    1. format on save で検索する。
    2. ONにする
    3. 保存時にコードを自動整形する設定
      保存時にコードを自動整形する設定
  1. Default FormatterをPrettierに設定する
    1. default formatter で検索する。
    2. ONにする
    3. Default FormatterをPrettierにする設定
      Default FormatterをPrettierにする設定

Visual Studio IntelliCode

IntelliCodeはVisual Studioの拡張機能の1つで、コードから推論して、適切なメソッドなどを自動補完してくれます。
IntelliCode は、使用する可能性が高いものを入力候補一覧の最上位に配置することによって時間を節約できます。 IntelliCode の推奨は、星の獲得数が 100 を上回る、GitHub 上の何千ものオープンソース プロジェクトに基づいています。https://visualstudio.microsoft.com/ja/services/intellicode/ より
GitHubのソースコードから学習して予測しているので精度は良さそうです。

4. 「React + GAS」のソースコード準備と動作確認

Githubリポジトリの準備

  1. React-Google-Apps-Scriptリポジトリを開く
  1. 自分のリポジトリにReact-Google-Apps-Scriptリポジトリのコピーを作成する。
    1. 「Use this templete」をクリックします。
    2. Repository nameに「React-GAS-Sample」と入力します。
    3. 「Private」を選択します。
    4. 「Create repository from templete」をクリックします。
  1. 「React-GAS-Sample」リポジトリ準備完了

ローカルリポジトリの準備

Macのターミナルを使って、"React-GAS-SampleリポジトリURL"をcloneしてください。
Bash

claspにログインする

claspとは、Google Apps Script(GAS)をローカルで管理出来る様になる CLI ツールです。 ソースやプロジェクト管理、ローカルからのスクリプト実行が可能となります。ここでは、claspを使って、Googleクラウドにログインします。
Bash

「React + GAS」開発用のスプレッドシートを新規作成する

「React + GAS」開発用のスプレッドシートを新規作成の動画
  1. タイムゾーンを”Asia/Tokyo”(日本標準時間)に修正します。
    1. appsscript.jsonをVSCodeで以下のように編集します 。
      1. “America/New_York” ⇒ ”Asia/Tokyo”
      2. JSON
  1. スプレッドシートを新規作成し、そこにReact-GAS-Sampleリポジトリのスクリプトをデプロイします。
    1. デプロイ時にマニフェストファイルを更新するように求められる場合があります(Manifest file has been updated. Do you want to push and overwrite? (y/N))。その場合、yと入力します。
      Bash
  1. 新規作成されたスプレッドシートを開いて、メニューが追加されていることを確認します。
    1. npm run openをターミナルで実行し、新規作成した Google スプレッドシート(ファイル名:"My React Project")を開きます。"My React Project"を開いている場合は、必ずページを再読み込みしてください。新メニュー("My Sample React Project")が表示されることが確認できます。
      Bash
  1. サンプルプログラム動作を確認します。
    1. "My React Project"スプレッドシートのメニュー項目”My Sample React Project > Sheet Editor(Bootstrap)"をクリックします。
    2. Sheet Editor(Bootstrap) が起動するので、シートを新規追加します。
      1. “テスト”と入力
      2. “Submit”をクリック
      3. “テスト”という名前のシートが新規に追加される

5. 「React + GAS」ライブ修正をできるようにします


  1. 証明書を生成します
    1. mkcert パッケージをインストールします:
    2. Bash
      b. mkcertでhttpsの証明書を生成します
      Bash
  1. 開始(start)コマンドを実行します
    1. openコマンド実行
      1. Bash
    2. "My React Project"スプレッドシートのメニュー項目”My Sample React Project > Sheet Editor(Bootstrap)"をクリックします。
    3. 開始(start)コマンド実行
      1. Bash
  1. 以下、動画ようにVSCodeの修正が即座に反映できるようになったらライブ修正OKです。

6. まとめ


「GAS+ React」の開発環境は「ライブ修正」まで使えるようになれば完了です。実際に開発する場合、このOSSライブラリの開発手順の習得も必要となります。
開発手順については別の記事で扱っていきたいと思います。
最後に素晴らしきOSSを作成した開発者のenuchiに感謝!

この記事で扱ったOSSはこちら

Google Apps Script 開発入門の教材紹介


https://www.udemy.com/course/wywy-google-apps-script-forty-skills/?referralCode=7F71969F9DD9849220B4 から購入可能
https://www.udemy.com/course/wywy-google-apps-script-forty-skills/?referralCode=7F71969F9DD9849220B4 から購入可能

概要

40のスキル習得をゴールとして、基礎文法の学習、5つの活用事例の学習、スキル習得を促す理解度テストなどを用意。
講座終了後には、40のスキルを活用してGoogle Workspaceアプリ連携による業務効率化ができるようになります。

こんな方にオススメ

  1. プログラミングによる業務効率化を体験してみたい方
      • GoogleアカウントとWebブラウザ(Chrome推奨)があればOKです。
      • プログラミング入門レベルから学ぶことができます。
  1. 会社や個人で Google Workspaceを使っている方
      • 普段使っているGoogle Workspace(Gメール、スプレッドシートなど)を活用して、業務効率化のアイディアをすぐに試すことができます。

学習内容

  1. JavaScriptの 基礎文法(ES2015)学習により、プログラミングの基礎を身につけることができます。
    1. 動画教材で扱っているソースコードは以下Githubに公開しております。
      GitHub - YukiFujisawa/google-apps-script-forty-skills: 5つの活用事例から40のスキルが身につく、Google Apps Script 開発入門【ES2015(ES6)対応】のサンプルコード
      5つの活用事例から40のスキルが身につく、Google Apps Script 開発入門【ES2015(ES6)対応】 のサンプルコードです。 40のスキル習得をゴールとして、基礎文法の学習、5つの活用事例の学習、スキル習得を促す理解度テストなどを用意。 講座終了後には、40のスキルを活用してGoogle Workspaceアプリ連携による業務効率化ができるようになります。 プログラミングによる業務効率化を体験してみたい方 GoogleアカウントとWebブラウザ(Chrome推奨)があればOKです。 プログラミング入門レベルから学ぶことができます。 会社や個人で Google Workspaceを使っている方 普段使っているGoogle Workspace(Gメール、スプレッドシートなど)を活用して、業務効率化のアイディアをすぐに試すことができます。 JavaScriptの 基礎文法(ES2015)学習により、プログラミングの基礎を身につけることができます。 5つの事例を通して40のスキルを身につけ、Google workspaceサービス(Gmail、スプレッドシートなど)を連携できるプログラミングの応用力を身につけることができます。 Google Apps Scriptを実務で活用する方法を理解することができます。 視聴はこちら(Udemyページに遷移します。)
  1. 5つの事例を通して40のスキルを身につけ、Google workspaceサービス(Gmail、スプレッドシートなど)を連携できるプログラミングの応用力を身につけることができます。
  1. Google Apps Scriptを実務で活用する方法を理解することができます。

購入はこちら

↓Udemyにて販売中です!

関連記事


ブログ一覧