JavaScript における配列コピーの問題

JavaScript における配列（ array ）はオブジェクトのため参照コピーされる。
つまり、コピー先の配列を変更すると、コピー元の配列が変更されてしまうといった事象が発生する。
例えば次のようになる。

array = [1,2,3];
arrayCopy = array;
arrayCopy[0] = 4;
console.log(arrayCopy); // [4,2,3]
console.log(array); // [4,2,3] : コピー元の値も変更される

JavaScript における配列コピーの解決策

2020年11月現在ではいくつかの方法があるので代表的なものを紹介する。

slice()

速度が早い、と言われている。

array = [1,2,3];
arrayCopy = array.slice();

concat()

slice() 同様、速度が早い、と言われている。

array = [1,2,3];
arrayCopy = array.concat();

スプレッド構文（ ES2015 ）

最も直感的な記述だと思われる。

array = [1,2,3];
arrayCopy = [...array];

その他

for() や while() 、map() 、filter() 、reduce()、from() による方法あり。

参考

• How to clone an array in JavaScript | freeCodeCamp
• Fastest way to duplicate an array in JavaScript - slice vs. 'for' loop | Stack Overflow

firebaseパッケージのインストール

ターミナル

プロジェクト名$ npm install --save firebase

firebase pluginの作成

ターミナル

プロジェクト名$ touch plugins/firebase.js

plugins/firebase.js

import firebase from 'firebase/app'
import 'firebase/firestore'

if (!firebase.apps.length) {
  firebase.initializeApp(
    {
      apiKey: process.env.FIREBASE_API_KEY,
      authDomain: process.env.FIREBASE_AUTH_DOMAIN,
      databaseURL: process.env.FIREBASE_DATABASE_URL,
      projectId: process.env.FIREBASE_PROJECT_ID,
      storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
      messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
      appId: process.env.FIREBASE_APP_ID,
      measurementId: process.env.FIREBASE_MEASUREMENT_ID
    }
  )
}

export default ({ app }, inject) => {
  inject('firebase', firebase);
}

環境変数の設定方法はこちら↓
【Nuxt.js】「dotenv」を使った環境変数の設定方法

nuxt.config.jsの設定

nuxt.config.js

//...省略

  // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
  plugins: [
    '~/plugins/firebase'
  ],

//...省略

動作確認

pages/index.vue内に送信ボタンを設け、
クリックでfirestoreにデータを送る。

pages/index.vue

<template>
  <div class="container">
    <button @click="submit">送信</button>
  </div>
</template>

<script>
export default {
  methods: {
    submit() {
      const db = this.$firebase.firestore();
      db.collection('user').add({ name: 'hoge' })
        .then(() => {
          console.log('成功');
        })
        .catch((e) => {
          console.log(e.message);
        });
    }
  }
}
</script>

クリスマスまであと13日！！ヽ(=´▽`=)ﾉ
本日は再び大野が担当致しますm(_ _)m
(1日目の記事も担当しておりました！)

algolia(instantsearch.js)でページ表示タイミングで検索ってどうやるの？？

はい、コレは純粋に私が直面した問題でした。
algoliaはとても便利なのですが如何せん日本語の情報が少ない気がしますね・・・

結論から言うととても簡単です。

instantsearch.widgets.configure({
  filters: filters,
}),

これを使えばいけます！！b(・∀・)

具体的なコードは以下

// お決まりの初期化
const search = instantsearch({
  indexName: searchIndex,
  searchClient: algoliasearch('keystring', 'secretstring'),
  routing: true,
});

// 各種検索設定
search.addWidgets([
  // 検索ボックスの配置
  instantsearch.widgets.searchBox({
    container: '#search',
    placeholder: 'フリーワード...',
    showReset: true,
    showLoadingIndicator: true,
  }),

  // 初期検索条件をセット！
  instantsearch.widgets.configure({
    filters: ['available: true AND (NOT uid: null)'],
  }),

  // 検索結果表示設定
  instantsearch.widgets.hits({
    ・・・

こんな感じで初期検索条件を指定出来るようになっています。
(エアコーディングですが有効フラグtrueでuidがnullじゃないデータと言う検索条件を付与しています。)

初期条件の書き方はコチラを参考にしています。

https://www.algolia.com/doc/api-reference/api-parameters/filters/

コレだと初期検索条件がずっと検索条件に付いちゃうんだけど・・・

はい、その通りです。
完全に初回の検索条件を指定したいだけなんだけど・・・と言う場合はsearchFunctionと言うのを初期化時に指定する事で可能です。

// お決まりの初期化
var initialsearch = false;
const search = instantsearch({
  indexName: searchIndex,
  searchClient: algoliasearch('keystring', 'secretstring'),
  routing: true,
  // 検索前処理の追加
  searchFunction: function(helper) {
    if (false === initialsearch) {
      initialsearch = true;
      // 最初の検索条件を指定
      helper.setQuery(helper.state.query + '&available=true').search();  
    }
  }
});

これで初期化時の最初の検索の時だけ検索条件を変えるなどといった事が出来ます。

https://www.algolia.com/doc/api-reference/widgets/instantsearch/js/#widget-param-searchfunction

参考になりましたら幸いですm(_ _)m

今年もアドベントカレンダーの季節がやってきました！！！ヽ(=´▽`=)ﾉ
弊社デジクエのカレンダー初日を担当させて頂きます、リードエンジニアの大野です。よろしくお願いしますm(_ _)m

Riot.js V4系であえてロケーションハッシュ(#xxx)でルーティングをする

弊社では私の好みも多分に含まれますがRiot.jsを使ったSPAを作ることが多いです。
最近ではSSR等も流行なようなのでSSRで昔ながらの 「/(スラッシュ)」によるディレクティブなルーティングをするSPAが増えていますね。

Riot4系のルーターも標準では「/(スラッシュ)」によるルーティングになっているようです。
しかしそんな中ではありますが、あえてディレクティブなものでなく「#(ハッシュ)」を使ったルーティングを設定して見たので、「#(ハッシュ)」派の人は是非ご参考下さい！m(_ _)m

※管理ツールなどで特にSSRを必要しない要件で、さっくりSPAしたい派の方特に必見です！

STEP1. Roit4系のルーターの読み込み

標準？で提供されているコチラをまずルーターとして使います。
https://github.com/riot/route

<!DOCTYPE html>
<html>
  <head lang="ja">
    <meta charset="UTF-8">
    <title>Riotルーターサンプル</title>
  </head>
  <body>
    <h1>Riot4ルーターサンプル</h1>
  </body>
    <!-- riot4本体 -->
    <script src="//unpkg.com/riot@4/riot+compiler.min.js"></script>
    <!-- Riot4用のルーター -->
    <script src="//unpkg.com/@riotjs/route@4.0.0-beta.1/route.js"></script>
</html>

シンプルにベースはこんな感じです。

STEP2. シンプルなHello worldサンプル

先ずは、シンプルに2ページを行き来するサンプルを用意

<!DOCTYPE html>
<html>
  <head lang="ja">
    <meta charset="UTF-8">
    <title>Riotルーターサンプル</title>
  </head>
  <body>
    <h1>Riot4ルーターサンプル</h1>
    <ul>
      <li><a href="./">トップ</a></li>
      <li><a href="./sample">サンプル</a></li>
    </ul>
    <app></app>
  </body>
  <!-- riot4本体 -->
  <script src="//unpkg.com/riot@4/riot+compiler.min.js"></script>
  <!-- Riot4用のルーター -->
  <script src="//unpkg.com/@riotjs/route@7.0.0/route.js"></script>

  <!-- appタグをインライン定義 -->
  <template id="app">
    <app>
      <router>
        <route path="{window.location.pathname}">
          <h2>Hello world!</h2>
        </route>
        <route path="{window.location.pathname}sample">
          <h2>サンプル！</h2>
        </route>
      </router>
    </app>
  </template>

  <script>
    // appタグを読み込み
    riot.inject(riot.compileFromString(document.getElementById('app').innerHTML).code, 'app', './app.html');
    // riotをコンパイル
    riot.compile().then(() => {
      riot.register('route', route.Route);
      riot.register('router', route.Router);
      // ルートディレクトリ外でも動くようにベースパスを設定
      route.setBase(`${window.protocol}//${window.host}${window.location.pathname}`);
      riot.mount('app');
    });
  </script>
</html>

ブラウザで実行したサンプルは以下

http://plnkr.co/plunk/IogODWhBcSlmVAzw

ルーターを入れた基本はこんな感じになってます。
サンプルを実際にローカルで実行してみるとわかると思いますが、デフォルトではルーターは「/(スラッシュ)」によるディレクティブなルーターになっていると思います。
本来はこれで十分に満足出来るんじゃないでしょうか。

これを「#(ハッシュ)」ベースのルーターに変えるんですが、実は凄く簡単です。

STEP3. 「#(ハッシュ)」ベースのルーターに変えたサンプル

実はものすごく簡単で

route.setBase(`${window.protocol}//${window.host}${window.location.pathname}`);

の行を#を含めた形に変えて上げて

route.setBase(`${window.protocol}//${window.host}${window.location.pathname}#`);

後はリンクとpathを#式に変えてあげるだけでOKです。

実際の書き換えた後のサンプルは以下

<!DOCTYPE html>
<html>
  <head lang="ja">
    <meta charset="UTF-8">
    <title>Riotルーターサンプル</title>
  </head>
  <body>
    <h1>Riot4ルーターサンプル</h1>
    <ul>
      <li><a href="#">トップ</a></li>
      <li><a href="#sample">サンプル</a></li>
    </ul>
    <app></app>
  </body>
  <!-- riot4本体 -->
  <script src="//unpkg.com/riot@4/riot+compiler.min.js"></script>
  <!-- Riot4用のルーター -->
  <script src="//unpkg.com/@riotjs/route@7.0.0/route.js"></script>

  <!-- appタグをインライン定義 -->
  <template id="app">
    <app>
      <router>
        <route path="{window.location.pathname}">
          <h2>Hello world!</h2>
        </route>
        <route path="{window.location.pathname}#sample">
          <h2>サンプル！</h2>
        </route>
      </router>
    </app>
  </template>

  <script>
    // appタグを読み込み
    riot.inject(riot.compileFromString(document.getElementById('app').innerHTML).code, 'app', './app.html');
    // riotをコンパイル
    riot.compile().then(() => {
      riot.register('route', route.Route);
      riot.register('router', route.Router);
      // ルートディレクトリ外でも動くようにベースパスを設定
      route.setBase(`${window.protocol}//${window.host}${window.location.pathname}#`);
      riot.mount('app');
    });
  </script>
</html>

ブラウザでの実行結果は以下

http://plnkr.co/plunk/veYITpKjBuVEc91A

こんな感じで非常に簡単に「#(ハッシュ)」ベースに変えられました！

まとめ

「#(ハッシュ)」ベースのルーターの場合のいいところはSSRと逆行しますがサーバーサイドの設定などは特に不要になる点かなと思います。
管理ツールだったり、非公開のアプリケーションであったりの場合は特にSSRに絶対にしないとならないシチュエーションでは無く、サックリSPAが作れればいい！と言うことも多々あると思ってます。
(特にRiotはブラウザコンパイル出来てとてもサクッとSPA出来るので尚更)
そう言う時のTIPSとして是非ご参考下さいm(_ _)m

Google chromeの開発ツールのコンソール画面でこのようなワーニング出た事ありませんか？

javascriptファイルをコンパイルして生成する時に、mapファイルというのも生成されるみたいですが、そのファイルがないとwarningが出るみたいです。

デバッグ時に邪魔なので、非表示にする方法を調べました。

非表示の仕方

1. f12で開発ツール起動
2. 歯車マーククリック
3. Sourcesの「Enable Javascript source map」のチェックを外す

これだけで、javascriptのmapファイルがない事によるwarningはなくなります。

javascriptのforEachについて

色々な言語には、for、foreachが用意されています。
javascriptで言うと、foreachはforEach()に当たるっぽいですね。

最近までちょっと勘違いしていたことがあります。
その気付きを共有したいと思います。

他言語とjavascriptのforEachはそもそも考え方が違う。

例えばPHPで言うと、foreachは、配列、オブジェクトで利用できるfor文ですね。
利用できる型が決められていますが、動作は大体forと一緒です。

javascriptの.forEach()も同じだと思ってました。
ですが、そもそもforEach()は根本的な考え方が違うことに気がつきました。

javascriptのforEach()は「繰り返し」の命令ではない！

使い方自体は、他言語と似ていますよね。

forEach.js

const array = ['a','b','c'];

array.forEach(element => console.log(element));

じゃあこれって何が違うの？
もう少し分かり易く書いてみましょう。

forEach2.js

const array = ['a','b','c'];

array.forEach(function(element){
  console.log(element);
});

上記は書き方を変えただけです。
1番重要な点は、これがfunction（即時関数）であると言う点です。
javascriptのforEach()は、配列の順番通り即時関数を叩くと言う命令である。と言うことです。

ふーん。だからどうなの？

ここで重要になってくるのは、即時関数は、javascriptの言語特性上、平行で実行されると言う点です。
for命令は、配列のインデックスの0番目から順番に実行されます。
0番目の処理が完了した後に、1番目の処理を始めます。

一方、forEachで叩かれた即時関数は、即時関数が叩かれるタイミングこそ0番目からですが、0番目が終わった後に1番目を実行。と言う動作にはなりません。

平行処理が行われますので、1番目に叩かれた配列index0が一番最初に終わるとは限らないのです。
ここが最も重要な点です。

forと動作は同じだと思って、forEachを使うと、想定していた結果にならないと言うのは、大体この特性のせいであると、最近気づきました。

javascriptの言語特性と、即時関数である。と言うことに気がつけばすぐたどり着ける内容ではありますが、以前かなりはまった部分なので、私と同じ悩みを抱えている方がいれば、参考にしていただけたらと思います。

Web Workerって？

Web Worker とは、ウェブアプリケーションにおけるスクリプトの処理をメインとは別のスレッドに移し、バックグラウンドでの実行を可能にする仕組みのことです。時間のかかる処理を別のスレッドに移すことが出来るため、 UI を担当するメインスレッドの処理を中断・遅延させずに実行できるという利点があります。

by MDN

JSはシングルスレッドですので、本当の意味での並列処理が行えません。
なのでめちゃ重な処理を書いてしまうと、その他のボタンやら何やら効かなくなって、サイトが完全に固まってしまいます。
これを解消してくれるのがWeb Workerです。
昨今ではSPAなどによりでクライアント側で重たい処理をすることが増えていますので、ぜひ使いこなしておきたいと思っています。

現在ブラウザ側の対応はどうなってる？

by Can I use
Opera以外はほとんどOKですね。

とにかくコード

index.js

const worker = new Worker('worker.js');

worker.addEventListener('message', (e) => {
  console.log('Workerから受け取ったデータは: ', e.data);
}, false);

worker.postMessage('Hello, world');

worker.js

self.addEventListener('message',(e) => {
  self.postMessage(e.data);
}, false);

ちなみに、workerのスクリプト内のグローバルはワーカー自身なので、下記のように書いてもOKです。

worker.js

addEventListener('message',(e) => {
  postMessage(e.data);
}, false);

結果

Hello, world

図でみるとわかりやすいです。

それぞれのjsの onmesssage で、受信時/送信時のイベントを記述することができます。
受信データ/送信データはいずれも messsageイベントのdata属性から取得できます。
思ったよりも非常にシンプルです。

workerを終了したい場合。

worker.terminate();

terminateメソッドを使って直ちに終了することができます。

エラーハンドリング

Worker で実行時エラーが発生すると、 onerror イベントハンドラーが呼び出されます。これは、 ErrorEvent インターフェイスを実装している error イベントを受け取ります。

とのことです。（by MDN)
早速試してみましょう。

index.js

const worker = new Worker('worker.js');

worker.addEventListener('error', function (e) {
  console.log(e)
}, false);
worker.postMessage('Hello World');

worker.js

self.addEventListener('message', (e) => {

  throw new Error('何かしらのエラー')
  self.postMessage(e.data)
}, false)

結果:

確かに ErrorEvent をキャッチしています。

たくさんのプロパティがありますが、下記の3つが重要な項目です。

message ・・・　人間用メッセージ
filename ・・・ エラー発生元のファイル名
lineno・・・エラーが発生した行番号

スクリプト/ライブラリのimport

Workerスレッド側で何かインポートしたい場合は importScripts()　を使います。
ここで引数として指定したスクリプトが実行されます。

importScripts('test.js')
importScripts('foo.js', 'bar.js')

別ファイルでなく埋め込みでWorker

ファイルの記述を文字列化しBlobを生成、そしてそのURLを渡せばOK。
実際の実装ではあまり使わなそうだと思ったので例は割愛します。

注意点

Workerは直接DOMを操作できない点、そしてwindowのメソッドやプロパティは使用できない点に注意です。(worker自身がグローバルのため)
逆にそれ以外ならほとんど使用可能です。
MDNに使用できるクラス・関数がまとめられています。
https://developer.mozilla.org/ja/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers

また、Workerとやり取りする際のデータは共有しているのではなく、それぞれでコピーされています。
なので渡したデータをWorker側で操作しても、コピー元には関与できない点に注意です。

次回はService Workerについて学習予定です。

参考資料

https://www.html5rocks.com/ja/tutorials/workers/basics/
https://www.codit.work/notes/ytq5ztvnhceco3jn2bkb/

jQueryの基本

・jQueryまたは$でアクセス。
・基本的な使い方は、要素を選択し、選択した要素群に対して操作を行うというもの。
↓基本的な書き方
$('セレクタ').メソッド('パラメータ[引数]');

#1. マウスクリックで処理を実行

・まず下記のようにHTMLを書く。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery テスト</title>
  <style>
    .parent {
      height: 100px;
    }
  </style>
</head>
<body>
  <div class="parent">
    <button type="button" class="my-button">ボタン</button>
  </div>
  <div class="parent">
    <button type="button" class="my-button">ボタン</button>
  </div>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="main.js"></script>
</body>
</html>

と、下のようにボタンが２つ配置されたページが出来上がる。この段階では、ボタンを押しても何も起こらない。

・次にJavaScriptのファイルを、jQueryを使って下記のように書く。

$('.my-button').on('click', (e) => {
  $(e.target)
  .parent()
  .css({ 'background-color': '#ff6666'});
});

説明。
まず、セレクタにclass="my-button"を指定。onメソッドを使用。
<button type="button" class="my-button">
がクリックされたとき、下記関数を呼び出す。

(e) => {
  $(e.target)
  .parent()
  .css({ 'background-color': '#ff6666'});
}

↑関数の説明の前に、まずparent()メソッドとe.targetを簡単に説明。
・parent()メソッド
指定した要素の一階層上の親要素を取得することができるメソッド。

・e.target（eventオブジェクトのtargetプロパティ）
イベントの発生元であるオブジェクトを返す。

というわけで、↑関数は、<button type="button" class="my-button">の一階層上の親要素である<div class="parent">のbackground-colorに#ff6666を指定するというもの。

よって、ボタンをクリックすると、下記のようになる。

#2. マウスオーバーに反応する

HTML: <div class="box"></div>
CSS:

.box {
  width: 200px;
  height: 200px;
  background-color: #ddd;
}

でboxという名前のclass属性を持つdiv要素に下記のような装飾を施す。

JavaScript:

const onMouseenter = (e) => {
  $(e.target).css({
    'background-color': '#ff9999',
  });
};
const onMouseleave = (e) => {
  $(e.target).css({
    'background-color': '#dddddd',
  });
};

$('.box')
  .on('mouseenter', onMouseenter)
  .on('mouseleave', onMouseleave);

<div class="box">にマウスが乗ったとき(mouseenter)、下記のように背景色が変わる。

マウスが離れたとき、指定した(#dddddd)に変化する。つまり下の灰色に戻る。

#3. キーボードの入力に反応させる

HTML:

<input type="text" class="my-input">
<div class="box"></div>

JavaScript:

$('.my-input').on('input', (e) => {
  const value = $(e.target).val();
  $('.box').text(value);
});

・inputイベント
input要素やtextarea要素へ入力するたびに発生する。

・val()メソッド
HTMLタグ内に記述されているvalue属性を取得したり変更することができるメソッド。

・text()メソッド
HTML要素内にあるテキスト情報を取得・追加・変更することが可能なメソッド。

説明。
<input type="text" class="my-input">に入力するたびに下記関数を呼び出す。

(e) => {
  const value = $(e.target).val();
  $('.box').text(value);
}

↑定数valueにe.target、つまり<input type="text" class="my-input">のvalue属性を取得したものを代入する。
<div class="box">に上で取得したvalue属性をテキスト情報として追加する。

input内にテキストすると、下記のようになる。

先ほどの クラスのベンチマーク の続編。
オブジェクト合成でより良い(というか速い)手法ないかなと悩みつつ。

実験環境

同じく

• Node.js 14.15.1
• Deno 1.5.4

実験設定

• 10要素で構成されるオブジェクト2組を1つのオブジェクトにまとめる
• 要素のうち5つは名前が重複しており、合成元を合成先に上書きする
• 合成先はプロトタイプではなく、独立したオブジェクトとして新規に生成される

という前提で

• 合成先オブジェクトを生成するファンクションと、合成元オブジェクトを用意
• 実行時間計測
  • 合成先オブジェクト生成ファンクションだけの結果
  • 合成先オブジェクト生成ファンクション+各種アルゴリズムの結果
• 結果表示
  • 各種アルゴリズムの結果部分を抽出表示

という手順。

オブジェクト合成アルゴリズム ここに集う

今回調査するアルゴリズムを御紹介いたしましょう。

assign

Object.assign()

spread

スプレッド構文

for

for inループ

forEach

keys forEachコールバック

map

keys mapコールバック

entries

entries列挙ループ

lowtech1

(対照用) オブジェクト要素として個別に代入

lowtech2

(対照用) 連想配列要素として個別に代入

多少のオーバーヘッドは仕方ないにしても、できるだけ対照用で挙げた方法に
近い(というか速い)アルゴリズムを採用したいという趣旨。

いざ、実験

今回は記述がコンパクトなので、1ソースでまとめていけます

bench_obj_merge.js

function CreateParent(){return {a:0,b:1,c:2,d:3,e:4,f:5,g:6,h:7,i:8,j:9};}
var sub={f:10,g:11,h:12,i:13,j:14,k:15,l:16,m:17,n:18,o:19};

// 実行内容 
var funx={
    dmy:()=>0, // 最初の実行項目は不利な結果が出るのでダミー 
    create:()=>CreateParent(),
    assign:()=>Object.assign(CreateParent(),sub),
    spread:()=>{return {...CreateParent(),...sub};},
    for:()=>{
        var t=CreateParent();
        for(var k in sub)t[k]=sub[k];
        return t;
    },
    forEach:()=>{
        var t=CreateParent();
        Object.keys(sub).forEach(k=>t[k]=sub[k]);
        return t;
    },
    map:()=>{
        var t=CreateParent();
        Object.keys(sub).map(k=>t[k]=sub[k]);
        return t;
    },
    entries:()=>{
        var t=CreateParent();
        for(var [k,v] of Object.entries(sub))t[k]=v;
        return t;
    },
    lowtech1:()=>{
        var t=CreateParent();
        t.f=sub.f;
        t.g=sub.g;
        t.h=sub.h;
        t.i=sub.i;
        t.j=sub.j;
        t.k=sub.k;
        t.l=sub.l;
        t.m=sub.m;
        t.n=sub.n;
        t.o=sub.o;
        return t;
    },
    lowtech2:()=>{
        var t=CreateParent();
        t['f']=sub['f'];
        t['g']=sub['g'];
        t['h']=sub['h'];
        t['i']=sub['i'];
        t['j']=sub['j'];
        t['k']=sub['k'];
        t['l']=sub['l'];
        t['m']=sub['m'];
        t['n']=sub['n'];
        t['o']=sub['o'];
        return t;
    },
};
// 計測結果を書き込むところ 
var rec={};

// 動作テスト 
//for(var k in funx)console.log([k,funx[k]()]);

// 繰り返し実行時間計測 
var loop=Array(1000000);
for(var k in funx){
    var f=funx[k];
    var bgn=new Date;
    for(var i of loop)f();
    var end=new Date;
    rec[k]=(end-bgn);
}

// 結果表示 
for(var k in rec)console.log(k+' :'+(rec[k]-rec.create));

ここで予想外の事態。当初は 前回 と同じ1千万ループだったのですが、なかなか処理終わらなかったので一旦止めて桁減らしちゃいました。
それでループ回数が1桁減っているので、前回の結果と比べるときは御注意ください。

	Node.js	Deno
assign	255.7	265.4
spread	6906.3	6503.3
for	289.2	484.4
forEach	413.6	463.1
map	445.5	505.7
entries	417.3	428.4
lowtech1	10.1	8
lowtech2	10.3	8

まず目を疑ったのが、今(一部で)流行りのスプレッド構文、なんと1桁遅い。
記述が一番シンプルなだけに残念なところ。
で、とりあえず Object.assign() がベストというか幾分マシということで。
もっと素敵な手法ないものかしらん。

JavaScriptで扱うデータの種類について

JavaScriptでは8種類のデータ型が定義されています。
よく出てくるものの例として以下の物が挙げられます。

• Number(数値)
  • 3, 5, 18, 0 etc...
• String(文字列)
  • 'Hello', 'Good' etc...
• Boolean(真偽値)
  • true, false
• Object(オブジェクト)

またJavaScriptにはデータ型の種類を調べるtypeof演算子というものが用意されています。

console.log(typeof 5);
console.log(typeof 'Hellow');
console.log(typeof true);

出力結果

number
string
boolean

まとめ

まだ初学者のため使い所がいまいちピンと来ていませんが（そういう人僕の他にもいますか？）いつかあ〜typeof演算子ね〜ｳﾝﾁｸｳﾝﾁｸくらいになれたらいいな、、、、

参考

MDN web docs

概要

ポケモンのパーティを構築して遊べるSPAです。
VueでSPAを作りたいなーと思って作り始めた。
加えて、listの高速なフィルター機能も使いたい。
実装はGitHubPagesを使ってフロントエンドのみ。

GitHub pokemon-zukan

技術・ライブラリ

• Vue-CLI
• Vuex
• lodash
• moji
• axios
• ityped
• babel-polyfill
• reset-css
• progressbar.js

つくったもの

パーティをつくる

ポケモンずかんからポケモンをピックアップし、パーティを構築する。

パーティはVuexのstoreで管理し、てもち画面で確認できる。

ポケモンの詳細をみる

vue-routerを利用して詳細画面を生成。
ポケモンのステータスを確認できる。

詳細設計

ポケモンのステータス、画像

axiosで外部APIから取得。

• PokeAPI
• pokemon.json

フォント

pokemon-font

検索機能

computed()でフィルター、ソートを実現。
早くてかっこいい。（全データを取得してるだけだから数が大きくなると問題だけど。）

ソート

• なまえ
• ばんごう

フィルター

• なまえ検索
• タイプ

どれもjsで操作しているだけなのでレスポンスが早い。
さらになまえ検索は日本語入力未決定前でも検索できるようにしている。早い。

vue

<input @input="handleInput"></input>

js

    handleInput(event) {
      this.wd = event.target.value //未決定の値を取得
    },

タイプフィルターはチェックボックスから選ぶ。

おわり

細かい実装やその方針などは省略していますが、素人ながらかなり手こずりました。
良い勉強になりました。

Material-UIを使ってダイアログを表示するには一筋縄ではいかずパラメータを渡す必要があります。
なので今回は「Material-UIを使ってダイアログを表示する方法」を紹介します。

この機能は3つのファイルで構成されています。

1. 一覧画面(index.jsx)
2. アイテムコンポーネント(item.jsx)
3. ダイアログコンポーネント(dialog.jsx)

1.一覧画面

index.jsx

import React from 'react';
import Box from '@material-ui/core/Box';
import Item from "@comp/item";
import Grid from '@material-ui/core/Grid';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
  gridItem: {
    marginTop: theme.spacing(2),
  },
}));

// 表示するアイテムのリスト
const bookList = [
  {
    id: 1,
    title: "ファスト＆スロー",
    page: 100,
    image: "http://books.google.com/books/content?id=tNDza_Pb0UMC&printsec=frontcover&img=1&zoom=5&edge=curl&source=gbs_api"
  },
  {
    id: 2,
    title: "ファストフードの恐ろしい話",
    page: 200,
    image: "http://books.google.com/books/content?id=ghgzDwAAQBAJ&printsec=frontcover&img=1&zoom=5&edge=curl&source=gbs_api"
  },
  {
    id: 3,
    title: "英語でおもてなし・ファストフード食べ歩き",
    page: 300,
    image: "http://books.google.com/books/content?id=HC-gCAAAQBAJ&printsec=frontcover&img=1&zoom=5&edge=curl&source=gbs_api"
  },
]

export default function Index(props) {
  const classes = useStyles();
  const compProps = {
    gridItem: {
      item         : true,
      space        : 5,
      xs           : 12,
      md           : 6,
      lg           : 3,
      className    : classes.gridItem
    }
  }

  return (
    <>
      <Box mx={10} mt={4}>
        <Box display="flex" alignItems="center">
          <h2>{props.title}</h2>
        </Box>
        <Grid container spacing={1}>
          {bookList.map(item =>
            <Grid {...compProps.gridItem} key={item.id}>
              <Item 
                bookParam={item}
                />
            </Grid>
          )}
        </Grid>
      </Box>
    </>
  );
}

一覧画面(index.jsx)では定義したリストを順番に並べて表示しています。

まずは、表示するリストのデータを定義しています。通常はAPIやDBから取得したりしますが、今回は見本なので直接定義しています。

そして、定義したリストデータをループで回して各アイテムをBookCardというコンポーネントで表示しています。各データはbookParamという名前でBookCardコンポーネントに渡しています。

2.アイテム

item.jsx

import React, {useState} from 'react';
import Dialog  from "@comp/dialog";
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';
import Link from '@material-ui/core/Link';

const item = (props) => {

  /** 画面パラメータ */
  const [dialogOpenF, setDialogOpenF] = useState(false);

  /**
   * コンポーネントに渡す引数
   */
  const compProps = {
    bookShowDialog: {
      open : dialogOpenF,                     //ダイアログの表示プローアティ
      bookParam: props.bookParam,
      onClose: () => setDialogOpenF(false),   //ダイアログ非表示処理
    },
    showLink: {
      href: "#",
      onClick: () => setDialogOpenF(true)     //ダイアログ表示処理
    }
  }

  return (
    <Box>
      {/* 画像の表示 */}
      <Link {...compProps.showLink}>
        <img src={props.bookParam.image}/>
      </Link>

      {/* タイトルの表示 */}
      <Typography>
        <Link {...compProps.showLink}>
        {props.bookParam.title}
        </Link>
      </Typography>

      {/* ページ数の表示 */}
      <Typography>{props.bookParam.page}ページ</Typography>

      {/* ダイアログの表示 */}
      <Dialog {...compProps.bookShowDialog} />
    </Box>
  );
}

export default item;

各アイテム(item.jsx)では呼び出し元から渡されたデータの表示とダイアログの表示・非表示の処理を行っています。

引き渡されたパラメータはprops.bookParamに格納されているため画像URL（image）、タイトル(title)、ページ数(page)をそのまま出力に利用しています。

そして、最後のDialogコンポーネントに各アイテムの情報を渡しています。

2-1.ダイアログの表示・非表示

ダイアログ表示・非表示用のパラメータdialogOpenFを用意しています。このパラメータをtrue・falseに更新することでダイアログの表示・非表示に切り替えているわけです。

後は画像とタイトルがクリックされたときにdialogOpenFを更新するメソッドsetDialogOpenFを使ってtrueに変更しています。これによりopenプロパティーが更新されダイアログが表示されます。

そして、ダイアログが閉じる処理を行ったときにsetDialogOpenFでfalseを指定してダイアログを非表示に更新しています。

3.ダイアログ

dialog.jsx

import React from 'react';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import PropTypes from 'prop-types';
import Typography from '@material-ui/core/Typography';

const dialog = (props) => {

  const compProps = {
    dialog: {
      open: props.open,           //ダイアログの表示・非表示プロパティ
      onClose: props.onClose,     //ダイアログが閉じられた時の処理
      scroll:'paper',
    },
    dialogContent: {
      dividers: true
    },
    dialogContentText: {
      tabIndex: -1
    },
    closeButton: {
      onClick: props.onClose,     //閉じるボタンが押されたときの処理
      color: "primary"
    },
  }

  return (
      <Dialog {...compProps.dialog}>
        {/* タイトル */}
        <DialogTitle>{props.bookParam.title}</DialogTitle>

        {/* 画像とページ数 */}
        <DialogContent {...compProps.dialogContent}>
          <img src={props.bookParam.image} />
          <DialogContentText {...compProps.dialogContentText}>
            <Typography>{props.bookParam.page}ページ</Typography>
          </DialogContentText>
        </DialogContent>

        {/* 閉じるボタン */}
        <DialogActions>
          <Button {...compProps.closeButton}>
            閉じる
          </Button>
        </DialogActions>
      </Dialog>
  );
}

dialog.propTypes = {
    open: PropTypes.bool,       //表示フラグ
    onClose: PropTypes.func,    //閉じる処理
  }

  export default dialog;

最後にダイアログに呼び出し元から渡された情報を出力します。

DialogTitleにはアイテムのタイトル。DialogContentにはアイテムの画像とページ数を表示。そして、ダイアログを閉じる処理を行う「閉じるボタン」を定義します。

閉じるボタンが押されたときは呼び出し元から引き渡されたprops.onCloseを利用します。これにより、呼び出し元からダイアログを非表示にします。

また、propTypesで呼び出し元からのパラメータの型をチェックしまています。openはダイアログの表示・非表示でboolean型。onCloseは閉じる処理でfunc型。これにより異常な値が渡ってこれば警告が表示されるようになっているのです。

? この記事はWP専用です
https://wp.me/pc9NHC-en

前置き

今回は前回の基礎編に続き、
stateが複数ある場合の書き方です✍️
基礎編でVuexの基本的な解説はしています！
また基礎編のコードに追記するので
そちらを確認しながらやってみてください?

Vuex基礎編はこちら
https://note.com/aliz/n/n497914c981c8

やりたいこと

基礎編のカウンターを2つに増やします！
これだけ！！！

NGパターン

まずはNGパターンから。
まずはstateにsubCounterを追加。
mutationsなどにも同様に
subCounterについて追記します✍️

が！
これだと後述したsubCounterに
全てがまとまってしまいます。。。

? 続きはWPでご覧ください?
https://wp.me/pc9NHC-en

nextjsでも簡単にauth0を使いたい！
と思ってサンプルに従うと、Dockerビルドってかproduction buildするとエラーで落ちちゃいます。

configのサンプル
auth0/nextjs-auth0: Next.js SDK for signing in with Auth0 (Experimental) - https://github.com/auth0/nextjs-auth0#runtime-configuration

import { initAuth0 } from '@auth0/nextjs-auth0';
import config from './config';

export default initAuth0({
  domain: process.env.AUTHO_DOMAIN,
  clientId: process.env.AUTHO_DOMAIN,
  clientSecret: process.env.APP_SECRRET,
  scope: 'openid profile',

エラー内容こんな感じ。process.env.XXXが見れないから落ちてるのかな。

Automatically optimizing pages...
> Build error occurred
Error: A valid Auth0 Domain must be provided
    at Object.createInstance [as default] (/usr/src/app/node_modules/@auth0/nextjs-auth0/dist/instance.node.js:10:15)
    at initAuth0 (/usr/src/app/node_modules/@auth0/nextjs-auth0/dist/index.js:8:46)
    at Object.xMDF (/usr/src/app/.next/server/static/GDDYxjIWKG2mlWWc4bTrE/pages/_app.js:781:127)
    at __webpack_require__ (/usr/src/app/.next/server/static/GDDYxjIWKG2mlWWc4bTrE/pages/_app.js:23:31)
    at Module.1TCz (/usr/src/app/.next/server/static/GDDYxjIWKG2mlWWc4bTrE/pages/_app.js:147:13)
    at __webpack_require__ (/usr/src/app/.next/server/static/GDDYxjIWKG2mlWWc4bTrE/pages/_app.js:23:31)
    at Object.0 (/usr/src/app/.next/server/static/GDDYxjIWKG2mlWWc4bTrE/pages/_app.js:99:18)
    at __webpack_require__ (/usr/src/app/.next/server/static/GDDYxjIWKG2mlWWc4bTrE/pages/_app.js:23:31)
    at /usr/src/app/.next/server/static/GDDYxjIWKG2mlWWc4bTrE/pages/_app.js:91:18
    at Object.<anonymous> (/usr/src/app/.next/server/static/GDDYxjIWKG2mlWWc4bTrE/pages/_app.js:94:10)
error Command failed with exit code 1

ボツ案

issue投げて聞いてみたら、 .env を仮データで追加し実行時に再ビルドすると大丈夫らしい。試したらできた。

Can't build on docker. · Issue #86 · auth0/nextjs-auth0 - https://github.com/auth0/nextjs-auth0/issues/86

Dockerfile

FROM node:14 as builder

WORKDIR /app

COPY .env.template .env
COPY package.json yarn.lock ./
RUN yarn install

COPY . .
RUN yarn build

# ------------------
FROM node:14-alpine as release

WORKDIR /app

COPY --from=builder /app/package.json /app/yarn.lock ./
RUN yarn install
COPY --from=builder /app/.next ./.next
COPY . .

EXPOSE 3000
CMD ["yarn", "start:build"]

package.json

  "scripts": {
    "start": "next start",
    "start:build": "yarn build && yarn start",
    "build": "next build",

確かにできるんだけど、CI時にビルド２回ぐらい回しちゃうことになって、めっちゃ時間かかる・・・

改善案

initAuth0のオブジェクトを直接export defaultすると、環境変数がバインドされちゃうので、関数にしてあとからprocess.envを評価すればいいじゃんって案

Document best practices for using nextjs-auth0 with a nextjs production build. · Issue #154 · auth0/nextjs-auth0 - https://github.com/auth0/nextjs-auth0/issues/154

環境変数はgetConfig()経由で受け取り、バインドすると想定通り動いてくれた。やったね！

src/lib/auth0.js

import getConfig from 'next/config';
import { initAuth0 } from '@auth0/nextjs-auth0';

const { serverRuntimeConfig, publicRuntimeConfig } = getConfig();

let auth0 = null;

const proc = () => {
  if (!auth0) {
    auth0 = initAuth0({
      clientId: publicRuntimeConfig.auth0.clientId,
      domain: publicRuntimeConfig.auth0.domain,
      scope: 'openid email profile',
      postLogoutRedirectUri: publicRuntimeConfig.baseUrl,
      redirectUri: `${publicRuntimeConfig.baseUrl}/api/auth/signed-in`,
      clientSecret: serverRuntimeConfig?.auth0?.secret ?? '',
      session: {
        cookieSecret: serverRuntimeConfig?.appSecret ?? '',
        // Set to 8 hours
        cookieLifetime: 60 * 60 * 8,
        storeIdToken: false,
        storeAccessToken: false,
        storeRefreshToken: false,
      },
      oidcClient: {
        // Optionally configure the timeout in milliseconds for HTTP requests to Auth0.
        httpTimeout: 2500,
        // Optionally configure the clock tolerance in milliseconds, if the time on your server is running behind.
        clockTolerance: 10000,
      },
    });
  }

  return auth0;
};

export default proc;

next.config.js

const nextConfig = {
  serverRuntimeConfig: {
    appSecret: process.env.APP_SECRET,
    auth0: {
      secret: process.env.AUTH0_CLIENT_SECRET,
    },
  },
  publicRuntimeConfig: {
    baseUrl: process.env.NEXT_PUBLIC_BASE_URL,
    auth0: {
      clientId: process.env.NEXT_PUBLIC_AUTH0_CLIENT_ID,
      domain: process.env.NEXT_PUBLIC_AUTH0_DOMAIN,
    },
  },
};

module.exports = nextConfig;

page/auth/api/sign-in.js

diff --git a/pages/api/auth/sign-in.js b/pages/api/auth/sign-in.js
index 7b109a7..d271932 100644
--- a/pages/api/auth/sign-in.js
+++ b/pages/api/auth/sign-in.js
@@ -1,6 +1,8 @@
-import auth0 from '../../../src/lib/auth0';
+import Auth0 from '../../../src/lib/auth0';
 import { checkHeaders } from '../../../src/lib/middleware/auth';

+const auth0 = Auth0();
+
 const login = checkHeaders(async (req, res) => {
   try {
     await auth0.handleLogin(req, res);

React-leafletとは

Open Source Mapを表示するJavaScriptライブラリであるleafletを、React.js上で使えるように拡張するライブラリです。

React Leaflet公式
https://react-leaflet.js.org/

本記事は公式のチュートリアルを順番にやっていくだけですので詳しくは公式サイトを参照してください
https://react-leaflet.js.org/docs/start-introduction

1. プロジェクトの作成

terminal

mkdir react-leaflet
cd react-leaflet
npx create-react-app my-app

2. インストール

今回は開発版をインストールしました

開発版をインストールする場合

npm install leaflet react-leaflet@next --save

安定版をインストールする場合

npm install leaflet react-leaflet --save

3. 地図を表示

こちらのコードを参考にやっていきます
https://qiita.com/sugasaki/items/d225cf548e9a787dbd9c

地図を表示する為のクラスを作成

MapContainerで地図オブジェクトをつくり、TileLayerで地図タイルを取得できるようにすると地図が表示されます。

MapContainerがL.map()、TileLayerがL.tileLayer()、MarkerがL.marker()に対応していますので、leaflet触ったことがある方はイメージしやすいと思います。

my-app/component/simple.js

import React, { Component } from 'react'
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'

export default class SimpleExample extends Component {
  render() {
    const position = [51.505, -0.09];
    return (
      <MapContainer center={position} zoom={13} scrollWheelZoom={false}>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Marker position={position}>
          <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
          </Popup>
        </Marker>
      </MapContainer>
    )
  }
}

App.jsでSimpleExampleクラスを呼ぶように変更

my-app/App.js

import Leaflet from 'leaflet'
import React, { Component } from 'react';
import './App.css';
import 'leaflet/dist/leaflet.css';
import SimpleExample from './components/simple'

Leaflet.Icon.Default.imagePath =
  '//cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/images/'

class App extends Component {
  render() {
    return (
      <SimpleExample />
    );
  }
}

export default App;

leafletコンテナの表示幅を指定

指定し忘れると高さゼロ(＝表示されない)になってしまうので必ず設定します

my-app/index.js

.leaflet-container {
  width: 600px;
  height: 300px;
  margin: 10px;

サーバーを起動して確認

サーバーを起動します

terminal

npm start

以上でhttp://localhost:3000/ に地図が表示される筈です

4. イベント管理

useMapEvents()によりleafletのイベントハンドラを使うことができます。以下ではclick()イベントが発生したら端末の現在位置を取得してMarkerを置くという動作を追加しています。

my-app/components/event.js

import React, { Component, useState } from 'react'
import { MapContainer, TileLayer, useMapEvents, Marker, Popup } from 'react-leaflet'


function LocationMarker() {
    const [position, setPosition] = useState(null)
    const map = useMapEvents({
      click() {
        map.locate()
      },
      locationfound(e) {
        setPosition(e.latlng)
        map.flyTo(e.latlng, map.getZoom())
      },
    })

    return position === null ? null : (
      <Marker position={position}>
        <Popup>You are here</Popup>
      </Marker>
    )
  }

export default class EventsExample extends Component {
  render() {
    const position = [51.505, -0.09];
    return (
      <MapContainer center={position} zoom={13} scrollWheelZoom={false}>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <LocationMarker />
      </MapContainer>
    )
  }
}

my-app/App.js

import Leaflet from 'leaflet'
import React, { Component } from 'react';
import './App.css';
import 'leaflet/dist/leaflet.css';
import SimpleExample from './components/simple'
import EventsExample from './components/events'

Leaflet.Icon.Default.imagePath =
  '//cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/images/'

class App extends Component {
  render() {
    return (
      <div>
        SimpleExample
        <SimpleExample />

        EventsExample
        <EventsExample />
      </div>
    );
  }
}

export default App;

5. ポリゴンを表示

ポリゴンも簡単に追加できます

my-app/src/components/polygon.js

import React, { Component } from 'react'
import { MapContainer, TileLayer, Popup, Circle, CircleMarker, Polyline, Polygon, Rectangle } from 'react-leaflet'

export default class PolygonExample extends Component {
  render() {
    const center = [51.505, -0.09];

    const polyline = [
      [51.505, -0.09],
      [51.51, -0.1],
      [51.51, -0.12],
    ];

    const multiPolyline = [
      [
        [51.5, -0.1],
        [51.5, -0.12],
        [51.52, -0.12],
      ],
      [
        [51.5, -0.05],
        [51.5, -0.06],
        [51.52, -0.06],
      ],
    ];

    const polygon = [
      [51.515, -0.09],
      [51.52, -0.1],
      [51.52, -0.12],
    ];

    const multiPolygon = [
      [
        [51.51, -0.12],
        [51.51, -0.13],
        [51.53, -0.13],
      ],
      [
        [51.51, -0.05],
        [51.51, -0.07],
        [51.53, -0.07],
      ],
    ];

    const rectangle = [
      [51.49, -0.08],
      [51.5, -0.06],
    ];

    const fillBlueOptions = { fillColor: 'blue' };
    const blackOptions = { color: 'black' };
    const limeOptions = { color: 'lime' };
    const purpleOptions = { color: 'purple' };
    const redOptions = { color: 'red' };

    return (
      <MapContainer center={center} zoom={13} scrollWheelZoom={false}>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Circle center={center} pathOptions={fillBlueOptions} radius={200} />
        <CircleMarker center={[51.51, -0.12]} pathOptions={redOptions} radius={20}>
          <Popup>Popup in CircleMarker</Popup>
        </CircleMarker>
        <Polyline pathOptions={limeOptions} positions={polyline} />
        <Polyline pathOptions={limeOptions} positions={multiPolyline} />
        <Polygon pathOptions={purpleOptions} positions={polygon} />
        <Polygon pathOptions={purpleOptions} positions={multiPolygon} />
        <Rectangle bounds={rectangle} pathOptions={blackOptions} />
      </MapContainer>
    )
  }
}

6. SVG overlay

SVGを上に重ねることもできます

my-app/src/components/svg.js

import React, { Component } from 'react'
import { MapContainer, TileLayer, SVGOverlay } from 'react-leaflet'

export default class SVGExample extends Component {
  render() {
    const position = [51.505, -0.09];
    const bounds = [
      [51.49, -0.08],
      [51.5, -0.06],
    ];
    return (
      <MapContainer center={position} zoom={13} scrollWheelZoom={false}>
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <SVGOverlay attributes={{ stroke: 'red' }} bounds={bounds}>
        <rect x="0" y="0" width="100%" height="100%" fill="blue" />
        <circle r="5" cx="10" cy="10" fill="red" />
        <text x="50%" y="50%" stroke="white">
          text
        </text>
      </SVGOverlay>
    </MapContainer>
    )
  }
}

7. LayerGroupとFeatureGroup

leafletにあるLayerGroupとかFeatureGroupも使えます

my-app/src/components/group.js

import React, { Component } from 'react'
import { MapContainer, TileLayer, Popup, LayerGroup, Circle, FeatureGroup, Rectangle } from 'react-leaflet'

export default class LayerGroupExample extends Component {
  render() {
    const center = [51.505, -0.09];
    const rectangle = [
      [51.49, -0.08],
      [51.5, -0.06],
    ];
    const fillBlueOptions = { fillColor: 'blue' };
    const fillRedOptions = { fillColor: 'red' };
    const greenOptions = { color: 'green', fillColor: 'green' };
    const purpleOptions = { color: 'purple' };

    return (
      <MapContainer center={center} zoom={13} scrollWheelZoom={false}>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <LayerGroup>
          <Circle center={center} pathOptions={fillBlueOptions} radius={200} />
          <Circle
            center={center}
            pathOptions={fillRedOptions}
            radius={100}
            stroke={false}
          />
          <LayerGroup>
            <Circle
              center={[51.51, -0.08]}
              pathOptions={greenOptions}
              radius={100}
            />
          </LayerGroup>
        </LayerGroup>
        <FeatureGroup pathOptions={purpleOptions}>
          <Popup>Popup in FeatureGroup</Popup>
          <Circle center={[51.51, -0.06]} radius={200} />
          <Rectangle bounds={rectangle} />
        </FeatureGroup>
      </MapContainer>
    )
  }
}

8. マウスオーバーで注釈を出す

MarkerやCircleにTooltipを追加しておくと注釈を出すことが出来ます

my-app/src/components/tooltips.js

import React, { Component } from 'react'
import { MapContainer, TileLayer, Marker, Popup, Circle, CircleMarker, Polygon, Rectangle, Tooltip } from 'react-leaflet'
import { useState, useMemo } from 'react'

const center = [51.505, -0.09]

const multiPolygon = [
  [
    [51.51, -0.12],
    [51.51, -0.13],
    [51.53, -0.13],
  ],
  [
    [51.51, -0.05],
    [51.51, -0.07],
    [51.53, -0.07],
  ],
];

const rectangle = [
  [51.49, -0.08],
  [51.5, -0.06],
];

function TooltipCircle() {
  const [clickedCount, setClickedCount] = useState(0)
  const eventHandlers = useMemo(
    () => ({
      click() {
        setClickedCount((count) => count + 1)
      },
    }),
    [],
  )

  const clickedText =
    clickedCount === 0
      ? 'Click this Circle to change the Tooltip text'
      : `Circle click: ${clickedCount}`

  return (
    <Circle
      center={center}
      eventHandlers={eventHandlers}
      pathOptions={{ fillColor: 'blue' }}
      radius={200}>
      <Tooltip>{clickedText}</Tooltip>
    </Circle>
  )
}

export default class ToolTipsExample extends Component {
  render() {
    return (
      <MapContainer center={center} zoom={13} scrollWheelZoom={false}>
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <TooltipCircle />
      <CircleMarker
        center={[51.51, -0.12]}
        pathOptions={{ color: 'red' }}
        radius={20}>
        <Tooltip>Tooltip for CircleMarker</Tooltip>
      </CircleMarker>
      <Marker position={[51.51, -0.09]}>
        <Popup>Popup for Marker</Popup>
        <Tooltip>Tooltip for Marker</Tooltip>
      </Marker>
      <Polygon pathOptions={{ color: 'purple' }} positions={multiPolygon}>
        <Tooltip sticky>sticky Tooltip for Polygon</Tooltip>
      </Polygon>
      <Rectangle bounds={rectangle} pathOptions={{ color: 'black' }}>
        <Tooltip direction="bottom" offset={[0, 20]} opacity={1} permanent>
          permanent Tooltip for Rectangle
        </Tooltip>
      </Rectangle>
      </MapContainer>
    )
  }
}

9. LayersControl

レイヤーを選んで表示するようにすることもできます

my-app/src/components/leyersControl.js

import React, { Component } from 'react'
import { MapContainer, TileLayer, Marker, Popup, LayersControl, LayerGroup, Circle, FeatureGroup, Rectangle } from 'react-leaflet'

export default class LayersControlExample extends Component {
  render() {
    const center = [51.505, -0.09];
    const rectangle = [
      [51.49, -0.08],
      [51.5, -0.06],
    ];

    return (
      <MapContainer center={center} zoom={13} scrollWheelZoom={false}>
        <LayersControl position="topright">
          <LayersControl.BaseLayer checked name="OpenStreetMap.Mapnik">
            <TileLayer
              attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
          </LayersControl.BaseLayer>
          <LayersControl.BaseLayer name="OpenStreetMap.BlackAndWhite">
            <TileLayer
              attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
              url="https://tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png"
            />
          </LayersControl.BaseLayer>
          <LayersControl.Overlay name="Marker with popup">
            <Marker position={center}>
              <Popup>
                A pretty CSS3 popup. <br /> Easily customizable.
              </Popup>
            </Marker>
          </LayersControl.Overlay>
          <LayersControl.Overlay checked name="Layer group with circles">
            <LayerGroup>
              <Circle
                center={center}
                pathOptions={{ fillColor: 'blue' }}
                radius={200}
              />
              <Circle
                center={center}
                pathOptions={{ fillColor: 'red' }}
                radius={100}
                stroke={false}
              />
              <LayerGroup>
                <Circle
                  center={[51.51, -0.08]}
                  pathOptions={{ color: 'green', fillColor: 'green' }}
                  radius={100}
                />
              </LayerGroup>
            </LayerGroup>
          </LayersControl.Overlay>
          <LayersControl.Overlay name="Feature group">
            <FeatureGroup pathOptions={{ color: 'purple' }}>
              <Popup>Popup in FeatureGroup</Popup>
              <Circle center={[51.51, -0.06]} radius={200} />
              <Rectangle bounds={rectangle} />
            </FeatureGroup>
          </LayersControl.Overlay>
        </LayersControl>
      </MapContainer>
    )
  }
}

10. stateの値でRectangleの色を変える

この辺からleaflet単独ではなくReactからleafletを操作する手順になります。ここではEffectフックでRectangleの色を変えています。

my-app/src/components/panes.js

import React, { Component, useState, useRef, useEffect } from 'react'
import { MapContainer, TileLayer, Pane, Rectangle } from 'react-leaflet'

const outer = [
  [50.505, -29.09],
  [52.505, 29.09],
]
const inner = [
  [49.505, -2.09],
  [53.505, 2.09],
]

function BlinkingPane() {
  const [render, setRender] = useState(true)
  const timerRef = useRef()
  useEffect(() => {
    timerRef.current = setInterval(() => {
      setRender((r) => !r)
    }, 1000)
    return () => {
      clearInterval(timerRef.current)
    }
  }, [])

  return render ? (
    <Pane name="cyan-rectangle" style={{ zIndex: 500 }}>
      <Rectangle bounds={outer} pathOptions={{ color: 'cyan' }} />
    </Pane>
  ) : null
}

export default class PanesExample extends Component {
  render() {
    return (
      <MapContainer bounds={outer} scrollWheelZoom={false}>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <BlinkingPane />
        <Pane name="yellow-rectangle" style={{ zIndex: 499 }}>
          <Rectangle bounds={inner} pathOptions={{ color: 'yellow' }} />
          <Pane name="purple-rectangle">
            <Rectangle bounds={outer} pathOptions={{ color: 'purple' }} />
          </Pane>
        </Pane>
      </MapContainer>
    )
  }
}

横に長いRectangleが紫⇔青と交互に色を変えながら表示されます

11. Drag可能なMarker

MarkerをDraggableにするかどうかをReact stateにしておいて、途中でDrag可能にしたりDragできなくしたりする例です

my-app/src/components/draggable.js

import React, { Component, useState, useRef, useMemo, useCallback } from 'react'
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'

const center = {
  lat: 51.505,
  lng: -0.09,
}

function DraggableMarker() {
  const [draggable, setDraggable] = useState(false)
  const [position, setPosition] = useState(center)
  const markerRef = useRef(null)
  const eventHandlers = useMemo(
    () => ({
      dragend() {
        const marker = markerRef.current
        if (marker != null) {
          setPosition(marker.getLatLng())
        }
      },
    }),
    [],
  )
  const toggleDraggable = useCallback(() => {
    setDraggable((d) => !d)
  }, [])

  return (
    <Marker
      draggable={draggable}
      eventHandlers={eventHandlers}
      position={position}
      ref={markerRef}>
      <Popup minWidth={90}>
        <span onClick={toggleDraggable}>
          {draggable
            ? 'Marker is draggable'
            : 'Click here to make marker draggable'}
        </span>
      </Popup>
    </Marker>
  )
}

export default class DraggableMarkerExample extends Component {
  render() {
    return (
      <MapContainer center={center} zoom={13} scrollWheelZoom={false}>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <DraggableMarker />
      </MapContainer>
    )
  }
}

12. View Bounds

innerBoundsまたはouterBoundsの内側をクリックすると、クリックした側をinnerHandler、クリックしていない側をouterHandlerに登録して、その範囲が大きく表示されるように

my-app/src/components/viewBounds.js

import React, { Component, useState, useMemo } from 'react'
import { MapContainer, TileLayer, Rectangle, useMap } from 'react-leaflet'

const innerBounds = [
  [49.505, -2.09],
  [53.505, 2.09],
]
const outerBounds = [
  [50.505, -29.09],
  [52.505, 29.09],
]

const redColor = { color: 'red' }
const whiteColor = { color: 'white' }

function SetBoundsRectangles() {
  const [bounds, setBounds] = useState(outerBounds)
  const map = useMap()

  const innerHandlers = useMemo(
    () => ({
      click() {
        setBounds(innerBounds)
        map.fitBounds(innerBounds)
      },
    }),
    [map],
  )
  const outerHandlers = useMemo(
    () => ({
      click() {
        setBounds(outerBounds)
        map.fitBounds(outerBounds)
      },
    }),
    [map],
  )

  return (
    <>
      <Rectangle
        bounds={outerBounds}
        eventHandlers={outerHandlers}
        pathOptions={bounds === outerBounds ? redColor : whiteColor}
      />
      <Rectangle
        bounds={innerBounds}
        eventHandlers={innerHandlers}
        pathOptions={bounds === innerBounds ? redColor : whiteColor}
      />
    </>
  )
}

export default class ViewBoundsExample extends Component {
  render() {
    return (
      <MapContainer bounds={outerBounds} scrollWheelZoom={false}>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <SetBoundsRectangles />
      </MapContainer>
    )
  }
}

13. Animated Panning

checkboxの値でsetViewのanimateを有効にしたり無効にしたりできます

my-app/src/components/animatedPanning.js

import React, { Component, useRef } from 'react'
import { MapContainer, TileLayer, useMapEvent } from 'react-leaflet'

function SetViewOnClick({ animateRef }) {
  const map = useMapEvent('click', (e) => {
    map.setView(e.latlng, map.getZoom(), {
      animate: animateRef.current || false,
    })
  })

  return null
}

function AnimateExample() {
  const animateRef = useRef(false)

  return (
    <>
      <p>
        <label>
          <input
            type="checkbox"
            onChange={() => {
              animateRef.current = !animateRef.current
            }}
          />
          Animate panning
        </label>
      </p>
      <MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <SetViewOnClick animateRef={animateRef} />
      </MapContainer>
    </>
  )
}

export default class AnimatedPanningExample extends Component {
  render() {
    return (
      <AnimateExample />
    )
  }
}

14. External State

逆にleafletの情報をコンポーネント外で使うことも出来ます

my-app/src/components/

import React, {useState, useCallback, useEffect, useMemo} from 'react'
import { MapContainer, TileLayer } from 'react-leaflet'

const center = [51.505, -0.09]
const zoom = 13

function DisplayPosition({ map }) {
  const [position, setPosition] = useState(map.getCenter())

  const onClick = useCallback(() => {
    map.setView(center, zoom)
  }, [map])

  const onMove = useCallback(() => {
    setPosition(map.getCenter())
  }, [map])

  useEffect(() => {
    map.on('move', onMove)
    return () => {
      map.off('move', onMove)
    }
  }, [map, onMove])

  return (
    <p>
      latitude: {position.lat.toFixed(4)}, longitude: {position.lng.toFixed(4)}{' '}
      <button onClick={onClick}>reset</button>
    </p>
  )
}

function ExternalStateExample() {
  const [map, setMap] = useState(null)

  const displayMap = useMemo(
    () => (
      <MapContainer
        center={center}
        zoom={zoom}
        scrollWheelZoom={false}
        whenCreated={setMap}>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
      </MapContainer>
    ),
    [],
  )

  return (
    <div>
      {map ? <DisplayPosition map={map} /> : null}
      {displayMap}
    </div>
  )
}

export default ExternalStateExample;

まとめ

Reactを使う環境でleafletを使うなら単独で使うよりこちらを使った方が良さげです