JavaScript on いつかの熊右衛門

JavaScript：テキストをデータ URL にしてダウンロード

Sat, 22 Jun 2024 19:30:51 +0900

以前やった URL.createObjectURL で良いと思いますが、直接作っちゃっても行けたのでメモ。

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>テキストのデータURL例</title>
</head>
<body>
 <span id="dataUrlContainer"></span>

 <script>
 function convertToDataURL(text) {
 const encodedText = encodeURIComponent(text);
 return `data:text/plain;charset=utf-8,${encodedText}`;
 }

 // 使用例
 const plainText = 'Hello World!';
 const dataURL = convertToDataURL(plainText);

 // spanの中にリンクを作成
 const container = document.getElementById('dataUrlContainer');
 const link = document.createElement('a');
 link.href = dataURL;
 link.textContent = 'テキストをダウンロード';
 // ダウンロード時のファイル名
 link.download = 'message.txt';

 container.appendChild(link);
 </script>
</body>
</html>

JavaScript：文字列の先頭と末尾にある指定の文字を削除する

Sat, 11 May 2024 13:58:14 +0900

String.prototype.trim() は対象が空白文字ですが、他の文字を指定したかったときのサンプルです。

/**
 * 文字列の先頭と末尾から指定した文字を削除
 * @param {string} str - 対象の文字列
 * @param {string} charToTrim - 削除する文字
 * @returns {string} 削除後の文字列
 */
function trimSpecificChars(str, charToTrim) {
 const regex = new RegExp(`^[${charToTrim}]+|[${charToTrim}]+$`, 'g');
 return str.replace(regex, '');
}

// 使用例
console.log(trimSpecificChars('!!!Hello, World!!!', '!')); // 出力: "Hello, World"
console.log(trimSpecificChars('???$$$Hello$$$???', '?$')); // 出力: "Hello"
console.log(trimSpecificChars('abcabcabc', 'abc')); // 出力: ""

JavaScript：日付に加算・減算して未来や過去の日付にする【date-fns ライブラリ】

Sat, 16 Sep 2023 22:42:55 +0900

以前に自前で算出しましたが、便利なライブラリがあったのでメモです。
日付に関する多くの機能があるので、自作する機会は無くなるのかもしれません。

日数の加算・減算

import { add, sub } from 'date-fns';
const currentDate = new Date();

// 明日
const tomorrow = add(currentDate, { days: 1 });
console.log(tomorrow);

// 昨日
const yesterday = sub(currentDate, { days: 1 });
console.log(yesterday);

// 来週
const nextWeek = add(currentDate, { weeks: 1 });
console.log(nextWeek);

// 先週
const lastWeek = sub(currentDate, { weeks: 1 });
console.log(lastWeek);

その他

使用率が高そうな関数のメモ。

日付のフォーマット

import { format } from 'date-fns';

const formattedDate = format(currentDate, 'yyyy/MM/dd');
// "2023/09/16"

2つの日付の日数差

import { differenceInDays } from 'date-fns';

console.log(differenceInDays(tomorrow, lastWeek));
// 8

月の終わり

import { endOfMonth } from 'date-fns';

console.log(endOfMonth(currentDate));
// 2023-09-30T14:59:59.999Z
// currentDate は 2023-09-16
// 時刻は日本時間23:59:59が返ってきた

JavaScript：日付に加算・減算して未来や過去の日付にする

Sat, 02 Sep 2023 14:58:04 +0900

ある日付の数日前、数日後といった日付を得たいことがあったので、そのメモです。

※ 便利な date-fns ライブラリがあったので、そちらについては別で投稿しました。

日数の加算・減算

getDate の結果に加算・減算して、setDate します。

// 明日
var currentDate = new Date();
currentDate.setDate(currentDate.getDate() + 1);
console.log(currentDate);

// 昨日
var currentDate = new Date();
currentDate.setDate(currentDate.getDate() - 1);
console.log(currentDate);

月数の加算・減算

getMonth の結果に加算・減算して、setMonth します。

// 来月
var currentDate = new Date();
currentDate.setMonth(currentDate.getMonth() + 1);
console.log(currentDate);

// 先月
var currentDate = new Date();
currentDate.setMonth(currentDate.getMonth() - 1);
console.log(currentDate);

月末の日付を使う場合は、用途に合っているか注意した方が良さそうです。

var currentDate = new Date('2023-01-31');
currentDate.setMonth(currentDate.getMonth() + 1);
console.log(currentDate);
// 結果： Fri Mar 03 2023 09:00:00 GMT+0900 (日本標準時)

月末の日付を得るなら、月初めー 1日で計算するなどでしょうか。

JavaScript：デバッグで良く使うコードを使い回すには

Sat, 12 Mar 2022 18:09:47 +0900

Chrome の DevTools でデバッグなどをしているとき、頻繁に実行するコードがある場合はスニペットが便利です。

環境

Google Chrome バージョン: 99.0.4844.51

使用例

次の様にデータをファイルにダウンロードできるようにします。

const data = ({ id: 1, name: "kuma", site: "kuma-emon.com" });
console.save(data, "data.json");

次のファイルがダウンロードされます。
保存したいデータが小さければコピペが楽ですが、大きくなると辛いですよね。

{
 "id": 1,
 "name": "kuma",
 "site": "kuma-emon.com"
}

console.save というメソッドはデフォルトでは存在しません。
事前にスニペットに登録したコードを実行して使えるようにしています。
コードは devtools-snippets の console-save から拝借しました。

スニペットにコードを保存する

DevTools で次のようにします。

「ソース」を選択
「スニペット」を選択（ない場合は [»] をクリックした中にあるはず）
「新しいスニペット」をクリック
スニペットの名前を入力
コードを入力
「Ctrl」+ S（Windows）または「Command」+ S（Mac）で保存

スニペットを実行する

DevTools で「Ctrl」+ O（Windows）または「Command」+ O（Mac）でコマンドメニューを開き、「!」の後にスニペット名を入力します。

実行後から、console.save が使えるようになります。

JavaScript：データ（オブジェクト）をディープコピーする

Sat, 05 Feb 2022 20:00:48 +0900

”データ（オブジェクト）”としているのは、

オブジェクトにすると話が広がる（ function や getter / setter 等も含むよね）
そういったオブジェクトをディープコピーする機会に会ったことがない

からです。で、どうするかですが、

structuredClone を使う (2022/04/12追記)
使える環境でサポート対象の型のデータなら、これが良さそうです。
以下の話は、使えなかったときの参考になれば、ぐらいしょうか。。
ライブラリが使える環境であればそれを頼る
JSON.parse、JSON.stringify でコピーしても問題ないデータであるなら使う

かなと思います。そして避けるのは、

Objects.assign を使う

でしょうか。説明を読むと勘違いしそうですが、シャローコピーなので駄目でしょう。
ということで、それぞれどんな感じか見ていきたいと思います。
ライブラリは以下を試してみます。

コピー元のデータ

以下のデータを例に試します。

 const data = {
 n: 1,
 s: 'abc',
 d: new Date('2022-01-01T00:00:00Z'),
 u: undefined,
 o: {
 n: 2,
 s: 'def',
 d: new Date('2022-01-02T00:00:00Z'),
 u: undefined,
 }
 };

jQuery ライブラリを使う

import $ from 'jquery';

const j = $.extend(true, {}, data);
console.log(j);

コンソールに出力される結果は、

ということで、undefined だった data.u、data.o.u が消失していますね。
使用するなら許容できるか検討が必要ですが、私自身が使う範囲では問題にならないと思いました。

lodash ライブラリを使う

import _ from 'lodash';

const l = _.cloneDeep(data);
console.log(l);

コンソールに出力される結果は、

同じですね。

angular ライブラリを使う

import angular from 'angular';

const a = angular.copy(data);
console.log(a);

コンソールに出力された結果は、lodash と同じだったので割愛します。

JSON.parse、JSON.stringify を使う

const s = JSON.parse(JSON.stringify(data));
console.log(s);

コンソールに出力される結果は、

日付が文字列になった（s.d、s.o.d）
undefined が消失した（s.u、s.o.u）

ということで、こちらも使う場合は許容できるか検討が必要でしょう。
数値や文字列でない型が含まれるデータで使うとハマるかもしれません。

Objects.assign を使う

シャローコピーなことを後で確認する為に、Objects.assign も使ってみます。

const o = Object.assign({}, data);
console.log(o);

コンソールに出力される結果は、

と一見良さそうですが、コピー先は以下と同様でディープコピーになっていません。

const o = { ...data };

ディープコピーされているか

コピー元のデータを更新した後、コピー先のデータをそれぞれ出力してみます。
結果はコメントに記載しました。

data.o.n = 9;
console.log(j); // j.o.n = 2 : jquery
console.log(l); // l.o.n = 2 : lodash
console.log(a); // a.o.n = 2 : angular
console.log(s); // s.o.n = 2 : JSON.stringify, JSON.parse
console.log(o); // o.o.n = 9 : Objects.assign

ということで、Objects.assign 以外は大丈夫ですね。
Objects.assign の場合、コピー先を変えたつもりがコピー元も変わるので、勘違いして使っているとハマるかもしれません。

o.o.n = 7;
console.log(data); // data.o.n = 7

ということで、どれを選択するにしても、コピー対象のデータで問題ないか検討してからの方が良いでしょう。

JavaScript：Array のメソッドを連続で使う

Sat, 29 Jan 2022 11:27:19 +0900

リストを操作して結果を得るときに、メソッドを繋げて処理する話です。
例えば以下の様に filter して map するといった事です。
分かっている方はそっと閉じてください。。

const data = [
 { id: 1, name: '佐藤', scores: { a: 10, b: 20, c: 30 } },
 { id: 2, name: '鈴木', scores: { a: 11, b: 21, c: 31 } },
 { id: 3, name: '高橋', scores: { a: 12, b: 22, c: 32 } },
 { id: 4, name: '田中', scores: { a: 13, b: 23, c: 33 } },
 { id: 5, name: '渡辺', scores: { a: 14, b: 24, c: 34 } },
];

// b のスコアが偶数の人の名前と b のスコアを得る
const ret = data
 .filter((item) => item.scores.b % 2 === 0)
 .map((item) => ({ name: item.name, b: item.scores.b }));

// ret に入る結果
// [
// { name: '佐藤', b: 20 },
// { name: '高橋', b: 22 },
// { name: '渡辺', b: 24 },
// ]

filter と map メソッドを使わなかったら

この場合、以下の感じでしょうか。

const ret = [];
for (let item of data) {
 if (item.scores.b % 2 === 0) {
 ret.push({ name: item.name, b: item.scores.b });
 }
}

filter と map メソッドを別にしたら

const temp = data.filter((item) => item.scores.b % 2 === 0);
const ret = temp.map((item) => ({ name: item.name, b: item.scores.b }));

filter で得た temp を他で使うことが無ければ、分ける理由が無いですね。

連続で使ってソートもしてみる

結果の並びを、b のスコアが高い順にしてみます。

const ret = data
 .filter((item) => item.scores.b % 2 === 0)
 .map((item) => ({ name: item.name, b: item.scores.b }))
 .sort((item1, item2) => item2.b - item1.b);

// ret に入る結果
// [
// { name: '渡辺', b: 24 },
// { name: '高橋', b: 22 },
// { name: '佐藤', b: 20 },
// ]

1行で書けますが、メソッド毎に改行すると読みやすいです。
慣れないうちは記述しづらいと思いますが、慣れれば楽に処理できて読みやすいと感じると思います。

経度緯度の２点間の距離を求めるには

Sat, 04 Dec 2021 18:25:01 +0900

.NET Framework の GeoCoordinate クラスを使う

2023/03/11：別投稿を作成しました。

C# など、.NET Framework が使える場合は、GeoCoordinate クラスの GetDistanceTo メソッドが便利です。
GeoCoordinate が System.Device.Location のクラスなので NuGet で追加しましたが、複数見つかるんですね。
使ったのはこれなんですが、良かったのかどうか。。

using System;
using System.Device.Location;

namespace Haversine
{
 class Program
 {
 static void Main(string[] args)
 {
 var latTokyo = 35.6809591;
 var lonTokyo = 139.7673068;
 var latOsaka = 34.7055051;
 var lonOsaka = 135.4983028;

 var distance = new GeoCoordinate(latTokyo, lonTokyo).GetDistanceTo(new GeoCoordinate(latOsaka, lonOsaka));

 // 403110.29750609986m
 Console.WriteLine($"{distance}m");
 }
 }
}

MSDN の注釈には以下の記載がありました。違和感があるのは機械翻訳からでしょうか。

Haversine 式は、距離を計算するために使用されます。 Haversine 式は地球の惑星を表しますが、楕円体ではなく球面地球を想定しています。距離が長い場合、Haversine 式では 0.1% 未満のエラーが発生します。

高度は距離の計算には使用されません。

https://docs.microsoft.com/ja-jp/dotnet/api/system.device.location.geocoordinate.getdistanceto?view=netframework-4.8#System_Device_Location_GeoCoordinate_GetDistanceTo_System_Device_Location_GeoCoordinate_

Haversine 式なるもので計算できるようですね。

haversine-distance パッケージを使う

Haversine で探すと JavaScript で使える haversine-distance パッケージがありました。

const haversine = require('haversine-distance');

const tokyo = { latitude: 35.6809591, longitude: 139.7673068 };
const osaka = { latitude: 34.7055051, longitude: 135.4983028 };

// 403213.7855570708
console.log(haversine(tokyo, osaka));

結果の差は計算途中の誤差でしょうか。

URLSearchParams なら RFC3986 に準拠すると思ったら微妙だった

Sat, 06 Nov 2021 20:44:00 +0900

qs 使えば RFC3986 の予約文字がエンコードされるのは確認できたのですが、今どきのブラウザなら URLSearchParams が使えるらしい。
パッケージ無く行けるなら楽ですよね。試しに大丈夫なのか DevTools のコンソール（Chrome 95.0.4638.69）で試してみました。

・・・アスターリスク(*)だけそのままですね。
どうやら application/x-www-form-urlencoded のエンコードになるようですが、

[URLSearchParams](https://url.spec.whatwg.org/#urlsearchparams) objects will percent-encode anything in the application/x-www-form-urlencoded percent-encode set, and will encode U+0020 SPACE as U+002B (+).

https://url.spec.whatwg.org/#interface-urlsearchparams

The application/x-www-form-urlencoded percent-encode set contains all code points, except the ASCII alphanumeric, U+002A (*), U+002D (-), U+002E (.), and U+005F (_).

https://url.spec.whatwg.org/#application-x-www-form-urlencoded-percent-encode-set

の様に記載があるので、特に準拠するRFCは無いんでしょうか？
確かにエクスクラメーションマーク(!) などはエンコードされたので RFC2396 とは別っぽいんですよね。

ただ、MDN に encodeURIComponent を使って対応する例がありました。

// https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent
function fixedEncodeURIComponent(str) {
 return encodeURIComponent(str).replace(/[!'()*]/g, function(c) {
 return '%' + c.charCodeAt(0).toString(16);
 });
}

URLSearchParams なら以下の感じでしょうか。
アスターリスクだけで良いのか確証が持てませんが。

function fixedURLSearchParams(obj) {
 return new URLSearchParams(obj)
 .toString()
 .replace(/[*]/g, function(c) {
 return '%' + c.charCodeAt(0).toString(16);
 });
}

今の所、qs にしておいた方が良さそうですね。

RESTful API のパラメータを変えての実行にも DevTools が便利でした

Sat, 30 Oct 2021 20:33:00 +0900

RESTful API のパラメータを変えて実行したいとき、

curl コマンドでゴリゴリ書いて実行する
REST Client 拡張機能で VS Code から実行する

といったものがありますね。特に REST Client 拡張機能は便利です。
ただ、ログインしていないと実行できない API の場合は、Cookie などで認証済みであることを示す必要があって少し厄介です。
Chrome の DevTools なら、その場合でも比較的簡単に実行できるので紹介します。

DevTools を開く

Chrome のメニューから「その他のツール」-「デベロッパーツール」で開くか、キー入力で

Windows なら Ctrl + Shift + I または F12
Mac なら ⌥⌘I または F12

すると DevTools が開くので、「ネットワーク」タブを選択します。

該当の API を実行して、そのソースコードを取得する

ブラウザを操作して、対象の API が実行されるまで進めます。
今回は例として「POST /api/v1/save/」という架空の API を例にします。
実行した API を右クリックして「コピー」-「fetch としてコピー」を選択すると、実行する API をコードで取得できます。

API を実行する

コードをコピーしたら、後は「コンソール」タブで貼り付けて実行するだけです。
Cookie 等の記述はありませんが、リクエストには出力されます。

パラメータを変更して実行してみる

コードが得られれば、後は好きなように変更してみます。
今回は以下の前提と変更方針でしてみます。

前提：/api/v1/save のレスポンスは json で { stationId: ‘xxx’ } といった応答を返す。
変更方針：API が返した stationId を、次に実行するときのパラメータに使う。

async function execApi(stationId) {
 const nextStationId = await fetch("http://localhost:3000/api/v1/save/", {
 "headers": {
 "accept": "application/json, text/plain, */*",
 "accept-language": "ja,en-US;q=0.9,en;q=0.8",
 "content-type": "application/json",
 "sec-ch-ua": "\"Google Chrome\";v=\"95\", \"Chromium\";v=\"95\", \";Not A Brand\";v=\"99\"",
 "sec-ch-ua-mobile": "?0",
 "sec-ch-ua-platform": "\"macOS\"",
 "sec-fetch-dest": "empty",
 "sec-fetch-mode": "cors",
 "sec-fetch-site": "same-origin"
 },
 "referrer": "http://localhost:3000/",
 "referrerPolicy": "strict-origin-when-cross-origin",
 "body": `{\"data\":[{\"stationId\":\"${stationId}\"]}`,
 "method": "POST",
 "mode": "cors",
 "credentials": "include"
 }).then(async res => await res.json().then(data => data.stationId));
 return nextStationId;
}

async function main() {
 const nextStationId = await execApi('001');
 await execApi(nextStationId);
}

main();

というようにコードで書けるので、API の結果をパラメータに使って再実行したいといったことも簡単です。
他にも、POST や PUT でデータ登録できる API があるとき、ダミーの連番データを一括登録する、といった場合も便利そうです。

axios でURLパラメータのエンコード処理を変更するには

Sat, 23 Oct 2021 20:16:00 +0900

なぜエンコード処理を変更するのか？
→ RFC3986の予約文字が、いくつかエンコードされないから。

ということで、実際に axios で試してみた要求がこちら。

axios.get('/test', { params: { a: ":/?#[]@!$&'()*+,;=" } });

結果がこちら。

/test?a=:%2F%3F%23[]%40!$%26%27()*%2B,%3B%3D

エンコードされていない文字（:[]!$()*,）がありますね。
こうなっている背景が確認できていませんが、対策しないまま受け付けてくれないサーバーがあったとしても、基本的には違反しているクライアント側（axiosを使っている側）が直すことになるんじゃないかと思います。
そして、axios側はエンコード処理を設定できるようにしてくれているので、その部分を設定すれば OK です。

ということで、axios 0.23.0 で試してみました。
要求毎に設定するとメンテナンス性が下がるので、ログの場合と同様に共通化で対応します。

qs を使う

qs 6.10.1 で試してみました。
デフォルトは RFC3986 に従い、オプションで RFC1738 にできます。

import axios from 'axios';
import qs from 'qs';

function paramsSerializer(params: any) {
 return qs.stringify(params);
// return qs.stringify(params, { format: 'RFC1738' });
}

axios.interceptors.request.use(
 config => ({
 ...config,
 paramsSerializer,
 }),
);

結果は以下の通り、エンコードされました。

/test?a=%3A%2F%3F%23%5B%5D%40%21%24%26%27%28%29%2A%2B%2C%3B%3D

jQuery を使う

ついでに jQuery 3.6.0 でも試してみました。
想定する用途が違うからか、何文字かエンコードされなかったので、qs にしておけば良さそうです。

import $ from 'jquery';

function paramsSerializer(params: any) {
 return $.param(params);
}

axios.interceptors.request.use(
 config => ({
 ...config,
 paramsSerializer,
 }),
);

結果は

/test?a=%3A%2F%3F%23%5B%5D%40!%24%26%27()*%2B%2C%3B%3D

axios で要求/応答のログ出力を共通化するには

Sat, 16 Oct 2021 19:19:03 +0900

予め axios.interceptors.request.use、axios.interceptors.response.use を設定すれば OK です。

import axios from 'axios';

axios.interceptors.request.use(
 config => {
 const {
 method,
 url,
 } = config;
 const {
 params = config.params,
 data,
 } = config.data || {};
 console.log(method, url, params, data);
 return config;
 });

axios.interceptors.response.use(
 res => res,
 err => {
 const {
 config,
 response,
 } = err;
 const {
 method,
 url,
 } = config || {};
 if (response) {
 const {
 status,
 statusText,
 data,
 } = response;
 console.log(method, url, status, statusText, data);
 }
 else {
 console.log(method, url, err.toString());
 }
 return Promise.reject(err);
 });

要求のログ出力（4〜13行目）、失敗のログ出力（20〜38行目）をしています。
正常なレスポンスならログ出力も不要かと思うので、何もしていません。（18行目）

JavaScript で HTML タグを取り除くには

Sat, 18 Sep 2021 20:34:00 +0900

jQuery を使う

jQuery が使える環境であれば簡単です。

$(`<div>${"タグを含む文字列"}</div>`).text()

とすればタグを取り除けます。
なので、

import $ from 'jquery';

const html = `
<div>
<span>テスト</span>
<div>
<span>何をしているか<a href="/posts/it/pc/1931/" target="_blank">詳細はこちら</a></span>
</div>
</div>
`;

console.log($(`<div>${html}</div>`).text());

としたときのコンソール出力は


テスト

何をしているか詳細はこちら

となります。

※ img など、更にリソースを取得するタグの場合は、そのリソースの読み込みはされるので、先に別途対処した方が良いかも。

サーバーサイドでやりたいときは

サーバーサイドの場合、jsdom でDOMを用意します。

import { JSDOM } from 'jsdom';
import jquery from 'jquery';

const dom = new JSDOM('<html><body></body></html>');
const $ = jquery(dom.window);

const html = `
<div>
<span>テスト</span>
<div>
<span>何をしているか<a href="/posts/it/pc/1931/" target="_blank">詳細はこちら</a></span>
</div>
</div>
`;

console.log($(`<div>${html}</div>`).text());

JavaScript のループ内で await したい

Sat, 14 Aug 2021 20:14:00 +0900

いきなりタイトルに反しますが、大抵 ESLint の no-await-in-loop や no-restricted-syntax の対象になるので、並列に処理して問題無い場合は Promise.all を使い、ループ内の await を避けるリファクタリングをしましょう。

forEach では await が使えない

まず、Array.prototype.forEach によるループで await は諦めましょう。
MDN の解説にあるコード例の通り、await しても意図した動作になりません。

実行する非同期処理

挙動を確認する非同期処理は次の通り。

非同期処理の開始時にコンソール出力
非同期処理が完了後（指定時間経過後）にコンソール出力
非同期処理の結果として、現在待った時間と、次に待つ時間を返す

という、順次実行する必要がある（並列に処理できない）場合を考えてみます。

const asyncSub = (n) => new Promise((resolve) => {
 console.log(`${n} start.`);
 setTimeout(() => {
 console.log(`${n} resolve.`);
 resolve({ current: n, next: n - 3 });
 }, n);
});

期待する挙動

まずは期待する処理をループ無しで実行してみます。

const exec = async () => {
 const r1 = await asyncSub(8);
 console.log(`${r1.current} end.`);

 const r2 = await asyncSub(r1.next);
 console.log(`${r2.current} end.`);

 const r3 = await asyncSub(r2.next);
 console.log(`${r3.current} end.`);
};
exec();

結果は当然期待どおり、順番に処理されます。

8 start.
8 resolve.
8 end.
5 start.
5 resolve.
5 end.
2 start.
2 resolve.
2 end.

then で処理する

いきなりループ内でも await でも無いんかい。
まぁ、処理がループしてますので。
await は…できてません。
結果自体は期待通りですが、読みやすさは今ひとつ。

const exec = (n) => {
 asyncSub(n)
 .then((r) => {
 console.log(`${r.current} end.`);
 if (r.next > 0) {
 exec(r.next);
 }
 });
};
exec(8);

while で処理する

結果は期待通りですが、ESLint で no-await-in-loop の対象になるので、コメントで指摘を除外します。
ESLint のドキュメント上も、このように順序が関係するループなら除外してOKの様です。

When Not To Use It
In many cases the iterations of a loop are not actually independent of each-other. For example, the output of one iteration might be used as the input to another. Or, loops may be used to retry asynchronous operations that were unsuccessful. Or, loops may be used to prevent your code from sending an excessive amount of requests in parallel. In such cases it makes sense to use await within a loop and it is recommended to disable the rule via a standard ESLint disable comment.

(多くの場合、ループの反復は実際には互いに独立していません。たとえば、ある反復の出力が別の反復への入力として使用される場合があります。または、ループを使用して、失敗した非同期操作を再試行することもできます。または、ループを使用して、コードが過剰な量のリクエストを並行して送信するのを防ぐことができます。このような場合await、ループ内で使用するのが理にかなっており、標準のESLint無効化コメントを使用してルールを無効にすることをお勧めします。by Google翻訳)

https://eslint.org/docs/rules/no-await-in-loop

const exec = async () => {
 let s = ({ next: 8 });
 while (s.next > 0) {
 // eslint-disable-next-line no-await-in-loop
 s = await asyncSub(s.next);
 console.log(`${s.current} end.`);
 }
};
exec();

for で処理する

while と変わりません。

const exec = async () => {
 for (let s = ({ next: 8 }); s.next > 0;) {
 // eslint-disable-next-line no-await-in-loop
 s = await asyncSub(s.next);
 console.log(`${s.current} end.`);
 }
};
exec();

for await で処理する(1)

結果は期待通りですが、イテレータを作る労力や、前の非同期処理の結果を引き継ぐ部分も微妙ですし、ESLint に no-restricted-syntax の対象になります。
for で処理した方が分かりやすいですね。for await の良い使い所って何なんだろうか。

const exec = async () => {
 let n = 8;
 const asyncIterable = {
 [Symbol.asyncIterator]() {
 return {
 next() {
 if (n > 0) {
 return asyncSub(n)
 .then((r) => ({ value: r, done: false }));
 }
 return Promise.resolve({ done: true });
 },
 };
 },
 };
 for await (const r of asyncIterable) {
 n = r.next;
 console.log(`${r.current} end.`);
 }
};
exec();

Promise.all で処理する

基本的にはコレに置き換えられないか考えることになると思いますが、

前の非同期処理の結果に関係なく用意できて
並列に実行されても良く
全非同期処理の完了後に結果が処理できれば良い

必要があるので、今回例にした非同期処理では無理です。

const exec = async () => {
 const procs = [8, 5, 2]
 .map((n) => asyncSub(n));
 const ret = await Promise.all(procs);
 ret.map(r => console.log(`${r.current} end.`));
};
exec();

結果は次の通り、並列に処理されてますね。

8 start.
5 start.
2 start.
2 resolve.
5 resolve.
8 resolve.
8 end.
5 end.
2 end.

処理が済んだものから結果を返して終わってます。
結果の処理は、全ての非同期処理結果が終わってからになっています。

for await で処理する(2)

次のようにした for wait は Promise.all と「結果は同じ」でした。
ESLint で no-restricted-syntax を指摘されるので Promise.all が良いでしょう。
というか「結果が同じ」になることが分かりづらいので、Promise.all にした方が良いでしょう。
どの辺りを分かりづらく感じるかというと

非同期処理が並列に実行される
→ 非同期処理を配列に用意している時点から非同期処理は始まっている
全非同期処理が済んでから結果が処理される（ループ内の処理がされる）

所です。

const exec = async () => {
 const procs = [8, 5, 2]
 .map((n) => asyncSub(n));
 for await (const r of procs) {
 console.log(`${r.current} end.`);
 }
};
exec();

非同期処理を await で待つとき、ループなどで勘違いを起こさないようにしたいですね。

プロを目指す人のためのTypeScript入門 (Amazon)

propsの型で楽する

Sat, 19 Jun 2021 20:38:00 +0900

props の型を定義するとき、

組み込み要素の props を引き継ぐ
不適切な props 値を設定できないようにする

際に参考になりそうな事を記載します。

組み込み要素の props を自身のコンポーネントに加える

htmlの要素が持つ pops を自身が作成するコンポーネントでも使うとき、ひとつひとつ定義すると大変なことになりますよね。
そういうときは、JSX.IntrinsicElements が便利です。

例えば、自身が作成するコンポーネントで button を使っていて、button が持つ props を受け取れることを定義したいときは、

type MyButtonProps = JSX.IntrinsicElements['button'];

とすればOKです。自身のコンポーネント用に expanded: boolean という props があるなら、

type MyButtonProps = {
 expanded: boolean;
} & JSX.IntrinsicElements['button'];

という形で定義できます。

props に設定が間違っている事が分かるようにする

props の定義で、組み合わせできない props の値が設定されても、エラーで気が付けるようにできます。
少し長いですが以下の様な形です。

import React from 'react';

type BaseProps = {
 label: string;
}

type OrderedProps = {
 listType: 'ordered';
 listStyle: 'decimal' | 'cjk-decimal' | 'upper-roman';
} & BaseProps
 & JSX.IntrinsicElements['ol'];

type UnorderedProps = {
 listType: 'unordered';
 listStyle: 'none' | 'disc' | 'circle' | 'square';
} & BaseProps
 & JSX.IntrinsicElements['ul'];

type Props = OrderedProps | UnorderedProps;

export default function MyList(props: Props) {
 const {
 label,
 listStyle,
 children,
 ...otherProps
 } = props;

 let listEl = <></>;
 if (props.listType === 'ordered') {
 listEl = <ol
 style={{ listStyleType: listStyle }}
 {...(otherProps as JSX.IntrinsicElements['ol'])}
 >{children}</ol>;
 }
 if (props.listType === 'unordered') {
 listEl = <ul
 style={{ listStyleType: listStyle }}
 {...(otherProps as JSX.IntrinsicElements['ul'])}
 >{children}</ul>;
 }
 return (
 <div>
 <div>{label}</div>
 {listEl}
 </div>
 );
}

listType が

‘ordered’ なら、listStyle に使えるのは ‘decimal’, ‘cjk-decimal’, ‘upper-roman’
‘unordered’ なら、listStyle に使えるのは ’none’, ‘disc’, ‘circle’, ‘square’

となるので、違っている場合は指摘されます。

Visual Studio Code 上なら、
listType が ‘ordered’ なら、
listStyle に ’none’ は使えないので、
MyList に波線が付いて、間違っていることが分かります。

type として OrderedProps と UnorderedProps を定義して Props はそのどちらかとすることで、できない組み合わせを設定されたときでも間違いに気づけます。

type Props = OrderedProps | UnorderedProps;

VSCode で props のサジェストも追随してくれると更に楽なんですが、そこまで判断はされませんでした。

sqlite3 の SQL で名前付きパラメーターを使うには

Fri, 11 Jun 2021 20:02:00 +0900

SQL で値をバインドするとき、よく見るかける例ではプレースホルダーを ? にしていますが、名前付きパラメーターで記述した方が可読性も良く、その後のメンテナンスも楽です。

環境

SQLite Version 3.32.3
Node.js Version 16.3.0
sqlite3 Version 5.0.2

名前付きパラメーターを使ったとき

SQL の記述で、パラメーターで渡したい値に $ で始まる変数名を使い、その名前で値をバインドします。

const sqlite3 = require('sqlite3').verbose();
const db = new sqlite3.Database(':memory:');
const sql = `
INSERT INTO users(id, name, email, address)
VALUES($id, $name, $email, $address)
ON CONFLICT(id)
DO UPDATE SET
 name = $name,
 email = $email,
 address = $address
;`;
db.serialize(function () {
 const stmt = db.prepare(sql);
 const params = {
 $id: 'kuma',
 $name: 'kuma emon',
 $email: 'master@kuma-emon.com',
 $address: 'kuma 1-2-3',
 };
 stmt.run(params);
 stmt.finalize();
});
db.close();

＄と : と @ を使うことができますが、公式は $ を勧めています。

Named parameters can be prefixed with :name, @name and $name. We recommend using $name since JavaScript allows using the dollar sign as a variable name without having to escape it.

https://github.com/mapbox/node-sqlite3/wiki/API#databaserunsql-param--callback

名前付きパラメーターを使わなかったとき

プレースホルダーを ? で記述したときは、次のようになります。

const sqlite3 = require('sqlite3').verbose();
const db = new sqlite3.Database(':memory:');
const sql = `
INSERT INTO users(id, name, email, address)
VALUES(?, ?, ?, ?)
ON CONFLICT(id)
DO UPDATE SET
 name = ?,
 email = ?,
 address = ?
;`;
db.serialize(function () {
 const stmt = db.prepare(sql);
 const params = [
 'kuma',
 'kuma emon',
 'master@kuma-emon.com',
 'kuma 1-2-3',
 'kuma emon',
 'master@kuma-emon.com',
 'kuma 1-2-3',
 ];
 stmt.run(params);
 stmt.finalize();
});
db.close();

名前付きパラメーターの良さが分かる

SQL文と渡すパラメーターを比較すると、名前付きパラメーターの良さが分かります。

 // 名前付きパラメーター
 // INSERT INTO users(id, name, email, address)
 // VALUES($id, $name, $email, $address)
 // ON CONFLICT(id)
 // DO UPDATE SET
 // name = $name,
 // email = $email,
 // address = $address;
 const params = {
 $id: 'kuma',
 $name: 'kuma emon',
 $email: 'master@kuma-emon.com',
 $address: 'kuma 1-2-3',
 };

 // 名前付きパラメーターでない
 // INSERT INTO users(id, name, email, address)
 // VALUES(?, ?, ?, ?)
 // ON CONFLICT(id)
 // DO UPDATE SET
 // name = ?,
 // email = ?,
 // address = ?;
 const params = [
 'kuma',
 'kuma emon',
 'master@kuma-emon.com',
 'kuma 1-2-3',
 'kuma emon',
 'master@kuma-emon.com',
 'kuma 1-2-3',
 ];

名前付きパラメーターを使わなかった場合、プレースホルダーの順に値を渡すようになり、

順番通りに値を渡す必要がある
→ パラメーターが増減するような変更が SQL にあったときに注意が必要
同じ変数も、現れる順番に渡す必要がある
→ INSERT と UPDATE で同じ変数なのに、それぞれで指定が必要

というように名前付きパラメーターの方が、可読性とメンテナンスの面で優れています。

javascript でテキストをファイルにダウンロードするには

Wed, 02 Jun 2021 20:11:12 +0900

サーバーから受け取ったデータを、テキストやCSVにしてローカルにダウンロードしたいときのコードになります。

サンプル

<html>
<head>
	<meta charset="utf-8" />
	<script>
function downloadText(fileName, text) {
 const blob = new Blob([text], { type: 'text/plain' });
 const aTag = document.createElement('a');
 aTag.href = URL.createObjectURL(blob);
 aTag.target = '_blank';
 aTag.download = fileName;
 aTag.click();
 URL.revokeObjectURL(aTag.href);
}
	</script>
</head>
	<body>
		<button onClick='downloadText("sample.txt", "一富士二鷹三茄子")'>text download</button>
	</body>
<html>

動作は Chrome 91、Safari 14.1.1 で確認しました。

解説

<button onClick='downloadText("sample.txt", "一富士二鷹三茄子")'>text download</button>

ボタンをクリックしたとき、“一富士二鷹三茄子"というテキストを、「sample.txt」ファイルでダウンロードするように、downloadText 関数を呼び出します。

function downloadText(fileName, text) {
 const blob = new Blob([text], { type: 'text/plain' });
 const aTag = document.createElement('a');
 aTag.href = URL.createObjectURL(blob);
 aTag.target = '_blank';
 aTag.download = fileName;
 aTag.click();
 URL.revokeObjectURL(aTag.href);
}

downloadText の各行でやっていることは、

 const blob = new Blob([text], { type: 'text/plain' });

ダウンロードするデータを生成します。
テキストを書き出すので、2つ目の引数は { type: ’text/plain’ } にしています。
CSV を書き出すときは、{ type: ’text/csv’ } にするなど、対象の MIME を指定します。

 const aTag = document.createElement('a');

ダウンロードは、A タグのクリックをコード上ですることで発火させます。
作成した A タグは create したまま、DOMに追加しないので、ユーザーからは見えません。

 aTag.href = URL.createObjectURL(blob);

A タグが指すリンク先として、ダウンロードするデータを設定します。

 aTag.target = '_blank';

リンク先を新しいタブで開くようにします。
ファイルのダウンロードなので、開いたタブは残りません。

 aTag.download = fileName;

ダウンロードするときのファイル名を設定します。

 aTag.click();

A タグをクリックしたことにして、ファイルのダウンロードを行います。

 URL.revokeObjectURL(aTag.href);

createObjectURL で作成したオブジェクトを解放します。

おわりに

javascript 上で生成したちょっとしたテキストデータを、ローカルにダウンロードしたいときは、このような形で簡単に行うことができます。

プロを目指す人のためのTypeScript入門 (Amazon)

typescript や javascript で format っぽいことをするには

Mon, 24 May 2021 20:18:00 +0900

javascript には、java や C# などにある format の様に書式化するものがありません。
数値や文字列、日付の書式化に対応するのは辛いですが、文字列に変数を展開するものであれば比較的簡単なので作ってみます。

format っぽいことをする関数

javascript なら、

function fmt(template, values) {
 return !values
 ? template
 : new Function(...Object.keys(values), `return \`${template}\`;`)(...Object.values(values).map(value => value ?? ''));
}

typescript なら型の定義を追加して、

function fmt(template: string, values?: { [key: string]: string | number | null | undefined }): string {
 return !values
 ? template
 : new Function(...Object.keys(values), `return \`${template}\`;`)(...Object.values(values).map(value => value ?? ''));
}

という関数で実現できます。

使い方

１つ目の引数 template に、テンプレートリテラルのような文字列
２つ目の引数 values に、展開する値をプロパティに持つオブジェクト
を指定します。
戻り値に展開後の文字列が返されます。

以下のように使います。

fmt('${name}による${codeTitle}メモ。${name}は${morning}時起床。${night}時就寝。',
 {
 name: '熊右衛門',
 codeTitle: 'フォーマットの',
 morning: 5,
 night: 21
 });

// 返される文字列
"熊右衛門によるフォーマットのメモ。熊右衛門は5時起床。21時就寝。"

解説

色付した部分を解説して行きます。
理解のしやすさを優先しますので、実際に Object.keys と Object.values が返してくる順が違う可能性がありますが、対ではあるので問題ありません。

 return !values
 ? template
 : new Function(...Object.keys(values), `return \`${template}\`;`)(...Object.values(values).map(value => value ?? ''));

values が undefined なら template をそのまま返します。
values を必須にするなら不要な判定です。

 return !values
 ? template
 : new Function(...Object.keys(values), `return \`${template}\`;`)(...Object.values(values).map(value => value ?? ''));

ファンクションのコンストラクタに、例にした引数を与えた場合は以下のように展開されるイメージです。

new Function('name', 'codeTitle', 'morning', 'night',
 'return `${name}による${codeTitle}メモ。${name}は${morning}時起床。${night}時就寝。`;')

コードに展開されるので、template と values に与える値に注意しましょう。
以下のような関数が作られます。関数名は仮に kuma としました。

function kuma(name, codeTitle, morning, night) {
 return `${name}による${codeTitle}メモ。${name}は${morning}時起床。${night}時就寝。`;
}

 return !values
 ? template
 : new Function(...Object.keys(values), `return \`${template}\`;`)(...Object.values(values).map(value => value ?? ''));

オブジェクトが持つ値を並べます。
null や undefined は空文字にしています。

('熊右衛門', 'フォーマットの', 5, 21)

と展開されるイメージです。
なので、

kuma('熊右衛門', 'フォーマットの', 5, 21)

という形になり、展開された文字列を戻り値として得られます。

プロを目指す人のためのTypeScript入門 (Amazon)

JavaScript on いつかの熊右衛門

JavaScript：テキストをデータ URL にしてダウンロード

JavaScript：文字列の先頭と末尾にある指定の文字を削除する

JavaScript：日付に加算・減算して未来や過去の日付にする【date-fns ライブラリ】

日数の加算・減算

その他

日付のフォーマット

2つの日付の日数差

月の終わり

JavaScript：日付に加算・減算して未来や過去の日付にする

日数の加算・減算

月数の加算・減算

JavaScript：デバッグで良く使うコードを使い回すには

環境

使用例

スニペットにコードを保存する

スニペットを実行する

JavaScript：データ（オブジェクト）をディープコピーする

コピー元のデータ

jQuery ライブラリを使う

lodash ライブラリを使う

angular ライブラリを使う

JSON.parse、JSON.stringify を使う

Objects.assign を使う

ディープコピーされているか

JavaScript：Array のメソッドを連続で使う

filter と map メソッドを使わなかったら

filter と map メソッドを別にしたら

連続で使ってソートもしてみる

経度緯度の２点間の距離を求めるには

.NET Framework の GeoCoordinate クラス を使う

haversine-distance パッケージを使う

URLSearchParams なら RFC3986 に準拠すると思ったら微妙だった

RESTful API のパラメータを変えての実行にも DevTools が便利でした

DevTools を開く

該当の API を実行して、そのソースコードを取得する

API を実行する

パラメータを変更して実行してみる

axios でURLパラメータのエンコード処理を変更するには

qs を使う

jQuery を使う

axios で要求/応答のログ出力を共通化するには

JavaScript で HTML タグを取り除くには

jQuery を使う

サーバーサイドでやりたいときは

JavaScript のループ内で await したい

forEach では await が使えない

実行する非同期処理

期待する挙動

then で処理する

while で処理する

for で処理する

for await で処理する(1)

Promise.all で処理する

for await で処理する(2)

propsの型で楽する

組み込み要素の props を自身のコンポーネントに加える

props に設定が間違っている事が分かるようにする

sqlite3 の SQL で名前付きパラメーターを使うには

環境

名前付きパラメーターを使ったとき

名前付きパラメーターを使わなかったとき

名前付きパラメーターの良さが分かる

javascript でテキストをファイルにダウンロードするには

サンプル

解説

おわりに

typescript や javascript で format っぽいことをするには

format っぽいことをする関数

使い方

解説

.NET Framework の GeoCoordinate クラスを使う