React とは、Webフロントエンドフレームワークの一つである。
概要
Reactとは、ブラウザ側で表示されるHTMLの動作を制御するため(フロントエンド)のJavaScriptフレームワークで、Facebook社(2021年にメタ・プラットフォームズに社名変更)とそのコミュニティによって2011年に開発された。同社のWebサービスであるFacebookやインスタグラムはこれを用いて制作されている。
2021年現在、Webアプリでのシェアは2010年代前半に人気だったAngularJSを押しのけて他を圧倒するまでとなっており、jQuery の開発者でさえReactに首ったけになっていることをコメントに残している。世界シェアは圧倒的で寡占状態になりつつあるが、アジアでの普及率が高いVue、欧米での普及率が高いAngular、そして新規勢力のSvelteやsolidJSなどが出てきている。
JavaScriptで開発されたが、TypeScriptの普及に伴いTypeScriptへの対応も進められており、昨今ではTypeScript優勢になりつつある。
Virtual DOM
DOMを直接操作するのではなく、コンポーネント間の関係性を定義したVirtual DOMという構造をフレームワーク内で構築する方式を取っているのが特長。Virtual DOM内ではユーザーからの操作に反応(react)して、定義された関係性に基づく変更が自動的に行われる。
たとえば、スイッチの ON / OFF と背景色の関係を定義しておけば、背景色を直接変更するプログラムを書かなくても、ユーザーがスイッチを切り替える度に背景の色が変わるといった具合である。
これにより関係性を宣言する形(宣言型プログラミング)で記述することができ、React普及の原動力となった。一方で後述のJSXも含めて学習コスト(特にフックの使い分けで頭が混乱する)が高いことがネックになっている。
JSX(クラスコンポーネントの場合)
他のフレームワークと比較すると、JSXという方式を用いてhtmlとほぼそっくりな言語をJavaScript内に埋め込むことができるが、JavaScript初心者にはおすすめできないほど記法には癖があり、分割代入が必須であることからJavaScriptのECMAScript6以降をマスターしていないと話にならない。
JSXのままではブラウザが解釈できないので、JSXをJavaScriptにコンパイルしてから使用する。ちなみにReactはCDN(jQueryのようにライブラリだけ呼び出してローカル上で動かすこと)でも書けるので、動作に慣れたいだけならそれでもいいかも知れない。
サンプルコード
何をやっているかというと、タイマー制御である。componentWinnUnmount()はJSX読取以前に行う処理(ここではタイマーのリセット)、componentDidMountはJSX読取後の処理(ここでは1秒ごとのカウント)である。this.tickはtickというメソッドで、state.secondに対し1ずつ追加し、JSXのthis.secondsに返している。これを1秒ごとに実施しているため、タイマーが働く仕掛けとなっている。
class Timer extends React.Component {
constructor(props) {
super(props);
this.state = { seconds: 0 };
}
tick() {
this.setState(state => ({
seconds: state.seconds + 1
}));
}
componentDidMount() {
this.interval = setInterval(() => this.tick(), 1000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
render() {
return (
<div>
Seconds: {this.state.seconds}
</div>
);
}
}
ReactDOM.render(
<Timer />,
document.getElementById('timer-example')
);
コンポーネント作成部分(クラス定義)とコンポーネントの出力部分(ReactDOM.render)に分けられ、前者は更に定義部分(constructor)、メソッド部分(tick他)、JSXのレンダリング部分(render)と分けることができる。
上記コードに生理的嫌悪感を覚えるプログラマーがいるとすれば、JavaScriptの中にhtmlタグ(厳密にはJSX)がそのまま入って2種類の言語の文法が混在し、JavaScriptとHTMLをトゥギャザーしようぜみたいになっているためであろう。
※特に初期ReactはJSXを区分するreturn文さえなかったために、完全に「なんじゃこりゃー!」状態だった。
関数コンポーネント
上記はバージョン16.7までの旧記法である。2019年にバージョン16.8で導入された関数コンポーネントという記法である。それに伴い、React Hooksが導入され、より関数型プログラミング風に書けるようになった。しかし、上記のクラスコンポーネントとは全く違った記述方法である。
16.8以降ではReact Hooksを用いた記法が推奨されているが、あまりにも旧記法が普及していたため2つの書き方が並行している状態が続いていた。
主なフックは以下の7つである。後になってどんどん増えていき今は21もある(だが、全部を使いこなせる人は…)。
- useState → 変数のステートを管理(変数の同期に用いる、いわば基本の基本。初心者ほどuseState地獄となる諸刃の剣)
- useEffect→ 変数の副作用を管理(要は連動処理の管理。Effectを和訳したらこうなった。副作用って、日本では悪い意味でしか使わないのに)
- useContext → 変数を任意のコンポーネントでやりとりする(SPA作成には不可欠)
- useReducer → 複数の変数処理を管理(これをマスターしてようやく半人前、いわば中級者への関門。でも、これを覚えればReduxの呪縛からも解放される)
- useCallback → 処理を記憶(頻度の高い処理に対し、変更を検知し処理できるので効率化を図れる。Vueの監視プロパティのようなもの)
- useMemo → 変数を記憶(時間のかかる処理に対し、変更を検知し処理できるので効率化を図れる。Vueの算出プロパティのようなもの)
- useRef → 値の参照を管理(固定値を設定したい場合に。React18からルールが変わった)
React Native
ブラウザを介しないネイティブアプリ用にReact Nativeというアプリケーションフレームワークがあり、モバイルデバイスをカバーするクロスプラットフォーム開発でのシェアは今や世界を制しつつあった。
しかし2019年にReact Native 0.59でHooksのサポートが入ったものの、長らく二種類の記法が混じっていたため、なかなか普及しなかった。また、webpackのビルドが絶望的に遅かったために、アプリのビルドは開発者の間ではかなりのストレスになっていた(だが、ここでライバルVueの開発者が作ったViteという爆速開発プラットフォームが、Reactにも対応しているお陰で雲行きが変わる)。ようやく普及が始まった頃、もっと便利なNextやGatsbyにまで主役を奪われそうになっている。
ちなみにクロスプラットフォーム開発のシェアではDartを用いたFlutterと鎬を削っている状態でもある。
外部リンク
関連項目
- JavaScript / ECMAScript / TypeScript
- HTML / DOM
- フレームワーク
- ルー語
- Content Delivery Network
- 関数型プログラミング / 宣言型プログラミング
- オープンソース
- オープンソースソフトウェアの一覧
- プログラミング関連用語の一覧
- 0
- 0pt