GAS をローカル環境で開発する - Vol.3 GAS で React を使う

前回の、「Vol.2 GAS で Bootstrap を使う」では、GAS で Bootstrap を使って、より簡単に格好よく UI を作ることができるようになりました。

そんな記事知らん！

という方は、こちらをご参照ください💦

⬇️ Vol.2 GAS で Bootstrap を使う ⬇️

⬇️ Vol.1 環境準備編 VSCode+Clasp ⬇️

Bootstrap でも十分キレイに作れるのに、なぜ React を使わなければならないの？と思われるかもしれません。

今回は、そのあたりからお話していきましょう。

---

React って？

Facebook で開発された JavaScript のライブラリで、UI を構築するために使用するフロントエンドフレームワークです。

Vol.2 で出てきた「JavaScriptフレームワーク」に当たりますね。

React の良さを整理しておきましょう👍

コンポーネントベースアーキテクチャ

React の特徴として、コンポーネント(小さなパーツ)に分けて作ることができます。

ボタン、フォーム、ナビゲーションバーなど、すべてがコンポーネントです。

・同一コードのリサイクル
・変更箇所を局所化可能
・つまりは、再利用性や拡張性が上がる

仮想DOM

DOM とは、Document Object Model の略ですが、HTML や XML などのマークアップ言語と CSS を JavaScript などからアクセスできるようにするための API のことを指します。

例えば、body タグの下に div タグを追加するなど、動的に作成や削除などができるようになります。

通常、JavaScript から DOM を操作すると、全体を再描画します。

しかし、React はメモリ内に仮想的に DOM を保持し、変更があった箇所だけ効率的に更新する仕組みをもっています。

・ページ更新が早くなる
・快適な操作感が得られる
・つまりは、ユーザービリティが上がる

短方向データフロー

React は、データが一方向に流れる仕組みを持っています。

親コンポーネントから子コンポーネントにデータが順番に渡され、子コンポーネントは親コンポーネントから渡されたデータを使います。

・データの流れがシンプル
・不具合が見つけやすい
・つまりは、可読性や保守性、テスト性が上がる

JSX (JavaScript XML)

JavaScript の文中に HTML のような記述ができる拡張子を JSX と言います。

HTML に似ているので直感的に操作できる点も魅力ですが、何よりも JavaScript 内で HTML が書けたり、タグの中で変数を参照したり、条件分岐して表示を変えたり、と使い勝手が良いのがうれしいところです。

・デザインとロジックを一元化可能
・より直感的に、より分かりやすい

GAS と React の相性

上でも出てきましたように React はフロントエンドフレームワークですので、フロントエンドで動作します。

つまりは、ブラウザ側で動作します。

では、GAS はどうか？

GAS は、バックエンド(サーバー側) で動作します。

つまりは、データ処理や他の Googleサービスとの連携などを行います。

・フロントエンド(UI/ユーザー操作)：React
・バックエンド(データ処理)：GAS

このように役割分担が明白！

そのため、相性が良いのです。

SPA (Single Page Application)

SPA とは、ウェブアプリケーションやウェブサイトの一種で、ユーザーがアプリケーションを操作する際にページの再読込を必要とせず、動的にコンテンツの更新することができる仕組みです。

これを実現する仕組みはいくつかあるのですが、その中でも最たるものが React なのです。

・複雑なデータやビジュアル化
・使いやすいインタフェース
・データ入力から管理まで一貫して行える
・リアルタイムで更新する

など、より良いアプリケーションの作成が可能です。

管理上も良いですね✨

まとめ

さて、React とは何なのか、それが GAS と組み合わされることでどんなメリットがあるのか、がご理解いただけたと思います。

まだ、実際に見るまでは「ほんとかなぁ～？」と思っている方もいらっしゃるかもしれませんが、ぜひその目で見てみて下さい。

次回は、実際に React が動くところまでもっていきましょう。

こうご期待✨

もしわからないことがありましたら、お気軽に LINE公式アカウント でご質問くださいね。

⬇️LINE公式アカウントに登録してご連絡ください⬇️