サイトロゴ

Enjoy Creating
Web & Mobile Apps

MENU BOX
WEB
MOBILE
OPEN

ホーム

 > 

 > 

【スクショ解説付き】Reactの開発環境を構築する方法

【スクショ解説付き】Reactの開発環境を構築する方法

この記事にはプロモーションが含まれています。

Web制作の技術は日々進化しており、フロントエンジニアはもちろんのこと、デザイナーやHTML/CSSのコーディングをメインとしている方もその技術を学ぶ必要性が高まっています。

中でも近年注目を集めているのが、ReactVueといった比較的新しいJavaScriptのフレームワークたちです。

これらは、仮想DOMという技術を用いることでページの表示パフォーマンスを高めたり、Webページをパーツごとに管理できる仕組み(コンポーネント)でメンテナンス性を高めたりなど、様々なメリットや強みを持っています。

単にオシャレで見た目の良いWebサイトを作るだけならjQueryでも良いのですが、もはやユーザーがWebサイトやアプリに求めるものは見た目だけではなくなっています。

ボタンを押したらすぐにページが読み込まれるなど、反応が早くて使い勝手・使い心地が良く、さらに何か問題が起こったとしてもすぐに改修できてバージョンアップされるようなものが求められています。

そして、そのようなWebページ(Webアプリ)を作れるようになるには、Reactなどの新しいJavaScriptフレームワークを扱えるようになる必要があります。

ですが、ReactはjQueryと比べると難易度が高く、学習コストが高いのも事実です。

そこで今回は、まずReactで開発をするための環境を整えることに的を絞って、初めての方でも分かりやすく環境構築できるように説明していこうと思います。

この記事を読むことで分かること
  • ・Node.jsの必要性
  • ・Node.jsのインストール方法
  • ・Reactのインストール方法
  • ・Reactで開発を始める方法

– 目次 –

Node.jsの必要性

Reactをちょろっと試すだけであればCDNを利用する方法が最もお手軽なのですが、より本格的に学びたい場合は必要なファイルをインストールして開発環境を構築する必要があります。

そのためには、まずNode.jsをインストールする必要があります。

CDN利用ならNode.jsをインストールする必要がなくなるので手間が省けるのですが、個人的には、下手にCDN利用で楽をしようとするより、最初からしっかり開発環境を構築しておいた方が良いと思います。

一番の理由は、CDNではReactのライブラリやフレームワークを十分に活用できないからです。

Reactはそれ単体でも便利なものではありますが、Reactを利用したフレームワークやライブラリとセットで活用することでさらにその力を発揮することができるようになっていると言えます。

jQueryもそれを単体で使うというよりは、jQueryを利用したライブラリを使って複雑な機能を実装することが多いですよね。(画像のスライダーならslickとか)

Reactでもそれと同じように多くのパッケージを利用することができるのですが、Reactではパッケージがnpm(Node Package Manager)でしかダウンロードできないことも多いです。

npmとは、ものすごく簡単に言うと『パッケージの管理してくれる仕組み』です。

「パッケージなんてそれぞれ直接ダウンロードできるようにならないの?」

と思うかもしれませんが、Reactでは大規模なアプリも開発できるように設計されていて、それに伴ってパッケージの仕組みも複雑化しています。

例えば、『パッケージAを利用するためにパッケージBが必要で、パッケージCにはパッケージDが必要だが、パッケージAにはすでにパッケージDが含まれている。』…こんな条件がいくつも重なると、いつエラーを起こしてもおかしくないですよね。

これを解決してくれるのがnpmであり、npmを利用するためにNode.jsが必要となります。

ということで、まずはNode.jsをインストールしていきましょう!

    POINT!
  1. ・ReactはCDNも利用でも試せるが、できれば最初から環境構築をしておこう!
  2. ・Reactを利用するパッケージはnpm経由でしかインストールできないものも多い!
  3. ・パッケージを管理してくれるのがnpmであり、それを利用するためにNode.jsが必要!

Node.jsのインストール

では実際に、Node.jsをインストールしていきましょう!

なお、今回はWindows11のPCにインストールしていきます。

Macではインストールするファイルが異なりますが、手順としては同じなのでご参考ください。

  1. Node.jsの公式サイトにアクセスし、Node.jsのLTS(推奨版)をダウンロードする

    Node.jsの公式サイトにアクセスし、Node.jsのLTS(推奨版)をダウンロードする Node.jsダウンロード公式サイト(日本語)
  2. ダウンロードが完了したらファイルをクリックしてインストールを始める

    ダウンロードが完了したらファイルをクリックしてインストールを始める
  3. 同意ボタンにチェックを入れてNext(次へ)をクリック

    同意ボタンにチェックを入れてNext(次へ)をクリック
  4. 次へ(Next)をどんどんクリックしていき、最後にFinishをクリックして完了する

    次へ(Next)をどんどんクリックしていき、最後にFinishをクリックして完了する< width=

以上でNode.jsのインストールが完了しました!

それでは次に、本当にNode.jsのインストールが無事に完了したかどうかをチェックしてみましょう。

  1. デスクトップ上で右クリック→ターミナルで開くを選択する

    デスクトップ上で右クリック→ターミナルで開くを選択する
  2. node -v と入力する

    node -v と入力する
  3. インストールしたNode.jsのバージョン情報が表示されたらOK

    インストールしたNode.jsのバージョン情報が表示されたらOK

今回はWindows11のターミナル(PowerShell)で行いましたが、コマンドプロンプトでももちろんOKです。

Macならターミナルを起動して、同じように入力してください。

Finderを開き、検索窓で「ターミナル」と入力すればターミナルにアクセスできます。

    POINT!
  1. ・公式サイトにアクセスして推奨版(LTS)Node.jsをダウンロードしよう!
  2. ・ダウンロードが完了したらインストールを開始しよう!
  3. ・ターミナルを開き、『node -v』と入力してバージョン情報が表示されたらOK!

Reactのインストール

無事にNode.jsをインストールできるとそれでなんだか満足しちゃいそうですが、この時点ではまだ肝心のReactがまだインストールされていません。

というわけで次はReactのインストールを進めていきましょう!

といっても、ReactのインストールはNode.jsのバージョンを確認するために開いたターミナル(コマンドプロンプト)からそのまま行えるので、とても簡単です。

  1. ターミナルで『npx create-react-app my-app』と入力する(my-appの部分は任意の文字列でも可)

    ターミナルで『npx create-react-app my-app』と入力する(my-appの部分は任意の文字列でも可)
  2. OK to proceed?(OKを押して次に進む)が出たら、『y』と入力する

    OK to proceed?(OKを押して次に進む)が出たら、『y』と入力する
  3. Reactのインストールが始まる。画像の表示が出てきたらインストール完了。

    Reactのインストールが始まる。画像の表示が出てきたらインストール完了。

ファイルの数が多いので、標準的なパソコンのスペック・ネット回線でも、ある程度時間がかかります。
インストール中は気長に待ちましょう!

    POINT!
  1. ・ターミナルからコマンドを入力してReactをインストールしよう!
  2. ・コマンドは、『npx create-react-app my-app(my-appは任意の文字列)』!
  3. ・インストールには少し時間がかかるので、気長に待っておこう!

Reactを立ち上げる

前章までの手順で無事にReactの開発環境構築が整ったわけですが、どうせならちょっと立ち上げてファイルを編集してみたいですよね。

ここではプログラムは書きませんが、Reactの開発環境を立ち上げて少しテキストを編集してみたいと思います。

  1. ターミナルで『cd my-app』と入力する(フォルダをmy-appと命名した場合)

    ターミナルで『cd my-app』と入力する
  2. 作成したmy-appフォルダに移動できたら、続けて『npm start』と入力する

    作成したmy-appフォルダに移動できたら、続けて『npm start』と入力する
  3. 自動でブラウザが立ち上がりReactの画面が表示される

    自動でブラウザが立ち上がりReactの画面が表示される
  4. my-appフォルダ→src→App.jsをテキストエディタで開いて任意の文字列に編集する

    my-appフォルダ→src→App.jsをテキストエディタで開く 任意の文字列に編集する
  5. ファイルを保存して編集が反映されているか確認する

    ファイルを保存して編集が反映されているか確認する

あとはReactを利用して学習や開発をガンガン進めていくだけです!

それでは、楽しいフロントエンド開発を〜!

    POINT!
  1. ・Reactの開始もターミナルから!
  2. ・ターミナルでmy-app(任意の文字列)に移動しよう!
  3. ・その後、『npm start』と入力すると自動でブラウザが起動する!

« »

カテゴリーリンク

著者について- author profile -

ROYDOプロフィール写真
Michihiro

モバイルアプリ(iOS・Android)ディベロッパー&デザイナー

これまでに、可読性の高いカラーパターンを自動で生成するアプリや、『第3火曜日』といった形式で通知をスケジュールできるアプリなどを制作。

サブでWebデザイン・フロントエンドエンジニアとしても活動しています。

📝ツール・言語:JavaScript/React Native/Kotlin/Android Studio/Swift/SwiftUI

🎓資格:応用情報技術者/基本情報技術者/ウェブデザイン技能検定3級

Twitterアイコン Instagramアイコン