Firebase ホスティングはプログラミングとの相性も抜群です！
Firebase ホスティングは、LP との相性が良いことは既に紹介しましたが、勿論プログラミングとの相性も抜群です。Firebase の他の機能である、データベースやストレージと組み合わせて、React や Vue といったフロントエンドのフレームワークと組み合わせれば本格的な Web アプリケーションを短期間で開発する事が可能です。
Firebase の他の機能との連携を考えると、一番相性が良いのは Web アプリケーションという事になります。
React や Vue と連携する！
React や Vue はフロントエンドのフレームワークと呼ばれる仕組みで、Web ブラウザで動作する UI などを作成するのに適した仕組みです。HTML/CSS と Javascript を組み合わせれば、特にフレームワークを利用しなくても Web アプリケーションを作成することは可能です。しかし、React や Vue などのフレームワークを利用すると、より効率的に UI を開発することができるので便利です。
一方で、実際のデータなどの処理は Javascript で書くことになりますが、データを保存する必要がある場合は、通常は Web サーバー側で用意したデータベースなどを利用する必要があります。WordPress の場合は、Web サーバー側で、PHP のバックエンドサービスと、SQL データベースを利用してこうした機能を提供する仕組みになっています。
Firebase を利用すると、こうしたバックエンドのサービスの機能やデータベースは Firebase がカバーしてくれるので、開発者はフロントエンドのプログラム開発に集中できるというメリットがあります。
従って、React／Vue と、Firebase を組み合わせることで、高度な機能の Web アプリを短期間で開発できるのは大きな魅力です。
React や Vue の基本的な仕組み
ところで、React や Vue は何をしているかというと、Javascript で HTML の部品を操作する仕組みです。もっと簡単に言えば、Javascript で HTML を作って、HTML ファイルに埋め込むという事をやっています。 従って、HTML を埋め込む HTML ファイル（通常は index.html）に、プログラムが作成した HTML の記述を埋め込む形で Web ブラウザに表示できるようにしています。React と Vue ではその方法は違います。この記事では、React についてもう少し詳しく紹介します。
React の場合は、JSX という HTML に似た記述方法を使って、Javascript のプログラムの中に HTML に近い記述を書けるようにしたものです。実際は、Javascript と HTML だけでも、HTML のページに Javascript で作った HTML を表示させる事は可能ですが、オリジナルの HTML の記述とはかなりかけ離れた記述になるので、HTML の部分がわかりにくくなります（読み難くなります）。 これをより HTML に近い形で記述できるようにして、UI の生産性を高めたのが、React や Vue になります。
React や Vue を使った場合は、表示する HTML は Web ブラウザで動作している Javascript で作られています。Web ブラウザで表示情報を作っているので、フロントエンドレンダリング（描画）と呼ばれています。
通常の HTML ファイルに React や Vue の仕組みを CDN(Contents Delivary Network)で読み込んで、利用することもできますが、現在では殆どの React や Vue を利用した開発では、npm というパッケージ管理ツールを利用して、ページ毎ではなく、Web アプリ全体を開発する方法で開発するのが主流になっています。この場合、プロジェクトで一つの、index.html をキャンバスのように利用して、いろいろな表示をできるようになっています。index.html で全ての表示を見かけ上は行っているので１ページアプリなどとも呼ばれています。
React や Vue で作成した Web アプリの公開
Web アプリ全体を npm を利用して開発する場合は、アプリをビルドすると、index.html とそのページで読み込む Javascript のファイルと、CSS のファイルが作成されます。React の場合には、標準設定では「build」というフォルダに、Vue の場合には、「dist」というホルダに必要なファイルが作成されます。
ここで作成されたファイルをそのまま、Firebase のホスティングのプロジェクトフォルダの「public」の下に入れて公開の処理を行えば、React や Vue で作成したアプリをインターネットに公開することができます。
「public」のフォルダは標準設定で、Firebase のプロジェクトフォルダを初期化する際に、「firebase init」を実行しますが、その際にどのフォルダを公開するか聞かれるので、その際に指定すれば別のフォルダでもインターネットに公開する事ができます。この設定で、React の場合は、「build」フォルダを、Vue の場合は「dist」フォルダを指定すれば React や Vue のプロジェクトフォルダを Firebase のプロジェクトフォルダと共有して公開することも可能です。
この設定以外でも、Firebase のプロジェクトフォルダには、「firebase init」を実行した際に、「firebase.json」が作成されるので、この JSON ファイルを編集すれば、公開用のフォルダを変更する事ができます。
以下の例は、公開用のフォルダ名を「build」に設定した例です。「hosting」の下の、「public」の値を、公開するフォルダ名に変更すれば指定したフォルダが公開されます。
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
},
フロントエンド開発だけで本格的 Web アプリが開発できる！
Firebase を利用すると、Web ホスティングだけではなく、データベースやファイルを保存するストレージなどの機能がフロントエンドの Javascript のプログラムから利用が可能になります。 つまり、改めてバックエンドのサービスを開発しなくても、Firebase がその部分をカバーしてくれるので、フロントエンドのプログラムを開発するだけで、本格的な Web アプリが実現できます。
しかも、Javascript だけで Web アプリが開発できるのは学習に必要な時間を最低限にできるので効率がよくなります。また、バックエンドの開発が不要になるので、フリーランスの方でも対応しやすくなります。
また、便利な点は、データベースやストレージ、ユーザー認証（ログイン）の機能は、Web アプリとスマホのアプリで共有することが可能です。スマホのアプリは別途開発する必要がありますが、同じようなサービスを Web とスマホの両方で簡単に共有できるのも大きな魅力です。
まとめ
Firebase のホスティングは、LP は比較的相性が良いことは既に紹介していますが、Firebase はデータベースやストレージ、ユーザー認証といった多彩な機能を提供しているので、そうした機能を組み合わせて利用できるとさらに強みを発揮できます。 そのように考えると、Web アプリケーションは Firebase を使いこなす上で一番相性の良い利用方法と言えます。
特別に、バックエンドのサービスを開発しなくても、この部分を Firebase に任せることで、フロントエンドの開発のみで高度な Web アプリが実現可能です。フロントエンドの開発で対応できるので、Javascript の基本的なプログラミングができる方ならば Web アプリが開発できます。WordPress の場合はバックエンドのプログラムは PHP を利用しているので、PHP を別途学習する必要がありますが、Firebase ならば、全てのコードを Javascript で実現できるので、少ない学習で住むのは多きな魅力です。
次回の記事では、実際に React を利用したアプリケションを紹介する予定です。お楽しみに！
