はじめに
Reactは、今人気のJavaScriptのフレームワークです。
Reactって全然わからないけど、よく話に聞くし、人気らしいから使いたい！！って思う人も結構いるんじゃないでしょうか。
ですが、このReact、少々独特な特徴を持っています。
何も考えずに、「よし！今人気のReactでアプリを作ろう！」ってやると、「あれ？、React使えなくね？」となる危険性大です。
そうならないために、Reactの概念をここで紹介します。
Reactを学ぶ前に。一番大切なこと
Reactにせよ、Vueにせよ、Angularにせよ、これらは道具にしかすぎません。
つまり、「なんのフレームワークを使って開発するか」という問いは、重要ではありません。
そうではなく、「この開発には、何のフレームワークが適しているか？」が大事な問いです。
例えるならば、「紙を切るときに何を使って切りますか？」という問いと同じです。
手で折り目をつけて切ったり、はさみを使ったり、カッターをつかったりといろいろあるしょう。
どの方法でも紙は切れます。ですがあなたは状況に応じてそれらの方法を使い分けているはずです。
Reactも同じです。
Reactで開発した方がいいときもあるでしょうし、VueやネイティブJSの方がいいときもあるでしょう。
大事なことは、適切な場面で、適切にReactを使うことです。
Reactの向かない場面で無理にReactを使ったところで、うまくいきはしません。
むしろコードの記述量が増えたり、書き直しになったりと余計な時間がかかるだけでしょう。
全てにおいて優れた、万能な選択肢などありません。Reactも然りです。
だからこそ、Reactを使い始める前に、まずはReactの特徴を知りましょう。
そして、Reactの利点が最大限に活かせる場面があれば、迷わずReactを使えるよう、Reactを正しく理解しましょう。
Reactの役割
Reactは画面を描画するためのものである。これが超重要です。
MVCでいうところのView。
自作htmlタグを作る、という感覚。
createElement()とか、addClass()とか、を使わずに、htmlを書くようにDOM要素を生成できます。
使用例
雰囲気を掴むために軽くコードを載せます。
例えば、配列分だけ、<li>要素を生成するコードは、Reactだと以下のように書けます。
//自作タグ<MyUl>を作成する
function MyUl(props){
return(
<ul>
<h1>items分だけ、liを描画する</h1>
{props.items.map(i => <li key={i}>{i}</li>)}
</ul>
)
}
//配列arr分だけ描画する
let arr = [1,2,3,4,5];
ReactDOM.render(
<MyUl items={arr}/>
, document.getElementById("root")); //id="root"要素へ<MyUl>を描画する上のソースをビルドして、以下のようなhtmlファイルで読み込みます。
<div id="root"></div> <script src="./build/index.js"></script><!--reactのソースを読み込む-->
htmlファイルを表示すると下の画像のように表示されます。
配列数だけ、<li>が表示されているのが分かりますね。
このように、htmlを書くかのような感覚で、DOM要素を生成できるようにするのが、Reactの役割です。
Reactの用途
画面を部品化、テンプレート化するのに使います。
例えば、上の例のように「項目数だけ<li>を描画する自作タグ」が作れます
さらに規模を拡大してアプリ全体をReactで作ると、htmlファイルは数行くらいになったりもします。
そしてJSONのAPI経由などで来た実データを元に画面を描画変更したりできます。
Reactの処理速度
速いです。（初回読み込み時を除く）
差分計算により、最小限の処理で画面描画を行えるよう最適化がされています。
Reactの注意事項
はじめに言った通りReactはViewです。
したがって、Reactでは状態のある処理や、副作用のある処理などは扱いません
（可能ではありますが、基本的には避けるべきです）
それでも無理にReactで状態を扱いたい場合は、制約がついたり、書き方が複雑になって分かりづらくなります。
例えば、Reactで状態を持つ部品を作ると、その状態は完全に部品内で閉じます。外からその部品が持つ状態へはアクセスできません。
そうしないためには、状態をReactの外で管理し、部品を生成するときに状態を部品へ渡す形になります。関数で引数を渡すのと同じです。
Reactの学習コスト
学習コストはかなり低めです。
特に文法などは、独自の表現がとても少なくスムーズに入れます。参考サイトを片手に触ればすぐに書けるようになるでしょう。
それよりもReactの考え方の方に慣れが必要かもしれません
一緒に語られることの多いReduxについて
Reduxとは、アプリの状態管理をするためのライブラリです。
今まで述べてきたように、Reactは、Viewです。
つまり、Reactでは状態管理は行いません。
なので状態管理を行うReduxと、画面描画を行うReactを合わせると、きれいに仕事分担ができて相性がいいというわけです。
これがReactとReduxがよく一緒に語られる理由です。
とはいっても、「よし、じゃあReactを使うからReduxも一緒に使おう！」なんてよく考えずに一緒に使おうとすると大変な目に遭いますのでご注意を。
コメント