メンバー紹介お問い合わせ
メンバー紹介お問い合わせ

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

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

記事概要

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

対応OS

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

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

参考記事

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.
https://qiita.com/ffggss/items/94f1c4c5d311db2ec71a

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. で検索する。
    2. ONにする
      3. 保存時にコードを自動整形する設定
      保存時にコードを自動整形する設定
  1. Default FormatterをPrettierに設定する
    1. で検索する。
    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してください。

claspにログインする

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

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

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

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

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

      6. まとめ

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

      [宣伝] GASプログラミング入門の教材 - Udemy

      • 2023年11月時点で、約3,000人の受講生を獲得し、「Udemy Business」に選定されてます。
        • 「Udemy Business」とは、Udemyが「企業研修」向けに提供しているサービスのことです。
        • Udemyで販売している全ての講座の中から、「企業研修」に提供できる高品質な講座をレビューや内容を加味して厳選していることが特徴のサービスです。
        • その「Udemy Business」で、このGAS講座は採用されております。
      • 教材の詳細は、以下のUdemyに記載しておりますので内容ご確認ください
        • 以下のバナーから購入すると、通常、定価27,800円が1,500円に割引される特別クーポンが適用されます！
        • 有効期限は、です。

      関連記事