【Nodejs入門】初心者でも簡単にReactを始められる導入方法まとめ!

今回は、Node.jsを使って誰でも簡単にReactを始められる導入方法について学習をしていきましょう!

「Reactの導入部分が難しくてなかなか手が出せない」
「手っ取り早くReactを試してみたい」
「Node.jsを使わずシンプルにReactを実行したい」

このような内容も含めて、本記事では以下のような構成で解説していきます!

【基礎】「React」とは?
【基礎】「React」の使い方
【実践】Create React Appの始め方
【実践】Node.js不要でReactを実行

この記事で、Reactの始め方をしっかり学習してスキルアップを目指していきましょう!

「React」とは?

「React」はFacebookによって開発・運用されているUIフレームワークです。

Virtual DOM(仮想DOM)によって、UIが変更された部分だけを処理するシステムによって非常に簡単かつ高速に動作するのが特徴です。

特に、SNSなど頻繁にコンテンツが更新されて画面の再描画が必要なWebアプリなどで利用すると効率が良いわけです。

また、ReactはスマホアプリやVR/ARなどのアプリケーションを開発できるエコシステムが用意されているのも魅力の1つです。

「Learn Once, Write Anywhere」という有名な言葉がありますが、文字通りReactで一度プログラムを記述すればどこでも動くという意味を表しています。

「React」の使い方

この章では、簡単にReactを始めるための手順について見ていきましょう!

主に、公式で提供されているCreate React Appの始め方について学んでいきます。

Node.jsの準備

Reactを本格的に使い始めるためにはNode.jsの開発環境が必要になります。

WindowsやMacをお使いの方は、公式のインストーラーを利用すると簡単に環境を用意できます。

また、Linux系OSを利用している場合であればコマンド操作によるインストールも可能です。

各種OS別によるNode.jsのインストール方法については、次の記事で体系的にまとめているのでぜひ参考にして見てください!

【Node.js入門】各OS別のインストール方法まとめ(Windows,Mac,Linux…)
更新日 : 2019年7月19日

CreateReactAppの始め方

Reactを手っ取り早く試したい方に向けて、実は公式のスタータープロジェクトが用意されています。

それが「Create React App」と呼ばれるツールです!

Node.jsのバージョンが6.0.0以上、npmが5.2以上の開発環境があれば誰でもコマンド一発で簡単にReactを体験できるのが特徴です。

以下のコマンドを実行するだけです!

$ npx create-react-app myapp

「npm」ではなく「npx」コマンドを使う点に注意しておきましょう。

npxはシンプルにnpmのバイナリを実行できる機能で、ローカルに存在しないパッケージが必要な場合も一時的に使えるようにしてくれます。

上記コマンドを実行するとReactを動かすのに必要なツールがすべて揃った状態になります。

Reactアプリを表示する

それでは、作成したフォルダ「myapp」に移動してからnpm startを実行してみましょう!

$ cd myapp

$ npm start

自動的にサーバーが起動してURLが表示されるので、ブラウザを開いてみましょう!

すると、初めてのReactアプリが表示されます!

ファイルの構成としては、「public」フォルダにベースとなるHTMLファイルなどが入っており、「src」フォルダにReactのプログラムやスタイルなどが納められています。

基本的に改造したい場合は、「src」フォルダ内のファイルを編集することになります。

Node.jsを使わずにReactを利用

この章では、Node.js環境を使わずにReactを試す方法について見ていきましょう!

主に、CDN経由でReactプログラムを読み込んで処理する方法について学んでいきます。

HTMLファイルを作成する

それでは、まず最初にReactを利用するための準備から始めていきましょう!

必要なのは、以下のような2種類のJavaScriptファイルだけです。

https://unpkg.com/[email protected]/umd/react.development.js

https://unpkg.com/[email protected]/umd/react-dom.development.js

このJavaScriptファイルをベースとなるHTMLに組み込んでいきます!

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React基本サンプル</title>
  </head>
  <body>

    
<script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script> <script> //ここに処理を記述する </script> </body> </html>

「scriptタグ」で先ほど紹介したReactのJavaScriptファイルを読み込むようにしておきます。

また、「divタグ」を1つ配置していますが、これはReactによって生成されたコンテンツを表示する場所になります。

Reactアプリを表示する

ここまでの作業で、すでにReactのプログラムを書けるようになっています。

そこで、実際にReactのプログラムを記述して簡単な文字列を画面に表示してみましょう!

何か画面に表示する場合は「render()」を次のように利用します。

ReactDOM.render(【表示するコンテンツ】, 【表示する場所】)

「表示するコンテンツ」は、例えば「h1タグ」「aタグ」などHTMLで記述されたコンテンツのことです。

「表示する場所」は、HTMLファイルのどこにReactで生成されたコンテンツを表示するか?という意味になります。

例えば、「h1タグ」をid属性値「container」が付与されたdivタグに配置する場合は次のようになります。

const element = React.createElement;
const container = document.querySelector('#container');


ReactDOM.render(element('h1',null,'Hello React'), container);

「React.createElement」でReact用のHTMLコンテンツを生成しているのが分かるでしょうか?

これにより動的なHTMLコンテンツを生成することが可能で、render()の第1引数に指定します。

実行すると画面に「Hello React」という文字列が表示されます。

CMSとサーバーレンダリングについて

Reactは、基本的にUIに特化したフレームワークなので、それ以外のことを実現しようとすると難しくなります。

そこで、さまざまなツールチェーンが提供されているのが大きな特徴でもあります。

例えば、Reactで静的なWebサイトやコンテンツを構築したい場合には「Gatsby」というツールがあります。

また、ReactでサーバーサイドレンダリングによるWebコンテンツを作成するには「Next.js」というフレームワークがあります。

いずれも、Reactの書き方さえ覚えておけば同じように記述できるのが魅力で、さまざまなツールチェーンを利用することで実現できることが増えていくというわけです。

まとめ

今回は、Node.jsを使ってReactを簡単に始めるための導入について学習しました。

最後に、もう一度ポイントをおさらいしておきましょう!

・create-react-appというツールを使うと手軽にReactを始められる
・Node.jsを使わなくてもCDN経由でプログラムを読み込めば利用できる
・Reactにはさまざまなツールチェーンが提供されている

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

マサト

フリーランスのIT系ライターを10年従事する兵庫県出身の40歳。侍ブログ編集部としては、これまで270記事以上を執筆。
30歳を過ぎてから独学でJavaScript, Node.js, Linuxを習得した経験を活かし、初心者が迷わない記事作成を意識しながらプログラミングの楽しさを知ってもらうために活動しています。趣味はキャンプと登山です。

おすすめコンテンツ

まずはここから!初心者でも1から学べるプログラミング入門カリキュラム

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー