ReAct

reactとは、反応する・反応を示すなどの意味を持つ英単語である。

曖昧さ回避の記事

1. MELTY BLOOD Re・Act -対戦格闘ゲーム『MELTY BLOOD』シリーズのひとつ。MELTY BLOODの記事を参照。
2. ReAct - 黒うさPによるボーカロイドのオリジナル曲。該当動画記事参照。→動画記事
3. React - JavaScriptで実装するWebアプリケーションフレームワーク。詳細は公式サイトを参照せよ。

 ３の概要

Facebook社とそのコミュニティによって2011年に開発されたJavaScriptフレームワークで、実は同社のFacebookやインスタグラムを動かしているのはこいつである。

他のフレームワークと比較すると、JSXというhtmlとほぼそっくりな言語をJavaScript内に埋め込むことができ、そこでインタラクティブな操作を可能にしている（これをリアクティブと呼んでいる）。今日、webアプリのシェアは他を圧倒するまでとなっており、jQuery の開発者でさえReactに首ったけになっていることをコメントに残している。

ただ、初心者にはおすすめできないほど記法には癖があり、JavaScriptのECMA6をマスターしていないと話にならない（16.7以前だとオブジェクト指向の知識が必要）。まあ、どんな記法かというと

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')
);

こんな感じである。決して暗号ではない。生理的に違和感を与える（特にプログラマーにとって）のはJavaScriptの中にhtmlタグ（厳密にはJSX）がそのまま入っているためであろう。

しかし、基本はコンポネント作成部分とコンポネントの出力部分にわけられ、前者は更に定義部分、メソッド部分、JSXのレンダリング部分とわけることができる。

ただ、これらは16.7までの一昔前の記法であり、16.8以降となると全く別の記述方法になるのである（ただし、16.7以前が浸透していたため、今は2つの書き方が並行している状態）。

また、アプリ用にReact Nativeというモバイルアプリケーションフレームワークがあり、これのシェアは今や世界を制しつつある（そして、こいつの主流が未だ16.7以前であるために二種類の記法がごっちゃになり世界のPGを苦しめている）。

Kotlin？Rust？なにそれ食えるの？

関連項目

• reactor
• JavaScript
• フレームワーク
• Facebook