はいこんにちは、saikiです。

ちょっとWebアプリケーションが作りたくなったもののWeb開発の全てを忘れたので、Reactでサンプルアプリを作ってみたいと思います。

で、ナウさを求めるならPWAやろってことでついでにPWAです。

以下の記事を参考に進めていき、必要な部分だけかいつまんで書いていきたいと思います。

今回はビルドして動かすとこまで。

コード書かないのでまだタイプスクリプトはでてきません。

最終的にbitCoinの値段がリアルタイムに更新されるアプリができるらしいです。素敵。

追記：思った以上に重そうだったのでもうちょい軽いアプリを作ることにします。できればreduxもついでに勉強したいのでその方向で考え中。

環境構築

必要なtoolを入れます。これだけで全て入るらしい。いいね。

npmがない人はnpmを入れる必要があります。

参考記事どうぞ。

npm install -g create-react-app

これで終わり。

プロジェクト作成

アプリの雛形を作成しましょう。コマンドです。

create-react-app pushercoins

pushercoinsはプロジェクト名なので好きに変えても問題ありません。

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対応を考えて作れば意外と簡単なのではないかと思ってしまうくらいにはここまでは簡単でしたね。

次回は実際のアプリケーションを作っていきます。楽しみ。

ではまた。