新しい現場で本格的にReactを触ることになったのでReactについて学んだことを備忘録として記事にしていきます。
初回である今回はReactを学び始めると大体最初に学ぶnpx create-react-appコマンドを利用したReactアプリのセットアップまでを記事にします。
Reactとは何か？
ReactはFacebookが開発したJavaScriptのライブラリです。
UI開発のためのライブラリであり、コンポーネントベースでコードを記述することができ、再利用性を高めることができます。
また、仮想DOMを利用し入力に対して必要な部分だけを効率的に再描写する仕組みにより、高速なレンダリングを実現しています。
JSXと呼ばれるHTMLのようなタグ（<JSXSample />のように記述します）を使った記述方法でUIをコーディングするため、宣言的な記述ができるというのも魅力の一つですが、React特有の記述方法が多いためReactを使うための技術を学ぶ必要があります。
開発環境
この記事では以下の環境で開発を行なっています。
- macOS Sonoma v14.2.1
- nvm v0.39.7
- Node.js v20.11.0
- npm v10.2.4
その他ライブラリやフレームワークなどのバージョンはnpmを利用してインストールするので都度必要になったら記述します。
Node.jsのインストール
では、具体的な作業に入っていきます。
最初はNode.jsをインストールしていきます。
Node.jsとはJavaScriptのサーバーサイドの実行環境です。
ここでは詳しく説明はしないので、興味がある方は調べてみてください。
nvmをインストール
nvmとはNode Version Managerの略で、複数のNode.jsのバージョンを管理することができるツールです。
Node.jsそのものをインストールしてもいいのですが、Node.jsにはたくさんのバージョンがあるので個人的には切り替えを容易に行えるnvmの導入をお勧めします。
以下のページのnvm公式ドキュメントの手順を使ってインストールする方法を紹介します。
Node Version Manager - POSIX-compliant bash script to manage…
以下のコマンドを実行してインストールしましょう。
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash尚、このコマンドは記事執筆時点でのコマンドなのでご自身で行う際は公式ドキュメントからコピーしてください。
コマンド実行が完了したら以下のコマンドでインストール確認をしましょう。
nvm -v
>>> 0.39.7 //バージョンが表示されればインストール完了しています。nvmを使ってNode.jsのインストール
nvmのインストールが完了したら次はNode.jsをインストールしていきましょう。
まずは、どのバージョンがインストール可能かを確認します。
以下のコマンドを実行してください。
nvm ls-remoteすると以下のように表示されると思います。
バージョンが羅列されますがこちらがnvmを利用してインストール可能なNode.jsのバージョンとなっています。
以下のコマンドを実行してNode.jsをインストールしていきましょう。
nvm install 20.11.020.11.0の部分にはインストールしたいバージョンを指定できます。
次にnvmで利用するNode.jsのバージョンを指定します。
以下のコマンドを実行してください。
nvm use 20.11.0こちらは利用するインストールしたNode.jsのどのバージョンを利用するかを指定するコマンドで、こちらを利用して簡単に利用するバージョンを切り替えることができます。
では、Node.jsが使えるようになっているのかを確認しましょう。
以下のコマンドを実行してください。
node -vバージョンが表示されれば利用できるようになっています。
以上でNode.jsのインストールは完了です。
npx create-react-appコマンドでReactアプリのセットアップ
Node.jsのインストールが完了したらいよいよReactを導入していきます。
Reactアプリの作成方法はいくつかありますが、今回は一番手軽にセットアップを行うことができるnpm create-react-appコマンドを利用していきます。
npxとは
まず、コマンドの最初に記述されているnpxについて説明します。
npxとはNode.jsのパッケージ内のコマンドを一時的に利用するためのコマンドです。
npxが実行されるとパッケージのインストール→コマンドの実行→パッケージのアンインストールまでを自動で行なってくれます。
Node.jsのパッケージとnpmについて
Node.jsにはReactなど様々なパッケージがあり、開発するものに合わせてそれらをインストールしていきます。
そして、npmとはNode package managerのことで、その名の通りNode.jsにあるたくさんのパッケージの依存関係を管理してくれるツールです。
npmはNode.jsに付属しているため、Node.jsがインストールされていれば利用することができます。
試しに以下のコマンドを実行してみてください。
npm -vバージョンが表示されてインストールされていることが確認できたと思います。
Node.jsのプロジェクトは基本的にnpmを利用して管理していきます。npmコマンドとnpxコマンドは似ていますが、パッケージのインストールなど管理を行う場合はnpmコマンドを利用し、パッケージのインストールは不要でコマンドのみ実行したい場合npxコマンドを利用します。
ちなみに、Node.jsのパッケージマネージャーにはyarnなどもあります。
ネット上の記事にはそちらが使われていることもありますが、やっていることはnpmと大体同じです。
npx create-react-appコマンドの実行
では、npm create-react-appを実行してReactアプリをセットアップしていきましょう。
npx create-react-appコマンドとは
npx create-react-appコマンドはReactの基本的なプロジェクト構造を自動でいい感じに任意のフォルダにセットアップしてくれるコマンドです。
ディレクトリ構成やパッケージのインストールなどを自動でやってくれるため、お手軽にReactアプリの作成に着手できます。
一方でカスタマイズ性の低下や依存関係の不透明性、不必要なパッケージもインストールされるなどのデメリットもあります。
しかしながら、手軽にReactアプリのセットアップが行えるため簡単なアプリの開発などでは重宝します。
npx create-react-appでReactアプリを作成
長々と説明してきましたが、実際にnpx create-react-appを実行していきましょう。
とはいえ、前述の通りコマンド実行後は自動でセットアップしてくれるため難しい操作はありません。
Reactアプリを作成するフォルダに移動
npx create-react-appコマンドは実行したフォルダにReactアプリを作成します。
ターミナル上でReactアプリを作る任意のフォルダに移動しましょう。
mkdir my_folder/react
cd my_folder/reactパスの部分は任意のフォルダを指定してください。
npx create-react-appの実行
任意のフォルダに移動したらReactアプリを作成していきます。
以下のコマンドを実行してください。
npx create-react-app sample-sitesample-siteの部分は任意のプロジェクト名を指定します。
実行が完了して以下のように表示されるとプロジェクトの作成が成功しています。
Finderでできたディレクトリを確認するとプロジェクトが作成されているのがわかりますね。
セットアップされたアプリを起動する
最後にセットアップされたアプリを起動してみましょう。
まず、プロジェクトのルートディレクトリに移動します。
以下のコマンドを実行してください。
cd sample-siteその後、ローカルでアプリを起動します。
起動には以下のコマンドを実行してください。
nom start実行するとブラウザが起動して以下のような画面が表示されれば成功です。
アプリを開発する際はこの作成されたプロジェクトのsrcフォルダ内を修正していくことでアプリを作成していきます。
コマンド一つでアプリの起動ができるところまでセットアップできるのがnpx create-react-appコマンドの魅力ですね。
終わりに
今回はコマンド一つでReactアプリのセットアップを行えるnpx create-react-appコマンドまでの手順をまとめました。
簡単なプロジェクトを作成する際にとても便利なコマンドなのでぜひ覚えておきましょう。
ここまで読んでいただきありがとうございました。
それでは、また。