React を使ってみた感想
最近、個人でウェブサービスを作ってる。まだ全然出来ていないけど。
どうせだし新しい技術を試す機会にしようと React を使ってみることにした。
近年の JavaScript フレームワークは Angular, Backbone, Vue と乱立しててぐへえとなるしかない状況でまるで触る気が起きなかった。しかし React はそれらのフレームワークとはアプローチが違ってエポックメイキングなフレームワークになる、と思う。いやもう博打に近い感覚だが。
Virtual DOM
React の話をする上でよく言われるのは仮想 DOM (Virtual DOM) という機構で React の内部で DOM ツリー構造のような仮想のツリー構造体を保持し、イベントの発生など DOM を書き換える場面になったら新しい仮想 DOM と既存の仮想 DOM との差分を導き生の DOM として生成して書き換える、という役割を持っている。たぶん。
実際にユーザが React を触る際に仮想 DOM がいまこうなってるはずだから〜などいちいち考える必要はなく、 React 内部に隠蔽されいるため特に意識する必要はない。意識する必要はないんだけど、DOM の書き換えは前述のとおり仮想 DOM の機構ですべて行うようになるため今までのように jQuery 使って DOM をグリグリいじくり回すとのはご法度になる。外部から DOM をいじってしまうと 仮想 DOM の diff が壊れてしまい正しく動かない。なので今まで培ってきた jQuery の DOM 操作プラクティスは使えないということになる。ただ、逆に言えば DOM さえ触らなければ良くて、 $.ajax 使うとかそういうのは問題ない。Ajax 使うために jQuery を選ぶというのはちょっともにょるが。
と、ここまで仮想 DOM について書いたけど個人的にそれほどすげえなと思ったわけではなくて、フロントエンド詳しくないし、は？JSX？なにそれ謎と言った感想が次々と湧いてきてようやくそういうことねと分かってきた感じ。bower とかいうのも初めて使ったけどやはりどの言語でもパッケージツールは便利やで…
コンポーネントの書き方
React 良いなと思ったのはコンポーネントの書き方だった。Angular とか使ってないからそこら辺のフレームワークがどうなってるか知らないけど jQuery でぐりぐりいじってた頃と比べると格段にイベントの管理がしやすい。
jQuery だとこの DOM のイベントはどこにあって、いつ書き換えられるのか、いまどういう状態なのかというのが全然分からない。ソース読めば分かるんだけど全体を読まないと分からないというか、イベントが飛び散ってるんだよな。それが React だとコンポーネントの中にイベントを書くしかなくて探す必要がなくなる。DOM の状態も仮想 DOM が吸収してよしなにしてくれるから気にする必要もない。このコンポーネントの動きが知りたいと思ったらコンポーネントのソースだけを見れば動きがすぐ分かるという感じ。見通しが良くてこれには琴線に触れるものがあった。
ここでひとつ、実際に見やすさをソースとして示しておきたいところだが、React の知識が多少ないとソースは読めないと思うし、知識がある人がソース見ても既に知ってることだからなんら感動を得ないと思う。自分で調べるとよろしい。
学び方
とりあえず React を学びたいのであればこのアドベントカレンダーを読むのは欠かせないと思う。
まだ途中までしか読んでいないけど、丁寧に親切に分かりやすく書いてある。この一人で布教する熱量たるや、やはり React 来るで…と思わせるものがある（本当か？）
まあそんな感じでReact 触るの面白いからもう少し勉強してみようと思う。実務で使う可能性は限りなくゼロに近いが。
