はじめての React

Vue をちょっと使っていたのですが、解決できない問題にぶち当たってしまい、React にも挑戦してみた次第です。

Vue も React もデータバインディングを得意としたフレームワークとなんとなく捉えていますが、React のほうがより UI に近いという印象を持っています。

とはいっても、どちらも全然理解してないので、今回は React で簡単な SPA を作ってみようと思います。

スポンサーリンク

環境構築

ちなみに、SPA (Single Page Application) とは単一ページで完結している Web アプリケーションです。私の理解があっていれば、フォーム入力などによるページ遷移も行えますが、このとき見た目上はページが切り替わるものの URL は変わりません。

余談ですが、SPA は URL が統一されているので、所謂 SEO 対策には不得手であると聞いたことがあります。最も SEO 対策がどこまで意味を持っているのかというのは謎ですが…。

SPA に対して SSR (Server Side Rendering) というのもあり、これは JS の実行によってブラウザ上で DOM を生成、操作していたところをサーバ側で描画してブラウザに送信するシステムをいいます。SPA と一緒に使うことでクローラーの解析に対応できるようです。正直わけわからん…。ここに AMP やら PWA (0Service Worker) やらの概念を突っ込まれてくると混乱の極みです。

閑話休題。

早速、SPA を開発するための環境を作っていきます。React も Vue のように HTML に <script> タグで埋め込んで使うことができるようですが、読み込みが遅くなるので、Node.js で動かすこと前提で進みます。

最初に Yarn を入れておきます。これまで NPM を使っていましたが、Yarn のほうが速いらしく、NPM ユーザーの環境と衝突することもないようです。

yarn add --dev すると package.json に devDependencies として登録されます。--dev は開発中のビルドに必要なパッケージを指定するもので、本番環境では必要ないときに使うオプションです。

React で DOM をレンダリングするためには react, react-dom, babel-core が必要です。HTML に <script> タグで埋め込むときにはこれらの JS ファイルを読み込みます。

Hello React! してみる

JSX

React では JSX という記法が使われます。

ReactDOM.render() 内でレンダリングされていますが、JS 内に DOM が含まれています。実際に DOM を生成するために、Babel の JSX トランスコンパイラ babel-plugin-transform-react-jsx を使います。

React コンポーネント

まず、ツリー構造は以下のようになります。

React コンポーネントは React.Component を継承して作成します。コンポーネント内部で DOM の振る舞いを記述し、外部からクラスを呼びだせるよう export default として render() メソッドにより DOM を返します。

こうすると、呼び出した先で DOM として記述できます。

複数の JS ファイルは Webpack によってビルド時にバンドルすることで単一のファイルとして扱うことができるようになります。

そのファイルを index.html で読み込むように記述します。

ビルド

本体はできたので、ビルドの設定ファイルを記述します。

実行すると dist/bundle.js が生成され、index.html を開くと Hello, React! と表示されます。

設定ファイルの記述が間違っていると、下記のようなエラーが出ることがあります。

Webpack のバージョンによって設定ファイルの書き方が少し変わっているようですので、その際は公式ドキュメントを参考にしてください。ちなみに、私の環境は 4.6.15 です。

最後に

下記サイトが入門編として大変わかりやすかったです。

(参考)

React で作る今時の SPA (基本編) | Qiita