DEV Community: はむさん

create-react-appにより作成されるアプリケーションに同梱されるserviceWorker.jsって何？unregister()って何をしているの？

はむさん — Mon, 29 Apr 2019 14:50:04 +0000

はいどうもこんにちは！Dive into Hackingのはむです。2019年のゴールデンウィーク10連休、いかがお過ごしでしょうか？

Reactアプリケーションを作成するためのの定番ボイラープレートcreate-react-app。
先日、v3.0.0にメジャーアップデートされ、まさに安定のツールとなりました。
僕のUdemyのコースReactやGraphQLのコースでも利用しているこのcreate-react-appですが、
アプリケーションがあまりにも簡単に作成できてしまうので、つい素通りされがちなんですが、
本記事ではこのcreate-react-appが生成するserviceWorker.jsというファイルが何者なのか、そして、このモジュールを使って実行しているコードが何をやってくれているのかについてご紹介したいなと思います。
尚、本記事で実際に用いたcreate-react-appのバージョンは以下の通りです。

$ create-react-app --version
3.0.0

では、上記バージョンのcreate-react-appを使用していつものようにReactアプリを作成してみます。
アプリケーションの名前は、ちょっと長いですが、what-is-the-role-of-service-workerという名前にします。

$ create-react-app what-is-the-role-of-service-worker

Creating a new React app in /path/to/what-is-the-role-of-service-worker.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...

yarn add v1.15.2
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "react-scripts > @typescript-eslint/eslint-plugin@1.6.0" has unmet peer dependency "typescript@*".
warning "react-scripts > @typescript-eslint/parser@1.6.0" has unmet peer dependency "typescript@*".
warning "react-scripts > @typescript-eslint/eslint-plugin > @typescript-eslint/typescript-estree@1.6.0" has unmet peer dependency "typescript@*".
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.10.0" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev".
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 19 new dependencies.
info Direct dependencies
├─ react-dom@16.8.6
├─ react-scripts@3.0.0
└─ react@16.8.6
info All dependencies
├─ @babel/plugin-proposal-class-properties@7.4.0
├─ @babel/plugin-proposal-decorators@7.4.0
├─ @babel/plugin-transform-flow-strip-types@7.4.0
├─ @babel/plugin-transform-runtime@7.4.3
├─ @babel/plugin-transform-typescript@7.4.4
├─ @babel/preset-typescript@7.3.3
├─ babel-plugin-macros@2.5.1
├─ babel-plugin-named-asset-import@0.3.2
├─ babel-preset-react-app@8.0.0
├─ confusing-browser-globals@1.0.7
├─ eslint-config-react-app@4.0.0
├─ fork-ts-checker-webpack-plugin@1.0.1
├─ inquirer@6.2.2
├─ react-app-polyfill@1.0.0
├─ react-dev-utils@9.0.0
├─ react-dom@16.8.6
├─ react-error-overlay@5.1.5
├─ react-scripts@3.0.0
└─ react@16.8.6
✨  Done in 11.97s.

Initialized a git repository.

Success! Created what-is-the-role-of-service-worker at /path/to/what-is-the-role-of-service-worker
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    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 what-is-the-role-of-service-worker
  yarn start

Happy hacking!

では、アプリケーションが作成できたらcdで移動します。

$ cd what-is-the-role-of-service-worker

次に、src/index.jsをエディターで開きます。

$ vim src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

開くと、上記のような内容のJavaScriptのコードとなっているかと思いますが、
今回注目するべき対象は、5行目のserviceWorkerというimport対象のモジュール、そして、そのモジュールを用いて、src/index.jsの最終行でserviceWorker.unregister()を実行している部分になります。
実は、ここでやっていることは非常にシンプルで、serviceWorkerというモジュールにunregister()という関数を実行させています。
英語で解釈すると文字通りの意味になるわけですが、要するに、「解除する」を実行しています。
「え？解除するって何を？」って話なんですが、ここでは、serviceWorkerという別のモジュールでPWA(Progressive Web Application)のキャッシングという機能を有効化、あるいは無効化することができるのですが、create-react-appがデフォルトで出力するコードでは、serviceWorker.unregister()というコードにより、キャッシュを無効化しています。
直前のコメント文をよく見ると、

If you want your app to work offline and load faster, you can change unregister() to register() below. Note this comes with some pitfalls. Learn more about service workers: https://bit.ly/CRA-PWA

という注釈がありますが、前提として、PWAという機能の中に、オフラインという機能があって、ネットワークに接続できないような環境下でもコンテンツをキャッシュすることがうまく利用することでページ遷移を実現できるんですが、これには、ここのserviceWorker.unregister()という部分をunregister()からregister()に変更してね！ってちゃんと書かれています。
本記事を掲載しているブログサイトでもserviceWorkerは健在で(但し、serviceWorker.jsというファイル名ではなく、sw.jsというファイル名になります。)、オフラインでもサイト内のコンテンツであればキャッシュによってページ遷移ができるんです。改めて、このキャッシュをデフォルトで有効にしてくれているGatsbyJSって凄いなぁと実感します。

ちなみに、service workersについては、 https://bit.ly/CRA-PWA を参照あれ！と書かれていますが、このリンクには実はあまり詳細なことは書かれていません。
詳細は、 Google が出している公式のドキュメントService Workerの紹介が良い記事なので一度読んでおくと良いかと思います。

というわけで今回はcreate-react-appが使用するserviceWorkerというモジュール、そしてそのモジュールが有するPWAの一機能であるcacheの有効/無効を制御するコードのご紹介でした。

Dive into Hacking!

はむ

React Context API

はむさん — Sun, 13 May 2018 16:11:07 +0000

背景

Reactでは、配下のコンポーネントにデータを渡すための手段としてpropsという機能があります。ところが、propsを使用すると、孫コンポーネント、ひ孫コンポーネント、...、というように渡したいコンポーネントまで渡したいデータをバケツリレーのように延々と渡していかなければならない弱点があります。
その弱点を解消するべく、どのコンポーネントからでも特定のデータにアクセスできる仕組みがreact-reduxから提供されていて、Reduxを使用したことのある人なら大抵の人が恩恵を受けているであろうProviderコンポーネントです。
Providerコンポーネントとは文字通りProviderコンポーネントでwrapした全コンポーネントに特定のデータを届けることが目的とします。
その後、Reactは、バージョンv16.3で、Reduxに喧嘩を売っているのか？とまさに耳を疑うような機能を追加しました。react-reduxのProviderとほぼ同様の機能で同名のProviderというコンポーネントをリリースしました。
この記事ではReact側でリリースされたProvierを含むContext APIについての紹介と、Context APIを使用したアプリケーションの実装例について紹介したいと思います。
尚、「先にソースコードを見たい！」という方は末尾のソースコードよりgit cloneしてください。

Reactアプリケーションの作成

Reactアプリケーションが必要になりますので以下のコマンドでサクッと作成してしまいます。ちなみに、npxはnpmのv5.2.0で導入されたもので、create-react-appのようなグローバルスコープにインストールしてから使用するようなコマンドが、インストールしなくても実行できるようにするためのコマンドです。グローバルスコープにあまり使わないコマンドを導入したくないという方は今回のようにnpxで実行すると良いでしょう。

$ npx create-react-app counter
$ cd counter

念のため、package.jsonの中身を確認しておきましょう。Reactのバージョンがv16.3以上でないと以降の動作確認ができませんのでね。

今回確認した時のpackage.jsonは以下の内容でした。reactのバージョンが^16.3.2 となっているので問題ないです。

{
  "name": "counter",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

続いてReactアプリケーションを起動します。

$ npm start

npm startを実行するとブラウザが自動起動し、Welcome to Reactのおなじみの画面が表示されるはずです。これが確認できたらエディターに戻って、ファイルを編集します。

React Context APIの導入したカウンタアプリの例

「React Context APIの導入したカウンタアプリ」の例を以下に記載します。

まずはReactアプリケーションのトップレベルのファイルであるsrc/index.jsを編集していきます。

編集前は、以下のようになっていると思いますが、一旦全部消去します。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

そして、src/index.jsを以下のように書き換えます。

import React from 'react';
import ReactDOM from 'react-dom';
import { CounterContext } from './contexts/counter'
import Counter from './components/counter'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      count: 0,
      increment: () => this.setState(state => ({count: state.count + 1})),
      decrement: () => this.setState(state => ({count: state.count - 1}))
    }
  }

  render() {
    return (
      <CounterContext.Provider value={this.state} >
        <Counter />
      </CounterContext.Provider>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

以下の点がポイントになります。

contextの作成はsrc/index.jsではやらず別ファイルに分離しています。大規模なアプリケーションを想定するとおそらく別のファイルに分離しないとカオスになると思われるためです。というのも、contextは実質無限個作成できるからです。
contextと同様の理由でcomponentも別ファイルに分離しました。これはReactアプリケーションを書く人なら既に身についているであろう慣習です。
状態はReactの基本機能であるstateで管理します。状態遷移についてもReactのsetStateで行います。なのでReduxで書くときとは違い、stateの変更とそれを誘発するイベントがコンポーネントにべったりな点は、Reduxアプリを書き慣れている人で何でもかんでも分離したがる潔癖症な人にとってはかなりキモいコードと感じてしまうかもしれません。
importしたCounterContextに紐づくCounterContext.Providerというコンポーネントで渡したい状態を受け取るコンポーネントをwrapします。
ProviderではなくCounterContext.Providerと表記しているのは、今回のケースでは、Providerでも良かったんですがContextは無数存在し得る物なのでどのProviderなのかを識別できるようCounterContext.というプレフィックスにより名前空間を識別する習慣を付けないと後々アプリケーションが大規模になってきて複数のContextが入り乱れるようになってときにリファクタリングを強いられると思うのでそうしています。
ProvierでConsumerに渡したい状態をvalue=で渡しています。

Counterコンポーネント

続いてCounterコンポーネントを作成します。

　

$ mkdir src/components
$ touch src/components/counter.js

エディターで以下のように編集します。

import React from 'react';

import { CounterContext } from '../contexts/counter'

const Counter = () => (
  <CounterContext.Consumer>
    {
      ({ count, increment, decrement }) =>  {
        return (
          <React.Fragment>
            <div>count: {count}</div>
            <button onClick={increment}>+1</button>
            <button onClick={decrement}>-1</button>
          </React.Fragment>
        )
      }
    }
  </CounterContext.Consumer>
)

export default Counter

以下の点がポイントになります。

カウンタコンポーネントはConsumerコンポーネントを有するコンポーネントです。なので冒頭で該当のContextをimportしています。
CounterContext.Consumerと表記しているのは、CounterContext.Providerと表記しているのと同じ理由からです。(上述)
Consumerの内部のchildは関数であり必須です。関数を書いてください。
Consumer内部の関数の引数で、Providerが渡してくれたvalueを受け取ることができます。今回のアプリケーションでは、カウンタの値、インクリメントの関数、デクリメントの関数を受け取ることができます。
Consumer側では受け取った値を適当な場所に表示させたり、受け取った処理を適当なイベントハンドラに渡したりすれば良いです。

CounterContextの作成

最後にカウンタ専用のCounterContextを作成します。

$ mkdir src/contexts
$ touch src/contexts/counter.js

src/contexts/counter.jsを以下のように編集します。

import { createContext } from 'react';

export const CounterContext = createContext({
  count: null,
  increment: () => {},
  decrement: () => {}
})

コンテキストは即ちProviderとConsumer間で共有したい状態や処理です。createContextの引数には上記のようにオブジェクトをデフォルト値として渡すことができます。countを0にしても良いのですが初期化は今回の実装ではコンポーネントで実行させるポリシーにしています。

デモ画面

という感じで、以下の画面ようにカウンタアプリがブラウザに表示され動作すると思います。

ソースコード

本記事で扱った動作確認のとれているソースコードはGitHubに公開しています。書くのが面倒という方は下記コマンドでgit cloneしてください。

$ git clone git@github.com:ProgrammingSamurai/react-recipes.git

告知

先日、Udemy講師デビューを果たしました。「フロントエンドエンジニアのためのReact・Reduxアプリケーション開発入門」というコースを公開中です。これからReactをやってみようとお考えの方は是非始めてみてください！こちらのリンクから95%オフで購入できます。ご質問も大歓迎です！ :)