FirebaseでWebサイトを作れるの？

FirebaseでWebサイトを作れるの？

Firebaseにはホスティング機能があるので、FirebaseでWebサイトを作れます。 しかも、最初は無料でスタートできます。運営してく過程でアクセス数や使用している容量が無料の範囲を超えると料金が発生しますが、殆どのサイトの場合は無料の範囲内でも十分運営ができる場合が多いです。

Firebaseを利用したWebサイトとして考えられるのは大きく分けて３種類です。

* 従来のHTML/CSSなどを主体としたシンプルなサイト

* フロントエンドのフレームワーク（ReactやVue）を利用したサイト（Webアプリも含みます）

* サーバー側のレンダリングも含めたサイト（Next/Nuxtなどを利用）

です。

多くのWebホスティングは、WordPressを主体としたWebサイトのホスティングを前提にしている物が多いですが、Firebaseの場合は、必要に応じて目的のサイトにあったWebホスティングの形態を選ぶことができます。Webサイトだけではなく、ランディングページも簡単に作成できます。

従来のHTML/CSSを主体にしたシンプルなサイト

HTMLやCSSを中心に構成される従来型のシンプルなサイトは、簡単にFirebaseでWebホスティングできます。もちろん、HTMLファイルからJavascriptなどのプログラムも動かす事も可能です。

こうしたサイトを作るのに必要な事は、必要なHTML/CSSのファイル、さらに必要な場合は画像ファイルなどの素材やJavascriptなどのファイルを準備するだけです。

後は、Firebaseのプロジェクトフォルダを作って、設定をすればWebサイトはすぐにスタートできます。現在別のWebホスティングサービスを利用してWebサイトを運営している場合は、そのサイトで使用しているファイルがあれば、すぐにFirebaseのホスティングに移行できます。

フロントエンドのフレームワークを利用したサイト

ReactやVueといった、最近よく利用されているフロントエンドのフレームワークを利用したサイトでもFirebaseのホスティングは活用できます。

フロントエンドのフレームワークを活用すると、より複雑なサイトや、Webサイトを通して「アプリ（Webサービス）」を提供する事も可能になります。

サイトのタイプとしては：

* 従来型のサイトに近い情報発信型のサイト

* Javascript(Typescript)のプログラムを使ったWebベースのアプリ（サービス）

上の２つを組み合わせたサイト

という大きく３つのタイプのサイトを作る事ができます。

Firebaseは、Webホスティング以外にもデータベースやオンラインストレージの機能も提供しています。そう考えると、Firebaseの特長を最大限に活用するためには、単なる情報発信だけではなく、Firebaseの他の特長と組み合わせて、アプリやWebサービスも提供できるサイトにするとより魅力的なWebサイトとして運営する事ができます。

また、情報発信型のサイトでも、サイト作りや保守（メインテナンス）がより効率的なサイトにすることも可能です。例えば、全てのページで共通に使うナビゲーションバーなどを、ReactやVueで部品化すれば、変更する際も簡単に一括して行う事も可能になります。

また、Webサイトの制作を請け負う場合でも、案件ごとのカスタマイズが簡単になるので、一旦ベースの仕組みを作ってしまえば効率的にWebデザインを行う事も可能になります。

サーバー側のレンダリングを含めたサイト

最近では、サーバー側でレンダリングするためのフレームワーク、NEXTやNUXTなども広く利用されるようになっています。フロントエンドのフレームワークのReactやVueをベースに作られていることもあって、簡単にサーバーサイドのレンダリングを使ったサイトも構築できるようになりました。勿論、Firebaseでもサポートが可能です。

サーバーサイドのレンダリングのページの作り方は幾つかのパターンがあります。予め、サーバー側で表示するページを静的に作って表示するタイプや、実際にページの要求があってから、動的に表示するページを作って表示するタイプまでサポート可能です。勿論、ページごとに別々の方法で表示するする事も可能です。

また、NEXTやNUXTなどのフレームワークを使わずにシンプルにサーバー側（バックエンド）のサービスを使って、ページを作って表示をすることも可能です。シンプルな機能の場合はこちらの方法の方が便利な場合も多くなります。

サーバー側でレンダリングする理由

数年前までは、サーバー側でレンダリングした方がSEO(Search Engine Optimization：検索エンジン対策)は有利だとされていました。しかし、最新の検索エンジンは、Javascriptなどで動的に生成されるページの内容もきちんと読み取る事が可能になっているため、差は殆どないとされています。

予め、サーバー側で静的にページ情報を生成している場合は、表示速度が早くなるというメリットがありますが、動的にページを作る場合は、いずれにしてもページを作るための処理がサーバー側にしてもブラウザ側にしても必要になるので、多くの場合は余り差が出ないのが現状です。

別なメリットは、Javascriptを有効にしていないブラウザの場合、ブラウザ側でJavascriptを使ってページ情報を作っている場合は表示ができません。この場合、サーバー側でレンダリングすれば、こうしたブラウザでもサポートできるという利点はあります。しかしながら、2020年現在、殆どのWebブラウザはJavascriptを有効にしている場合が殆どで、その差は殆どないのが現状です。

Firebaseでホスティングをする場合の違い

Firebaseでは、ブラウザ側、サーバー側の両方のレンダリングをサポートする事ができます。 その際、使用するストレージの容量が同じ機能の場合、サーバー側のレンダリングをする場合大きくなることが分かっています。（バックエンドのサービスを有効にするとストレージの使用容量が増えます）

これは、バックエンドの処理に必要な実行環境をサーバー側で用意する必要があるためで、Firebaseのバックエンドの実行環境がNode.jsのVersion 8.xからVersion 10.xにアップデートされた時からポリシーが変わったようです。

この変更に伴い、以前は外部のサービスを使わないバックエンドの処理の場合は無料プラン（spark）でも利用可能でしたが、現在は有料プラン（Blaze）に設定しないとインターネット上に公開できなくなっています。テストで開発用のPC上で使う場合（localhostで使う場合）は無料プランでも問題ありません。（2020年10月現在）

なお、有料プラン（Blaze）は従量性の課金プランですが、無料枠があって、限度を超えない限りは無料で利用できるので余り大きな問題ではありません。

シリコンバレースーパーウエアのWebサイトはNEXTを利用したサーバー側のレンダリングを採用して、記事の表示は動的にサーバー側で表示するイメージを生成して表示するようになっています。このサービスで使用しているストレージ容量は約１GBです。ストレージ容量５GBまでは無料で利用できるので、無料利用の範囲内に収まっています。

一方で趣味の登山のサイトでは、Reactを使ったブラウザ側のレンダリングで同じような機能を提供しています。記事の数は違いますが、概ね記事のサイズはせいぜい数KBから数十KB程度なので余り使用容量には影響がないと言えます。こちらら、オンラインストレージの使用容量はほぼ０です。

ホスティングで使用している容量は、どちらの場合も２MB以下です。つまり、このバックエンドの実行環境はオンラインストレージに置かれて、ホスティングのデータとは別扱いになっています。無料枠の使用容量の扱いも別扱いです

* ホスティング：１０GBまで無料

* オンラインストレージ：５GBまで無料（実行環境はこちらの容量が使われます）

利用料金の面ではサーバ側でレンダリング（バックエンドサービス）を使うと、使用する容量は確かに大きくなりますが、十分無料利用の範囲内ですし運用上の差は余りないと言えます。

Firebaseを利用したお勧めのWebサイトは？

Firebaseのホスティング機能はとても柔軟な利用が可能です。フロントエンドやバックエンドで沢山の経験のある方は、サイトの目的に応じて最適なWebサイトの実装を選ぶことができます。

一方で、余りWeb開発の経験がない方のお勧めは、フロントエンドフレームワークを利用したWebサイトの実装です。ReactやVueなどといったフロントエンドのフレームワークを利用すると、より複雑なWebサイトの作成が可能ですし、データベースやオンラインストレージとの組み合わせでより高度なサービスも提供できます。一方で、サーバー側（バックエンド側）のサービスを気にせずに実装できるのは大きな魅力です。

共通の機能は部品化して再利用が可能になりますし、Firebaseの魅力を十分に活用できる方向性を持っています。

まとめ

Firebaseのホスティング機能を使えば、まずは無料でWebサイトの運営が可能になります。 経験の少ない初心者の方でも、ReactやVueなどと組み合わせて利用すれば、より高機能なWebサイトの実現も難しくありません。

Firebaseのホスティングでは、世の中で広く利用されているWordPressを利用できないという欠点もありますが、開発者の方には、フロントエンドのフレームワークと組み合わせる事で、自由度の高い、高機能なWebサイトの実現は十分に可能です。

無料でWebホスティングできる魅力と、柔軟性を武器にあなた独自のWebサイト、WebサービスをFirebaseを活用して実現してください！

なお、この連載では、ReactやVueを使った簡単なWebサービスの実装事例を紹介していく予定です。記事は随時更新してそうした事例のリンク等も入れて行く予定です。時々サイトを除いて頂ければと思います。