React.jsとは
概要
React.jsはFacebook社が開発したJavascriptライブラリで、いわゆるJavascriptフレームワークというやつです。コンポーネントと呼ばれる部品を作り、それらを組み合わせることでUIを作ることができます。
詳しいことは具体的に書き方を紹介しながら説明していきます。
対象となる人
- Reactの概要をサクッと知りたい
- JSはざっくり把握している
個人的にReact入門記事を読んでもイメージがわきづらかったので、上記のような人向けに具体例を出しながらまとめた記事になります。
Tutorial: Intro to Reactレベルの話を、抽象的にまとめたという感じです。
事前に
React.jsはES2015(ES6)を使用するので、そこらへんはまだ把握してないという方はこちら記事が参考になると思います
僕はJavascriptそこまでやっておらず、constructor？prototype？という感じだったので、こちらの記事も参考にさせていただきました。
【JavaScript入門】コンストラクタの使い方(new/prototype/overload)
React.jsの書き方
基本的な考え
React.jsはJSでHTMLを書いてしまおう、という考え方のJavaScriptライブラリです。
JSXという記法を用いてUIの部品（コンポーネント）を用意し、コンポーネント同士を組み合わせます。後述しますが、したがってDOMの増減がある・DOMを変更するといった動きが得意になります。
コンポーネントとは？
UIの部品となるものです。ほとんどの場合JSXという記法を用いて作ります。
class ShoppingList extends React.Component {
render() {
return (
<div className="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>
);
};
}
// Example usage: <ShoppingList name="Mark" />
（Tutorial: Intro to Reactから引用）
コンポーネントは、propsと呼ばれる引数を受け取り、renderメソッドを使ってviewをreturnするのが基本型になります。
ES2015で追加されたClass記法を用いることで、コンポーネントはカプセル化され、最終行のようにClass名でコンポーネントは呼び出すことができます。
またClass記法により、Reactで用意されているどのクラスを継承するかによって、コンポーネントの種類を指定できます。
JSXとは
JSXはReact elementをXMLライクにかけるようにした記法です。上のShoppingListのJSXは以下のようにReact elementに書き換えられます。
return React.createElement('div', {className: 'shopping-list'},
React.createElement('h1', /* ... h1 children ... */),
React.createElement('ul', /* ... ul children ... */)
);
組み合わせ方について
コンポーネントは親子関係を作ることもできます。
class Parent extends React.Component {
render() {
return (
<Children value={0} />;
<Children value={1} />;
};
};
}
class Children extends React.Component {
render() {
return (
<div>{this.props.value}</div>
);
};
}
このようにコンポーネントは親子関係をもたせてUIを構成していきます。子供のコンポーネントは、propsを用いることで親からの情報を取得することができます。
仮想DOMについて
書き方から少し離れますが、仮想DOMという概念についてここで説明を入れさせてください。
Reactでは仮想DOMという概念を利用していて、これによって軽量な表示が可能になっています。
同じくJavascrptフレームワークであるjQueryでは、DOMを追加・削除・変更しようとするとすべてのDOMを再レンダリングしなくてはいけません。
それに対して、Reactでは仮想DOMを作成することで、追加・削除・変更された差分を特定することができます。すべてを再レンダリングするのではなく、差分のみを再レンダリングすることで軽量な表示を実現しています。
ここで書いたように、Reactは変更させることを前提に作られているのですが、その変更はstateという変数で管理されています。
stateについて
先ほどの親子関係のコードではChildrenに値を渡す時に直書きで0,1と入れていますが、Reactではこういった値はstateを用いて管理します。
class Form extends React.Component {
constructor() {
super();
this.state = {
search: "",
};
}
handleChange(val) {
this.setState({
search: val,
});
}
render() {
return (
<Input onChange={(val) => this.handleChange(val)} />;
<Result search={this.state.search} />;
);
};
}
class Input extends React.Component {
render() {
return (
<div>
<input onChange={this.props.onChange} />
</div>
);
};
}
class Result extends React.Component {
/* 略 */
}
↑は、inputフォームの入力内容に合わせて結果をどんどん変えていくようなものを想定して書いてみました。
検索ワードをstateで管理していて、
constructorでstateを初期化しておく
→ inputフォームの入力内容が変更される
→ state.searchを更新
→ state.searchはResultに渡されている
→ state.searchの値によって結果が更新される
という流れが実現されています。
ちなみにpropsには関数も渡すことができ、handleをonで渡すのがReactにおける慣習となっています。
また、この渡し方にはES2015のアロー関数を用いています。
基本的なことだけですが、書き方についてはこれにて。
より詳しく学びたい方はこちらをやってみると良いかと思います
Tutorial: Intro to React
日本語に翻訳してくださっている方もいて、非常にわかりやすかったです。
React チュートリアル 日本語翻訳
React.jsのメリット・デメリット
Reactが得意なこと・苦手なこと
書き方のところでも少し書いたように、ReactはDOMを追加・削除・更新するようなアプリケーションが得意です。
アニメーションの部分では、jQueryに比べると苦手だそうです。
速さ
また処理方法として、変更部分のみを特定して再レンダリングするため、すべてを再レンダリングしなくてはいけないjQueryに比べると高速になります。
しかし、jQueryに比べて速いとは言っても、他のJSフレームワークに比べると速いとは言えない場合が多いとのこと。
管理しやすさ
また、Vue.jsなどは規模の大きいアプリケーションが苦手なのに対し、規模が大きくなっても管理しやすいというメリットがあります。
ただこれは、その分手軽ではないというデメリットでもあります。
学習コスト
他のJSフレームワークは詳しく調べていないのですが、jQueryはもちろんVue.jsなどに比べても学習コストが高いというデメリットがあります。
React Nativeを使いたいという人は必須ですが。
関連
Redux
コンポーネントの親子関係のネストが深くなるとstateの管理が難しくなっていきます。それを解決するのがReduxというライブラリです。
ReduxはFluxという概念に基づいたもので、Reactとはよくセットで登場してきます。
こちらに詳しく載っていました。
react-reduxの使い方まとめ
また、勉強したら記事にしようかなと思います。
わかりやすい記事が存在していたので、追記します。
参考
参考にさせていただいた記事などをあげておきます。