Reactを学ぶ。2日目 VSCodeでチュートリアルの環境構築

前回の記事はこちら 920oj.hatenablog.com

早速Reactのチュートリアルに取り掛かろうと思います。

チュートリアル中に「チュートリアルの準備」というセクションがあり、その中に開発環境を構築する部分があります。自分は元よりVisual Studio Codeを使っていて、こちらのほうが馴染みがあるので、備忘録も兼ねてVSCodeでの環境構築についてメモします。

Node.js・npmのインストール

Reactアプリを開発し始める際に、npmというソフトウェアを使います。そもそもnpmとはなんぞや、というところから自分は始まるのですが、

Node.jsで使われるパッケージ管理ツールのことで、予め用意されている機能を自分のプログラムに組み込んだりするときに用いられるもの

らしいです。（正確に言えば違うと思うんですが、素人の認識ということで甘めに見ておいてください） 詳しく知りたいならTechAcademyの記事とか、Wikipedia)とか参考になると思います。自分は流し読みしました。

このnpmの機能に、Create React Appという物が備わっており、npmでそのコマンドを入力するだけで、とりあえずReactの開発を始められるとのこと。

早速インストールです。npmをインストールするために、Node.jsのウェブサイトに飛びます。npmはNode.js内の機能なので、同時にインストールされる模様です。

nodejs.org

自分の環境はWindows 10 1803 64bitなので、Windowsのマークを選択。インストーラーがダウンロードされます。

ダウンロードされたmsiファイルを実行。「node-v10.15.3-x64.msi」というファイル名でした。記事執筆時点のLTSバージョンは10.15.3、

インストールが始まります。基本「次へ」で良いみたいです。

インストール完了したらFinish。念の為PCを再起動しておきます。

再起動後、コマンドプロンプトを立ち上げて、「node -v」と「npm -v」の２つのコマンドを入力、バージョンが表示されたらインストール成功です。

ちなみに実際の実行ファイルは C:\Program Files\nodejsにあるようです。

作業用スペースを作る

ドキュメントでもどこでも良いので、作業用スペースを作っておきます。自分はドキュメントフォルダの中に、「React」フォルダーを作っておきました。フルパスは C:\Users\○○○○○\Documents\Reactになります。

これを右クリックし、VSCodeで開きます。右クリックメニューに登録していない方は、VSCodeを開いてから、ファイル→フォルダを開く　でも構いません。

開きました。

雛形を作る

ターミナルを開きます。画面下部にパネルが出ていない方は上部メニュー「ターミナル」→「新しいターミナル」で開きます。

念の為カレントディレクトリ（今自分がいるディレクトリ）が正しいことを確認。

ここに、

npx create-react-app tutorial

と入力し、Enter。

1分ぐらい待ちます。一番最後にHappy Hacking!と出てこればOK。

プロジェクトを空にする

チュートリアルでは、ここからsrcフォルダにあるファイルを全消去するよう指示されています。

VSCode左側のファイラーより、srcフォルダを開き、中に入っているファイルをすべて消去します。srcフォルダまるごと消さないように。

index.cssを作る

src/フォルダ内に、以下の内容をコピペしてindex.cssを作ります。 ファイルの作成はフォルダを一度選択してから右クリックし、ファイルの作成をクリックします。

index.css

body {
  font: 14px "Century Gothic", Futura, sans-serif;
  margin: 20px;
}

ol, ul {
  padding-left: 30px;
}

.board-row:after {
  clear: both;
  content: "";
  display: table;
}

.status {
  margin-bottom: 10px;
}

.square {
  background: #fff;
  border: 1px solid #999;
  float: left;
  font-size: 24px;
  font-weight: bold;
  line-height: 34px;
  height: 34px;
  margin-right: -1px;
  margin-top: -1px;
  padding: 0;
  text-align: center;
  width: 34px;
}

.square:focus {
  outline: none;
}

.kbd-navigation .square:focus {
  background: #ddd;
}

.game {
  display: flex;
  flex-direction: row;
}

.game-info {
  margin-left: 20px;
}

index.jsを作る

CSSと同様に、jsファイルも作成します。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {/* TODO */}
      </button>
    );
  }
}

class Board extends React.Component {
  renderSquare(i) {
    return <Square />;
  }

  render() {
    const status = 'Next player: X';

    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

class Game extends React.Component {
  render() {
    return (
      <div className="game">
        <div className="game-board">
          <Board />
        </div>
        <div className="game-info">
          <div>{/* status */}</div>
          <ol>{/* TODO */}</ol>
        </div>
      </div>
    );
  }
}

// ========================================

ReactDOM.render(
  <Game />,
  document.getElementById('root')
);

以上の2ファイルを保存し終えたら、一度確認しましょう。

動作確認する

この状態で、ターミナルに

cd tutorial

と入力・Enterを押し、カレントディレクトリを変更した後で、

npm start

と入力し、Enterを押すとアプリが実行されます。

起動すると自動でブラウザが開き、localhostを参照しますが、もし開かなかった場合は

http://localhost:3000/

を開いてください。

このように表示されたら、チュートリアルの環境構築は成功です。お疲れ様でした。

ターミナルに戻り、Ctrl+Cを押し、Yを押すとNord.jsのサーバが終了します。

まとめ

今日の記事はVisual Studio Codeの環境構築で終了です。次回からは早速、チュートリアルの内容を行っていきたいと思います。