より良いエンジニアを目指して

1日1つ。良くなる!上手くなる!

触れておきたいReactの哲学

BtoBの現在の職場では、モダンな技術ではなくレガシーな技術を使い続けなくてはならないという現実に直面します。

ブラウザについて制約がある事に言い訳して、最先端の技術について勉強してませんでした。

2019年になったにも関わらず、2014年末の以下の記事を読んで仮想DOMって勉強しないとまずいんじゃと思っている私です。

qiita.com

以前は、Reactに触れる程度でしたが、本格的にReactのチュートリアルをやってみる事にしました。

reactjs.org

日本語訳されている方もいます

StackBlitzを使って試していきました。

チュートリアルでは3目並べ(Tic Tac Toe)を作っていきます。

これがチュートリアルというには遊べるものなので、最近のチュートリアルはここまで来たのかという出来です。

触っていて思うのがReactのComponentという仕組みで構成していく様はオブジェクト指向であり、JavaScriptでここまでオブジェクト指向するフレームワークをよく作ったなと驚かされます。

カタいです。堅すぎるくらいに。

  • sliceを呼び出して配列をコピーして、直接データを変更しない事により、パフォーマンスを向上させる
  • 動的なリストを作るときは、適切なkeyを割り当てて一意性を確保する

といったことが、チュートリアルの途中で語られています。

下記では差分アルゴリズムをはじめとするパフォーマンスを向上する仕組みが解説されており、このあたりを読んでいると面白いなあと思います。

reactjs.org

開発の現場で使うかというと

正直、このReactを使いこなせるのか?という点で不安を覚えます。

これを開発したFacebookのようなフロントエンジニアのエリートが集まる企業ならば、こういうフレームワークを使うのは頷けます。

今の日本が外注を使って人を集めて開発することが多い中で、Reactを使うのはかなり大変なのではないでしょうか。

そうした不安を覚えてしまったのが、ReactではJavaScriptでエラーとなるケースでは画面に何も表示されないケースが多々あるということ。

クリックしても何も起きないのはそれはそれで問題ですが、何も画面に表示されないのは怖いです。

f:id:rimever:20190127183317p:plain

特にこの点が気がかりです。

今の職場のプロダクトによっては特殊な事情もあって使うのが難しいでしょう。

htmlを返却するrender関数、こちらについても敷居が高そうな印象を受けます。

Webアプリケーション初めての人がいきなりVue.jsをやってもなんとかなるかもしれませんが、Reactは難しいでしょう。

とはいえ、Reactというフレームワークの根底にある考え方はなかなか勉強になるし、一度は触れておくのはいいなあと思います。