React デプロイ成功！上位３％だぁ（？）

まず環境構築で7割が諦め、その先でコードをかけずに5割が諦め、更にデプロイで8割がつまづき諦める。

そんなことを友人がぼやいて褒めてくれました。単純計算でこの時点でかけだしプログラマーの上位3％ということになります。そんな具体的な割合の真偽はともかく、ここ最近プログラミングに腐心している自分の実感としても、これらのステップは初心者にとって壁となって立ちはだかっているし、乗り越えたときの達成感は大きいです。自分の書いたプログラムがネット上で動いてる、誰もがアクセスできる！というのは感動。Hello Worldだけでもデプロイしてみたら良いっていうのも納得。

さぁそんなわけで、つい最近のReactのお勉強報告として今回はデプロイ関連を手短に。

Webサイトやアプリのデプロイ、やり方は多岐にわたると思うのですが、勉強段階での一つの手軽な方法としてGitHubのアカウントにアップするという手があると思います。HTMLとJSだけののWebサイトやアプリであれば、単にレポジトリにファイルをアップして設定から簡単に公開できます。

これがReactでcreate-react-appを使ってアプリ作った場合、node_modulesが大量のファイルを含むためそのままアップデートはできません（よね？あるいはできても動かない？）。　そこでcreate-react-appの調べていくと以下の記事に従うとシンプルな手順かつ安定してデプロイできました。

https://github.com/gitname/react-gh-pages

Gitのシステムに対してそもそも自分が初心者なので、あんまり操作の裏にある理論はまだ理解していないけれども...とりあえず、これでサーバーレスなWebアプリは公開できるわけです。

でも、掲示板でもブログでもチャットでも、何かしらのデータをサーバーに保管して参照するようなサービスはこのままではできません（というかGitにもサーバーの提供ある？）。当たり前ですが、別でサーバーを用意してサービスに紐づけなくてはなりません（という理解と表現で良いのかな）。

そこで見つけたのが、ついさっき成功したReactとFirebaseを組み合わせたごく簡単なチャットアプリの例。

https://qiita.com/kazushikawamura/items/58ea222b3cc289882d79

やや古い記事だけど、多少の細かい修正だけでまだ動きました！そもそもReactの練習としてもとてもシンプルで理解しやすい。ここのところReduxと組み合わせたチュートリアルに多数取り組んでいたけどいまだに消化不良だった。Reducerがあって、ActionもComponentも切り分けて、それらをFlux構造にのっとって正しくつなぐ...この構造がまたきちんと消化できてない自分にとっては今回みたいにそれらをRedux使わずひとまとめに書いてくれた方がとてもすっきり。いずれはReduxでのアプリ作成に慣れなくちゃいけないのだろうけれど、まだ状態管理が複雑にならないうちはいらないのかな、という気もする。

ちょっと脱線したけど、FirebaseはGoogle Accountのみで簡単にすぐセットアップできるので、ありがたい限り。この記事のようにcreate-react-appで作成したものも手軽に連動させられる。

こうしてデプロイ成功したアドレスを友人にも押し付けコメントを入力してもらうと、自分のデバイスでもそれが確認できた。本当に単純ではたから見れば些細な一歩だけれど、自分にとっては大きな一歩。

というわけで、Reactのモチベ爆上がり。諦めてVueに流れる可能性もあったけどこれでReact前進できそう笑