React(フレームワーク)単語

リアクト
3.3千文字の記事
  • 0
  • 0pt
推しタグ選手権 7月開催中!
掲示板へ

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初心者にはおすすめできないほど記法にはがあり、分割代入が必須であることからJavaScriptECMAScript6以降をマスターしていないと話にならない。

JSXのままではブラウザが解釈できないので、JSXをJavaScriptコンパイルしてから使用する。ちなみにReactCDNjQueryのようにライブラリだけ呼び出してローカル上で動かすこと)でも書けるので、動作に慣れたいだけならそれでもいいかも知れない。

サンプルコード

何をやっているかというと、タイマー制御である。componentWinnUnmount()JSX読取以前に行う処理(ここではタイマーのリセット)、componentDidMountJSX読取後の処理(ここでは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種類の言語の文法が混在しJavaScriptHTMLトゥギャザーしようぜみたいになっているためであろう。

※特に初期ReactJSXを区分するreturn文さえなかったために、全に「なんじゃこりゃー!」状態だった。

関数コンポーネント

上記はバージョン16.7までの旧記法である。2019年バージョン16.8で導入された関数コンポーネントという記法である。それに伴い、React Hooksが導入され、より関数型プログラミングに書けるようになった。しかし、上記のクラスコンポーネントとは全く違った記述方法である。

16.8以降ではReact Hooksを用いた記法が推奨されているが、あまりにも旧記法が普及していたため2つの書き方が並行している状態が続いていた。

フックは以下の7つである。後になってどんどん増えていき今は21もある(だが、全部を使いこなせる人は…)

React Native

ブラウザを介しないネイティブアプリ用にReact Nativeというアプリケーションフレームワークがあり、モバイルデバイスカバーするクロスプラットフォーム開発でのシェアは今や世界を制しつつあった。

しかし2019年React Native 0.59Hooksのサポートが入ったものの、長らく二種類の記法が混じっていたため、なかなか普及しなかった。また、webpackビルドが絶望的に遅かったために、アプリビルドは開発者の間ではかなりのストレスになっていた(だが、ここでライバルVue開発者が作ったViteという爆速開発ラットフォームが、Reactにも対応しているお陰で行きが変わる)。ようやく普及が始まった頃、もっと便利なNextGatsbyにまで役を奪われそうになっている。

ちなみにクロスプラットフォーム開発シェアではDartを用いたFlutterと鎬を削っている状態でもある。

外部リンク

関連項目

【スポンサーリンク】

推しタグ選手権 7月開催中!
  • 0
  • 0pt
記事編集 編集履歴を閲覧

ニコニ広告で宣伝された記事

VOICEROIDフィッシング (単) 記事と一緒に動画もおすすめ!
提供: くろぶさ
もっと見る

この記事の掲示板に最近描かれたお絵カキコ

お絵カキコがありません

この記事の掲示板に最近投稿されたピコカキコ

ピコカキコがありません

React(フレームワーク)

まだ掲示板に書き込みがありません…以下のようなことを書き込んでもらえると嬉しいでーす!

  • 記事を編集した人の応援(応援されると喜びます)
  • 記事に追加して欲しい動画・商品・記述についての情報提供(具体的だと嬉しいです)
  • React(フレームワーク)についての雑談(ダラダラとゆるい感じで)

書き込みを行うには、ニコニコのアカウントが必要です!


ニコニ広告で宣伝された記事

ニコニコニューストピックス