Reactの世界観

Reactによるプログラミングに関する世界観です。

React

Facebookが中心となって開発されているJavaScriptフレームワーク。Angularと同様、コンポーネント指向だが、よりシンプルで、ビュー単体として設計されている。

JavaScriptの中に直接HTMLライクなタグを記述できる「JSX」という技術を採用している。このためコードはBabelと呼ばれるトランスコンパイラ言語で記述する。Reactを用いたコンポーネントの作成とJSXを組み合わせることにより、JavaScriptにおいて新しいHTMLタグを自由に作成できる。

Reactを使って作れるのは、単なるタグだけではなくアプリケーション全般。たとえば、ブラウザ上で動作する電卓、カレンダー、TODOアプリ、プロジェクト管理ツール、ゲームのようなものを作ることができる。

Facebookも参照のこと。

Reactのインストール

以下のようにnpmから導入できる。

npm install react

あるいは、CDNを利用することもできる。

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.22.5/babel.min.js"></script>

あるいは、React公式のZIPファイルからbuildディレクトリの中にあるスクリプトのファイルをコピーして自分のWebサイト内のディレクトリに配置し、react.min.jsとreact-dom.min.jsを読み込むスクリプトタグを記述してもよい。

後日注記：*.min.jsは圧縮済みのスクリプトファイルで、実際のリリースされるサービスに使う。これに対して*.jsは圧縮されていないスクリプトファイルで、ソースコードの内容を自分で読みたい場合に使う。babel.min.jsはReactには含まれていないがJSXのために必要なBabelというソフトウェア。

詳しくは以下の書籍・ページを参照のこと。

2023.06.25編集

Reactの基本

Reactは画面表示だけのシンプルなフレームワークで、ビューしか存在しない。

主要技術は、JSXとBabelによってHTMLタグをそのまま書けること、それからVirtual DOMという仮想的なDOMによりDOMを直接操作せず、更新部分だけをDOMで差分表示するため表示が高速になる。

・スクリプトの言語にはtype="text/babel"を設定する。

・基本のオブジェクトはReactオブジェクト。このオブジェクトから

var HogeComponent = React.createClass({
  displayName: 'hoge component',
  render: function() {
    return (
      <p>My name is {this.props.name}.</p>
    );
  }
});

ReactDOM.render(
  <HogeComponent name="Assy"/>,
  document.getElementById('hoge')
);

とすることで、コンポーネントを作成する。

・コンポーネント（たとえばHogeComponent）は基本的に、クラスをReact.createClass()で生成し、それをReactDOM.render()で表示する。React.createClass()の中にはfunctionも多数記述され、たとえば画面出力を行うrender()関数などを記述する。（後述する具体例にあるように、React.Componentを継承して派生クラスにすることでもコンポーネントを作成できる。）

・ReactDOM.render()メソッドでレンダリングを行う。JSXにより、HTMLタグをそのまま記述できる。第一引数にはレンダリングの内容（たとえば<HogeComponent/>）、第二引数には表示するDOM（id="hoge"などに相当するDOM要素）を指定する。こうすると、<div id="hoge">に<HogeComponent/>の内容が表示される。

・{}で囲まれた中にはJavaScriptでの値を記述する。

・propsを使うことで、コンポーネントに対して外部から値を渡すことができる。

・このほか、React内で情報を状態として保持することのできるState（JavaScriptから画面への一方向のデータの受け渡しではなく、後ろにあるJavaScriptにデータを受け渡せる）や、ユーザーの操作に対応するイベント（onClickのようにonの後の一文字目を大文字にする）などの機能がある。

詳しくは以下の書籍を参照のこと。

JavaScript フレームワーク入門

Reactの具体例

以下はReactの具体例。

<h1>あなたのお気に入り情報</h1>
<div id="personal_information"></div>

<script type="text/babel">
class Favorites extends React.Component {
  render() {
    return (
      <div>
        <p>あなたの名前は{ this.props.name }さんです。</p>
        <p>あなたの好きなOSは{ this.props.favorite_os }です。</p>
        <p>あなたの好きなプログラミング言語は{ this.props.favorite_proglang }です。</p>
      </div>
    );
  }
}

ReactDOM.render(
  <Favorites name="Assy" favorite_os="Gentoo Linux" favorite_proglang="Delphi" />,
  document.getElementById('personal_information')
);
</script>

コンポーネントの中にコンポーネントを入れ込むこともできる。なので、

class YourName extends React.Component {
  render() {
    return (
      <p>あなたの名前は{ this.props.name }さんです。</p>
    );
  }
}

class FavoriteOS extends React.Component {
  render() {
    return (
      <p>あなたの好きなOSは{ this.props.favorite_os }です。</p>
    );
  }
}

class FavoriteProglang extends React.Component {
  render() {
    return (
      <p>あなたの好きなプログラミング言語は{ this.props.favorite_proglang }です。</p>
    );
  }
}

class Favorites extends React.Component {
  render() {
    return (
      <div>
        <YourName name={ this.props.name } />
        <FavoriteOS favorite_os={ this.props.favorite_os } />
        <FavoriteProglang favorite_proglang={ this.props.favorite_proglang } />
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById('personal_information'));
root.render(<Favorites name="Assy" favorite_os="Gentoo Linux" favorite_proglang="Delphi" />);

のように書き、YourName, FavoriteOS, FavoriteProglangを別々のクラスとして定義することもできる。

以上のコードは以下の書籍・ページを参考に執筆しました。

後日注記：createRoot()はReact18からの新しいレンダリングのための関数です。並列処理関連の機能のために使用します。今までの関数も動作します。

2023.06.25編集

2024.07.14編集

Stateを使うと状態を保持できる

このほか、Stateを使うとその時の状態を保持することができる。

PropsとStateを使うことで、さまざまなReactだけのアプリケーションが開発できる。

たとえば、

this.setState({
  age: 18
});

としたものを、

<p>{ this.state.age }</p>

のように使う。

現在のStateの値を使って新しい値を設定する場合は、以下のようにする。

this.setState((state) => ({
  msg: 'Hello, ' + state.msg
}));

後日注記：Stateを使うことで、「現在のReactアプリケーションが持つ状態」を保持・変更できる。そのため、電卓やTODOアプリのように、入力・操作した内容をStateに保管することで、さまざまなアプリケーションを制作できる。

詳しくは以下を参照のこと。

2024.07.14編集

イベントを使うとユーザーの操作に対応できる

また、これだけでは、ユーザーインターフェースの表示はできても、ユーザーからのクリックなどのイベントに対応することができない。

そのため、イベントを用いてユーザーの操作に対応した処理を書くことができる。

まず、イベントハンドラ関数を作る。これはReactのクラス定義の中にhandleOnClick()関数などを記述する。名前はイベント名のOnClickの前にhandleを付けるのが一般的。

class FugaComponent extends React.Component {
  handleOnClick(e) {
    // ここでクリック時に行われる処理を書く
  }
}

次に、画面からこの関数を実行できるように、onClickイベントにこの関数を指定する。

<input type="button" value="クリックしてね" onClick={ this.handleOnClick } />

onClick以外にも、フォームが変更された時を意味するonChangeなどのイベントがある。

こうすることで、ユーザーのイベントに対応したReactアプリケーションを記述できる。

たとえば、

class FugaComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { msg: 'Hello, Hoge!' };
  }

  handleOnClick(e) {
    this.setState({ msg: 'Hello, Fuga!' });
  };

  render() {
    return (
      <p>{ this.state.msg }</p>
      <button onClick={ this.handleOnClick }>クリックしてね</button>
    );
  }
}

のようになる。

詳しくは以下の書籍・ページを参照のこと。

2023.06.25編集

2024.07.14編集

スタイルの適用

Reactでは、タグに

<div className="hoge">

のようにclassNameでCSSのクラスを指定します。

あるいは、直接スタイルを指定するには

<div style={{ textAlign: "center" }}>

のように二重波カッコ{{}}で指定します。text-alignではなくtextAlignと書くことに注意。

詳しくは以下を参照のこと。

今からはじめるReact.js〜スタイルの適用〜 - Qiita

拡張子の.tsと.tsxの違い

ファイルの拡張子として、.tsファイルはJSXを含まない純粋なTypeScriptファイル。これに対して.tsxはJSXを含むTypeScriptファイルである。

【TypeScript】.ts拡張子と.tsx拡張子 #React - Qiita

2024.06.18

JSONデータの読み込み

ReactでJSONデータを読み込むには、以下のようなページが参考になる。僕自身はやったことがないため分からないが、Web APIからJSONを読み込むこともたぶん可能だと思う。

以下はローカル（サイト内）にJSONデータファイルがある場合の読み込み方法。

以下はAPIとしてJSONデータを読み込む方法。

以下はCData Connect Serverというサービスを使う方法。

JSON データを使った動的なReact アプリケーションを作成する方法 - CData Software Japan

ExpressやFirebaseも参照のこと。

2024.07.30

Reactでできること

柔軟性が高く簡単

Reactは、柔軟性が高く簡単である。たとえば、クラスを作成したり継承したりして作ったタグ（JSXタグ）は、HTMLのタグと同様に簡単に使える。Reactを用いたスクリプトの内部で、呼び出しや出力文字列などに自分で作ったタグを埋め込める。

なので、タグをクラスで作り、そのタグをさまざまなところで柔軟に活用できる。

また、JSXタグを作成するためのコンポーネントの作成方法と、stateやイベントを用いたイベント駆動による状態保持の方法、あるいは仮想DOMぐらいを覚えれば、簡単なアプリケーションは開発できる。またビューしか存在しないため、理解することがとても簡単である。

HTML直書きではできないことができる

ReactやVue.jsのようなJavaScriptフレームワークがなぜ便利なのか、それは「HTML直書きではできないことができる」からです。

たとえば、変数を使ってさまざまな場所に同じ内容を記述したい場合や、一部分だけを変えて同じHTMLコードを複数の部分で使いまわしたい場合などに、ReactのようなJavaScriptフレームワークは、HTML直書きではできないことをスマートに実現できます。

また、Reactのマスターになると、まるでデスクトップのGUIアプリケーションと遜色のない、メニューが飛び出したりボタンが動いたりといった記述も可能となります。

テンプレートについても、内部でStateで状態を保持しながら、たくさんのHTMLの記述を関数やクラスを用いてプログラマブルに操作することもできます。

また、フロントエンドで完結するのではなく、Web APIを用いてバックエンドと連携すれば、掲示板やSNSをデータベースサーバと通信して作ることもできます。これはRuby on RailsのようなMVCフレームワークのビューの部分だけをフロントエンドのJavaScriptで行う感覚です。

ダイナミックに作成できるテンプレート

Reactについて言えば、タグを作成するというよりも、ダイナミックに作成できるテンプレートであると思います。

テンプレートをさまざまなHTMLの集合体であるとした上で、ダイナミックにそのHTMLの要素や属性やスタイルを変えたり、さまざまなイベント処理で操作したり、内部で状態を保持したり、状態を場合によって書き換えたりする、ということが、JavaScriptでプログラマブルにできるシステムではないかと思います。テンプレートの各コンポーネントは単独で使うだけではなく、まるで部品と部品を組み合わせて機械を作るように、複数組み合わせて使うこともできます。

Reactの優れた点は、JavaScriptとHTML/CSSという技術の長所を活かしていることだと思います。テンプレートは単にHTMLの集合体を返すだけではなく、JavaScriptを用いてダイナミックかつプログラマブルに作成できます。このため、たとえばGoogleの作るWebサービス（オンライン地図など）のような、複雑なWebサイトを簡単に作成することができます。

Ajaxも使われているため、GUIアプリと遜色のないアプリをWebブラウザ上で作ることができます。Firebaseなどを使えば、Railsのようなバックエンドフレームワークも必要なく、仮想サーバのOSの管理やメンテナンスにもコストがかかりません。とても「楽」です。楽にWebアプリを作り、迅速に提供できると言えます。

ただし、僕自身、Reactというものがなんであるか、まだきちんと分かっていません。なので、僕の言っていることを盲信せず、以下のような書籍を読むことをおすすめします。