初めに

adjusting the video bright
Youtubeやニコニコ動画の動画の明るさを調整できるchrome拡張機能です。

地味に便利な拡張機能と思います。

自分なりの解釈で書いているので、間違っているところがあるかもしれないので参考程度に見ておいてください。

必要なファイル

• index.html (browser actionで開くときに必要)
• background.js (backgroundで必要)
• content.js (content_scriptで必要)
• manifest.json (chrome拡張機能の名前や説明、使うchrome APIなどを記述するときに使う 必須なファイル) 。

まとめる

まず、コードを書く前にやるべきことをまとめます。

1,ポップアップ画面はどのような画面にするか
明るさを調整するだけなので、シンプルでいいです。

input type="range"で調整できるようにして、それを左に置き,
決定ボタンは右に置くようにします。
決定ボタンを押せば、動画が暗くなるようにします。

汚くてすみません....
右上のiconをクリックすればポップアップが表示されて、rangeが左,ボタンが右 という感じです。
最低でもinputタグのrangeタイプとbuttonタグがあれば十分です。あとはお好みのデザインにしても構いません。

2.必要なjavascriptファイル。メッセージパッシング

まずyoutubeの画面を暗くするには、cssであれこれやるのですが、それをするためにはDOM操作が必要になります。
ポップアップに使うHtmlファイルの外部jsファイルでやればいいかと思うとできません。

DOM操作を行うためのJsファイルは決まってます。
manifest.jsonにあるcontents_scriptに指定したjsファイルです。

ポップアップのhtmlファイルにcontent_scriptsに指定したjsファイルを外部jsファイルとしてdom操作をしたら、出来るのかというと,これもできません。

ポップアップするhtmlファイルをこの記事では拡張機能側と呼んでおきます。
拡張機能側からdom操作をすることはできません。

じゃあどうすればいいのかというと、拡張機能側からcontent_scriptsのjsファイルに必要なデータを渡して、そのjsファイル(content.js)でdom操作を行うようにすればいいことです。

htmlだけじゃcontent_scriptsにデータを送信できないので、外部jsファイルでcontent_scriptsに送信します。
またデータを送信するにはmanifest.jsonのbackgroundに指定されたbackground.jsがchromeAPIを使い、送信していきます。

流れをまとめると

1,拡張機能側で必要なinputの値を取って、決定ボタンを押す

2,外部jsファイル(background.js)がinputの値などのデータをcontent_scriptsに送信

3,content_scriptsはデータを受け取り、dom操作でページに反映する。

このような感じです。

この送信したり受け取ったりすることをメッセージパッシング(message passing)と言います。

コードを書いていく

1,DOM操作で、動画を暗くするやり方を知る。
まず,暗くするやり方を身につけましょう。

Youtubeの動画の画面をデベロッパーツールで見ます。すると、videoタグでclass属性はvideo-streamなどが記載されていることが分かります。
では、そこに filter: brigtness(0.5); とデベロッパーツールの下の方にある、cssを入力できる場所に入力してみると画面が暗くなります。

cssのfilterプロパティとは画像や動画を加工するために使われています。
特に画像に使われます。
MDNにbrightness以外のものもあるので見てください。

つまり、content_scriptsで指定したjsファイル(content.js)で、videoタグのclass属性を取得さえすれば出来るということです。

let movie = document.getElementsByClassName("video-stream");
movie[0].style.filter = "brightness(0.5)";

まず1行目でvideo-streamクラスを取得します。
2行目なのですが、なぜmovie[0]の[0]を付けたのかということを簡単に言いますと、特定するためです。
id属性は一つしか付与することはできないのに対し、class属性は複数のタグに同じクラス名を付与できます。

movieだけだと、どのタグについてるvideo-streamクラスなのかわかりません。
なので、ここは一番最初のvideo-streamクラスにfilterプロパティをつけたいので、movie[0]としています。

<div class="video-stream">0</div> //movie[0]
<div class="video-stream">1</div> //movie[1]

一つ目のタグを取りたいなら[0]をつけ、2つ目のタグをとりたいなら[1]をつけるようにする。
なお、id属性をとるのなら、[0]などについては必要ありません。

2,manifest.jsonを作る

まずサンプルをここに載せて置きます。

manifest.json

{
   "manifest_version": 2,
   "name": "",
   "description": "",
   "version": "1.0",
   "browser_action": {
     "default_icon" : "",
     "default_title": "",
     "default_popup": ""
   },
   "icons":{
     "16":"16x16....",
     "
   }
   "permissions" : [
   ],
   "content_scripts": [{
       "matches": ["<all_urls>"],
       "js": [""]
   }],
   "background":{
     "scripts": [""],
     "persistent": false
   }
 }

masnifest.jsonの書き方

manifest.jsonにはこういう感じで書いていきます。
まず、"manifest_version" : 2とありますが、manifestのバージョンで、現在バージョンが2であるためです。これは絶対にこのまま書いておきましょう

nameとは拡張機能の名前です。

descriptionとは拡張機能の説明です。どのような拡張機能か書きましょう。

versionとは拡張機能のバージョンを指します。なにか変えたりしてアップデートを行った場合、versionも変えましょう。作成した拡張機能をアップデートをして、再びウェブストアにアップロードするときversionを変えてなかったら、エラーガ起こります。

続いてbrowser_actionについて

default_iconは拡張機能のアイコンです。
38x38 の大きさの画像を作成して、指定してあげてください。

default_titleは右上にある拡張機能のアイコンにマウスオーバー(マウスを乗せる)すると出てくる名前です。

default_popupに関しては,htmlファイルを指定します。
指定した場合、アイコンをクリックすると、ポップアップが出てきます。
指定しなかった場合,何も出てきません。

iconsに指定された画像はウェブストアの時に使います
16x16 48x48 128x128の大きさを指定してあげてください

permissionsではchrome APIを使いたいときに記述します。
permissionsに書かなくても使えるchromeAPIはあります。

content_scriptsはdom操作をするときに使います。
machesには正規表現で書き、拡張機能を使う対象のサイトを書きます。
jsでは動作させるスクリプトを書きます。
content_scriptsで、今見ているタブ(サイト)をDOM操作で色々と書き換えることができます。

background: バックグランドページとイベントページがあります。
今はイベントページが推奨されています。
scripts で バックグランドで動作するjsファイルを指定します。
persistentはfalseにすると、イベントページとなり何も書かなかったらバックグランドページとなります。
バックグラウンドページは裏側ではずっと動いているのに対して、イベントページでは必要なときに動くのでpersistent: falseは書いておきましょう。

ポップアップ画面を作る

次にポップアップ画面をデザインしていきます。
これは好きなようにして構いませんが、最低でも

  <input type="range">
  <button></button>

この二つは必要です。

3,chrome APIをリファレンスを読みながら作っていく。
基本的に chrome api を読んでいきながら作ってみましょう。

まず,どんなapiを使うのかまとめると

chrome tabs api
chrome runtime api

これらを使っていきます。
tabs APIで送信して、runtime APIで受け取るようにします。
なおtabs APIはbackgroundで動くjavascriptでないと動作しないので、ポップアップするHtmlファイルの外部jsにbackground.jsを使います。

つまり
1,htmlのinputタグの値をbackground.jsで取得し、tabsAPIを使って送信

2,content_scriptsのjsで,background.jsが送信したデータをruntime APIで受け取る

3,受け取ったデータを使いDOM操作をやる。

background.jsを書いていこう!

background.js

let btn = document.getElementById('btn'); //button を取得
let col = document.getElementById('elem'); // input type=range を取得

ボタンをクリックしたら、送信したいので

background.js

btn.addEventListener('click',function(){
    //ここにapiを記述
}

このように記述します。
まずchrome tabs apiに行きます。tabsAPIで使いたいメソッドは、

• query()
• sendMessage()

この二つのメソッドとなります。

まずqueryメソッドについて学んでいこうと思います。

chrome.tabs.query(object queryInfo, function callback)

このようなコードとなっています。何が何だかわからないと思いますが見ていきましょう。
queryメソッドの引数にはobject queryInfo, とあります。最後にコンマ( , )があるので、第一引数はここまでということが分かります。

まずobjectとありますが、これは型を示しています。
javascriptでオブジェクトを書くときは,

sample.js

let obj = {
  "***": ***
}

と書くように、このobject queryInfoも{}で囲んであげて、
その中に ○○○:○○○と書いていきます。

sample.js

chrome.tabs.query({}, function callback)
↓
chrome.tabs.query({○○○:○○○, ○○○:○○○}, function callback)

このような感じになります。この{}の中にjsonと同じように書いていきます。
公式サイトを見ますが、
active pinned audibleとずらっと書いてあります。その左にbooleanと書いてありますが、これが何を示しているのかというと、簡単に言えば設定です。
booleanというとtrueやfalseということなので、
{active: true} また{active: false}このような感じで書けということです。

ここで使うオプションはactiveとcurrentWindowの二つのオプションです。
ちなみにどっちもbooleanです。

activeはタブがウィンドウでアクティブかどうか。とグーグル翻訳で出ています。
つまり今このタブを開いているかどうかです。
trueにしましょう。

currentWindowはタブが現在のウィンドウにあるかどうかです。
つまり、今見ているサイトかどうかです。これもtrueにしましょう。

この二つのオプションをtrueにすることで、開いているサイトで尚且つ、今見ているサイトの情報を取得することになります。

sample.js

chrome.tabs.query({active: true, currentWindow: true }, () => {
})

object queryInfoが第一引数に対して、第二引数はfunction callbackです。
引数の中に関数があるため、第二引数はコールバック関数であることは一目瞭然です。

コールバック関数の引数には,object queryInfoで指定されたタブ(サイト)の情報があり、それをsendMessageメソッドに渡します。

sample.js

chrome.tabs.sendMessage(integer tabId, any message, object options, funct
ion responseCallback)

第一引数には、見ているサイトのtabIdを書かないといけないので、queryメソッドのコールバック関数にサイトの情報 (tabId)があるので、使います。

sample.js

chrome.tabs.query({active: true, currentWindow: true},tab => {
  chrome.tabs.sendMessage(tab[0].id, any message, object options, fu
  nction responseCallback)
})

tab[0].idでtabIdを取得できます。

第二引数には送信したいデータを指定します。
公式サイトには送信するメッセージ。このメッセージは、JSONで送信可能なオブジェクトである必要がありますと書いています。
つまりjson形式で書いてくださいということです。

また送信したいデータはinput type="range"の値です。

sample.js

let col = document.getElementById('elem'); // input tag

chrome.tabs.query({active: true, currentWindow: true},tab => {
  chrome.tabs.sendMessage(tab[0].id, { dark : Number(col.value)})
})

{dark : Number(col.value)}と第二引数に書きました。
Numberメソッドで、引数にあるinput range の値を数値に変えています。

第三引数からに関しては必要ないと思っています。
まず第一、このinput rangeの値さえcontent_scriptsに渡せばいいのですから、一方的なんですよね。

これをまとめたコードがこちらです。

background.js

let btn = document.getElementById('btn');
let col = document.getElementById('elem');

btn.addEventListener('click',function(){
 chrome.tabs.query({active: true, currentWindow: true},tab => {
   chrome.tabs.sendMessage(tab[0].id,{ dark : Number(col.value) })
 })  
})

これでボタンをクリックすればapiが実行され、content_scriptsに送信されます。

次はcontent.jsで送信されたデータを受け取り、dom操作で反映させます。

content.jsを書く

受け取る方法は簡単で,
runtime api のchrome.runtime.onMessage.addListener()を使うだけです。

content.js

chrome.runtime.onMessage.addListener(function callback)

引数の中に関数functionがあるのでコールバック関数となります。
コールバック関数の引数には,

第一引数にmessage, 第二引数にsender, 第三引数にsendResponseがあります。

content.js

chrome.runtime.onMessage.addListener(
  function(message, sender, sendResponse){

  }
)

受け取ったデータをDOM操作するというシンプルなことですから、第一引数のmessageだけで、問題ないです。
messageには送信したデータが入っています。

あとは、最初に学んだDOM操作を関数の中に書いてあげます。

content.js

chrome.runtime.onMessage.addListener(
  function(message, sender, sendResponse){
    let movie = document.getElementsByClassName('video-stream');
    movie[0].style.filter = `brightness(${message.dark})`
  }
)

brightness(${message.dark})はテンプレートリテラルを使ってます。バッククォートで囲んであげてください。

作った拡張機能を読み込んでみよう

これで拡張機能は作れたので読み込んでみましょう。

1, まずブラウザを開き,右上の3つの点をクリック
2, その他のツールをクリック出てきた、拡張機能をクリック
3, パッケージ化されていない拡張機能を読み込むをクリックし、フォルダを選択
4,完了です。ページに戻り右上に見ると追加されているのが分かります。
エラーの場合は、manifest.jsonにちょっとおかしいところがあります。なおしましょう。

ウェブストアにアップロードしよう。

実際にアップロードするのは、この記事で作った拡張機能ではなく、オリジナルの拡張機能でお願いします。

1.chromeウェブストアに行く。
2,右上にある歯車マークを押し,デベロッパーダッシュモードを選択
3,1ドル(だいたい100円)を払う。
4,作ったフォルダを圧縮してzipにしてから、アップロード。
5,ダッシュボードに行き、英語で拡張機能の説明を書き、完了したら審査に出す。自分は英語が書けないので、DeepLを使い書きました。

これでアップ完了です。自分はアップしてから五日ほどで審査が終わり、ストアに出せるようになりました。最初は検索しても出てきませんでしたが、2日ほど待つと後ろの方ですが検索に出てくるようになりました。
またアップデートしたものを、ウェブストアに出すとき、審査されますが自分は1日で終わりました。

終わりに

初めて拡張機能を作ってみましたが、chromeAPIがちょっと難しかったなと思います。
adjusting the video brightという拡張機能をできれば試してほしいと思います。
UIが崩れてるかもしれないので、もし崩れてたら教えてほしいです。
お願いします！

はじめに

皆様、こんにちは！
佐久間まゆちゃんのプロデューサーの@hiroki_tanakaです。

先日、Rails6.0系でselectboxの複数選択をおしゃれにするプラグインのselect2を導入することがありました。
その際にRails5系までの導入方法との違いに少しハマったので、調べたことをまとめました。

利用環境

• Ruby 2.6.6
• Rails 6.0.2

select2とは

select2とはHTMLのselectboxのデザインをおしゃれにするJavaScriptのライブラリです。
公式サイトはこちらです。→select2
単一選択のselectboxのUIだけでなく、複数選択のselectboxも簡単に実装する事ができるプラグインです。

公式サイト上のサンプル

• select2導入前
  

• select2導入後の複数選択プルダウン
  

Rails6.0での導入方法

Rails5系でのselect2の導入はGemを使用しての導入となっていましたが、Rails6.0からはGemではなくWebpacker使用するようになりました。
1つずつ手順を紹介したいと思います。

※Rails5でselect2の導入は下記のページが非常に詳細に説明しています。
→【Rails5】Select2で複数選択可能なセレクトボックスを作る

1. yarnでselect2に必要なライブラリ導入

下記のコマンドを実行して、Railsアプリケーションにselect2を導入します。
この時、select2だけではなくselect2の導入に必要なjQuery(及びpopper.js)とselect2のUI部分に当たるbootstrapも併せて導入します。

$ yarn add jquery
$ yarn add popper.js
$ yarn add bootstrap
$ yarn add select2

2. Rails上でjQuery・popper.jsを使用できるように設定

Railsアプリケーションのwebpack/environment.jsにjQueryをRailsのどのファイルからも呼び出せるように設定します。

config/webpack/environment.js

const { environment } = require('@rails/webpacker')

// jQueryとBootstapのJSを使えるように
const webpack = require('webpack')
environment.plugins.prepend(
    'Provide',
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        Popper: 'popper.js'
    })
)
module.exports = environment

また、packs/application.jsのマニュフェストにJQueryを追加します。

app/javascript/packs/application.js

require("jquery")

3. Rails上でbootstrapを使用できるように設定。

下記の２つの設定を行い、Railsアプリケーションでbootstrapを使用できるように設定します。

app/javascript/packs/application.js

import 'bootstrap';
import '../stylesheets/application';

app/javascript/stylesheets/application.scss

@import '~bootstrap/scss/bootstrap';

4. erbファイルでwebpackerを使用するように設定。

Railsアプリケーションの全てのViewファイルでwebpackerに導入したbootstrap・jQueryが使用できるように大元のlayouts/application.html.erbに設定します。

app/views/layouts/application.html.erb

<head>
<%= stylesheet_pack_tag "application", media: "all" %>
<%= javascript_pack_tag 'application' %>
</head>

5. selectboxをerb上に定義し、select2を使用するようにJSファイルに記載。

アプリケーションのerb上に複数選択を行うselectboxを定義します。
この時、select_tagはmultiple: trueとoption設定すれば、複数選択可能なselectboxとなります。

そして、該当のselectboxがselect2を使用するようにerbファイルに対応するJSファイルに記載します。

app/views/test.html.erb

<%= javascript_pack_tag 'test' %>
<%= select_tag('animal', options_for_select([['いぬ', 'dog'], ['ねこ', 'cat'], ['とり', 'bird'], ['うし', 'cow'], ['へび', 'snake']]), class: "form-control", multiple: true) %>

app/javascript/packs/test.js

$(function () {
    $('#animal').select2();
});

6. 完成！！

おまけ：select2のoption利用

select2には様々なoptionが用意されています。→select2 Options
これらのoptionはjQueryで設定することが可能です。
下記はoption設定の一例です。

app/javascript/packs/test.js

$(function () {
    $('#animal').select2({
        width: 'resolve' // 幅をページサイズに併せて動的に変更する。
        theme: "classic" // クラシックUIに変更する。
        debug: true // ブラウザのコンソールにデバッグメッセージを出力する。
    });
});

おわりに

yarnを使用することでselect2の導入が更に簡単になったように感じます。
ただ、select2の内部挙動に関してはわからないことが多いので理解を深めたいです。

タイトルから、何の技術の話かわからないですね。
GoogleMapにナビゲーション機能ってありますよね、それをサイクリングでナビゲートしてもらおうというものです。
サイクリング中は、手が使えないので、音声ナビがあると便利です。
ですが、ポケストップを探すたびに、立ち止まってスマホを見るのは手間ですし、軽快ではありません。

そこで、(ポケストップに限りませんが)サイクリング前に、途中のチェックポイントを複数覚えておいて、チェックポイントまでの道のりをナビゲートしてもらって、到着したら、ポケストップのアイテムをもらったり、コンビニで休憩したのち、次のチェックポイントを目指す、というものです。

原理の説明：GoogleMapの機能

GoogleMapは、外部のアプリやブラウザから起動させることができます。
その際に、パラメータの指定によって、場所の表示だけでなく、出発地点と目的地を指定して、ナビゲーションを開始させることもできます。

ですので、まずはブラウザから、サイクリングで回りたいチェックポイントのリストを作って、GoogleMapを起動して次のチェックポイントまでナビゲーションしてもらいます。
チェックポイントまで到着したら、またブラウザを立ち上げて、今度は次のチェックポイントを指定してGoogleMapを起動させる、これを最後の目的地まで繰り返すわけです。

GoogleMapのナビゲーション機能

ナビゲーション中は、以下のことを適宜音声で教えてくれます。

・予定通りの道を進んでいるかどうか
・次の曲がり角まで何メートルか
・今曲がるべき曲がり角か
・予定の道を外れたか
・目的地の近くに来たか
・目的地に着いたか

上記は、ナビを開始すると、設定が選べるようになり、「詳しい音声案内」のスイッチをOnにした場合です。Offの場合はもうちょっと少ない気がします。

もろもろGitHubに上げておきました。

poruruba/orientation_navigator
　https://github.com/poruruba/orientation_navigator

画面説明

ブラウザを起動するとこんな感じの画面が表示されます。

まずは、チェックポイントを追加します。タブ「チェックポイント」を選択し、チェックポイントを追加します。

GoogleMapがはめ込まれて表示されるので、出発地点を選択します。

さらに、同じように次のチェックポイントを追加します。

経由地っていうチェックボックスがあります。通常は次のチェックポイントに到着するとGoogleMapのナビゲーションが終わってしまうのですが、経由地は次のチェックポイントまでの途中の経由地であって、経由地を通過しただけでは、GoogleMapのナビゲーションは終わらないようにしています。

オリエンテーションタブを選択すると、マーキングされているのがわかります。
これで準備完了です。
さっそく、「オリエンテーション開始」ボタンを押下してみましょう。

そうすると、こんな感じでGoogleMapが立ち上がり、ナビゲーション開始待ちとなります。
ちなみに、PCのChromeブラウザからの画面ですが、Androidから使うと、ブラウザのGoogleMapか、ネイティブのGoogleMapアプリ、どちらを起動するかの選択肢が出てきます。もちろん、ネイティブのGoogleMapアプリの方がナビゲーションとしては使い勝手が良いです。

あとは、開始してしまえば、いつものナビゲーションが始まります。
イヤホンで、GoogleMusic（Youtube Music）でも聞きながら、サイクリングしましょう。

チェックポイントに到着したら、もう一度ブラウザに戻りましょう。

「チェックポイントに到着しましたか？」ボタンを押下すると、次のチェックポイントに出発のボタンに代わりますので、押下すると、またGoogleMapが立ち上がります。今度は、1つ目のチェックポイントから、2つ目のチェックポイントへのナビゲーションです。

おおよそ、イメージはつかめましたでしょうか？

マイスポット機能

毎度毎度、場所を選択するのはめんどうです。特に家の周りはいつものコースを決めていますが、毎度ポケストップを指定するのは面倒です。
そこで、あらかじめよくいくスポットをマイスポット機能として登録しておけば、それを選択するだけで、チェックポイントに追加されるようになります。

マイスポットのタブを選択して、登録します。

そうすると、こんな感じで、チェックポイント登録する際に、マイスポットから選択することができます。

サーバ同期

実は、チェックポイントを追加したり、マイスポットを追加したりしたら、サーバ側にデータを保持するようにしています。ですので、ブラウザを立ち上げなおしても、以前の状態が復元されるようにしています。また、ナビゲーション中にチェックポイントに到達したりした時もサーバ側に同期するようにしています。

とはいってもクライアント・サーバいずれもかなり手抜きしています。
クライアント側は、Vueのwatchを使って、対象のデータが変更されたら、サーバに一括アップロードしているだけです。
取得も、ブラウザでの起動時だけです。

GoogleMap起動のURL生成

大事なところをピックアップしました。
travelmode、origin、destination、waypointsを指定しているのがわかります。

travelmode
　歩きの移動か、車の移動か、電車の移動かを指定します。自転車がありますが、日本では使えないようです。

origin
　出発地点です。ブラウザで設定したチェックポイントに相当します。経由地ではありません。

destination
　これもブラウザで設定したチェックポイントですが、originのチェックポイントの次のチェックポイントです。

waypoints
　これが経由地です。

start.js

            // GoogleMap起動のパラメータを生成
            var params = "";
            var origin = this.checkpoints[this.origin_index];
            params += "&travelmode=" + this.travelmode;
            params += "&origin=" + encodeURIComponent(origin.lat + ',' + origin.lng);
            if( destination_index <= (this.checkpoints.length - 1)){
                var destination = this.checkpoints[destination_index];
                params += "&destination=" + encodeURIComponent(destination.lat + ',' + destination.lng);
            }
            if( (this.origin_index + 1) < destination_index ){
                var waypoints = "";
                for( var i = (this.origin_index + 1) ; i < destination_index ; i++ ){
                    if( i != (this.origin_index + 1) ) waypoints += '|';
                    waypoints += this.checkpoints[i].lat + ',' + this.checkpoints[i].lng;
                }
                params += "&waypoints=" + encodeURIComponent(waypoints);
            }
            var href = 'https://www.google.com/maps/dir/?api=1' + params;
            console.log(href);
            this.destination_completed = false;
            // GoogleMapを起動
            window.open(href, '_blank');

詳しくは以下を参照してください。

GoolgeMap Developers Guide Univarsal cross-platform syntax
　https://developers.google.com/maps/documentation/urls/guide?hl=ja#directions-action

ソース一式

Javascriptのソースです。

start.js

'use strict';

//var vConsole = new VConsole();

const default_lat = 35.465878;
const default_lng = 139.622329;
const base_url = "http://localhost:10080";

var vue_options = {
    el: "#top",
    data: {
        progress_title: '', // for progress-dialog

        origin_index: 0, // 出発のインデックス
        destination_completed : true, // チェックポイントに到着したかどうか
        checkpoints: [], // チェックポイントのリスト
        map_markers: [], // Map1に配置のマーカ
        myspots: [], // マイスポットのリスト
        dialog_params: {}, // モーダルダイアログの入出力パラメタ
        map2_markers: [], // Map2に配置のマーカ
        default_latlng: new google.maps.LatLng(default_lat, default_lng), // デフォルトのロケーション(現在地に上書き)
        travelmode: 'walking', // GoogleMapに指定するtravelmode
    },
    computed: {
        // ボタンに表示するテキスト
        orientation_text: function(){
            if( !this.destination_completed )
                return 'チェックポイントに到着しましたか？';

            if( this.origin_index == 0 )
                return 'オリエンテーション開始';
            else if( this.origin_index >= (this.checkpoints.length - 1) )
                return '最終目的地に到着しました。';
            else
                return '次のチェックポイントに出発';
        }
    },
    watch: {
        checkpoints: function(){
            // Mapに配置のマーカを再設定
            for( var i = 0 ; i < this.map_markers.length; i++ )
                this.map_markers[i].setMap(null);
            this.map_markers = [];
            for( var i = 0 ; i < this.checkpoints.length ; i++ ){
                var latlng = new google.maps.LatLng(this.checkpoints[i].lat, this.checkpoints[i].lng); 
                var mopts = {
                    position: latlng,
                    map: this.map,
                    label: String(i + 1)
                };
                var marker = new google.maps.Marker(mopts);
                this.map_markers.push(marker);
            }

            try{
                // サーバに同期
                update_data('checkpoints', this.checkpoints);
            }catch(error){
                this.toast_show("サーバにデータをアップロードできませんでした。");
            };
        },
        myspots: function(){
            try{
                // サーバに同期
                update_data('myspots', this.myspots);
            }catch(error){
                this.toast_show("サーバにデータをアップロードできませんでした。");
            };
        },
        origin_index: function(){
            try{
                // サーバに同期
                update_data('orientation', { origin_index: this.origin_index, destination_completed: this.destination_completed });
            }catch(error){
                this.toast_show("サーバにデータをアップロードできませんでした。");
            };
        },
        destination_completed: function(){
            try{
                // サーバに同期
                update_data('orientation', { origin_index: this.origin_index, destination_completed: this.destination_completed });
            }catch(error){
                this.toast_show("サーバにデータをアップロードできませんでした。");
            };
        },
    },
    methods: {
        // デフォルトのロケーションに移動
        map_goto_current_location: function(){
            var latlng = this.default_latlng;
            this.map.setCenter(latlng);                
        },
        // オリエンテーションタブ選択時にデフォルトのロケーションまたは出発位置に移動
        orientation_update_view: function(){
            var latlng = this.default_latlng;
            if( this.checkpoints.length > 0 )
                latlng = new google.maps.LatLng(this.checkpoints[this.origin_index].lat, this.checkpoints[this.origin_index].lng);
            this.map.setCenter(latlng);                
        },
        // オリエンテーションを指定位置からリスタート
        orientation_restart: function(index){
            if( index < 0 )
                if( !window.confirm('本当に最初から初めてもいいですか？') )
                    return;

            this.origin_index = (index < 0) ? 0 : index;
            this.destination_completed = true;
            this.orientation_next();
        },
        // 次の目的地(経由地を除く)を取得
        get_next_destination: function(){
            var destination_index = this.origin_index + 1;
            for( ; destination_index < this.checkpoints.length ; destination_index++ )
                if( !this.checkpoints[destination_index].waypoint )
                    break;
            if( destination_index >= this.checkpoints.length )
                destination_index = this.checkpoints.length - 1;
            return destination_index;
        },
        // 次へのボタンを押下
        orientation_next: function(){
            if( this.checkpoints.length == 0 ){
                alert('チェックポイントを追加してください。');
                return;
            }else if( this.checkpoints.length == 1 ){
                alert('次のチェックポイントを追加してください。');
                return;
            }

            if( this.origin_index >= (this.checkpoints.length - 1) ){
                alert('すでに目的地に到達しています。');
                return;
            }

            var destination_index = this.get_next_destination();
            if( (destination_index - (this.origin_index + 1)) > 9){
                alert('経由地の数が多すぎます。(9以下)');
                return;
            }

            if( !this.destination_completed ){
                // チェックポイントに到達
                this.origin_index = destination_index;
                this.destination_completed = true;

                // 目的位置に到達
                if( destination_index >= (this.checkpoints.length - 1) )
                    this.dialog_open('#orientation_complete_dialog');

                return;
            }

            // GoogleMap起動のパラメータを生成
            var params = "";
            var origin = this.checkpoints[this.origin_index];
            params += "&travelmode=" + this.travelmode;
            params += "&origin=" + encodeURIComponent(origin.lat + ',' + origin.lng);
            if( destination_index <= (this.checkpoints.length - 1)){
                var destination = this.checkpoints[destination_index];
                params += "&destination=" + encodeURIComponent(destination.lat + ',' + destination.lng);
            }
            if( (this.origin_index + 1) < destination_index ){
                var waypoints = "";
                for( var i = (this.origin_index + 1) ; i < destination_index ; i++ ){
                    if( i != (this.origin_index + 1) ) waypoints += '|';
                    waypoints += this.checkpoints[i].lat + ',' + this.checkpoints[i].lng;
                }
                params += "&waypoints=" + encodeURIComponent(waypoints);
            }
            var href = 'https://www.google.com/maps/dir/?api=1' + params;
            console.log(href);
            this.destination_completed = false;
            // GoogleMapを起動
            window.open(href, '_blank');
        },

        // Map2のマーカをクリアし、指定場所に移動
        map2_cleanup: function(latlng){
            for( var i = 0 ; i < this.map2_markers.length; i++ )
                this.map2_markers[i].setMap(null);
            this.map2_markers = [];
            if( this.map2_default_marker ){
                this.map2_default_marker.setMap(null);
                this.map2_default_marker = null;
            }
            this.map2.setCenter(latlng);
        },
        // モーダルダイアログの結果処理
        dialog_submit: function(){
            if( this.dialog_params.title == 'マイスポットの追加' ){
                var location = this.map2.getCenter();
                var name = this.dialog_params.name;
                this.myspots.push({
                    name, lat: location.lat(), lng: location.lng()
                });
            }else if( this.dialog_params.title == 'チェックポイントの追加' ){
                var location = this.map2.getCenter();
                var name = this.dialog_params.name;
                this.checkpoints.push({
                    name, lat: location.lat(), lng: location.lng()
                });
            }else if( this.dialog_params.title == 'マイスポットの変更'){
                var location = this.map2.getCenter();
                this.myspots[this.dialog_params.index].lat = location.lat();
                this.myspots[this.dialog_params.index].lng = location.lng();
            }else if( this.dialog_params.title == 'チェックポイントの変更' ){
                var location = this.map2.getCenter();
                this.checkpoints[this.dialog_params.index].lat = location.lat();
                this.checkpoints[this.dialog_params.index].lng = location.lng();
            }
            this.dialog_close('#select_location_dialog');
        },

        // マイスポットの追加(地図から)のためのモーダルダイアログ表示
        do_myspot_append: function(){
            this.map2_cleanup(this.default_latlng);
            this.map2_default_marker = new google.maps.Marker({
                position: this.default_latlng,
                map: this.map2,
            });

            this.dialog_params = {
                title: 'マイスポットの追加',
                is_input_name: true,
                is_input_submit: true,
            };
            this.dialog_open('#select_location_dialog');
        },
        // マイスポットの削除
        do_myspot_delete: function(index){
            if( !window.confirm('本当に削除していいですか？') )
                return;

            Vue.delete(this.myspots, index);
        },
        // マイスポットの名前変更
        do_myspot_change_name: function(index){
            var name = window.prompt('新しい名前', this.myspots[index].name);
            if( !name )
                return;
            this.myspots[index].name = name;
        },
        // マイスポットのロケーション変更
        do_myspot_change_location: function(index){
            var latlng = new google.maps.LatLng(this.myspots[index].lat, this.myspots[index].lng);
            this.map2_cleanup(latlng);
            this.map2_default_marker = new google.maps.Marker({
                position: latlng,
                map: this.map2,
            });

            this.dialog_params = {
                title: 'マイスポットの変更',
                index: index,
                is_input_submit: true,
            };
            this.dialog_open('#select_location_dialog');
        },

        // チェックポイントリストのリセット
        do_checkpoints_reset: function(){
            if( !window.confirm('本当にリセットしていいですか？') )
                return;
            this.origin_index = 0;
            this.destination_completed = true;
            this.checkpoints = [];
        },
        // チェックポイントの追加(マイスポットから)のためのモーダルダイアログ表示
        do_checkpoint_append_myspot: function(){
            if( this.myspots.length == 0 ){
                alert('マイスポットが登録されていません。');
                return;
            }

            this.map2_cleanup(this.default_latlng);

            this.dialog_params = {
                title: 'チェックポイントの追加(マイスポット)',
            };
            var _this = this;
            for( var i = 0 ; i < this.myspots.length ; i++ ){
                var mopts = {
                  position: new google.maps.LatLng(this.myspots[i].lat, this.myspots[i].lng),
                  map: this.map2,
                };
                var marker = new google.maps.Marker(mopts);
                this.map2_markers.push(marker);
                marker.addListener('click', function(e){
                    for( var i = 0 ; i < _this.map2_markers.length ; i++ ){
                        if( _this.map2_markers[i] == this ){
                            _this.checkpoints.push(_this.myspots[i]);
                            _this.dialog_close('#select_location_dialog');
                            return;
                        }
                    }
                });
            }
            this.dialog_open('#select_location_dialog');
        },
        // チェックポイント追加(地図から)のためのモーダルダイアログ表示
        do_checkpoint_append: function(){
            this.map2_cleanup(this.default_latlng);
            this.map2_default_marker = new google.maps.Marker({
                position: this.default_latlng,
                map: this.map2,
            });

            this.dialog_params = {
                title: 'チェックポイントの追加',
                is_input_name: true,
                is_input_submit: true,
                name : (this.checkpoints.length == 0) ? '現在地' : '',
            };
            this.dialog_open('#select_location_dialog');
        },
        // チェックポイントの削除
        do_checkpoint_delete: function(index){
            if( !window.confirm('本当に削除していいですか？') )
                return;

            Vue.delete(this.checkpoints, index);
        },
        // チェックポイントの名前変更
        do_checkpoint_change_name: function(index){
            var name = window.prompt('新しい名前', this.checkpoints[index].name);
            if( !name )
                return;
            this.checkpoints[index].name = name;
        },
        // チェックポイントのロケーション変更
        do_checkpoint_change_location: function(index){
            var latlng = new google.maps.LatLng(this.checkpoints[index].lat, this.checkpoints[index].lng);
            this.map2_cleanup(latlng);
            this.map2_default_marker = new google.maps.Marker({
                position: latlng,
                map: this.map2,
            });

            this.dialog_params = {
                title: 'チェックポイントの変更',
                index: index,
                is_input_submit: true,
            };
            this.dialog_open('#select_location_dialog');
        },
        // チェックポイントの順番変更
        do_checkpoint_change_index: function(index, event){
            var newIndex = event.target.selectedIndex;
            var temp = this.checkpoints[index];
            Vue.set(this.checkpoints, index, this.checkpoints[newIndex]);
            Vue.set(this.checkpoints, newIndex, temp);
        },
    },
    created: function(){
    },
    mounted: function(){
        proc_load();

        // 現在地情報の取得
        navigator.geolocation.getCurrentPosition((pos) =>{
            this.default_latlng = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
            this.map_goto_current_location();
        }, (error) =>{
            this.toast_show("現在地を取得できませんでした。");
        });

        // Mapの生成
        var myOptions = { 
          zoom: 15, 
          center: this.default_latlng, 
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          mapTypeControl: false,
          streetViewControl: false,
        }; 
        var canvas = $('#map_canvas')[0];
        this.map = new google.maps.Map(canvas, myOptions);

        // Map2(モーダルダイアログ用)の生成
        var canvas2 = $('#map_canvas2')[0];
        this.map2 = new google.maps.Map(canvas2, myOptions);
        google.maps.event.addListener(this.map2, 'center_changed', () =>{
            if( !this.map2_default_marker )
                return;
            var location = this.map2.getCenter();
            this.map2_default_marker.setPosition(location);
        });

        // サーバ保持データの取得
        get_data('myspots')
        .then(data =>{
            this.myspots = data;
            return get_data('checkpoints');
        })
        .then(data => {
            this.checkpoints = data;
            return get_data('orientation');
        })
        .then(data => {
            if( data.origin_index != undefined )
                this.origin_index = data.origin_index;
            if( data.destination_completed != undefined )
                this.destination_completed = data.destination_completed;
        })
        .catch(error =>{
            this.toast_show("サーバからデータを取得できませんでした。");
        });
    }
};
vue_add_methods(vue_options, methods_bootstrap);
vue_add_components(vue_options, components_bootstrap);
var vue = new Vue( vue_options );

function do_post(url, body) {
    const headers = new Headers({ "Content-Type": "application/json; charset=utf-8" });

    return fetch(new URL(url).toString(), {
        method: 'POST',
        body: JSON.stringify(body),
        headers: headers
      })
      .then((response) => {
        if (!response.ok)
          throw 'status is not 200';
        return response.json();
      });
}

async function get_data(type){
    return do_post(base_url + '/get-data', { type: type })
    .then(json =>{
        if( json.status != 'OK' )
            throw "post failed";
        return json.result.data;
    });
}

async function update_data(type, data){
    var body = {
        type: type,
        data: data,
    }
    return do_post(base_url + '/update-data', body)
    .then(json =>{
        if( json.status != 'OK' )
            throw "post failed";
    });
}

次はHTMLです。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com 'unsafe-eval' 'unsafe-inline'; style-src * 'unsafe-inline'; media-src *; img-src * data: content: blob:;">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
  <!-- Optional theme -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

  <title>オリエンテーション ナビゲータ</title>

  <link rel="stylesheet" href="css/start.css">
  <script src="js/methods_bootstrap.js"></script>
  <script src="js/components_bootstrap.js"></script>
  <script src="js/vue_utils.js"></script>

  <script src="dist/js/vconsole.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

  <script type="text/javascript" src="//maps.google.com/maps/api/js?key=【GoogleAPIキー】"></script> 
</head>
<body>
    <div id="top" class="container">
        <h1>オリエンテーション ナビゲータ</h1>

        <ul class="nav nav-tabs">
          <li role="presentation" class="active"><a href="#oriatation" v-on:click="orientation_update_view" data-toggle="tab">オリエンテーション</a></li>
          <li role="presentation"><a href="#checkpoint" data-toggle="tab">チェックポイント</a></li>
          <li role="presentation"><a href="#myspot" data-toggle="tab">マイスポット</a></li>
        </ul>

        <div class="tab-content">
          <div id="oriatation" class="tab-pane fade in active">
            <br>
            <span class="form-inline">
              <select class="form-control" v-model="travelmode">
                <option value="walking">walking</option>
                <option value="bicycling">bicycling</option>
                <option value="driving">driving</option>
                <option value="transit">transit</option>
              </select>
            </span>
            <div class="btn-group">
              <button class="btn btn-primary" v-on:click="orientation_next">{{orientation_text}}</button>
              <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>              
              <ul class="dropdown-menu">
                <li><a v-on:click="orientation_restart(-1)">最初から再開</a></li>
                <li><a v-on:click="orientation_restart(origin_index)">今のチェックポイントを再開</a></li>
              </ul>
            </div>
            <span v-if="checkpoints.length >= 2">
              <br><br>
              <label>現在地：</label>{{origin_index + 1}} {{checkpoints[origin_index].name}},
              <label>目的地：</label>{{get_next_destination() + 1}} {{checkpoints[get_next_destination()].name}}
            </span>
            <button class="btn btn-default btn-xs pull-right" v-on:click="map_goto_current_location">現在地へ</button>
            <br>
            <div class="row" id="map_canvas" style="margin: 15px; height:600px"></div>
          </div>

          <div id="checkpoint" class="tab-pane fade in">
            <br>
            <button class="btn btn-primary" v-on:click="do_checkpoints_reset">チェックポイントのリセット</button>
            <table class="table table-striped">
              <thead>
                <tr><th>#</th><th>名前</th><th>経由地</th><th>編集</th></tr>
              </thead>
              <tbody>
                <tr v-for="(point, index) in checkpoints">
                  <td width="1px">
                    <div class="form-inline">
                      <select v-bind:value="index" v-on:change="do_checkpoint_change_index(index, $event)">
                        <option v-for="(point2, index2) in checkpoints" v-bind:value="index2" v-bind:selected="index==index2">{{index2 + 1}}</option>
                      </select>
                    </div>
                  </td>
                  <td>
                    <button class="btn btn-default btn-xs" v-on:click="do_checkpoint_delete(index)">削除</button> {{point.name}}
                  </td>
                  <td>
                    <input v-if="index!=0 && index!=(checkpoints.length-1)" type="checkbox" v-model="point.waypoint">
                  </td>
                  <td>
                    <div class="btn-group">
                      <button class="btn btn-default btn-sm" v-on:click="do_checkpoint_change_name(index)">名前</button>
                      <button class="btn btn-default btn-sm" v-on:click="do_checkpoint_change_location(index)">場所</button>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td></td>
                  <td>
                    <div class="btn-group">
                      <button class="btn btn-default btn-sm" v-on:click="do_checkpoint_append">チェックポイント追加</button>
                      <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>              
                      <ul class="dropdown-menu">
                        <li><a v-on:click="do_checkpoint_append_myspot">マイスポットから追加</a></li>
                      </ul>
                    </div>
                  </td><td></td><td></td>
                </tr>
              </tbody>
            </table>            
          </div>

          <div id="myspot" class="tab-pane fade in">
            <br>
            <table class="table table-striped">
              <thead>
                <tr><th>#</th><th>名前</th><th>緯度</th><th>経度</th><th>編集</th></tr>
              </thead>
              <tbody>
                <tr v-for="(spot, index) in myspots">
                  <td width="1px">{{index + 1}}</td>
                  <td><button class="btn btn-default btn-xs" v-on:click="do_myspot_delete(index)">削除</button> {{spot.name}}</td>
                  <td>{{spot.lat.toFixed(7)}}</td><td>{{spot.lng.toFixed(7)}}</td>
                  <td>
                    <div class="btn-group">
                      <button class="btn btn-default btn-sm" v-on:click="do_myspot_change_name(index)">名前</button>
                      <button class="btn btn-default btn-sm" v-on:click="do_myspot_change_location(index)">場所</button>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td></td>
                  <td>
                    <button class="btn btn-default btn-sm" v-on:click="do_myspot_append">地図から追加</button>
                  </td>
                  <td></td><td></td><td></td>
                </tr>
              </tbody>
            </table>            
          </div>
          <br>
          <br>
        </div>

        <modal-dialog size="lg" id="orientation_complete_dialog">
          <div slot="content">
            <div class="modal-header">
              <h4 class="modal-title">オリエンテーション達成</h4>
            </div>
            <div class="modal-body">
              <center>
                オリエンテーション達成です。おめでとうございます。<br>
                <img src="img/goal_figure.png">
              </center>
            </div>
            <div class="modal-footer">
              <button class="btn btn-default" v-on:click="dialog_close('#orientation_complete_dialog')">閉じる</button>
            </div>
          </div>
        </modal-dialog>

        <modal-dialog size="lg" id="select_location_dialog">
          <div slot="content">
            <div class="modal-header">
              <h4 class="modal-title">{{dialog_params.title}}</h4>
            </div>
            <div class="modal-body">
              <div class="form-inline">
                <button class="btn btn-default" v-on:click="dialog_submit" v-if="dialog_params.is_input_submit">この場所にする</button>
                <span v-if="dialog_params.is_input_name">
                  <label>名前</label> <input type="text" class="form-control" v-model="dialog_params.name">
                </span>
              </div>
              <div class="row" id="map_canvas2" style="margin: 20px; height:300px"></div>
            </div>
            <div class="modal-footer">
              <button class="btn btn-default" v-on:click="dialog_close('#select_location_dialog')">キャンセル</button>
            </div>
          </div>
        </modal-dialog>


        <!-- for progress-dialog -->
        <progress-dialog v-bind:title="progress_title"></progress-dialog>
    </div>

    <script src="js/start.js"></script>
</body>

もう長すぎてわけわかんないですよね。。。
その他ユーティリティのファイル等含めて、GitHubに上げています。

セットアップ：GoogleMap API利用の準備

GoogleMapを利用するには、GoogleからAPIキーを払い出してもらう必要があります。
以下のサイトの通りに実施すれば、特に問題はなかったです。

Get Started with Google Maps Platform
　https://developers.google.com/maps/gmp-get-started?hl=ja

最後に、API Keyを生成するのですが、Web APIsのMaps Embed APIを採用しました。

セットアップ：サーバの展開

以下のGitHubから一式ダウンロードしておきます。

poruruba/orientation_navigator
　https://github.com/poruruba/orientation_navigator

そして、以下の通りに実行します。

unzip orientation_navigator.zip
cd orientation_navigator
npm install
mkdir data
node app.js

以下、修正が必要です。

public/start.js
　7行目のあたり
　const base_url = "http://localhost:10080";

上記を立ち上げたサーバのURLを指定します。

public/index.html
　34行目あたり
　<script type="text/javascript" src="//maps.google.com/maps/api/js?key=【GoogleAPIキー】"></script>

また、HTML5の現在地情報取得機能を使っているのですが、それを利用するには、HTTPSである必要があります。

mkdir certs

このディレクトリに、SSL証明書類を配置しましょう。

以下が参考になります。
　SSL証明書を取得しよう

以上

目的

JavaScriptにおけるasync/awaitとPromiseは同じものですが、
エラーハンドリングに関しては違いがあったり、returnに気をつけないといけなかったり、
はまったり、見落としたりする箇所があるので、まとめておきます。

async/awaitとPromiseの関係性については、記事中で詳しくは触れません。

おさらい

Promise

正常系

// 非同期でメッセージがかえってくる
const pResult = Promise.resolve("結果です");

// 結果が帰ってきてないので、Promise型
console.log(pResult.toString()); // "[object Promise]"

// thenで結果を待つ
pResult.then(result => {
  console.log(result.toString()); // "結果です"
});

エラー発生

// 非同期でErrorがthrowされた状態
// RESTでAPIエラー起こすなどでここに入る
const pError = Promise.reject(new Error("エラーです"));

// 結果が帰ってきてないので、Promise型
console.log(pError.toString()); // "[object Promise]"

// catchでエラーを取る
pError
  .then(result => {
    console.log("到達しない！");
  })
  .catch(error => {
    console.log(error.toString()); // "Error: エラーです"
  });

async/await

正常系

// async(Promise)内でしかawaitできない
(async () => {
  // 非同期でメッセージがかえってくる
  const pResult = Promise.resolve("結果です");

  // 結果が帰ってきてないので、Promise型
  console.log(pResult.toString()); // "[object Promise]"

  // awaitで結果を待つ
  const result = await pResult;

  console.log(result.toString()); // "結果です"
})()

エラー発生

(async () => {
  // 非同期でErrorがthrowされた状態
  // RESTでAPIエラー起こすなどでここに入る
  const pError = Promise.reject(new Error("エラーです"));

  // 結果が帰ってきてないので、Promise型
  console.log(pError.toString()); // "[object Promise]"

  // throwされるので、tryでエラーを取る
  try {
    await pError;

    console.log("到達しない！");
  } catch (error) {
    console.log(error.toString()); // "Error: エラーです"
  }
})()

returnとエラーハンドリング

どのようにreturnするかは、影響が大きいので、きちんと考えて書きます。
結果としてreturn書かなくても十分な場面は多いですが、returnを考慮した上で、書く、書かないを考えていきたい場所です。

returnの考慮が必須になる場面が3パターンほどあります、注意していきましょう。

• 1. 非同期の結果を使う場合
• 2. エラーが発生する場合
• 3. 複数の非同期がある場合

1. 非同期の結果を使う場合

returnの有無でどうなるか、基本的な挙動なのでとりあえず覚えておきましょう。

returnを省略すると、undefinedになる

// Promise
const pResult = Promise.resolve("結果です");

pResult
  .then(result => {
    console.log(result) // "結果です"
    // returnしない！
  })
  .then(result => {
    // 結果が引き継がれない！
    console.log(result) // undefined
  })

async/awaitの場合、returnしなかったらundefinedになるのは直感的ですね。

// async/await
const pResult = Promise.resolve("結果です");

(async () => {
  async function edit1(){
    const result = await pResult;
    console.log(result) // "結果です"
    // returnしない！
  }

  const edited1 = await edit1();
  console.log(edited1) // undefined
})()

returnは、後続の引数になる

// Promise
const pResult = Promise.resolve("結果です");

pResult
  .then(result => {
    console.log(result) // "結果です"
    return `${result} 2回目`;
  })
  .then(result => {
    console.log(result) // "結果です 2回目"
  })

// async/await
const pResult = Promise.resolve("結果です");

(async () => {
  async function edit1(){
    const result = await pResult;
    console.log(result) // "結果です"
    return `${result} 2回目`;
  }

  const edited1 = await edit1();
  console.log(edited1) // "結果です 2回目"
})()

2. エラーが発生する場合

正常系とほぼ同じ挙動ですが、
1つの非同期に対して、2パターン（正常、エラー）は常に考えていくので、考慮するパターンが純粋に増えていきます。
考慮するパターンが多いと、バグる確率がどんどん上がってきます。

catchでreturnを省略すると、undefinedで復旧する

catch後は正常系に戻りますが、returnを省略すると、後続の引数はundefinedになります。
なにかエラー処理をはさんだ時に、意図しない復旧をしてしまう場合があるので、注意です。

// Promise
const pError = Promise.reject(new Error("エラーです"));

pError
  .catch(error => {
    console.log(error.toString()); // "Error: エラーです"
    // returnなし
  })
  .then(result => {
    console.log(result); // undefined
  })

こちらもasync/awaitであれば、直感的だと思います。
しかし、個人的にtry~catchは、Promiseでのcatchよりも視認性が悪いので好きではないです。

// async/await
const pError = Promise.reject(new Error("エラーです"));

(async () => {
  async function edit1(){
    try {
      return await pError;
    } catch(error){
      console.log(error.toString()); // "Error: エラーです"
      // returnなし
    }
  }

  const edited1 = await edit1();
  console.log(edited1); // undefined
})()

catchで書いたreturnは、復旧時の引数になる

エラー後、正常系に戻しつつ、デフォルトの挙動を指定したい場合などに書きます。

// Promise
const pError = Promise.reject(new Error("エラーです"));

pError
  .catch(error => {
    console.log(error.toString()); // "Error: エラーです"
    return "デフォルト値";
  })
  .then(result => {
    console.log(result); // "デフォルト値"
  });

// async/await
const pError = Promise.reject(new Error("エラーです"));

(async () => {
  async function edit1(){
    try {
      return await pError;
    } catch(error){
      console.log(error.toString()); // "Error: エラーです"
      return "デフォルト値";
    }
  }

  const edited1 = await edit1();
  console.log(edited1); // "デフォルト値"
})()

復習ですが、awaitをreturnし忘れると、正常系がundefinedになるので、バグです。

    try {
      // これでは後続がundefined
      // await pError;

      // return必要
      return await pError;
    } ...

catch時、再throwでエラー継続

エラーハンドリングをした上で、後続の正常系を止めたい場合などは、throwします。

// Promise
const pError = Promise.reject(new Error("エラーです"));

pError
  .catch(error => {
    console.log(error.toString()); // "Error: エラーです"
    throw error;
  })
  .then(result => {
    console.log("到達しない！");
  })
  .catch(error => {
    console.log(`${error.toString()} 2回目`); // "Error: エラーです 2回目"
  })

// async/await
const pError = Promise.reject(new Error("エラーです"));

(async () => {
  async function edit1(){
    try {
      return await pError;
    } catch(error){
      console.log(error.toString()); // "Error: エラーです"
      throw error;
    }
  }

  try {
    const edited1 = await edit1();
    console.log("到達しない！");
  } catch(error){
    console.log(`${error.toString()} 2回目`); // "Error: エラーです 2回目"
  }
})()

3. 複数の非同期がある場合

1つの非同期で、2つ（正常、エラー）考えることがありましたが、
複数の非同期がある場合、全てで正常とエラー考慮が必要になってくるので、かなりつらい気持ちになると思います。
しかし残念ながら、複数の非同期をwaitしながら実行したり、エラーになったら後続を止めたかったりするのは、頻出です。

2回非同期をして、結果を使う

結果をわたすときはreturnします、return漏れるとundefinedです。
実はthenはflatMapになっているので、Promiseをreturnしても、result2でPromiseはネストになりません。

// Promise
const pResult1 = Promise.resolve("結果 1回目");

pResult1
  .then(result1 => {
    // 1回目の結果を使って、2回目の非同期をする
    return Promise.resolve(`${result1} 2回目`);
  })
  .then(result2 => {
    // result2はPromiseではない
    console.log(result2); // "結果 1回目 2回目"
  })

// async/await
const pResult1 = Promise.resolve("結果 1回目");

(async () => {
  async function edit1(){
    const result1 = await pResult1;
    return Promise.resolve(`${result1} 2回目`);
  }
  const result2 = await edit1();
  console.log(result2); // "結果 1回目 2回目"
})()

1つ目の非同期でエラーが起きたら、2つ目の非同期は実行しないが、正常系に戻す

returnさえ忘れなければ、おかしな動作はないです。
もし2つ目のPromiseをreturnし忘れ、エラーが発生した場合、catchに入らなくなるので、結構ハマります。

// Promise
const pResult1 = Promise.reject(new Error("エラーです"));

pResult1
  .then(result1 => {
    return Promise.resolve(`${result1} 2回目`);
  })
  .catch(error => {
    return "デフォルト値";
  })
  .then(result2 => {
    console.log(result2); // "デフォルト値"
  })

// async/await
const pResult1 = Promise.reject(new Error("エラーです"));

(async () => {
  async function edit1(){
    const result1 = await pResult1;
    return Promise.resolve(`${result1} 2回目`);
  }

  let result2;
  try {
    result2 = await edit1();
  } catch(error){
    result2 = "デフォルト値";
  }
  console.log(result2); // "デフォルト値"
})()

余談ですが、async/awaitだからといって、try~catch文を使わないといけないわけでは無いです。
Promiseのcatchを混ぜた方が綺麗です。

// async/await + Promise#catch
const pResult1 = Promise.reject(new Error("エラーです"));

(async () => {
  async function edit1(){
    const result1 = await pResult1;
    return Promise.resolve(`${result1} 2回目`);
  }

  const result2 = await edit1().catch(error => "デフォルト値");
  console.log(result2); // "デフォルト値"
})()

window.alert('')

window.alert('表示したい文');

console.log('')

console.log('こんばんは');

変数の宣言 let, const

let name = 'yamada';
console.log(name + 'さん、こんばんは');

条件分岐 if, else if

let num = 60;

if (num % 15 == 0) {
  console.log(num + 'は3と5の倍数です');
} else if (num % 3 == 0) {
  console.log(num + 'は3の倍数です');
} else if (num % 5 == 0) {
  console.log(num + 'は5の倍数です');
} else {
  console.log(num + 'は3の倍数でも、5の倍数でもありません');
}

=>60は3と5の倍数です

*条件式は()内に記述。実行内容は{}で記述。

javascript配列

1.配列の要素取得let list = []

let list = ['Ruby', 'Ruby on Rails', 'JavaScript', 'HTML', 'CSS'];
console.log(list[2]);

=> javascript 

2.配列の要素数取得length

let list = ['Ruby', 'Ruby on Rails', 'JavaScript', 'HTML', 'CSS'];
console.log(list.length);

=> 5

3.配列の要素追加push

let list = ['Ruby', 'Ruby on Rails', 'JavaScript', 'HTML', 'CSS'];
list.push('GitHub');
console.log(list);

4.配列の要素削除pop shift

let list = ['Ruby', 'Ruby on Rails', 'JavaScript', 'HTML', 'CSS'];
list.pop();
console.log(list);

=>最後の要素の'CSS'が削除

let list = ['Ruby', 'Ruby on Rails', 'JavaScript', 'HTML', 'CSS'];
list.shift();
console.log(list);

=>最初の要素の'Ruby'が削除

*Rubyでは取り除く要素数を指定できますが、JavaScriptではできません。

オブジェクト {プロパティ名: '値'}

let obj = { name: 'yamada' };

nameはプロパティ、yamadaは値

繰り返し for

for (let i = 0; i < 繰り返す回数; i = i + 1) {
  // 繰り返す処理の内容
}

関数の定義 function 関数名(引数)

function sayHello(){
  console.log('hello');
}

function sayName(name){
  console.log(name);
}

let myName = 'yamada';
sayHello();
sayName(myName);

=>hello
  yamada

*引数がない場合も()は記述必要

返り値 return

function calc(num1,num2){
  num1*num2;
}

let num1 = 3;
let num2 = 4;
console.log(calc(num1,num2));

=>出力されない

function calc(num1,num2){
  return num1*num2;
}

let num1 = 3;
let num2 = 4;
console.log(calc(num1,num2));

=> returnで返り値を明治。

まず、モーダルを作る場合、部品が何個あるのか考えます。
今回のモーダルウィンドウでいうと、
①モーダルを呼び出すボタン
②モーダルが出てきた際の背景が黒い画像
③モーダルウィンドウ

大きく分けて、この３つが必要となる。

①モーダルを呼び出すボタン

<section class="container">
      <p>ボタンを押すとモーダルウィンドウが開きます</p>
       <button type="button" class="btn">開く</button>
    </section>

②モーダルが出てきた際の背景が黒い画像

<div class="mask" id="blackMask"></div>

③モーダルウィンドウ

<section class="modal" id="">
      <div class="top">
        <h1>Vue.js Modal Window！</h1>
        <input type="text">
      </div>
      <div class="under">
       <button type="button" class="btn">送信</button>
      </div>
    </section>

次にCSSで非表示設定、Javascriptで動きを付けていく

①mask と　modalを非表示にする（CSS）
1.display: none;
2.transform: translateY(150px,-500px);
※モーダルは上から落ちてくる感じにしたいので、translateY(-500px);で上に置いとく
※SCSSの場合は、CSSではなく、IDの方にクラスを付けるため、{}の外側に書く

  const open = document.getElementById('open');
  const idMask = document.getElementById('idmask');
  const idModal = document.getElementById('idmodal');

  open.addEventListener('click', () => {
    idMask.classList.add('active');
    idModal.classList.add('drop');
  });
  idMask.addEventListener('click', () => {
    idMask.classList.remove('active');
    idModal.classList.remove('drop');
  });

基本的には、要素を取得してきてclickイベントで要素の付け外しを行う

おまけ

.modal {
  background: #ffffff;
  width: 200px;
  border-radius: 4px;
  transform: translate(150px,-500px);
  transition: transform 0.4s;

transition: transform 0.4s;を設定してあげることで、上からゆっくりと
モーダルが落ちてくる。

えっ！？ kintone JS SDK が・・・！！？

kintone の主戦場である JavaScript/TypeScript 界隈で kintone とのやりとりをカプセル化・抽象化するツールとして欠かせない存在である kintone JS SDK。

なんといつの間にか deprecated になっていました。

最終バージョンは 0.7.8 と、結局正式版リリースまで到達せず終了と言う事になりそうです。

旧 JS SDK の代替として 2020 年 2 月に @kintone/rest-api-client 正式版がリリースされていました。
Git リポジトリのパスが妙に深いのが気になるところではありますが、執筆時点（2020 年 5 月下旬）では最新版が 1.3.0 まで上がって来ており、一般的な利用の範囲内では旧 JS SDK を置き換えられるものと判断して良いのではないかと思われます。

kintone 開発キットの数奇な運命

思い起こせば kintone の開発キットは波乱含みであったように思います。
時系列で並べてみると、

時期	出来事
2018 年 5 月	kintone API SDK(β) for Node.js（kintone-nodejs-sdk）リリース
2019 年 3 月	kintone JS SDK リリース
2020 年 2 月	kintone JavaScript Client (@kintone/rest-api-client) リリース

なんと！　初代、2 代目と、共に 1 年未満で次期ツールがリリースされると共に deprecated の憂き目を見ています！
短命で知られるジョースター家の男子だってもう少し長生きするよ！と言う感じです。

@kintone/rest-api-client の特徴

新しい SDK、@kintone/rest-api-client はそれ自体が TypeScript で開発されており、旧 JS SDK が抱えていた（そして kintone extension でも解決できなかった）コード補完効かない問題を解決しています。
旧 JS SDK に d.ts ファイルが結局最後まで用意されなかった事を考えれば隔世の感がありますね。

旧 JS SDK では、確か 0.3 から 0.4 へのバージョンアップ時（0.4 から 0.5 の時だったかも）、関数に引数を渡す方式がそれまでの変数の羅列からオブジェクトを引き渡す形式に変わり数字以上の大きな影響がありましたが、@kintone/rest-api-client は初めからオブジェクトを引き渡す形になっています。
まあ昨今の潮流から言っても自然ですね。

他にも、同じ機能を受け持つ関数の名前が変わったり、戻り値の形が変わっていたりと、基本的には「そりゃこうあるべきだろ」と言うポジティブな方向にブラッシュアップされており、旧 JS SDK が抱えていた不自然さがだいぶ改善されています。

と言う事で、この記事では 3 代目ジョジョ、もとい 3 代目 SDK である @kintone/rest-api-client について、旧 JS SDK からの移行と言う観点で各種レコード操作の実際のコードの違いを含めて見ていきたいと思います。

@kintone/rest-api-client を試す

以下の解説では、他の記事 でも解説している kintone 側で用意している雛形アプリの 1 つ「案件管理」アプリを利用しています。
以下のような下処理をやっています。

• アプリを作成時、「サンプルデータを含める」で作成
• 各フィールドのフィールドコードをフィールド名と合わせておく
• プロジェクトは kintone-cli で作成
• 作成したプロジェクトを開き@kintone/rest-api-client をインストール

kintone-cli についてもいつか記事を書きたいと思っています。

さて、プロジェクトの準備ができたら早速動作を見てみます。
良く使う関数類を確かめてみましょう。

なお、確認のために使用したコードは GitHub にアップしています。

レコード 1 件取得・レコード複数取得

getRecord() 及び getRecords() に関しては 旧 JS SDK との間でリクエスト・レスポンスの違いはありませんでした。
クエリの指定の仕方も変わりません。

@kintone/rest-api-clientのgetRecords()

const result = await new KintoneRestAPIClient().record.getRecords({
  app: appId,
  fields: ["レコード番号", "確度", "会社名"],
  query: '確度 in ("A") order by レコード番号 asc',
});

{
  "records": [
    // 省略
  ],
  "totalCount": null
}

レコード一括取得

レコード一括取得は関数名が違います。
旧 JS SDK では getAllRecordsByQuery(), getAllRecordsByCursor() と言う関数名でしたが、@kintone/rest-api-client では目的に応じて getAllRecords(), getAllRecordsWithId(), getAllRecordsWithOffset(), getAllRecordsWithCursor() と 4 つに分かれています。
これらの関数は旧 JS SDK とは渡す引数の構成も違って来ており、単純に関数名を一括置換するだけでは移行できないので注意が必要です。

旧JSSDKのgetAllRecordsByQuery()

const result = await new kintoneJSSDK.Record().getAllRecordsByQuery({
  app: appId,
  fields: ["レコード番号", "確度", "会社名"],
  query: '確度 in ("A") order by レコード番号 asc',
});

@kintone/rest-api-clientのgetAllRecords()

const result = await new KintoneRestAPIClient().record.getAllRecords({
  app: appId,
  fields: ["レコード番号", "確度", "会社名"],
  condition: '確度 in ("A")',
  orderBy: "レコード番号 asc",
});

query の部分が condition に変わっており、order by は orderBy パラメータに切り出す必要があるのが見て取れますね。

ただ、getAllRecordsWithCursor() 関数は、

@kintone/rest-api-clientのgetAllRecordsWithCursor()

const result = await new KintoneRestAPIClient().record.getAllRecordsWithCursor({
  app: appId,
  fields: ["レコード番号", "確度", "会社名"],
  query: '確度 in ("A") order by レコード番号 asc',
});

と、旧 JS SDK の getAllRecordsByCursor() と同じような書き方が出来ます。

レスポンスに関しては、旧 JS SDK が

旧JSSDKのレスポンス

{
  "records": [
    // 省略
  ],
  "totalCount": 10
}

と言う形で返って来るのに対し、@kintone/rest-api-client では

@kintone/rest-api-clientのレスポンス

[
  // 省略
]

と、ちょうど records[] の中身に相当するものだけが返却されます。

従って、旧 JS SDK で getAllRecordsBy****() を使用していた部分は、それなりに慎重に書き換えが必要になります。

レコード 1 件登録

これは両 SDK とも変わりはありません。
レスポンスの形式も同じです。

レコード複数登録

これも両 SDK とも変わりはありません。
100 件までの同時登録が可能と言う仕様も変わりません。

レスポンスは、@kintone/rest-api-client では以下のように

@kintone/rest-api-clientのレスポンス

{
  ids: [ （省略） ],
  records: [ { id: 'xx', revision: 'xxx' }, ... ],
  revisions: [ （省略） ],
}

と、旧 JS SDK にはなかった records[] が含まれるようになっています。
情報としては重複していますが、使い勝手は良くなっていると言えるでしょう。

レコード一括登録

リクエストの形式は変わらず、100 件以上のレコード登録時に利用すると言う目的も同じです。

一方、レスポンスは大きく異なります。

旧 JS SDK では

旧JSSDKのレスポンス

{
  "results": [
    {
      "ids": [ （省略） ],
      "revisions": [ （省略） ]
    },
    ...（省略）
  ]
}

となっていたのに対し、@kintone/rest-api-client では

@kintone/rest-api-clientのレスポンス

{
  "records": [{ "id": "xx", "revision": "xxx" }, ...（省略）]
}

となっています。
addRecords() の records[] のみが取り出された格好です。

addAllRecords() は内部的には bulkRequest API をコールしており、もともとこの API の目的が複数アプリのレコード一括操作であることから、旧 JS SDK では results[] と言う配列に格納されて結果が返される仕様だったわけです。
しかしながら正直なところ SDK の関数を利用する側からすれば無駄に複雑で意味不明に見えるレスポンス形式であったのは否めません。
（addAllRecords() 関数は複数アプリに対してどうこうと言う操作ができるわけではないので）
@kintone/rest-api-client では、この不合理を解決し、あるべき形でレスポンスを戻すようになりました。
非常に使いやすくなったと言える一方、旧 JS SDK からの移行に関しては注意を要する箇所です。

レコード 1 件更新

これは両 SDK とも変わりはありません。
レスポンスの形式も同じです。

レコード複数更新

これも同じ。関数名の書き換えだけで OK です。

なお、@kintone/rest-api-client の updateRecord() 等いくつかの関数では、コード補完で表示されるポップアップの内容に誤りが見られます。

これってどこ由来？と思って GitHub 上の当該ソース や node_modules の d.ts ファイル等を確かめてみたのですが、それらでは本来あるべき値になっている。
どういう理由でここがおかしくなっているのか不明です。
VS Code 側のバグ？筆者の環境だけかしら？

レコード一括更新

上述の レコード一括登録と同様、レスポンスの形が大きく異なります。

旧 JS SDK では

旧JSSDKのレスポンス

{
  "results": [
    {
      "records": [{ "id": "xx", "revision": "xxx" }, ...（省略）]
    },
    ...（省略）
  ]
}

ですが、@kintone/rest-api-client では

@kintone/rest-api-clientのレスポンス

{
  "records": [{ "id": "xx", "revision": "xxx" }, ...（省略）]
}

となります。
旧 JS SDK の results[0] が取り出されて返って来ている格好です。

レコード複数削除

これは両 SDK とも変わりはありません。
レスポンスの形式も同じで、全レコード正常削除できれば {} が返ります。

なお、@kintone/rest-api-client の deleteRecords() や次に触れる deleteAllRecords() は updateRecords() 等と同様コード補完に誤りがあるので注意です。

レコード一括削除

レコード一括削除は両 SDK 間でコンセプトが大きく異なっています。
旧 JS SDK では

旧JSSDKのdeleteAllRecordsByQuery()

const result = await new kintoneJSSDK.Record().deleteAllRecordsByQuery({
  app: appId,
  query: '確度 in ("A")',
});

と言った具合に、クエリで削除対象とする条件を指定する事ができました。
一方 @kintone/rest-api-client では

@kintone/rest-api-clientのdeleteAllRecords()

const result = await new KintoneRestAPIClient().record.deleteAllRecords({
  app: appId,
  records: [{ id: "1" }, { id: "2" }, { id: "3" }],
});

と言った形であくまで ID （とリビジョン）で構成されるオブジェクトの配列で対象を指定する形になります。
@kintone/rest-api-client にはクエリで削除対象を抽出して削除、と言う機能を持つ関数は実装されていません。

これは恐らく、削除対象をクエリで指定すると言うのは kintone 側に対象抽出を丸投げしてしまう事になり、しかもレスポンスにはどのレコードを削除したと言う明確な結果が返って来ない点を不合理だと判断したものと思われます。
そりゃ「削除したいなら削除したいものを明示してくれよ」と要求するのは当然ですよね。
で、その @kintone/rest-api-client で指定する records ですが、これは addRecords() 等で返却される records オブジェクトと同じ形式で、その意味でも @kintone/rest-api-client の考え方には一貫性があります。

戻り値も形式が異なります。

旧 JS SDK では

旧JSSDKのレスポンス

{
  "results": [{}]
}

ですが、@kintone/rest-api-client では

@kintone/rest-api-clientのレスポンス

{}

です。

まとめ

各関数について、単純に置き換え可能か、修正が必要かどうかをまとめると以下のようになります。

処理内容	kintone JS SDK	@kintone/rest-api-client	移行時のコード修正
レコード 1 件取得	getRecord()	getRecord()	不要
レコード複数取得	getRecords()	getRecords()	不要
レコード一括取得（クエリ）	getAllRecordsByQuery()	getAllRecords()	かなり修正が必要（渡す引数と戻り値の形式が異なる）
レコード一括取得（カーソル）	getAllRecordsByCursor()	getAllRecordsWithCursor()	修正が必要（戻り値の形式が異なる）
レコード 1 件登録	addRecord()	addRecord()	不要
レコード複数登録	addRecords()	addRecords()	不要
レコード一括登録	addAllRecords()	addAllRecords()	修正が必要（戻り値の形式が異なる）
レコード 1 件更新	updateRecordById()	updateRecord()	不要
レコード複数更新	updateRecords()	updateRecords()	不要
レコード一括更新	addAllRecords()	addAllRecords()	修正が必要（戻り値の形式が異なる）
レコード複数削除	deleteRecords()	deleteRecords()	不要
レコード一括削除	deleteAllRecordsByQuery()	deleteAllRecords()	かなり修正が必要（関数のコンセプト自体が異なる）

上述の「不要」の部分にしても、

旧JSSDK

const result = await new kintoneJSSDK.Record().getRecords({
  app: appId,
});

を

@kintone/rest-api-client

const result = await new KintoneRestAPIClient().record.getRecords({
  app: appId,
});

と書き換える程度の修正は当然必要ですのでご注意ください。

感想

と言う事で、新たにリリースされたクライアントツールであるところの @kintone/rest-api-client についてざっと見て来ました。
もちろん他にもカーソルだったりコメントであったりの操作もあるので、これで全部と言うわけではありません。異常系のパターンも見てませんしね。

最初の方でも述べましたが、 @kintone/rest-api-client は現時点で既に旧 JS SDK の大部分の機能をカバーしており、新規プロジェクトにおいては旧 JS SDK ではなくこちらをファーストチョイスとして問題ないクォリティでしょう。
一方、既に旧 JS SDK を導入済みのプロジェクトでは、関数の名前や引数、レスポンスの形式がそれなりに異なることから、安易な移行（置き換え）には慎重さが求められそうです。

初めの方に見た通り、kintone の SDK は 2 代連続で 1 年程度で deprecated の憂き目を見ており、当代であるところの 3 代目が来年の夏を無事に迎えられるかは今は判りません・・・が、さすがにそろそろこれが決定版！と言えるようなものになって欲しいなと思います。

kintone は開発者の環境を良くするために様々なツールをリリースする事に非常に積極的で、そのおかげで 開発者ドキュメント を上から下まで全部読み込まなければカスタマイズなんて碌にできません、みたいな時代は既に過ぎ去ったと言えるでしょう。
ただその分、それぞれ個々のツールは若干機能不足が散見されたり、メンテナンスが止まったり、今回のように短期間で代替ライブラリへの移行が発生したりと、どことなくこれらのプロジェクトに関わる全体としてリソースが不足気味なのかなあと感じさせる場面も。
そんなん言うならお前がコントリビューターとして貢献しろよ。って話かも知れませんがね。

と言うわけで @kintone/rest-api-client のざっくりレビューでした！
どちら様も良き kintone ライフを！

参考

kintone JavaScript Client (@kintone/rest-api-client)

JavaScriptとは

JavaScriptとは、プログラミング言語の一つで、1990年代中盤に登場しました。
サイトのプルダウンや画面を更新しないでサーバーと通信したい時に使われます。
略称は、JSです。

HTMLへの導入方法

htmlファイルと同じ階層にJSファイルがある場合htmlファイルに以下のように記述するとJSファイルが読み込まれます。

index.html

<head>
  <script src="script.js"></script>
</head>

headタグ内にある、scriptタグのsrc属性にファイル名を記述します。JSの拡張子は.jsです。

window.alert()

ブラウザにアラートを表示させるメソッドです。
表示させたい値を引数にとります。また、変数でも可能です。

console.log()

ブラウザのコンソールにテキストを表示させるメソッドです。
表示させたい値を引数にとります。また、変数でも可能です。

変数での記述方法は以下になります。

script.js

var team = "鹿島アントラーズ";
console.log( team + "の勝利です。");

コンソールが面に 鹿島アントラーズの勝利です。 が表示されます。

変数宣言について

varはES6バージョンの書き方です。
それ以降の変数宣言の仕方としては。
・let
・const
の二つが用いられます。

letは、後で書き換えられ変数宣言です。
constは、後で書き換えられない変数宣言です。

条件分岐

script.js

let number = 100;
if (number % 15 == 0) {
console.log(number + "は、３と５の倍数です。");
} else if (number % 3 == 0) {
console.log(number + "は、３の倍数です。");
} else if (number % 5 == 0) {
console.log(number + "は、５の倍数です。");
} else {
console.log(number + "は、３の倍数でも、５の倍数でもありません");
}

上記のように記述するとコンソールに、100は、５の倍数です。　と表示されます。
ifの後のカッコ内に条件式を記述します。その条件に当てはまった場合は、波カッコ無いの記述が処理されます。
最初の条件式が偽だった場合は、else if以降に処理が移ります。その条件が真だったら波カッコ内の処理を開始、偽だった場合はさらに次に進みます。elseはどの条件にも当てはまらなかった場合に出力したい処理を記述します。

配列

JSには配列という概念があります。

script.js

let name = ["takuya", "shingo", "tsuyoshi", "masahiro", "GORO"];
console.log(name);

##コンソールでの表示
(5) ["takuya", "shingo", "tsuyoshi", "masahiro", "GORO"]


---------配列の数を取得---------
lengthメソッドを使います。
------------------------------
console.log(name.length);

##コンソールでの表示
5

---------配列の最後に要素を追加---------
pushメソッドを使います。
-------------------------------------
name.push("morikun");
console.log(name);

///"morikun"が追加されます。

##コンソールでの表示
(6) ["takuya", "shingo", "tsuyoshi", "masahiro", "GORO", "morikun"]

---------配列の最後の要素を削除---------
popメソッドを使います。
-------------------------------------
name.pop();
console.log(name);

///"morikun"が削除されます。

##コンソールでの表示
(5) ["takuya", "shingo", "tsuyoshi", "masahiro", "GORO"]

---------配列の最初の要素を削除---------
shiftメソッドを使います。
-------------------------------------
name.shift();
console.log(name);

///"takuya"が削除されます。

##コンソールでの表示
(4) ["shingo", "tsuyoshi", "masahiro", "GORO"]

popメソッドとshiftメソッドに指定して複数の要素を削除することはできません。

オブジェクト

波カッコを使ってオブジェクトを生成します。
{}内に名前と値をセットにして管理します。このセットのことをプロパティと言います。
最初からオブジェクトにプロパティを定義して生成することもできますし、空の波カッコで生成することもできます。

script.js

let takuya = { name: "kimura", age: 40, team: "SMAP" };
console.log(takuya);

###コンソールでの表示
{name: "kimura", age: 40, team: "SMAP"}

///名前がteamにあたる値を取得
console.log(takuya.team);

###コンソールでの表示
SMAP

///名前がageにあたる値を更新
takuya.age = 47;
console.log(takuya.age);

###コンソールでの表示
47

for文

繰り返しの構文です。

for(let i = 0; i < 繰り返す回数; i += 1) {繰り返す処理}と記述します。

script.js

num = 1;
for (let i = 0; i < 10; i += 1) {
console.log(num + "回目の出力になります！");
num += 1;
}

###コンソールでの表示
1回目の出力です。
2回目の出力です。
3回目の出力です。
4回目の出力です。
5回目の出力です。
6回目の出力です。
7回目の出力です。
8回目の出力です。
9回目の出力です。
10回目の出力です。

人工衛星がどの位置にあるのか、mapbox上にパッと表示する方法です。

地図は地理院タイルを利用します。

衛星の位置はTwo Line Elements(TLE)をcelestrakから入手します。

TLEを緯度経度に変換するアルゴリズムは、sgp4が有名です。
このアルゴリズムは観測から15日後の衛星位置を数10km程度の誤差で予測できるすぐれものです。

自前で作ろうと思いましたが、アルゴリズムの中身を見ると精度が良いだけに面倒だったので、素直に既存のライブラリに頼ることにします。
node-sgp4

またユーザがTLEを入力できるようにしたいので、入力値がTLEをとして適切かバリデーションするのにもライブラリをお借りすることにします。
tle-validator

サンプル

デモ

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>TLE</title>

    <script src='https://api.mapbox.com/mapbox-gl-js/v1.9.1/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v1.9.1/mapbox-gl.css' rel='stylesheet' />
    <style>
        #map {
            height: 480px;
        }

        textarea {
            width: 450px;
            height: 3em;
            line-height: 1.5;
            font-size: 12px;
        }

        #error {
            font-size: 10px;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <div style="margin-top: 20px;">
        <textarea id="tle"></textarea>
    </div>
    <div>
        <button id="add">追加</button>
        <p id="error"></p>
    </div>
</body>
<script src='./dist/tle.js'></script>
</html>

import SGP4 from 'sgp4';
import TLEValidator from 'tle-validator';
const simulateUpdateSecond = 60;
const animationDurationMilliSecond = 50;
const maxSecond = 3600 * 24;

const map = new mapboxgl.Map({
    container: "map",
    center: [139.765, 35.65],
    zoom: 1,
    minZoom: 1,
    maxZoom: 8
});

map.addLayer({
    "id": "base/pale",
    "type": "raster",
    "source": {
        type: "raster",
        tiles: [
            "https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png"
        ],
        attribution: "<a href='http: //maps.gsi.go.jp/development/ichiran.html'>地理院タイル</a>",
        tileSize: 256,
        minzoom: 2,
        maxzoom: 8
    }
});


map.on('load', function () {
    document.getElementById("add").addEventListener('click', function () {
        document.getElementById("error").innerText = "";
        let texts = document.getElementById("tle").value.split(/\n/);

        function setAnimation(line1, line2) {

            const satRec = SGP4.twoline2rv(line1, line2, SGP4.wgs84());
            const now = new Date();
            const id = now.getTime();
            const datetime = now;
            const counterclockwise = getAngularVelocity(datetime).z > 0;
            const meanMotion = satRec.no; //rad/min
            const orbitPeriod = 2 * Math.PI / (meanMotion / 60) //sec
            const limitSecond = Math.min(maxSecond, orbitPeriod)

            function getPosition(datetime) {
                //https://github.com/joshuaferrara/node-sgp4/blob/master/example.js
                const positionAndVelocity = SGP4.propogate(satRec, datetime.getUTCFullYear(), datetime.getUTCMonth() + 1, datetime.getUTCDate(), datetime.getUTCHours(), datetime.getUTCMinutes(), datetime.getUTCSeconds());
                const gmst = SGP4.gstimeFromDate(datetime.getUTCFullYear(), datetime.getUTCMonth() + 1, datetime.getUTCDate(), datetime.getUTCHours(), datetime.getUTCMinutes(), datetime.getUTCSeconds());
                const geodeticCoordinates = SGP4.eciToGeodetic(positionAndVelocity.position, gmst);
                const longitude = SGP4.degreesLong(geodeticCoordinates.longitude);
                const latitude = SGP4.degreesLat(geodeticCoordinates.latitude);
                return [longitude, latitude]
            }

            function getAngularVelocity(datetime) {
                const positionAndVelocity = SGP4.propogate(satRec, datetime.getUTCFullYear(), datetime.getUTCMonth() + 1, datetime.getUTCDate(), datetime.getUTCHours(), datetime.getUTCMinutes(), datetime.getUTCSeconds());
                const position = positionAndVelocity.position;
                const velocity = positionAndVelocity.velocity;
                const posLength = Math.sqrt(position.x ** 2 + position.y ** 2 + position.z ** 2);
                const velLength = Math.sqrt(velocity.x ** 2 + velocity.y ** 2 + velocity.z ** 2);
                return {
                    x: (position.y * velocity.z - position.z * velocity.y) / posLength / velLength,
                    y: (position.z * velocity.x - position.x * velocity.z) / posLength / velLength,
                    z: (position.x * velocity.y - position.y * velocity.x) / posLength / velLength
                }
            }

            map.addLayer({
                'id': 'line_' + id,
                'type': 'line',
                'source': {
                    'type': 'geojson',
                    'data': {
                        'type': 'FeatureCollection',
                        'features': [{
                            'type': 'Feature',
                            'geometry': {
                                'type': 'LineString',
                                'coordinates': [
                                    [0, 0]
                                ]
                            }
                        }]
                    }
                },
                'layout': {
                    'line-cap': 'round',
                    'line-join': 'round'
                },
                'paint': {
                    'line-color': '#ed6498',
                    'line-width': 2,
                    'line-opacity': 0.8
                }
            });
            map.addLayer({
                'id': 'point_' + id,
                'source': {
                    'type': 'geojson',
                    'data': {
                        'type': 'Point',
                        'coordinates': [0, 0]
                    }
                },
                'type': 'circle',
                'paint': {
                    'circle-radius': 10,
                    'circle-color': '#007cbf'
                }
            });

            function animate(timestamp) {
                return function () {
                    let datetime = new Date(timestamp)
                    let crossingAntiMeridianNumber = 0;
                    let elapsedSec = 0;

                    let lines = [
                        []
                    ];
                    let before = getPosition(datetime)
                    while (elapsedSec < limitSecond) {
                        let lonlat = getPosition(datetime);
                        if (counterclockwise) {
                            if (lonlat[0] < 0 && before[0] > 0) {
                                const lat = (lonlat[1] - before[1]) / (360 + lonlat[0] - before[0]) * (180 - before[0]) + before[1];
                                lines[crossingAntiMeridianNumber].push([180, lat])
                                lines[++crossingAntiMeridianNumber] = [
                                    [-180, lat]
                                ]
                            }
                        } else {
                            if (lonlat[0] > 0 && before[0] < 0) {
                                const lat = (lonlat[1] - before[1]) / (-360 + lonlat[0] - before[0]) * (-180 - before[0]) + before[1];
                                lines[crossingAntiMeridianNumber].push([-180, lat])
                                lines[++crossingAntiMeridianNumber] = [
                                    [180, lat]
                                ]
                            }
                        }

                        lines[crossingAntiMeridianNumber].push(lonlat);
                        before = lonlat
                        if (elapsedSec < limitSecond / 2)
                            setTimeout(function () {
                                map.getSource('point_' + id).setData({
                                    'type': 'Point',
                                    'coordinates': lonlat
                                });
                            }, 50 * elapsedSec);

                        datetime.setSeconds(datetime.getSeconds() + simulateUpdateSecond)
                        elapsedSec += simulateUpdateSecond;
                    }

                    function createFeature(line) {
                        return {
                            'type': 'Feature',
                            'geometry': {
                                'type': 'LineString',
                                'coordinates': line
                            }
                        }
                    }
                    let geojson = {
                        'type': 'FeatureCollection',
                        'features': lines.map(function (line) {
                            return createFeature(line)
                        })
                    };
                    map.getSource('line_' + id).setData(geojson);
                    setTimeout(animate(datetime.getTime()), animationDurationMilliSecond * elapsedSec / 2);
                }
            }
            animate(now.getTime())();
        }

        if (texts.length > 1 && TLEValidator.validateTLE(texts[0].trim(), texts[1].trim())) {
            setAnimation(texts[0].trim(), texts[1].trim());
            document.getElementById("tle").value = "";
        } else {
            document.getElementById("error").innerText = "フォーマットが正しくありません。"
        }
    })
});

Javascriptはwebpackでコンパイルしています。コンパイルせず使いたい際はライブラリをダウンロードして適宜読み込ませてください。

ロジック

mapboxのAnimate a lineとAnimate a pointをベースに人工衛星特有のロジックを加えています。

function getAngularVelocity(datetime) {
    const positionAndVelocity = SGP4.propogate(satRec, datetime.getUTCFullYear(), datetime.getUTCMonth() + 1, datetime.getUTCDate(), datetime.getUTCHours(), datetime.getUTCMinutes(), datetime.getUTCSeconds());
    const position = positionAndVelocity.position;
    const velocity = positionAndVelocity.velocity;
    const posLength = Math.sqrt(position.x ** 2 + position.y ** 2 + position.z ** 2);
    const velLength = Math.sqrt(velocity.x ** 2 + velocity.y ** 2 + velocity.z ** 2);
    return {
        x: (position.y * velocity.z - position.z * velocity.y) / posLength / velLength,
        y: (position.z * velocity.x - position.x * velocity.z) / posLength / velLength,
        z: (position.x * velocity.y - position.y * velocity.x) / posLength / velLength
    }
}

SGP4.propogateは人工衛星の位置ベクトルと速度ベクトルを返します。
これを使って角速度ベクトルを求め回転方向を判別しています。

const counterclockwise = getAngularVelocity(datetime).z > 0;

経度180度線をまたぐ際はポリゴンを分割しないと表示がおかしなことになってしまうので配列を追加し、線が途切れないように線形補間で180度の点を与えています。

let lonlat = getPosition(datetime);
if (counterclockwise) {
    if (lonlat[0] < 0 && before[0] > 0) {                       
        const lat = (lonlat[1] - before[1]) / (360 + lonlat[0] - before[0]) * (180 - before[0]) + before[1];
        lines[crossingAntiMeridianNumber].push([180, lat])
        lines[++crossingAntiMeridianNumber] = [
            [-180, lat]
        ]
    }
} else {
    if (lonlat[0] > 0 && before[0] < 0) {
        const lat = (lonlat[1] - before[1]) / (-360 + lonlat[0] - before[0]) * (-180 - before[0]) + before[1];
        lines[crossingAntiMeridianNumber].push([-180, lat])
        lines[++crossingAntiMeridianNumber] = [
            [180, lat]
        ]
    }
}

表示はanimationDurationMilliSecond[ms]ごとにsimulateUpdateSecond[s]分進めます。
また軌道の予測線は、軌道maxRev周期またはmaxSecond[s]のより短い分描画します。
予測線は定期的に更新されます（元となるTLEを更新しているわけではないので、当然徐々に誤差が大きくなっていきます）。

const simulateUpdateSecond = 60;
const animationDurationMilliSecond = 50;
const maxSecond = 3600 * 24;
const maxRev = 1;

衛星例

代表的な衛星はこちらにまとめられているので参考にしてください。
国際宇宙ステーションや今流行りのstarlink、
連邦破産法11条の適用申請したonewebを見ることができます。
モルニヤ軌道をとるmolniya衛星なんかも面白いです。

この中に無い衛星のTLEはここで検索します。
例えば「みちびき」を調べたいときは「qzs」で検索すると見つかります。

---

参考
Two-line element set
きどうようそのひみつ