React+Firebaseによるお手軽サービス開発方法【JavaScript初学者向け】
こんにちは、ワタナベ（wtnb_dev）です。
以前、以下のツイートをしました。
JavaScriptだけ学習している人でも、Firebaseちょろっと学習するかnode+expressでAPIサーバ作るかで簡単にサービス作れるから、本当楽な世の中になった気がする。良いことだ。
— natech12 (@natech12) October 15, 2019
今回は、JavaScriptを学習してそろそろWebサービスを開発してみたい、けどやり方が分からない、という方を対象に、Firebaseを使ってお手軽にサービスを作る方法を紹介していきます。
※今回はサービス公開までの全体像を紹介するに留めますので、使用するフレームワークやライブラリ、Firebase自体の詳細については解説いたしません。「はじめに」にも記載しますが、興味を持たれた方は、これを機に公式ドキュメントを眺めてみることで、さらに成長していきましょう。
対象読者
・JavaScriptの基礎を学習した方
・Webサービスを作ってみたい方
はじめに
今回は、React.jsを使用して開発していきたいと思います。
まだJavaScriptの基礎を学習しただけで、React.jsは分からないよ、という方も多いかと思いますが、JavaScrfiptの基礎が分かれば比較的容易に使えるようになると思いますので、これを機に学習してみてはいかがでしょうか？
React.jsを覚えれば仕事の幅も広がると思います！
さっそく作っていきます
今回作るものですが、ありきたりであるものの学習にお勧めなTodoアプリを作っていきます。これを作ることで、
・Webサービスの公開方法
・Firebaseへのデータ登録、永続化の方法
を身に着けることができます。さらに凝ったことをするならば、FirebaseのAuthenticationで認証機能を付け加えることで、よくあるTwitter認証によるログインなども付けることができます。
本記事を読み終えて興味とやる気のある方は、ぜひログイン機能も付け加えてみてはいかがでしょうか！
１．Firebaseプロジェクトの作成
まずはFirebaseのサイトにいってFirebaseプロジェクトを作成します。これでFirebaseの各サービスを使用したアプリを作ることができるようになります。
Googleアカウントでログイン後、下記にある「プロジェクトを作成」ボタンを押下します。
次のようなページに遷移するので、任意のプロジェクト名を入力し、「続行」ボタンを押下します。今回は、「react-todo」と入力してみます。
次のようなページに遷移します。今回はアナリティクスは不要なのでラジオボタンをOFFにし、「プロジェクトを作成」ボタンを押下します。
これでFirebaseプロジェクトが作成されます。
プロジェクトの作成が完了すると、ダッシュボードのような画面に遷移します。「Project Overview」の横の設定アイコン→「プロジェクトの設定」→「全般」タブから、GCPのリソースロケーションを設定します。
ロケーションはどこでも良いかと思いますが、今回は「asia-northeast1」を選択してみます。
２．Reactアプリの作成
Firebaseのプロジェクトが作成できたので、次は実際のアプリをReactで作成していきます。
今回は、create-react-appコマンドを使用してReactアプリの雛型を作成していきます。
※create-react-appは、Reactアプリの雛型を作ってくれるツールです。
（１）create-react-appのインストール
コマンドラインで以下を入力して、create-react-appをインストールします。
npm i -g create-react-app※npmが未インストールの方は、先にインストールしておく必要があります。「npm インストール」等で調べてみてください。
（２）create-react-appの実行
Reactアプリを作成したい任意のディレクトリに移動して、以下を実行します。
react-todoの箇所は、作成したい任意のアプリ名に変更してください。
create-react-app react-todoこれで、「react-todo」という名前のディレクトリが作成され、その中にReactアプリの雛型となるファイル群が作成されます。
（３）まずはローカルで実行
ちゃんとReactアプリの雛型が作成されたか、ローカルで実行して確認してみましょう。
（２）で作成されたディレクトリ（例の場合は「react-todo」）に移動して、以下を実行します。これで、ローカル環境でサーバが起動されます。
npm starthttp://localhost:3000/ にアクセスし、以下のようなページが開かれれば成功です。
無事確認できたら、Ctrl + Cを押下して一度サーバを停止させます。
３．FirebaseプロジェクトとReactアプリの紐づけ
まずは以下のコマンドを実行して、Firebaseをコマンドラインで使用するためのツール群をインストールします。
npm install -g firebase-tools次に、コマンドラインからFirebaseにログインし、Reactアプリ内でFirebaseの初期化を行います。
Reactアプリを作成したディレクトリ（例では「react-todo」）に移動し、以下を実行します。
firebase login
firebase initfirebase initを実行すると、いくつか質問をされます。基本的にデフォルトで回答すれば大丈夫です。
途中で使用するサービスを選択する質問がありますので、そこで以下を選択します。
・Hosting：アプリの公開に使用する
また、使用するFirebaseプロジェクトを聞かれる質問がありますので、（１）で作成したFirebaseプロジェクトを選択します。
あとは、公開するディレクトリを聞かれますが、デフォルトpublicになっているものを、buildに変更します。これは、Reactアプリのデフォルト公開ディレクトリがbuildになっているからですね。
firebase initが完了すると、Reactアプリのディレクトリ内にいくつかのファイルが作成されます。
４．Firebaseでアプリの公開
それでは一旦この時点でアプリを公開してみましょう。
まずは以下のコマンドを実行し、Reactアプリをビルドします。
npm run buildこれでbuildディレクトリが作成され、その中にWebサーバに公開するためのファイルが配置されます。
これをFirebaseにデプロイするには、以下のコマンドを実行します。
firebase deploy成功すると、「Hosting URL:」という文字列のあとに公開されたURLが表示されますので、そちらにアクセスします。
２．（３）でローカルで起動したものと同じ画面が表示されれば、デプロイの成功です。
長くなったので、今回はここまでにします。
まとめ
今回で、ReactアプリをFirebaseで公開するところまでできました。
あとはReactアプリを実際に開発→公開していけば、好きなサービスを作っていけることになります。
次回は実際に、Firebaseのデータベースを使用しながら、Todoアプリを作っていきましょう。
おわり！
この記事が気に入ったらサポートをしてみませんか？