[React] よーし! いっちょReactやってみっか! #1 環境構築編

はじめに

CX事業本部の中安です。まいどです。

主にiOS担当のモバイルアプリエンジニアをやっている身として、Swiftの記事をよく書いているのですが、 「たまには他のこともやらないとなー」と思いまして、React.jsを始めてみることにしました。

この記事は、その奮闘記と思ってくださいませ。

Reactとは

あらためて「Reactとは」というお話をすると、

React (リアクト) は、Facebookとコミュニティによって開発されているユーザインタフェース構築のためのJavaScriptライブラリである。React.jsまたはReactJSの名称でも知られている。

Reactはシングルページアプリケーションやモバイルアプリケーションの開発におけるベースとして使用することができる。複雑なReactアプリケーションでは通常、状態管理（英語版）・ルーティング・APIとの対話のための追加のライブラリが必要となる。

ReactはFacebookのソフトウェアエンジニアであるJordan Walkeによって開発された。PHP向けのHTMLコンポーネントフレームワークであるXHP（英語版）の影響を受けている。2011年にFacebookのニュースフィード上で最初に使用され、2012年にはInstagramでも使用されるようになった。2013年5月のJSConf USでオープンソース化された。

React NativeはAndroid・iOS・UWPでのReactを利用したネイティブ開発を可能にするもので、2015年2月のReact.js Confで発表され、3月にオープンソース化された。

2017年4月17日、Facebookはユーザインタフェースを構築するためのReactフレームワークライブラリの新しいコアアルゴリズムであるReact Fiber（英語版）を発表した。React FiberはReactフレームワークの将来の改良と機能開発の基盤となるものである。

(wikipediaより)

と書かれていて、

• 宣言的ビュー
• コンポーネントベース

という特長を持っているライブラリです。

やってみよう

自分もまだ初学者なので、集めてきた情報を頭で整理して、手を動かしてみている最中ですが、 同じく「今からReactを始めてみようかなー」と思っている方に向けて、 何本かシリーズとしてブログを書いていければと思っております。

今回のブログは初回なので、環境構築をまとめた記事になります。

自分の環境

• macOS Catalina 10.15.6
• Chrome 85.0.4183.121 (2020/9/26現在の最新)

色々とインストール

ここでは上記のMacOS(Catalina)という前提で、まだ色々なツールがインストールされていないことを想定して書いていきます。 もし、各種インストール済であれば読み飛ばしてください。

Reactの公式チュートリアルでは「最新のNode.jsがインストールされている」前提で進めているようなので、 そうでない場合はアップデート、もしくは最新バージョンへの切り替えをしておきましょう。

ゴール

今からbrewコマンドでNode.jsをインストールし、npxコマンドが使えるところまでやっていきます。

yarnでする方法もあるようですが、飛ばさせていただきます。

Homebrew

HomebrewはMacで色んなツールをインストールできるパッケージ管理ツールですよ。 もし既に入ってたら飛ばしてほしいですが、入ってなかったらHomebrewを入れておきましょう。

% brew -v

command not found が返されたら以下にお進みください。

Homebrewの公式ページからインストールコマンドを引っ張ってきます。

% /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

インストールが正常に終わったら確認してみましょう。

% brew -v

Homebrew X.X.Xと返ってくればOKです。

nodebrew

nodebrewは複数のNode.jsのバージョンを管理できるツールですよ。 もし既に入ってたら飛ばしてほしいですが、入ってなかったらnodebrewを入れておきましょう。

% nodebrew -v

command not found が返されたら以下にお進みください。

% brew install nodebrew

インストールが正常に終わったら確認してみましょう。

% nodebrew -v

nodebrew X.X.Xと返ってくればOKです。

Node.js

Node.jsについては、今回は安定版を入れることにしました。

% nodebrew install-binary stable

インストールが終わったことの確認と、安定版がどのバージョンで入ったのかを確認してみます。

% nodebrew ls

vX.X.X

current: none

currentがnoneである場合は、バージョンを指定してやる必要があるそうです。

nodebrew use vX.X.X

指定されたかどうかを確認します。

% nodebrew ls

vX.X.X

current: vX.X.X

currentが変わっていればOKですね。

で、nodebrewのcurrentであるバージョンを使用するために、そこにパスが通るようにしたほうが良いそうです。 zprofileに対して環境変数を追記するようにします。

% echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile

catコマンドやvimなどで追記されたことが確認できたら、 ここで環境構築を反映させるためにターミナル再起動したほうがよいです。

最後にNode.jsが使用可能になっていて、選んだバージョンになっているかを確認します。

% node -v

vX.X.X

意図したバージョンになっていればOKですね。

npm

Node Package Manager略してnpmは、Node.js用のパッケージ管理ツールですよ。 もし既に入ってたら飛ばしてほしいですが、入ってなかったらnpmを入れておきましょう。

% npm -v

command not found が返されたら以下にお進みください。

% sudo npm install -g npm

sudoコマンドなのでマシンユーザのパスワードを聞かれます。

インストールが正常に終わったら確認してみましょう。

% npm -v

X.X.Xと返ってくればOKです。

npx

npxは、ざっくりいうとnpmのお便利版(変な説明だったらすいません)です。 詳しくはDevelopers.IOにも記事があるので参考ください。

知らないのは損！npmに同梱されているnpxがすごい便利なコマンドだった
https://dev.classmethod.jp/articles/node-npm-npx-getting-started/

この記事のタイトルにもあるようにnpxはnpmに同梱されているツールですので、 npmがインストールされていれば使えるようになっているはずです。

Reactではnpxコマンドを使用するようなので、一応確認しておきましょう。

% npx -v

X.X.Xと返ってくればOKです。

Reactのプロジェクトを作る

ReactにはSPA(Single Page Application)を作るためのプロジェクトテンプレートを作成してくれるお便利コマンドが用意されています。

まずは、ターミナルから任意の場所にディレクトリを作るなどして、そこに移動しておいてください。

移動したら次のコマンドを実行します。 ただし、こちらのmy-appは作ろうとするプロジェクト名にあたるので任意の名前になります。各自で好きなものに置き換えてください。

% npx create-react-app my-app

実行すると色々な処理が走りだすと思うので、終わるまで待った上でディレクトリの中に移動します。

% cd my-app

そしてnpmのstartコマンドを実行します。npxではないので注意です。

% npm start

すると、Starting the development server...と表示され、Compiled successfully!と表示されると思います。

そうして、ブラウザでhttp://localhost:3000にアクセスすると (ありがたいことにブラウザが自動で起動するようになっていると思います)、、、

このようなページが表示されると思います。

素晴らしい!!

このときローカルマシン上でWEBアプリが起動していることになっています。 止めたい時はターミナルでControl+Cを実行してキャンセルしてしまいましょう。 同じURLを叩いてもこのサイトにアクセスできませんとなるはずです。

React開発ツールの導入

今回の開発で使用するブラウザはChromeを想定しています。 Chromeを使ったReactの開発では、Chrome拡張機能としてReact Developer Toolsが用意されています。

これを使用することで、Reactで作られたWEBアプリケーションのデバッグなどができます。

入れない手は無いってことで、導入してみましょう。

拡張機能の入手先はこちらになります。
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

Chromeに入れることができたら、拡張機能の詳細に移動して「ファイルの URL へのアクセスを許可する」をONにしておくと良いとのことです。

ここまでできると、もう一度npm startでWEBアプリを起動してhttp://localhost:3000にアクセスします。

option+command+iで開発者ツールを開くと、Reactマークのついたタブメニューが追加されていると思います。 (出ない場合は、React Developer ToolsをONにしてるか確認してください。)

今回は環境作りがテーマなので、このツールの使用方法は割愛します。

最後に

ということで、色々インストールした後にReactアプリを作って起動する。そして開発用のツールを導入するという環境構築までをやってみました。

まだ始めたてのこともあり、以降も拙いブログになってしまうかもしれませんが温かい目で見ていただければと思います。 (そのうちTypeScriptもやります)

できるだけインプットしたことはアウトプットしていこうと思いますので、よろしくおねがいします。

ではまたー。