こんにちは。最近自然言語処理系の記事を多く書いていましたが、たまにはアプリ開発もしたいよ！という事でずっと触れてみたかったReactを使ったアプリ開発に挑戦してみることにしました。
この記事では、開発環境構築のステップを自分の備忘も兼ねて残しておこうと思います。
Contents
Node.jsのインストール
はじめに、Node.jsのインストールが必要です。今回はパッケージ管理ソフトHome Brew経由でインストールします。
## Home Brewのバージョン直近化
brew -v
brew update
brew -v
## Node JSのインストール
brew install nodejs
node -v
npm -v
これで事前に必要なパッケージの準備が完了しました。
Reactプロジェクトの作成
便利なもので、Create React Appというライブラリを利用すれば、プロジェクトのベースを一瞬で作ることができます。Create React Appを使った各種手順は公式ドキュメントにもありますので、適宜ご参照ください。
https://create-react-app.dev/docs/getting-started
初めに、Create React Appライブラリをnpmまたはyarnでインストールします。
npm install create-react-app
または
yarn add create-react-app2021年9月現在、create-react-appをglobalにインストールする方法はサポートされなくなっているようです。
globalにインストールしたcreate-react-appでアプリ作成をしようとすると、以下のワーニングが。
We no longer support global installation of Create React App.
Please remove any global installs with one of the following commands:
- npm uninstall -g create-react-app
- yarn global remove create-react-app
The latest instructions for creating a new app can be found here:
https://create-react-app.dev/docs/getting-started/
それではプロジェクトの作成です。
yarn create-react-app プロジェクト名これで、プロジェクト名フォルダと、デフォルトアプリのモジュールが作成されます。
これだけで完了です。それではローカルサーバを起動して、サンプル画面を確認してみます。
cd プロジェクトフォルダ
npm start
または
yarn start
とても簡単ですね・・。続けて、コードをかける環境を整えていきます。
TypeScriptを利用する場合の追加ステップ
最近では、ReactのコードをTypeScriptで記述するケースも多いかと思います。そんな場合でもコマンドひとつで解決できます。詳しくはこちらに説明があります。
https://create-react-app.dev/docs/adding-typescript
すでに作成済みのプロジェクトをTypeScriptに対応させるためには、以下のコマンドを実行すればOKです。
yarn add typescript @types/node @types/react @types/react-dom @types/jest
Visual Studio Code上でReact開発環境を整える
Visual Studio Code (VS Code)をまだインストールされてない方がいれば、こちらからダウンロードしてインストールしておきます。
https://azure.microsoft.com/ja-jp/products/visual-studio-code/
VS Codeを立ち上げます。
FileメニューのOpen Workspaceから、先ほど作ったReactプロジェクトのディレクトリを指定すると、左側のメニューにファイルリストが表示されます。
React開発に便利な拡張パッケージのインストール
ここで、React開発にあたりいれておくと便利な拡張パッケージをいくつかいれておきます。
以下、VisualStudioCodeの公式ページでも紹介されている一連のパッケージをいれておきます。
https://code.visualstudio.com/docs/nodejs/reactjs-tutorial
１、Debugger for Chrome
Chrome上で動作確認を行えるようにするための拡張パッケージです。
２、ES Lint
3, ES7 React/Redux/GraphQL/React-Native snippets
Reactなどでよく書くコードのショートカットが使えるようになるツールです。
Codeの変更とテスト
先ほどのトップ画面にHello Worldと表示させる変更を加えてみます。
Sample Appのsrcディレクトリ内のindex.jsのReactDOM.render内でHello WorldのHTMLをかいてSaveします。
これを先ほどのDebugger for Chromeでデバッグします。左のデバッグメニュー左上の設定ボタンを押すとlaunch.jsonが開かれます。ここをReactアプリの場合は以下のように変更しておきます。
## 変更後
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/src"
}
]
}その後、デバッグメニュー左上のLaunch Chromeボタンを押すと、Chromeが立ち上がり画面の確認ができました！
Githubとの連携
最後に、VS Codeで開発したコードを素早くGithubに連携できる仕組みを作りに行きます。
もし、Githubを使わなければこのステップはスキップしてください。
Gitは予めPCにインストールしている前提で話を進めます。
create-react-appでプロジェクトを作成すると、自動的にそのプロジェクトフォルダに対してgitの初期化が済んでいる状態ですので、その後に必要なステップを書いていきます。
１、Github上リモートリポジトリの紐付け
cd プロジェクトフォルダ
git remote add origin リポジトリURL２、Githubリモートリポジトリへのプッシュ
git branch -M main
git push -u origin mainこれで、Github上にコードがコミットされたことが確認できました。（下のキャプチャはmasterブランチですが、Githubの規定のブランチは現在mainに変更されているので、上のコマンドの通り実行することで、現在はmainブランチでコードを確認いただけます）
３、VS Code上でコードの変更&プッシュ
それでは、次はVS Code上で同様のことをやってみます。
Sample Appのsrcディレクトリ内のindex.jsのReactDOM.render内でHello WorldのHTMLをかいてSaveします。
すると、左側のBranchマークのところに更新マークが入りました。
Branchマークを選択すると、変更が確認できます。
左側のメニューからコミットを押すと、コミットメッセージとともにコミットが完了します。
最後に左下のSyncronizeボタンを押すと、先ほどのコミットをマスターにプッシュ/プルされます。
Github上で変更が反映されたかどうかを確認します。
これでGithubへのコミットがVS Code上からできるようになりました！
この記事ではMacOSでReactのローカル開発環境を構築するまでの手順を解説しました！
次は、Reactプロジェクトのディレクトリ構成を理解していこうと思います。
本日も最後までご覧いただきありがとうございました！
[番外編] もっとReact.jsを学ぶには・・・
React.jsをもっと学びたい方、以下におすすめの学習コンテンツをまとめましたので、よろしければご活用いただければと思います！
土台のJavaScript/TypeScriptに不安がある方は、こちらもまとめましたので、ご参考になりましたら幸いです。
今回はMac PC上のVS Code上でReactプログラミングができるようにしていきます。
・OS：Mac OS Mojave
・コードエディタ：Visual Studio Code