React: Visual Studio Codeで開発環境を整える

[React](https://reactjs.org/)はwebアプリケーションのユーザーインタフェース(UI)を組み立てるために、Facebookが開発したJavaScriptライブラリです。Visual Studio CodeはReact.js IntelliSenseに対応したコードナピゲーションを備えています。本稿では、Visual Studio CodeでReactアプリケーションを開発するための環境の整え方を、Visual Studio Codeサイトの「[Using React in Visual Studio Code](https://code.visualstudio.com/docs/nodejs/reactjs-tutorial)」に沿ってご説明します。

![qiita_12_002_001.png](https://qiita-image-store.s3.amazonaws.com/0/262045/9ddd1fde-f74c-908c-1234-0921a47538e9.png)

# npmのインストール
Reactの環境は、[npm](https://code.visualstudio.com/docs/nodejs/reactjs-tutorial)(Node Package Manager)でつくります。npmは[Node.js](https://nodejs.org/ja/)に備わっているパッケージマネージャです。まだnpmが入っていない場合には、まずNode.jsをインストールしてください。本稿執筆時の推奨版の最新は10.14.1 LTS(Long Term Support)です。

![qiita_12_002_002.png](https://qiita-image-store.s3.amazonaws.com/0/262045/845420ee-3bc8-bf2f-ba7f-466a285f4173.png)

Node.jsおよびnpmがインストールされているかどうかは、コマンドラインツールでつぎのようにバージョンを調べればわかります。

```terminal
$ node -v
v10.13.0
$ npm -v
6.4.1
```

# create-react-appでReactのひな形アプリケーションをつくる
Reactアプリケーションのジェネレータ`create-react-app`を、コマンドラインツールからつぎのようにグローバルにインストールしてください。

```terminal
$ npm install -g create-react-app
```

インストールできたら、ひな形のアプリケーション`my-app`をつくりましょう。アプリケーションを納めるディレクトリに移って、つぎのコマンドを入力してください。

```terminal
$ create-react-app my-app
```

コマンドに与えた`my-app`という名前のフォルダがつくられ、依存関係を含めた必要なファイルがつぎのように納められます。

![qiita_12_002_003.png](https://qiita-image-store.s3.amazonaws.com/0/262045/a806aca1-77e9-99aa-df5e-ad01418c0d0f.png)

これですぐにひな形のReactアプリケーションを、ローカルサーバーで開くことができます。つぎのようにアプリケーションのディレクトリ(`my-app`)に移って、コマンド`npm start`を打ち込んでください。

```terminal
cd my-app
npm start
```

ブラウザのURL[`http://localhost:3000`](http://localhost:3000)でアプリケーションのページが開くでしょう。

![qiita_12_002_004.png](https://qiita-image-store.s3.amazonaws.com/0/262045/6e2d425e-205a-d520-0437-129811038bf3.png)

ローカルサーバーが動いている間、コマンドラインツールの画面は待機状態になっています。アプリケーションの編集をするには、このまま開いていて構いません。停止したいときは[control]/[Ctrl] + Cです。改めてサーバーを起ち上げるには、また`npm start`を入力してください。

![qiita_12_002_005.png](https://qiita-image-store.s3.amazonaws.com/0/262045/c476d39e-b331-d60b-5ef5-43a0d7dedfca.png)

アプリケーションフォルダ(`my-app`)内の`README.md`の中身は、Reactアプリケーションで使える`npm`のコマンド(スクリプト)の一覧とその説明です。Visual Studio Codeの[Markdown Preview](https://code.visualstudio.com/docs/languages/markdown#_markdown-preview)を使えば、マークダウンされた書式で見ることができます。ショートカットキーは、[command]/[Ctrl] + [shift] + Vです。

![qiita_12_002_006.png](https://qiita-image-store.s3.amazonaws.com/0/262045/5a98511a-c54e-95e3-766c-120bf1227fcf.png)


# IntelliSenseを使ったコードの書き替え
[IntelliSense](https://code.visualstudio.com/docs/editor/intellisense)により、シンタックスカラーやコード補完の機能が働きます。アプリケーションの`src/App.js`を開くと、[JSX](https://reactjs.org/docs/introducing-jsx.html)もカラーリングされていることが確かめられるでしょう。

![qiita_12_002_007.png](https://qiita-image-store.s3.amazonaws.com/0/262045/abf0ffde-2e5a-9dbc-ec27-203286c97452.png)

そして、JSXについてもコード補完が使えるのです。

![qiita_12_002_008.png](https://qiita-image-store.s3.amazonaws.com/0/262045/d970de7f-5e3f-4f60-5ff0-d0c06755329f.png)

JSXのコードに`<h1>`要素を加え、テキストは日本語に書き替えてみます。

```react
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1>Hello React!</h1>
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            <code>src/App.js</code>を編集したら保存する。
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;
```

ファイルを保存して、ブラウザのアプリケーションページに切り替えると、修正がただちに反映されているはずです。

![qiita_12_002_009.png](https://qiita-image-store.s3.amazonaws.com/0/262045/9dd22e65-a5bc-fc3b-a590-4092c48e95d9.png)

# 拡張機能
「[Using React in Visual Studio Code](https://code.visualstudio.com/docs/nodejs/reactjs-tutorial)」には拡張機能も紹介されています。[Debugger for Chrome](https://code.visualstudio.com/docs/nodejs/reactjs-tutorial#_debugging-react)や[ESLint](https://code.visualstudio.com/docs/nodejs/reactjs-tutorial#_linting)など、まだ入れていない方は検討されるとよいでしょう。

![qiita_12_002_010.png](https://qiita-image-store.s3.amazonaws.com/0/262045/8b2ee8ab-9e45-64dc-fe43-db4993ab063e.png)