
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/