Reactの開発環境を簡単に構築しよう

#目次

• 概要
• Reactとは
• 開発環境構築
• まとめ

#概要
Reactの概要とReactの開発環境を簡単に構築する方法をまとめたものです。これからReactを勉強し始めるという方の一助となるようであれば幸いです。

#Reactとは
Reactとは、簡単に説明するとユーザインタフェースを効率的かつ柔軟に構築するためのJavaScriptライブラリです。
##Reactの特徴
React公式サイトで紹介されている主な特徴を３つ紹介します。
###1. 宣言的なView
Reactは、JSXというXMLのような文法で構造を定義（宣言）することで、Webページを描画（View）します。アプリケーションの各状態に対応するViewを設計することで、Reactはデータの変更を検知し、関連するコンポーネントのみを更新、再描画します。

###2. コンポーネントベース
Reactでは、カプセル化された「コンポーネント」と呼ばれる小さく独立した部品から組み立てることでUIの構築ができます。
コンポーネントに分割することで、Webページの共通部分を１つのコンポーネントにまとめたり、コンポーネントごとに状態管理ができます。またJavaScriptで記述できるためDOMの外側で状態を保持することができます。

###3. どこでも使える
Reactはブラウザ向けのアプリケーションを作製するためだけでなく、React Nativeというモバイル向けのアプリケーションの作製などにも利用できるため、一度学習さえすれば様々な場所で再利用ができるという特徴があります。

#開発環境構築
今回私はmacOS(10.15.3)で環境構築を行いました。
Reactの環境構築方法はいろいろとありますが、私はCreate React Appを用いる方法が一番簡単だと思います。
以下にversionの記載がありますが、インストールできているかの確認のためですので同じである必要はありません。

##Homebrewのインストール
まずはじめにHomebrewをインストールしておきます。（Homebrew公式サイト）

bash

#Homebrewのインストール
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

#Homebrewのupdate
$ brew update

#version確認
$ brew -v
Homebrew 2.2.15

Homebrewは、macOS用のパッケージマネージャーで、パッケージのインストールやアンインストールを行うことができます。またパッケージの依存関係も管理してくれるため、パッケージAを使うために別のパッケージBも必要になるときには、Aをインストールすれば自動でBもインストールしてくれます。
Homebrewをインストールした後には念のためアップデートとバージョン確認も行っておきましょう。

##Node.jsのインストール
続いてNode.jsをインストールします。

bash

#Node.jsのインストール
$ brew instasll nodejs

#version確認
$node -v
v14.1.0

#npmの確認（Node.jsのインストール時に一緒に入っている）
$ npm -v
6.14.4

Node.jsはJavaScriptでサーバーサイドの処理を可能にするプログラムで、npmはNode.jsで動作するJavaScriptのパッケージマネージャーです。

##Yarnのインストール
次にYarnをインストールします。

bash

#Yarnのインストール
$ npm install -g yarn

#version確認
$ yarn -v
1.22.4

Yarnはnpmと同じくJavaScriptのパッケージマネージャーです。npmと互換性があり、npmよりもインストールが速くセキュリティも高いという特徴があります。

##Create React Appのインストール
ここまでの準備ができたところでReactの開発環境ツールであるCreate React Appをインストールします。

bash

#Create React Appのインストール
$ yarn global add create-react-app

これだけです。簡単ですよね。本来であればReactの開発環境を構築するうえでは、webpackやbabelといったツールをReactとは別にインストールする必要がありますが、Create React Appでは事前にこれらは構成要素として組み込まれているので、少ないコマンドで環境構築ができます。

##Create React Appの利用
では実際に、新しいアプリケーションを作製してみましょう。

bash

#アプリを置きたいディレクトリに移動
$ cd {ディレクトリ名}

#アプリケーションの作製
$ create-react-app {アプリケーション名}

#アプリケーションの起動
$ yarn start

以下のような画面が表示されれば成功です。

接続の切断は、ターミナル上で[control] + cで可能です。

#まとめ
今回はCreate React Appを利用した開発環境構築の方法について紹介しました。
Reactの環境構築方法にはいくつかの種類がありますので、自身に合う方法で環境構築することをおすすめします。

#参考

• React公式サイト
• Reactの基本を学ぼう～コンポーネントの仕組みと作り方
• Create React App公式サイト