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
という表示に変わる。なかなか細かい対応である。
コメント