Reactとは？ Windowsのパソコンでインストールをして起動してみた！

GMOクラウドアカデミー
やってみよう！
Reactとは？ Windowsのパソコンでインストールをして起動してみた！

Modern villa on residence in exotic country night, expensive mansion in lahdscape tropics

はじめまして。GMOクラウドの新卒エンジニアのはがです。PlayCanvasというゲームエンジンを広める仕事をしています。
今回は、GMOテクノロジーブートキャンプという、GMOインターネットグループの新卒エンジニア・クリエイターが、1カ月ほどかけて成果物を作成し、発表する研修があり、その研修の成果物を作成する過程でReactやVueなどのJavaScriptのフレームワークを使うことになりましたので、勉強もかねてReactについて書かせていただきます。
この記事ではReactをインストールから少し触るまでのことを書いています。今回のゴールはReactを使用したWebサイトを、ローカルで表示をすることができることをゴールとしています。

そもそもReactとは

そもそもReactとは、について簡単に紹介していきます。Reactとは、Facebookが主導をして開発をしているJavaScriptのライブラリです。FacebookやInstagram, Netflixなど多く会社での採用事例があり、下記のような特徴があります。
大規模開発にも向いている(FacebookやInstagramで使用されている)
仮想DOM（ReactのほかにはVue.jsやAngular.jsなどがあります）
コミュニティーが活発(GitHubのスター数が★130,000↑)

早速React を使った作業をみていきましょう！

それでは、このReactを使って、Hello World!と記載されたWebサイトがローカルで表示されるまでの作業を紹介していきたいと思います。

Reactの開発環境の構築は、パソコンを配布されてから、一から開発環境を構築したときのことを思い出しながら環境構築をしていきます。
（インストールまでの開発環境の構築はWindows向けで書かせていただきます）

用意する環境

Windows 10
エディター(Visual Studio Code等)

① Node.jsをインストール

Reactのインストールには、npmのライブラリでReactの開発環境を作るパッケージを使用します。下の例ではcreate-react-appで開発環境の構築をしているので、Node.jsを事前にインストールする必要があります。
Reactを使用する前に、必要なソフトウエアのインストールをしていきます。こちらの公式サイトからLTS版（執筆時では10.16.0）のダウンロードをしてください。

②Gitをインストール

Nodeと同様にGitのインストールもしてください、こちらはWindows環境でBashの操作をするためのGit Bashを使用します。

③Reactをインストール

ここまでインストールができたら次はReactのインストールを行います。Node.jsをインストールしたことでnpxというコマンドが使えるようになりました。
Git Bashでnpxを使用してcreate-react-appライブラリを実行し、Reactの開発環境を整えます。

npx create-react-app my-app

こちらのコマンドはReactの基本的な環境を整えてくれるコマンドで、ひな形も作ってくれます。

④ Reactで Hello World を表示させる

Reactの起動には、package.jsonの中にある、npmスクリプトのstartを使います。package.json内のScriptsに入っている、startは開発に使用します。buildコマンドでデフォルトでは/buildにHTML・JavaScriptが出力されます。

cd my-app

npm run start

ブラウザでhttp://localhost:3000/にアクセスをしReactのロゴが回っていればインストールは成功です。

App.jsからReactをひも解く

最初Reactに触ったときは、JavaScriptは少し触ったことがあったけれど、ES6とか全然わからないという状態でReactを触ったのでそのときに理解をはかどらせたことを紹介します。
create-react-appコマンドを使って生成しApp.jsのソースコードに①～④までの番号を付けてそれぞれがどのような働きをしているかを調べてみます。

import React from 'react';　//①Reactをimport
import logo from './logo.svg';// ②logo.svg を読み込む
import './App.css';

function App() {
  return (
    <div className="App"> {/* ③JSXによるHTMLの定義 */}
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js </code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App; //④Appという関数をデフォルトエクスポート

① Reactをimport

import React from 'react';

1行目のimport React from 'react'につきましてはMDNのこちら(import)に詳しく書いてありました。MDNを参考にするとimportしているJavaScriptのライブラリはどこかでexport defaultしていることがわかかります。
上記のコードはreactライブラリ内でデフォルトエクスポートされた関数をReactという名前でimportしています。reactというライブラリはディレクトリの中のnode_modules>react>index.jsに定義されています。
Node.jsでライブラリがimportされる順番については組み込みの関数--> node_modules --> ディレクトリ内という順番で探され見つかったものが使用されます。今回はnode_modules内に入っているreactというライブラリが使用されています。

② logo.svgを読み込む

import logo from './logo.svg';// ②logo.svg を読み込む
import logo from './logo.svg';//
console.log(typeof logo); //typeofを使用して変数の型を出力
// string

console.log(logo); // console.logを使用してlogoの情報を出力
// /static/media/logo.5d5d9eef.svg

logo.svgをimportすると logo.svgへの相対パスが文字列としてimport定義されております。こちらでimportしたlogoについては開発環境でビルド後の相対パスが挿入されています。

③JSXによるHTMLの定義

<div className="App"> {/*③JSXによるHTMLの定義 */}
...
</div>

Reactは、JSXによって記述されています。JSXによって記述されているコードはビルドときにBabelというライブラリを使用して下記のようなコードにトランスパイルされたものを、index.htmlから呼び出し、画面に描画しています。

<script src="/static/js/main.8b30636a.chunk.js"> </script>

a.a.createElement(
    "div",
    { className: "App" },
 ...
);

④Appという関数をデフォルトエクスポート

export default App; //④Appという関数をデフォルトエクスポート

App関数をデフォルトエクスポートしています。このデフォルトエクスポートした関数は、index.jsで importをして使用しています。

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App"; //④のApp関数をデフォルトインポートしている
import * as serviceWorker from "./serviceWorker";

ReactDOM.render(<App />, document.getElementById("root"));

serviceWorker.register();

⑤App.jsを書き換える

最後にプログラムを少し書き換えてみましょう。create-react-appで作ったプロジェクトにはホットリロードという機能があります。この機能を体験するために、npm run startをしている状態でApp.jsを書き換えてみましょう。エディターでApp.jsを保存をするとhttp://localhost:3000の内容が書き変わっているかと思います。

import React from 'react';
// import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src="https://www.gmocloud.com/template/img/logo/logo_gmocloud.svg" className="App-logo" alt="logo" />
        {/*ロゴを変更する*/}
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

ロゴが変わりましたね、このままの色では少し見えにくいのでApp.cssも書き換えます。

.App {
  text-align: center;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 40vmin;
  pointer-events: none;
}

.App-header {
  /* background-color: #282c34; */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  /* color: white; */
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}