Node.jsとReactの導入から使い方までわかりやすく解説

「そのそもNode.jsとReactって何？」
「それぞれの導入方法や使い方について詳しく知りたい」

このような方に向けて、ここではエンジニア歴10年の著者が下記について、わかりやすく解説していきます。

• Node.jsとReactの概要
• Node.jsとReactの導入方法
• Node.jsとReact実際の使い方

本記事を読めば、Node.jsとReactの使い方まで理解できるようになりますので、ぜひ参考にしてください。

Node.jsとReact

まずはNode.jsとReactについて、それぞれの概要を詳しく解説していきます。

Node.jsとは

Node.jsとはJavaScriptをサーバーサイド、つまりサーバー側で動かせるようにした実行環境のことです。

そもそもJavaScriptはWeb開発におけるフロンエンド（ブラウザ側）を担当する言語で、Webページの画面の動きを実装します。

Node.jsでできることは以下のとおりです。

• Webサービス・アプリ開発
• Webサーバー開発
• スマホアプリ開発

そんなJavaScriptをサーバー側で動かせるようにしたのがNode.jsであるため、サーバーサイドJavaScriptとも呼ばれています。

サーバーサイドのプログラミング言語としては、他にPHPやRubyなどがあります。

しかしフロントエンド、サーバーサイドともにJavaScriptで統一したほうが効率よく開発ができ、他の言語のスキルも不要といったメリットがあります。

Reactとは

Reactとは、FacebookがWebサイトのUI（ユーザーインターフェース）を構築するために開発されたJavaScriptのライブラリです。ReactはJavaScriptでWebアプリをを構築するためによく使われます。

そもそもライブラリとは、開発においてよく使う機能をまとめたプログラムのことで、プログラミング言語からライブラリを呼び出すことで動作します。

そんなReactのライブラリはInstagramやSkypeなど、さまざまなサービスで使われています。

Node.jsの導入方法

ここではNode.jsの導入方法について詳しく解説していきます。

Node.jsのインストール

Node.jsをインストールするには公式ホームページから、各OSのインストーラーを選択してダウンロードします。*注1

ダウンロードしたら実行ファイルをクリックして、インストーラーの指示に従ってインストールしていきます。

ちなみにmacOSの場合はHomebrewをインストール済みなら、ターミナルのコマンドからでも簡単にインストールできます。

Homebrewとはターミナルからコマンドで、パッケージをインストールするときによく使用されます。Homebrewを導入していない場合は、以下のコマンドでインストールしておきましょう。

続いてnodebrewをインストールします。nodebrewはNode.jsのバージョンを管理できるツールで、同一環境に複数のバージョンをインストール、管理することが可能です。

nodebrewは以下のコマンドでインストールします。

nodebrewをインストールしたら、以下のコマンドでnodebrewを使えるようにします。

ちなみに以下のコマンドを実行すれば、現在インストールしているNode.jsのバージョンが確認できます。

インストールできたか確認するには、以下のコマンドを実行します。Windowsもコマンドプロンプトから確認できます。

Node.jsの実行

Node.jsをインストールしたら、正しく動作するか確認しておきましょう。

Node.jsを実行するには、以下のコマンドを実行します。

ファイル名「sample.js」で作成し、コードを記述して保存します。

以下のコマンドでNode.jsを実行します。

“hello node”と出力されたら成功です。

Reactの導入

ここでは、Reactでアプリを作成する方法について詳しく見ていきましょう。

Reactアプリの作成

Reactを試すなら、公式で公開されているツール「Create React App」がおすすめです。*注2

Create React Appは以下のコマンドで実行します。

このコマンドを実行することで、Reactを使用するための環境が構築されます。

Reactの実行

続いて作成されたmy-appに移動し、npm startを実行してサーバーを起動します。

成功すると、サーバーが起動して自動でブラウザにReactが表示されます。

ちなみにサーバーは「control」+「c」で終了できます。

実際にReactを動かしてみよう

ここでは、生成されたReactのファイルを変更して動作を確認してみましょう。

先程作成したReactのmy-app直下のsrcディレクトリに移動します。
srcにはReactのプログラムが格納されています。

格納されているApp.jsを以下のように変更します。

ファイルを変更、保存したらnpm startを実行します。

ブラウザにApp.jsで記述した内容が出力されたら成功です。

更に詳しい使い方を知りたい方は公式のチュートリアルを参考にしてください。

まとめ

ここではNode.jsとReactについて、以下の内容を解説しました。

• Node.jsとReactの概要
• Node.jsとReactの導入方法
• Node.jsとReact実際の使い方

Node.jsとReactを使用することで、Webサービスやアプリを効率よく開発することが可能です。基本的な使い方についてしっかりと理解しておきましょう。

■参考文献

*注1
Node.jsのダウンロード
https://nodejs.org/ja/download/

*注1
Create React App
https://create-react-app.dev/