今回は、Node.jsを使って誰でも簡単にReactを始められる導入方法について学習をしていきましょう！
「Reactの導入部分が難しくてなかなか手が出せない」
「手っ取り早くReactを試してみたい」
「Node.jsを使わずシンプルにReactを実行したい」
このような内容も含めて、本記事では以下のような構成で解説していきます！
【基礎】「React」の使い方
【実践】Create React Appの始め方
【実践】Node.js不要でReactを実行
この記事で、Reactの始め方をしっかり学習してスキルアップを目指していきましょう！
「React」とは？
「React」はFacebookによって開発・運用されているUIフレームワークです。
Virtual DOM(仮想DOM)によって、UIが変更された部分だけを処理するシステムによって非常に簡単かつ高速に動作するのが特徴です。
特に、SNSなど頻繁にコンテンツが更新されて画面の再描画が必要なWebアプリなどで利用すると効率が良いわけです。
また、ReactはスマホアプリやVR/ARなどのアプリケーションを開発できるエコシステムが用意されているのも魅力の1つです。
「Learn Once, Write Anywhere」という有名な言葉がありますが、文字通りReactで一度プログラムを記述すればどこでも動くという意味を表しています。
「React」の使い方
この章では、簡単にReactを始めるための手順について見ていきましょう！
主に、公式で提供されているCreate React Appの始め方について学んでいきます。
Node.jsの準備
Reactを本格的に使い始めるためにはNode.jsの開発環境が必要になります。
WindowsやMacをお使いの方は、公式のインストーラーを利用すると簡単に環境を用意できます。
また、Linux系OSを利用している場合であればコマンド操作によるインストールも可能です。
各種OS別によるNode.jsのインストール方法については、次の記事で体系的にまとめているのでぜひ参考にして見てください！
CreateReactAppの始め方
Reactを手っ取り早く試したい方に向けて、実は公式のスタータープロジェクトが用意されています。
それが「Create React App」と呼ばれるツールです！
Node.jsのバージョンが6.0.0以上、npmが5.2以上の開発環境があれば誰でもコマンド一発で簡単にReactを体験できるのが特徴です。
以下のコマンドを実行するだけです！
$ npx create-react-app myapp
「npm」ではなく「npx」コマンドを使う点に注意しておきましょう。
npxはシンプルにnpmのバイナリを実行できる機能で、ローカルに存在しないパッケージが必要な場合も一時的に使えるようにしてくれます。
上記コマンドを実行するとReactを動かすのに必要なツールがすべて揃った状態になります。
Reactアプリを表示する
それでは、作成したフォルダ「myapp」に移動してからnpm startを実行してみましょう！
$ cd myapp $ npm start
自動的にサーバーが起動してURLが表示されるので、ブラウザを開いてみましょう！
すると、初めてのReactアプリが表示されます！
ファイルの構成としては、「public」フォルダにベースとなるHTMLファイルなどが入っており、「src」フォルダにReactのプログラムやスタイルなどが納められています。
基本的に改造したい場合は、「src」フォルダ内のファイルを編集することになります。
Node.jsを使わずにReactを利用
この章では、Node.js環境を使わずにReactを試す方法について見ていきましょう！
主に、CDN経由でReactプログラムを読み込んで処理する方法について学んでいきます。
HTMLファイルを作成する
それでは、まず最初にReactを利用するための準備から始めていきましょう！
必要なのは、以下のような2種類のJavaScriptファイルだけです。
https://unpkg.com/react@16/umd/react.development.js https://unpkg.com/react-dom@16/umd/react-dom.development.js
このJavaScriptファイルをベースとなるHTMLに組み込んでいきます！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React基本サンプル</title>
</head>
<body>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script>
//ここに処理を記述する
</script>
</body>
</html>
「scriptタグ」で先ほど紹介したReactのJavaScriptファイルを読み込むようにしておきます。
また、「divタグ」を1つ配置していますが、これはReactによって生成されたコンテンツを表示する場所になります。
Reactアプリを表示する
ここまでの作業で、すでにReactのプログラムを書けるようになっています。
そこで、実際にReactのプログラムを記述して簡単な文字列を画面に表示してみましょう！
何か画面に表示する場合は「render()」を次のように利用します。
ReactDOM.render(【表示するコンテンツ】, 【表示する場所】)
「表示するコンテンツ」は、例えば「h1タグ」や「aタグ」などHTMLで記述されたコンテンツのことです。
「表示する場所」は、HTMLファイルのどこにReactで生成されたコンテンツを表示するか？という意味になります。
例えば、「h1タグ」をid属性値「container」が付与されたdivタグに配置する場合は次のようになります。
const element = React.createElement;
const container = document.querySelector('#container');
ReactDOM.render(element('h1',null,'Hello React'), container);
「React.createElement」でReact用のHTMLコンテンツを生成しているのが分かるでしょうか？
これにより動的なHTMLコンテンツを生成することが可能で、render()の第1引数に指定します。
実行すると画面に「Hello React」という文字列が表示されます。
CMSとサーバーレンダリングについて
Reactは、基本的にUIに特化したフレームワークなので、それ以外のことを実現しようとすると難しくなります。
そこで、さまざまなツールチェーンが提供されているのが大きな特徴でもあります。
例えば、Reactで静的なWebサイトやコンテンツを構築したい場合には「Gatsby」というツールがあります。
また、ReactでサーバーサイドレンダリングによるWebコンテンツを作成するには「Next.js」というフレームワークがあります。
いずれも、Reactの書き方さえ覚えておけば同じように記述できるのが魅力で、さまざまなツールチェーンを利用することで実現できることが増えていくというわけです。
まとめ
今回は、Node.jsを使ってReactを簡単に始めるための導入について学習しました。
最後に、もう一度ポイントをおさらいしておきましょう！
・create-react-appというツールを使うと手軽にReactを始められる
・Node.jsを使わなくてもCDN経由でプログラムを読み込めば利用できる
・Reactにはさまざまなツールチェーンが提供されている
上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！
