そろそろ、手を出してみるかということで React に手を出し始めてみた。世間から 2 年遅れ。
感想としては開発環境が整っているし、ライブラリも何でもかんでも揃っている。Erlang/OTP と比較したら失礼になるが、何もない Erlang は普通の人にはつらそうだなとまで思った。
2 週間学んだ結果は React コトハジメ にまとまっているので、そちらを見ていただくとして、なぜ学んだのか、どう学んでいったのかを書いていきたい。
そもそもはフロント側の見積もりが全くできないので困っていたというのがスタート。どんな仕組みでどう動いているのかがわからないのでフロント開発の見積もりができなかった。
今まではウェブアプリの仕事を受けることはなかったので、困ったことはなかったが、WebRTC をビジネスの軸においてからは、ウェブアプリを避けることができなくなった。その為見積もりができない状態がまずいと考え一通りの知識を頭でっかちでもいいので、フロント側の開発エンジニアの会話が理解できるところまでは勉強しようと考えた。
まず何を作るかを決めた。自社製品のリアルタイムな統計情報をブラウザで見れる仕組みを作ることにした。
ライブラリは社内で使われているものを前提に勉強することにした。
それが React で、Babel だった。必要なさそうなのは勉強しない主義なので、最低限の知識でできるところまでにした。またデザインはよくわからないので、 Material-UI という React の UI フレームワークを利用することにした。
まずは Babel の最低限の文法を覚えようと思ったが、React のサンプルが Babel で書かれているのを見つけてだらだら読むほうが効率良かった。フレームワークを覚えつつ、不明な Babel の文法を調べるという方法を取った。
ビルド方法は社内で使われているものではなく Webpack を利用した。理由としては、独立して動いてほしいこと。覚えることが少ないほうが良かったこと、あとは Qiita に一通りやりたいことと同じことがまとまっているものがあったことだ。
2 日で React がなんとなくわかったので、あとは実際のアプリを作っていくことにした。ビューワーだったので WebSocket から送られてくる情報をただ描画するだけなので難しい技術は必要なかった事もあり、やりたいことが 1 週間で実現できた。
あとの残り 1 週間は覚えたことをまとめたり、整理したりしていた。新しい技術がでてくる JS 界隈では、 Qiita に乗っていることでも古かったりするので、それを新しい方法ではどう書けばいいかなどを調べてまとめておくことにした。
最後に JS に対する Lint ツールである eslint の使い方を調べて、きれいにして終わり。FlowType などの型系のツールも調べようと思ったが、実際に作ったコードが 300 行足らずの短いコードなので今回は不要と判断した。
二週間で作りたいものが作れたし、さらに寄り道して Material-UI 以外の Grommet というフレームワークも調べた。JavaScript 凄い、かなり便利になってる。今までほとんど JavaScript を書いてきていないのにもサクサク作れるのは本当に凄いと感じた。
勉強はこれで一段落するが、定期的に思い出して、整理していこうと思う。どうせ自社製品の UI をいじるときに何か必要になるだろうし。
