【超簡単】WindowsでReact.jsの開発環境を整える手順
皆さんこんにちは。
前回、WindowsでのWeb開発環境構築(前編)という記事を書きました。後編として、「Dockerとは」から「Ruby on Rails」の開発環境を構築する手順を紹介する予定でしたが、その前に昨今話題の「React.js」の開発環境構築が驚くほど簡単だったので、紹介したいと思います。
と、その前に前回の記事でおすすめのエディタ「Sublime Text 3」と紹介しましたが、さらにおすすめなエディタがでてきたので紹介させてください。その名も「Visual Studio Code」。Web開発されてる方はご存知だと思いますが、Microsoftからリリースされているフリーのエディタです。僕は現在Sublime Textから乗り換えて、こちらを使っています。高速かつ見た目がかっこいいので気に入っています。公式ページからダウンロードできますので興味のある方はみてみてください。
最近、Youtubeでnode.jsやReact.js、Vue.jsの入門動画をよくみているのですが、ほとんどの動画ではこのVisual Studi Codeを利用しています。それぞれのフレームワークやライブラリに対応したプラグインも豊富で、とてもおすすめです。ちなみに、Web開発だけでなくWindows Power Shellのスクリプト開発にも対応している点が僕的にはとてもプラスです。
さて、ここからはReact.jsの開発環境を構築していきます。構築といっても、簡単すぎてもう終わり？となってしまうほどです。手順としては2ステップあります。
- node.jsのインストール
- React.jsのインストール
これだけです。それでは順番にみていきましょう。
まず、node.jsをダウンロードします。LTSの最新版でOKです。
ダウンロードが終わったら、そのままインストーラを実行してインストールを完了してください。ウィザードはすべてデフォルトのまま「次へ」でOKです。
node.jsのインストールが完了したら、コマンドプロンプトで下記のコマンドを実行し、無事インストールされていることを確認しましょう。
それぞれ、バージョン情報が表示されれば成功しています。
node -v
npm -v
次に、React.jsをインストールしていきます。事前に開発用のディレクトリを作っておき、cdコマンドで開発用ディレクトリに移動してから以下のコマンドを実行します。
cd <開発用ディレクトリ>
npx create-react-app <任意のアプリ名>
インストールに成功すると、「Happy Hacking!」と表示されます。
これでReact.jsのインストールが完了です。あとはデフォルトのアプリが動いているか確認します。
cd <インストール時に入力したアプリ名>
npm start
ブラウザが勝手に開いて、以下のような画面が表示されるはずです。
※開いていたほかのタブやブックマークバーはマスキングさせていただきました。
エディタでReact.jsをインストールしたディレクトリを開いてみます。以下は僕が使っているVisual Studio Codeで開いた様子です。
これでReact.jsの開発環境が整いました！(ここまでは)簡単ですね！
すでに開発を始めることはできますが、以下の2つを追加しておくと便利です。
・Google Chromeのエクステンション「React Developer Tool」
Developer Tool利用時に「React」タブが表示されるようになり、コンポーネント情報等表示してくれます。
・Visual Studio Codeのエクステンションパック
開発環境が整っても、中身を書けないと意味がないですよね(笑)
僕は今、勉強しながらポートレートサイトを作成しています。
完成したらこのブログでも紹介したいと思っています。
ちなみに、英語ではありますが、今回の内容はReact公式サイトでも紹介されていますのでもしよければみてみてください。(むしろこちらが1次情報です)
以上、本日も最後まで読んでいただきありがとうございます！！
