Mt. React に ２週間で８合目まで登ってみた

Reactは学習コストが高いと言われてますが、お仕事をいただくために初めて取り組んでみました。

先日の #nds59 で その結果 react習得に２週間で８合目まで、deployまで１月でいけたといったら、どうやって？と質問をいただいたので書き留めておきます。というかnodeもreactも初めてで必死だったのでよく覚えてないですが、とにかく知識習得・開発・デプロイ環境整備に時間がかかりがちなので、そこを短縮するのに様々な取り組みをしました。　そこさえ短くすればreactの学習コストはそんなに(flux/redux使えばもっと）高くないように思いました。

（２週間と書いていますが、8時間 x 5日 x ２週間 = 80時間ではなく、 およそ 15時間 x 14日 = 210時間ぐらいです。 ４時間仮眠してすぐ仕事とか相当あったけど、自分でとった仕事なので全くOK。）

前提

• フリーランスです。働き方・お金の使い方は自分で決められます。
• ベタのJS(ES4?), jquery, jquery-moble(古！） と CSS1/2/3(ちょっと） を使ってwebサイトを(BE/FE)構築・デバッグすることができる。 nodejs/ES5/6・sassやトランスパイラなど利用・使用した開発経験はない。
• オブジェクト指向言語は多く経験あり。 reactのコンポーネント構成にはすぐ馴染めた。

コードを書く外の部分での仕事への取り組み方

• 体力のマネジメント：プロジェクトに備え、普段は体力をつけておきます。（だいたいプロジェクトこなすと痩せる・筋力おちるから）
• どこに投資をするか：報酬のある仕事で、かつ顧客が一月後（早！）に欲しがっているので、時間に投資をしました。　つまりお金を出して時間を節約できるところは、本を買ったり、有償IDEを買ったりして学習・準備時間を短縮。（結果的にreactの本は古すぎて基本知識を得るぐらいにしかならなかったけどそれでも画面でみるより時短・包括的に理解できる効果あり。寝ててもどこでも読めるんだから。）
• どこから始めればいいのか、reactのエキスパートに聞きます。 IDEについては、 普段からオフィスをシェアしている HADAL さんにお勧めをいただきました。 困った時に普段から相談できる人を作っておくのも大切ですね。

コード開発環境を作る

• お勧めされたVisual Studio for Code（無償）をインストールし、次のチュートリアルに 忠実にそって （ここすごく大事） プロジェクトを作って走らせるとあっけなく開発環境・プロジェクト雛形・デバッグ環境ができます。
  • https://code.visualstudio.com/docs/nodejs/reactjs-tutorial
• 他に２、３困ったこともあったような気がしますが、
  • 英語での検索を厭わずとにかくわからないことは世界中ググる。　一年以上前の情報は基本的に参考にしない。半年以内の情報に従って問題解決を進める。
  • react や ES6 を全くわかってなかったので インストールしたらカスタマイズ０で即使えて、悪いところを指摘してくれるIDEに最大限助けてもらう。
  • 流れがわかったとこから バックエンド開発でも使用しているPyCharm とほぼ同じ使い勝手の、JetBrains社の WebStormにIDEを変更し、ファイルの操作、VCSの操作などの学習をしなくてすむようにしました。(VCS GUI は主として SourceTreeを使用）

その他react関連で開発期間短縮に役立ったと思われること

• （単に知らなかった、ので）fluxもreduxも使っていません。大変だったけど学習は少なくてすんだ。（fluxを使わなかったため、render()のタイミング制御にはかなり苦労した。 fluxは使った方が良い。多分reduxも。）
• CSSには、styled-componentを使用。cssファイル開かなくて・管理しなくてよかったので楽でした。
• IDEからブレークポイントつけても止まってくれないときがあったり、使いづらかったので、止めてやるデバッグは全てchrome上で実施。止める場所がわかりづらいときは console.logを吐かせて、その行を示すリンクからソースを開いて確認しました。

reactと関係ないがdeployまでの期間短縮に役立ったと思われること

• 頼まれてもいないのにプロジェクト憲章文書をまとめ、顧客・自分の疑問は解決しておく。
• サーバやドメインについて手間取らないよう、サーバ・ドメインをすぐ提案できるようにしておく。（定額・低額を希望する顧客は多い） 私はさっと提案するときにはさくらVPSと自分のドメインのサブドメインで提案しています。動的拡張性とかGPU必要とかだったりすると困りますが。
• ローカル開発はVirtualBox内でやるが、顧客を不安にさせずにフィードバックをもらえるよう、リモートはステージングサーバ・デプロイサーバの３段立てにしておき、変更をすぐ顧客も確認できるようにしておく。
• バックエンド(phthon3/django/django-rest)とフロントエンドの双方開発フルスタックでやったのでコミュニケーションによる時間ロスや分担の明確化などのためのプロジェクトマネジメントロスはなかった。
• 画面のワイヤデザインと素材は顧客から提供があったのでダウンロードのみ。
• わからないことをばばっとtrelloに書いていってとにかく優先する上位のものから作業をこなしていったので作業に迷わなくてすんだ。シングルスレッドでタスクこなしていったほうが自分を動かすには早いみたい。
• chromeのreactプラグインの使い方がよくわからない。なくても困ってない。
• vagrant/ansibleを使ってdeployプロセスを自動化。 使った雛形は https://github.com/jcalazan/ansible-django-stack/
• 各種ブラウザ上での検証を求められていたので、 LambdaTest サービスを有償利用。 LamdaTest社はサポートが素晴らしいスタートアップ。　サービスの不具合や要望は適時伝え、対応していただきました。全部英語ですが、画面シェア・通話までしてリアルタイムで解決してくれます。　すごい。
• たまたま予定していた IoTLT新潟 で フロントエンド技術動向などプロジェクトに重要なアドバイスをGETしたので渡り掛けていた危ない橋を引き返せた。コミュニティでの情報シェアほんと大事です。感謝。