さて、今回はReactを使っていく為に必要な準備、導入方法を紹介していきます。Reactはフレームワークになります。jQuery同様にhtml上に反映するにはタグをつけるなど、何かしらでReactのことを紹介しないといけません。
ここでは、Reactの導入方法を三つご紹介したいと思います。
Reactを導入する三つの方法
プログラミング学習者からみましてReactをはじめる手段は大きく三つになると思います。それは以下の手段になります。
- Scriptタグにて読み出して動かす
- Create React Appで動かす
- 開発環境を全て作り上げて動かす
Reactが使えるようになるという点ではいずれでも構いませんが、導入の手間とできることの範囲にて異なります。1.から3.になるにあたって導入の手間が増え、できることが多くなるとお考えいただくのが良いのかなと思います。
さて、オススメは2.の手段になります。1.はReactを使えるのですが、本当に初歩のことしかできません。JSXも使いませんし、何より処理負担が大きく、サービスを作るにあたって実用的ではありません。Reactというものはどういったものかを知るだけと思ってください。
3.についてはReactを使っていく上で、必要になるNode.jsやBabelを自力で導入していく必要があるので、初めてには障壁画高いです。
ですので、ここでは1と2を紹介します。
HTML上でScriptタグから呼び出して動かす
jQuery同様、Scriptタグにて呼び出して動かすことが可能です。Reactの以下のサイトにいき、あるコードをscriptとして記載すれば準備OKです。
こちらでやっていることは、
- HTML上に読み出すコンテナを置いておく
- React用とDOM用、コンテナ読み出し先のjsファイルを読み出すscriptを記載しておく
- jsファイルを作る
- jsファイル内に書き込む（サンプルコード貼り付け）
- domcontainerとして定義してHTML上に表示するよう記載する
あとは、jsファイル内にReactを書いていけばOKです。ただ、複雑なコードですと、JSXが必要になりますし、その為には他にも準備が必要となります。
Create React Appで動かす その1 〜Reactを動かすのに必要なもの〜
Reactを動かすにあたって必要なものがあります。それは、「Node.js」「npm」「babel」です。簡単に紹介すると以下になります。
Node.js ・・・javaScriptをサーバーサイドでも動かせるようにできるプラットフォーム。
npm ・・・Node.jsを利用するにあたっての必要な情報を取りまとめて動かす
babel ・・・新しいJavaScriptの形式を今のサービスでも対応できるように書き換えるもの。
JavaScriptはクライアント側（ユーザーから見える側）の言語であり、ブラウザでは対応されているのですが、サーバー側からするとよくわからない言語になります。Reactはサーバーサイトでも活用されるので、Node.jsにて動けるようにする必要があるんですね。
例えたら海外旅行に行く時の役割と似ているでしょうか。Babelでは今回の場合JSXを実際に動かせるように書き換えてくれます。
Create React Appで動かす その2 〜導入する手順〜
必要なものがわかったので、導入していきたいと思います。実際に開発環境としてNode.jsやbabelを導入していくとなると、結構敷居が高くなります。そんな中、Create React Appという開発環境設定をせずともカンタンにReactアプリを開発できるライブラリが公式からリリースされています。便利な世の中になったもんですね。
プロとなって本格的な知識や体制が必要であれば、Node.jsなどもしっかり学ぶ必要がありますが、Reactの第一歩や趣味で制作するのであれば、Create React Appで十分です。その手順を紹介していきたいと思います。
まずは、Node.jsをインストールします。Node.jsの公式より最新のパッケージをダウンロードしてインストールしましょう。
バージョン確認にてnpmもインストールされていることが確認できます。
ここからCreate React Appをインストールします。ターミナルにて以下のコマンドを入力し、インストールしましょう。
$ npm install -g create-react-app
これで、実装は完了です。ディレクトリを用意して、早速作ってみましょう。
$ create-react-app my-app
さて、これで動作に必要な一式は揃いました。アプリケーションのディレクトリからnpm startと入力し、Reactを起動しましょう。
$ npm start
ローカル環境にてReactが動いていますね！これで導入は完了です！
導入手順はまとめると以下になります。
- Node.jsをサイトよりダウンロードしてインストール
- “npm install -g create-react-app”でCreate React Appをインストール
- “create-react-app my-app”でアプリケーションを作成
- アプリケーションのディレクトリに移り”npm start”で起動
簡単ですよね。実際にNode.jsやbabelを勉強していくとなるとかなり学ぶことが多いです。プログラミング学習においてはまずは「動かせる」「書いたコードが反映されているのがわかる」という手応えが、学習モチベーションとしても大事だと思います。なので、最初はCreate React Appにて動かしてみるのがオススメと考えます。
次は実際にWebサイトを作ってみたいと思います！
コメント