Reactで作るかNextで作るか？
Reactで作るかNextで作るか？
NextでFirebaseのデータベースを利用する場合の方法を紹介してきました。 これまでの投稿では、
- Nextの機能を利用してバックエンド側とのAPIを使う方法
- 表示のページを分けて全てサーバー側で処理する方法 を紹介してきました。この記事では通常のReactで利用している方法を紹介します。その上で、WebアプリやWebサービスの実装でReactで作るか、Nextで作るかを考えてみました。
| 目次 |
|---|
| 通常のReactで利用している方法 |
| バックエンドとフロントエンドの両方で使えるか？ |
| どちらか一方に絞って実装するほうが管理しやすい！ |
| ReactとNextは別物！ |
| まとめ |
通常のReactで利用している方法
これは、ReactやVueでFirebaseを利用する場合のやり方と全く同じです。 「Webブラウザ」で動作するコードでFirebaseのデータベースにアクセスするためのAPIを呼び出せば使えます。
設定のやり方も同じです
- npmを利用する場合は「firebase」のモジュール（パッケージ）をインストールする。
- npmを利用しない場合は、CDN(Contents Delivery Network)のリンクをHTMLから呼び出す（「Heed」を使ってリンクを呼び出します）
- Firebaseのプロジェクト情報を元にFirebaseの初期化を行う
- Firebaseのアクセスは、Webブラウザで動く部分のコードで利用する
という感じで、この方法の場合、Nextで特別な事をする必要はありません。
注意点は、Reactで利用する場合と同じで、セキュリティルールを別途作成して、アクセスの権限をきちんと管理する事くらいです。これもReactで利用する場合と変わりません。
バックエンドとフロントエンドの両方で使えるか？
ここで、疑問に思うのがバックエンド（サーバー）側とフロントエンド（ブラウザ）側の両方で使えるかということです。
結論を言ってしまえば使えます！
ただし、バックエンド（サーバー）側で使う場合は、Firebase admin SDKを使います（firebase-admin）。フロントエンド（Webブラウザ）側では、通常のモジュール（firebase）を使います。
注意点は
- 初期化のやり方が全く違います
- コードが動作する場所に応じて利用するモジュールが違うので注意が必要です
初期化のやり方は、Firebase admin SDKの場合は、秘密鍵（シークレットキー／プライベートキー）が必要になるので、Firebaseコンソールで作成して初期化の際に指定する必要があります。このキーがあれば、Firebaseの全てのアクセスが基本的に可能になるので、キーの取扱には注意が必要になります。
もう一つは、前回も触れていますがコードが動作する場所をよく理解して、必要なモジュールを利用する事です。サーバー側では、「firebase-admin」を、Webブラウザ側では、「firebase」を使います。
どちらか一方に絞って実装するほうが管理しやすい！
両方のモジュールを利用してFirebaseにアクセスすることは技術的には可能です。しかし、将来的にコードの管理や機能の追加の事を考えると、どちらかに絞って実装したほうが管理は圧倒的に楽です。
開発から時間が立つとコードの詳細までは覚えていない場合が多く、混在すると混乱の原因になります。特に、開発者以外が将来的にコードを手直ししたりする事がある場合はどちらかに絞っておいたほうがこうした問題を最小限にできます。
フロントエンドからのアクセスの場合、敢えてNextを使う意味は少ないと思いますので、Nextを使って開発する場合は通常はバックエンド側での処理を選ぶ場合が多いかと思います。
あとは、APIを使うのか、ページごとに機能を細かく分類して対応するのかは開発するアプリやサービスの機能や構成によって変わってきます。 最終的には好みの問題という事になりますが、APIを使った方が、ページ全体の読み込みを行う必要がないので、ページの切り替えは早く出来る場合が多いと言えます。APIの利用でもAXIOSなどのHTTPアクセスのモジュールを使えば比較的シンプルにAPIのやり取りもできるので、お勧めはAPIでバックエンドとやり取りをするのがNextを利用する場合は良いのではないかと思います。
ReactかNextか？
では、Reactを使って開発するかNextを使って開発するかはどうでしょう？
結論から言うと、初心者はReactで開発する事をお勧めします！ 理由は、
- サーバー側、ブラウザー側という事を意識する必要がない
- ほとんどの開発はReactで対応可能
- インターネットへの公開が簡単
- Firebaseの設定もシンプル
の４点です。その上でオンライン決済などどうしてもバックエンドでの処理が必要な場合だけNextを使うという方向がおすすめです。
あとは、バックエンドの知識も身につけて準備ができた段階でNextの利用を考えた方がスムーズに開発できる場合が多いと思います。
もちろん、Nextを使うと良いこともたくさんありますが、まずは、サービスを実装できるが初心者の方の最重要課題だと思いますので、必要以上に最初から手を広げない方が結果的に早く「開発できるようになる」と思います。
まとめ
NextからFirebaseにアクセスする場合を中心に幾つかの実装のパターンについて紹介してきました。最終回の今回の記事では、NextでもReactと同じ方法でFirebaseにアクセス可能という話を紹介しました。
Nextの場合、選択肢も多く実装の幅が広がるのは事実ですが、バックエンドとフロントエンドの実装が混在するので、最初はReactで確実に機能を実装する方法をオススメします。
Nextを使いこなすには、バックエンドの知識は必要だと思います、ある程度バックエンドを理解した上で導入したほうがスムーズで、確実にNextの機能を使いこなすことができます！