0) 概要

目的

今流行りの(まだまだ怖い..)React.jsを使ってES6を2015年秋に学ぶにあたり、サーバーへの永続化含め、一通り動く環境をお気軽に得ておくTips。

ハマるところがなければ、nodeのインストールからはじめても概ね1時間以内。

前提

node 4.2.1 & npm 2.14.7

付記:windowsユーザーでchoco install nodeしている人は、必ずchoco uninstallしておくこと。でないと、npmがアップデートされない場合が...

使わせてもらうソース

”Todo application built with React and Firebase, written in ES6.”とのこと。内部的に、reactfireを使っている。

1) Firebaseアカウントの準備

Firebaseとは ?

: 出典:Firebaseを使った Androidアプリ開発
• リアルタイム同期型クラウドデータベース • JSONストア型NoSQL • データの柔軟なセキュリティアクセス制限 • オフラインサポート • Twitter, Facebook, GitHub, Google などのアカウント認証と容易な連携

Firebaseにサインアップ

Firebase社は、Googleに買収されているため、Googleアカウントでサインアップすることとした。

Create New App

アプリ名を(App Name)に入力した後、Create New Appボタンを押す。
アプリ名がXXXXXの場合、アプリデータへのエントリポイントは以下となる。
https://XXXXX.firebaseio.com/

2) reactfire-todo。

インストールと実行

指示に従い、コマンドラインで以下をタイプ。
git clone https://github.com/slwen/reactfire-todo.git cd reactfire-todo npm run setup

（付記）Node4.2.1初期インストール時の環境で不足していたinflight lru-cache sibmundを、npmから追加でインストールしたところ動作した。

インストールに成功すると、nodeがローカルで立ち上がる。以下にアクセスするとtodoアプリが動作する。
http://localhost:3000/

自分のfirebeseアプリへの書き込みに切り替える。

指示に従い、以下のjsファイル
./src/lib/fb.js
の、const rootUrl = 'URL名';
のところを、const rootUrl = 'https://XXXXX.firebaseio.com/';
といった具合に書き換える(XXXXXのところは、先ほどCreateしたアプリ名)。

改めて、
npm run setup
を実行すると、以後の実行では、ToDoの入力結果が自分のfirebaseアプリへと書き込まれる。
これは、自前のreactアプリを作る雛形として活用できる。

3 今後について

以上、react&ES6用の環境を、あくまで、お遊び用として構築。

とはいえ、
静的Webホスティングの Divshot が Firebase に合流
という、かなり気になるエントリーも。すなわち、GoogleがDivshot社を買収したことで、今後、firebaseのホスティング機能が強化されるとのこと。
Divshotのサイトを見るにサイトが閉じる12月までにこのあたりの具体的なアナウンスが出るものと期待される:
https://divshot.com/

今後、react(reactnative)アプリのホスティング先の有力候補になる可能性も含め、年末に改めてウォッチしてみたい。

ReactでFirebase paasを利用 (とりあえず動く編)