【Reactアプリ開発】MacOSで環境構築

こんにちは。最近自然言語処理系の記事を多く書いていましたが、たまにはアプリ開発もしたいよ!という事でずっと触れてみたかったReactを使ったアプリ開発に挑戦してみることにしました。

この記事では、開発環境構築のステップを自分の備忘も兼ねて残しておこうと思います。

筆者のPC環境

今回はMac PC上のVS Code上でReactプログラミングができるようにしていきます。

・OS:Mac OS Mojave
・コードエディタ:Visual Studio Code

Node.jsのインストール

はじめに、Node.jsのインストールが必要です。今回はパッケージ管理ソフトHome Brew経由でインストールします。

## Home Brewのバージョン直近化
brew -v
brew update
brew -v

## Node JSのインストール
brew install nodejs
node -v
npm -v
Home Brewのバージョン
Node JSのバージョン
npmのバージョン

これで事前に必要なパッケージの準備が完了しました。

Reactプロジェクトの作成

便利なもので、React-Create-Appというライブラリを利用すれば、プロジェクトのベースを一瞬で作ることができます。このライブラリもnpmからダウンロードします。

npm install -g create-react-app

それではプロジェクトの作成です。

create-react-app プロジェクト名

これだけで完了です。それではローカルサーバを起動して、サンプル画面を確認してみます。

cd プロジェクトフォルダ
npm start
デフォルト画面

とても簡単ですね・・。続けて、コードをかける環境を整えていきます。

Visual Studio Code上でReact開発環境を整える

Visual Studio Code (VS Code)をまだインストールされてない方がいれば、こちらからダウンロードしてインストールしておきます。

https://azure.microsoft.com/ja-jp/products/visual-studio-code/

VS Code

VS Codeを立ち上げます。

VS Code

FileメニューのOpen Workspaceから、先ほど作ったReactプロジェクトのディレクトリを指定すると、左側のメニューにファイルリストが表示されます。

React開発に便利な拡張パッケージのインストール

ここで、React開発にあたりいれておくと便利な拡張パッケージをいくつかいれておきます。

以下、VisualStudioCodeの公式ページでも紹介されている一連のパッケージをいれておきます。

https://code.visualstudio.com/docs/nodejs/reactjs-tutorial

1、Debugger for Chrome

Chrome上で動作確認を行えるようにするための拡張パッケージです。

Debugger for Chrome

2、ES Lint

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の初期化が済んでいる状態ですので、その後に必要なステップを書いていきます。

1、Github上リモートリポジトリの紐付け

cd プロジェクトフォルダ
git remote add origin リポジトリURL

2、Githubリモートリポジトリへのプッシュ

git push origin master

これで、Github上にコードがコミットされたことが確認できました。

3、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プロジェクトのディレクトリ構成を理解していこうと思います。

本日も最後までご覧いただきありがとうございました!

この記事を気に入っていただけたらシェアをお願いします!

コメントを残す

メールアドレスが公開されることはありません。

ABOUT US

Yuu113
初めまして。Yuu113と申します。 兵庫県出身、東京でシステムエンジニアをしております。現在は主にデータ分析、機械学習を活用してビジネスモデリングに取り組んでいます。日々学んだことや経験したことを整理していきたいと思い、ブログを始めました。旅行、カメラ、IT技術、江戸文化が大好きですので、これらについても記事にしていきたいと思っています。