このAdvent Calendarについて
今年になって急に盛り上がってきたように感じるReact.jsですが、「ちょっと前まではAngular.jsって言ってたのに！」っていう人も多いと思うので、Advent Calendar形式で簡単に紹介していきたいと思います。
React.jsの重要な要素であるVirtualDOMについては別にAdevent Calendarがありますのでそちらも是非見てください。
※既に↑のAdvent Calendarがあったため、これは1人で書くように作ったものなので書く人が誰もいなかったわけではないです。
React.jsについて
なぜ盛り上がってきたのかは正直よくわかっていないのですが、個人的にはgithubのatomがパフォーマンス向上のためにReact.jsを使うことにしたという記事を見て興味を持つようになりました。
React.jsはFacebookが作っていて、いわゆるMVCフレームワークでいうところのViewの部分をComponentとして作っていくためのライブラリです。(Handlebarsみたいなtemplate engineではないです)
facebookやinstagramはもちろん、AirBnBやYahoo、Atlassianなど色々なところで使われるようになってきています。
特徴
公式サイトでは下記が特徴として紹介されています。
- JUST THE UI
- VIRTUAL DOM
- DATA FLOW
それぞれについてはこれから書いていきますが簡単に。
JUST THE UI
React.jsはComponentを作るためのライブラリです。Component志向なフレームワークは色々あるのですが、React.jsは本当にComponentを作るだけです。しかしながらそれによってアプリケーションの作り方を変えることが出来るというが面白いです。
また、Component作るだけなので覚えることも少ないので導入もしやすいかと思います。
(Backbone.jsのViewの部分をReact.jsにするとか、Angular.jsでReact.jsを使ったdirectives作るとか。)
VIRTUAL DOM
React.jsではJavaScript内にVIRTUAL DOMとしてDOM Treeのような構造体を持っています。rerenderされる際に、その構造体の前後の状態を比較し、最小限の変更で実際のDOMに反映します。なので雑にrerenderしても必要最低限のDOMしか実際には更新されないので高速に処理することが出来ます。
DATA FLOW
React.jsを使ってもAngular.jsなど2wayデータバインディングなフレームワークのようにはっきりと書くコードの量が減ったりするわけではありません。ですが、アプリケーションのデータを管理しているComponentがいて、そのデータを子のComponentに渡していく一方向なデータの流れでわかりやすくアプリケーションを作っていくことが出来ます。
(これだけの説明だとわかりにくいと思いますが...)
その他
JSX
その他で特徴的なものはJSXというXML likeなSyntaxを使用することが出来るということです。
出来るという通り、optionalなので気持ち悪くてどうしていやだという人はJavaScriptで書いていくことも出来ます。
JSXについてはまた別の日に紹介します。
Flux
あと、React.jsとセットでFluxという言葉も聞くと思いますが、これはMVCのようなアーキテクチャの話で、React.jsに含まれるものではないです。
ただFluxの構成要素としてReact.jsがあるので、これも別の日に書きたいと思います。
というわけで、React.jsをどう使っていくかについてを明日から書いていきたいと思います。
あ、あと何か試すときは公式にリンクのあるjsfiddleでちょいちょいと動かすと便利です。
- with JSX
- without JSX
明日はまずHello WorldとしてComponentを作ってみたいと思います。