reactで新しいwebアプリを作成する(2020年4月時点)

reactを使用して新しいwebアプリの作成を開始してみる。この記事では雛形のビルドまでを行っているが、実に短時間で完了する。

なお今回はエディタとして無料のVisual Studio Codeを採用している。

最近は仕事現場でもVisual Studio Codeを採用することが多い。Visual Studio Codeの環境が整って十分使用に耐えうるということもあるし、有料のエディタと比べるとライセンス購入コストやライセンス管理コストが削減できるのがありがたい(この業界は人の出入りが激しいので、ライセンス管理は結構面倒である)。

以下、windows10上での環境構築のざっとした手順である(2020/04/16時点)。

Visual Studio Codeをインストールする

インストーラをダウンロードして指示に従いインストールする。

node.jsをインストールする

インストーラをダウンロードして指示に従いインストールする。インストールオプションはデフォルトのままでOK。

Visual Studio Codeを立ち上げる

Visual Studio Codeが起動している状態でnode.jsをインストールした場合は一度再起動したほうが良い。

作業フォルダを選択する

c:\workspace\など、適当な作業フォルダをFile>Open Folderメニューから選択する。

ターミナルを起動する

View>Terminalメニューを選択して、ターミナルを起動する。

自分の環境だとPowerShellが起動した。

必要に応じてbashなどのターミナルをセットアップすることも可能である。

(ここではPowerShellのままで作業を進めるが、PowerShellを前提として解説を行うサイトは少ないため、やはりbashあたりをインストールするのが無難だろう)

reactアプリの雛形を作成する

npx create-react-app timer

というコマンドを実行すると、timerディレクトリの下にアプリの雛形がjavascriptで作成される。

npx create-react-app timer --template typescript

と、オプションをつけて実行することで、typescriptにより作成される。

いずれの場合でも作成に成功すると、いくつかのコマンドとともに、次に打つべきコマンドが以下のように紹介される。

Success! Created timer at C:\workspace\timer
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd timer
  npm start

このcreate-react-appコマンドでアプリの雛形を作成すると、アプリのテストやリリースに必要なコマンド類が上記のように自動的に用意される。またgitを使用する場合に便利な.gitignoreファイルなども用意してくれる。このいたれりつくせりなコマンドのお陰で、余計な事を気にせずに即座に開発をスタートすることができる。

reactアプリの雛形をローカルで起動する

提案に従って、

cd timer
npm start

というコマンド実行する。するとデフォルトブラウザが自動的に立ち上がり、アプリが起動される。

開発段階ではこのコマンドを利用してアプリの動作確認を行っていく。

Visual Studio Codeで編集した内容はこのアプリにリアルタイムに反映される。

試しにVisual Studio CodeでApp.tsx(App.js)を開いて適当に修正・保存してみると、その内容が即座に反映されるのが分かるだろう。

※(PowerShellの場合)以下のように実行すると、ブラウザを起動せずにstartすることも可能である。

$env:BROWSER = "none" ; npm start

reactアプリをビルドする

開発が完了してSTG環境や本番環境へのリリースを行う場合、

npm run build

コマンドを実行することで、リリース用のファイルをbuildディレクトリ配下にビルドする。ビルドに成功すると、

The build folder is ready to be deployed.
You may serve it with a static server:

  npm install -g serve
  serve -s build

という表示があるため、これに従って

npm install -g serve
serve -s build

※ TerminalがPowerShellの場合は、serve.cmd -s build と実行する必要がある。

とコマンドを打ち込む。するとローカルでサーバが起動し以下のようにURLが指示される。ここにアクセスすることで、ビルドしたファイルをリリース前に動作確認することができる。

npm startコマンドはいわゆる開発中のデバッグビルドのようなイメージであるので、このコマンドによるリリースファイルの動作確認は欠かさないほうが良いだろう。

なお、npm install -g serveを実行するのは最初の一度のみで良い。一度インストールしたあとで再度npm run buildを行うと、

The build folder is ready to be deployed.
You may serve it with a static server:

  serve -s build

という表示に変わる。なかなか細かい対応である。

コメント

タイトルとURLをコピーしました