はいこんにちは、saikiです。
ちょっとWebアプリケーションが作りたくなったもののWeb開発の全てを忘れたので、Reactでサンプルアプリを作ってみたいと思います。
で、ナウさを求めるならPWAやろってことでついでにPWAです。
以下の記事を参考に進めていき、必要な部分だけかいつまんで書いていきたいと思います。
今回はビルドして動かすとこまで。
コード書かないのでまだタイプスクリプトはでてきません。
最終的にbitCoinの値段がリアルタイムに更新されるアプリができるらしいです。素敵。
追記：思った以上に重そうだったのでもうちょい軽いアプリを作ることにします。できればreduxもついでに勉強したいのでその方向で考え中。
環境構築#
必要なtoolを入れます。これだけで全て入るらしい。いいね。
npmがない人はnpmを入れる必要があります。
npm install -g create-react-appこれで終わり。
プロジェクト作成#
アプリの雛形を作成しましょう。コマンドです。
create-react-app pushercoinspushercoinsはプロジェクト名なので好きに変えても問題ありません。
ServiceWorkerが動くようにコード書き換え#
参考ページではこの記述がなくてハマりましたが、ServiceWorkerを動かすためにはindex.jsを編集する必要があるようです。
確かにserviceWorker.jsonにデフォルトでは動かないって書いてありました。
index.jsの最後の行の
serviceWorker.unregister();を
serviceWorker.register();に変えます。これだけ。
buildしてみる#
参考ページではここでServiceWorkerについての説明がでてきてめちゃくちゃタメになりそうですが今回は割愛。
とりあえずServiceWorkerはブラウザとは別に裏で動くjavaScript環境です。
こちらの記事がとてもわかりやすいので気になる方はぜひ。
さておき、ビルドのコマンドを叩きます。
npm run buildサーバールートに置かれるのを前提にビルドしてるからそうじゃない時はpackage.jsonを編集してくれよな！
みたいなことを言ってくれるし、deployのコマンドも教えてくれます。懇切丁寧。
deployしてみる#
ローカルサーバーにdeployしてみましょう。
//serveパッケージをglobalに入れる。過去にやったことがあればやらなくて良い
npm i serve -g
// サーバーを立ててbuildフォルダーをdeploy
// -sをつけると存在しないPathを指定した時に全部index.htmlを開くようにしてくれる
serve -s buildこれで「http://localhost:5000 」とか開くとこんな感じ
簡単おしゃれか。
ServiceWorkerの確認#
クロームの右上の丸三つアイコンからデベロッパーツールを開いて
アプリケーションタブでこんな感じにlocalhostと緑の丸ポチが表示されて入れば動いています。
良さそう。
まとめ#
長くなりそうなので一旦ここで切ります。
最初っからPWA対応を考えて作れば意外と簡単なのではないかと思ってしまうくらいにはここまでは簡単でしたね。
次回は実際のアプリケーションを作っていきます。楽しみ。
ではまた。