JavaScriptのライブラリとして、React.jsが2013年に公開されるようになってから現在まで9年以上が経過しましたが、今や多くの現場で使用されているライブラリとなりました。
しかし、まだ扱える人材がJavaやCなどに比べ、少ないため、これからプログラミングに挑戦する方にとっても人材が不足している中、求人が出てきている今が狙い時ではないかと個人的には考えてます！
そこで、今回は「React」を始めるうえで、避けては通れない環境構築方法についてまとめていきたいと思います。
Node.jsのインストール
基本的に作業手順は一緒ですが、Node.jsのインストール手順は分けたほうが便利だったりしますので、OSごとに手順をご紹介します。
Windows
- ①公式サイトから推奨版をダウンロード
以下の手順(①～③)でインストーラーをダウンロードしましょう。ダウンロードする場所は、デスクトップにしてますが、任意の場所で結構です。
- ②インストーラーを起動
デスクトップに次のようなアイコンがあると思いますので、こちらをダブルクリックしましょう。
- ③インストーラーが起動したらsetupを進めていく
setupがしばらく続きますが、全てNextをクリックしていってもらえたらと思います。ライセンスに同意する箇所だけは、チェックボックスにチェックを入れないとNextが押せないため、チェックを入れましょう。
進んでいくと、次の画面までこれるかと思いますので、installをクリックしましょう。
- ④nodeのバージョン確認
完了画面が出たらインストール完了ですので、正常にインストールが完了しているか以下のコマンドで確認してみましょう。
node -vエラーなどが出ずにバージョンが表示されればインストール完了です。
Mac
Mac OSの場合は、バージョンの切り替えが便利なため、nodebrewを使ってNode.jsをインストールしていきます。手順は以下の通りになります。
- ①Homebrewのインストール
Homebrewとは、macOS上で動作するパッケージ管理ツールで、様々なパッケージをインストールする際に使用します。
ターミナル上で以下のコマンドを入力&Enterしますとインストール可能です。
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" - ②nodebrewのインストール
nodebrewは、Node.jsのバージョンを管理するためのツールであり、複数のバージョンのnodeをインストールすることが可能です。
同じくターミナル上で以下のコマンドを入力&Enterし、インストールしましょう。
brew install nodebrewバージョンの確認は次のコマンドになります。
nodebrew -v - ③環境変数の追加
こちらの作業は、いわゆるパスを通す作業になります。この作業を怠るとnodeのバージョンが確認出来なくなってしまいますので、注意しましょう。
以下のコマンドで.bash_profileを開き、
vi ~/.bash_profileexport PATH=$HOME/.nodebrew/current/bin:$PATHを追加しましょう。
次に以下のコマンド順番に実行し、設定を反映及びsetupを済ませます。
source ~/.bash_profile nodebrew setupもし、バージョンが確認出来なくなった時には、以下の記事で解決策及び環境変数の設定手順について、画像も用いながら解説してますので参考にしてください。
nodebrewでNode.jsのバージョンが確認出来ない際の対処法本記事では、nodebrewを通して、インストール済みであるにも関わらず、Node.jsのバージョンが確認出来ない際の対処法についてご紹介していきます。環境変数の設定などに慣れていない方ですと、中々、気付けない部分にもなりますがので、参考になれば嬉しいです。utubou-tech.com2022.10.19 - ⑤nodeのインストール
以下のコマンドを入力＆Enterしてください。
nodebrew install-binary [インストールするバージョン] 例 : nodebrew install-binary v18.12.1 - ⑥使用するバージョンの指定
nodebrewでは複数のnodeのバージョンがインストール出来ますが、実際に使用できるのは1つバージョンのみで、複数のバージョンを同時並行で使用することは出来ません。
次のコマンドで使用するバージョンを設定します。
nodebrew use v18.12.1 - ⑦nodeのバージョンを確認
次のコマンドでnodeのバージョンが確認できるか確認しましょう。バージョンが確認出来たら作業は以上になります。
node -vバージョンが確認出来ない場合は、手順④を見直してみましょう。
Reactの新規アプリ作成
新規のアプリケーションを作成する方法を3パターンご紹介します。OSよって動作しないということはありませんので、どれでもお好きな方法で作成して頂ければと思います。
npxを使用する場合
npxは、Node.jsをインストールした段階で既に内包されているパッケージになりますので、Nodeのバージョンが確認出来ていれば使用可能になります。
以下のコマンドを実行することで新規アプリケーションを作成出来ます。
npx create-react-app 任意のアプリケーション名
create-react-appを使用する場合
あまり使われることはないですが、create-react-appパッケージをインストールすることでnpxを先頭につけなくて良くなります。少しでも入力する手間を減らしたい方にはオススメの方法です。
以下の順番でコマンドを実行しましょう。
npm i create-react-app
create-react-app 任意のアプリケーション名yarnを使用する場合
こちらの場合も初回のみyarnパッケージをインストールする必要があります。npxコマンドを使った方法と書き方が少し異なってきますが、以下の手順でコマンドを実行することで同様にアプリケーションを作成可能です。
npm i yarn
yarn create react-app 任意のアプリケーション名
動作確認
ターミナル上でアプリケーションと同じ名前のフォルダへ移動し、npm start or yarn start を入力&Enterすることでアプリケーションが起動します。
npm start or yarn start
次に、http://localhost:3000 をブラウザ(Google chromeなど)のURLバーで入力->Enterし、以下の画面が出てこればOKです！
まとめ
以下の手順でReactの開発環境を準備できます。
- Node.jsのインストール
- Reactの新規アプリケーションの作成 (npx, yarn, create-react-appのいずれかのコマンドを使用)
- ブラウザのURLバーで http://localhost:3000 を入力->Enterすることで、正常にアプリケーションが起動するかを確認
最後に
ここまで読んで頂き、有り難う御座います。
プログラミングを学習している方やこれから始めようと考えている方にお知らせです。
⇩⇩⇩⇩⇩⇩
- 独学で学習を続けても中々、理解が定着しない..
- エラーが出てしまい、想定した結果が得られない…
- フリーランスとしてデビューしたいが何からやったらいいかわからない…
などの悩みがある方必見！
実は、以下の内容が全て月額定額のサブスクで利用できるサービスがあります。
- 話題のAWSから人気のプログラミング言語Pythonをはじめとする
様々な教材(HTML/CSS, JavaScript, jQuery, Ruby, Ruby on rails, PHP, Laravel, Django, Java, Spring, Git, 機械学習, Linuxなど50種類以上)が無制限で閲覧可能。 - オンラインで利用できるため、隙間時間で学習ができる。
- 質問掲示板も24時間活用することが出来るため、自己学習や教材を通した学習で詰まっても気軽に質問が出来る。(講師の方が回答してくれる時間帯は、10:00～22:00です。)
- 入会金不要で、あわないなと思ったらいつでも退会が可能。
- 実務経験が３年以上の選び抜かれたエンジニアが講師として多数在籍しているため、安心。
- 質問掲示板でも解決できない疑問や悩みは、プラン応じて月1回~受講できるオンラインレッスンで解決できる
最初から定額であると少し抵抗があるという方もフリープランからお試しが出来るので安心です。会員登録も無料！
詳しくは、以下のリンク先のページからチェック！
コメント