5.6 - Reactアプリを作成する

Reactアプリを作成する

Reactはスタンドアロンなアプリケーションです。このため、通常はReactアプリケーションを独自のGitHubリポジトリに置くことになります。RustアプリケーションとReactアプリケーションを同じGitHubリポジトリで管理したい場合は構いませんが、ルート内の異なるディレクトリにあることだけは確認してください。Rust Webアプリケーションの外側に移動したら、次のコマンドを実行します。

$ npx create-react-app front_end

これでfront_endディレクトリにReactアプリケーションが作成されました。中を見てみると、たくさんのファイルがあることがわかります。本書はRustを使ったWebプログラミングについて書かれていることを忘れないでください。Reactのすべてを探求することは、本書の範囲を超えています。しかし、Reactの開発に特化した書籍は、「Further reading」のセクションで提案されています。今は、front_end/package.json ファイルに注目します。package.jsonファイルは、Cargo.tomlファイルのようなもので、依存関係やスクリプト、構築中のアプリケーションに関するその他のメタデータを定義する場所です。package.jsonファイルの中には、以下のスクリプトが含まれています。

. . .
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},
. . .

必要であれば編集できますが、現状では、package.jsonファイルがあるディレクトリでnpm startコマンドを実行すると、react-scripts startコマンドを実行することになります。すぐにReactアプリケーションを実行しますが、その前に、front_end/src/App.jsファイルを以下のコードで編集しておく必要があります。

import React, { Component } from 'react';
class App extends Component {
  state = {
    "message": "To Do"
  }
  render() {
    return (
        <div className="App">
          <p>{this.state.message} application</p>
        </div>
    )
  }
}
export default App;

このコードを分解する前に、明らかにしておかなければならないことがあります。インターネットを見ると、「JavaScriptはクラスベースのオブジェクト指向言語ではない」と書かれた記事に出会うことがあるかと思います。本書は、JavaScriptを深く掘り下げるものではありません。その代わり、この章では、フロントエンドを立ち上げるのに十分な知識を与えることを目的としています。この章を読めば、RustのWebアプリケーションにフロントエンドを追加したいと思ったときに、さらに読み進めやすくなり、あなたの旅が始まることを期待します。この章では、継承をサポートするクラスとオブジェクトについてだけ説明します。

先のコードでは、reactパッケージからcomponentオブジェクトをインポートしています。そして、コンポーネント・クラスを継承するAppクラスを定義しました。Appクラスはアプリケーションの主要部分であり、front_end/src/App.jsファイルをフロントエンドアプリケーションのエントリポイントとして扱うことができます。Appクラスでは、必要に応じて他のルートを定義することができます。また、Appクラスに属するステート（状態）があることも確認できます。これは、アプリケーションの全体的なメモリです。ステートが更新されるたびに、render関数が実行され、コンポーネントがフロントエンドにレンダリングする内容が更新されます。これにより、この章の前のセクションで、ステートが自作のレンダー関数を更新するときに行っていたことが、かなり抽象化されました。レンダリング関数の戻り値で、状態を参照できることがわかります。これはJSXと呼ばれるもので、余分なメソッドを使わずにJavaScriptで直接HTML要素を記述することができるようになります。さて、基本的なアプリケーションの定義ができたので、これをエクスポートして利用できるようにしましょう。

package.jsonファイルが置かれているディレクトリに移動して、以下のコマンドを実行しましょう。

$ npm start

Reactサーバーがスピンアップして、ブラウザに以下のようなビューが表示されます。

図5.10「Reactアプリケーションの最初のメインビュー

ここでは、ステート内のメッセージがレンダー関数に渡され、ブラウザに表示されていることがわかります。これでReactアプリケーションが起動したので、APIコールを使ってReactアプリケーションにデータをロードし始めることができます。