「JavaScript」の記事 - Crieit

【JS】テキストを一定の文字数で切り捨てる

2024-04-27T13:37:04+09:00

こんにちは、しきゆらです。
今回は、SNSなどで時々見るような「一定数を超えたテキストを切り捨てる」処理を作ったのでメモしておきます。

結論: 以下のコードでいい感じに端折れる

const truncate = (str, max) => {
  if (str.length < max) return str;

  return `${str.slice(0, max - 1)}…`;
};

const truncateStringExceptURL = (str, max) => {
  if (!str) return "";

  // URLの正規表現
  const urlRegexp = /https?:\/\/\S+/g;
  // マッチしたURLリスト
  const urls = [];
  //　文字列からURLにマークして除外する
  const markedString = str.replace(urlRegexp, (matchStr) => {
    urls.push(matchStr);

    return `>${urls.length - 1}<`;
  });

  // テキストを切り捨てる
  const truncatedString = truncate(markedString, max);

  // マークしたURL箇所の正規表現
  const replaceUrlRegexp = />\d+ {
    const urlIndex = parseInt(matchStr.replace(/>|



細かく見ていきます。

テキストを切り捨てる

単純に一定の文字数で切り捨てるだけであれば、以下だけで実現できます。

なお、ここでは文字数をString.lengthで簡易的に取得していますが、文字コード等によっては意図しない数になりそうです。

正確な文字数に関しては、以下が参考になると思います。

JavaScript: 文字数を正確にカウントするには？ #JavaScript - Qiita https://qiita.com/suin/items/3da4fb016728c024eaca

const truncate = (str, max) => {
  if (str.length < max) return str;

  return `${str.slice(0, max - 1)}…`;
};


String.prototype.slice() - JavaScript | MDN https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/slice

この中で、URLが入っている場合はURLの途中で切り捨てられてしまいます。

それが問題にならなければよいのですが、私の場合はURLはそのまま出した方が便利だったのでURL以外の部分で切り捨てるようにしてみた結果が、最初のコードでした。

処理の流れとしては、以下の通り。


文字列に含まれるURLを特定のマーカに置換
マーカに置換した文字列を指定された文字数に切り捨て
切り捨てられた文字列にあるURLマーカをURLに戻す


それぞれ見てみます。

文字列に含まれるURLを特定のマーカに置換

該当部分を抜き出します。

const truncateStringExceptURL = (str, max) => {
 ...
  // URLの正規表現
  const urlRegexp = /https?:\/\/\S+/g;
  // マッチしたURLリスト
  const urls = [];
  //　文字列からURLにマークして除外する
  const markedString = str.replace(urlRegexp, (matchStr) => {
    urls.push(matchStr);

    return `>${urls.length - 1}<`;
  });
  ...
}


URLを表現する正規表現を定義し、文字列内にあれば配列に格納しつつマーカに保管しています。

String.prototype.replace()は第1引数に検知するパターン、第2引数に置換するものを渡しますが、第2引数は文字列以外にも関数も渡すことができます。

String.prototype.replace() - JavaScript | MDN https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace

なお、この処理自体は過去記載した「YAMLに環境変数を埋め込む」や「YAMLにローカル変数を埋め込む」と同じ発想です。

【Ruby】YAMLに環境変数を埋め込む | しきゆらの備忘録 https://shikiyura.com/2021/03/embed_env_value_in_yaml/

【Ruby】YAMLにローカル変数を埋め込む | しきゆらの備忘録 https://shikiyura.com/2021/10/embed_local_variable_in_yaml/

マーカに置換した文字列を指定された文字数に切り捨て

該当部分を抜き出します。

const truncate = (str, max) => {
  if (str.length < max) return str;

  return `${str.slice(0, max - 1)}…`;
};

const truncateStringExceptURL = (str, max) => {
  ...
  // テキストを切り捨てる
  const truncatedString = truncate(markedString, max);
  ...
}


URLをマーカに置換した文字列に対して、指定数以上の文字列を切り捨てる処理をかませます。

単純にString.prototype.slice()で先頭から最大数-1までの文字列を作り、末尾に…を入れてます。

String.prototype.slice() - JavaScript | MDN https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/slice

切り捨てられた文字列にあるURLマーカをURLに戻す

該当箇所を抜き出します。

const truncateStringExceptURL = (str, max) => {
 ...
 // マークしたURL箇所の正規表現
  const replaceUrlRegexp = />\d+ {
    const urlIndex = parseInt(matchStr.replace(/>|


ここでは、マーカを正規表現で表現し、切り捨てた文字列からマーカ部分をURLに置換しています。

処理的にはマーカに置き換える処理の反対なので特に複雑なことはないかと。

マーカ部分をもう少し綺麗に書けないかな、と思っていますがいい方法思いついてません。

URLをマーカに置換する部分と、マーカからURLに置換するが分かれているので何とかしたい気持ち。

まとめ

今回は、SNSなどでよく見るような一定数を超えた文字列を端折る処理を書いたのでメモしました。

改めて全体を記載しておきます。

const truncate = (str, max) => {
  if (str.length < max) return str;

  return `${str.slice(0, max - 1)}…`;
};

const truncateStringExceptURL = (str, max) => {
  if (!str) return "";

  // URLの正規表現
  const urlRegexp = /https?:\/\/\S+/g;
  // マッチしたURLリスト
  const urls = [];
  //　文字列からURLにマークして除外する
  const markedString = str.replace(urlRegexp, (matchStr) => {
    urls.push(matchStr);

    return `>${urls.length - 1}<`;
  });

  // テキストを切り捨てる
  const truncatedString = truncate(markedString, max);

  // マークしたURL箇所の正規表現
  const replaceUrlRegexp = />\d+ {
    const urlIndex = parseInt(matchStr.replace(/>|


今回は、ここまで。

おわり



【JS】Google Apps Scriptのコードをviteでバンドルする
2024-04-16T23:38:37+09:00
こんにちは、しきゆらです。

今回は、Google Apps Script(GAS)をViteでビルドしてclaspでプッシュする環境を作っていきます。

・・・久々のプログラム関連の記事な気がする。

個人的に、GASのコードをローカルで書き、JSのバンドラー？ビルダー？を使ってビルドしてclaspでアップロードする、というのがGASを書く上でのお作法だと思っています。

claspに関しては、こちらをご覧ください。

GitHub - google/clasp: 🔗 Command Line Apps Script Projects https://github.com/google/clasp

ビルドツールも様々あります。

Webpackやparcel、esbuildなどいろいろあるうえに、時代によって流行り廃りが速いのであまり追い切れてません。

ビルドツールについてはいかがいろいろまとまっててよさそう。

JavaScriptビルドツールの整理 各ツールの機能と依存関係

Native ESM 時代のフロントエンドビルドツールの動向

また、過去のツールの流行り廃りは以下あたりが参考になるかと。

State of JavaScript

ということで、いろいろあるわけですが

今回は、tauriでちょっと使って動作が速かったviteを使ってGASをビルドする環境を作ってみようと思います。

Vite | 次世代フロントエンドツール

Tauriを触ったときの記事はこの辺をご覧ください。

【Rust】Tauriで簡易的なアプリを作ってみる

今回、調べてみるとviteを使ってGASを書く記事はHTMLを作ってWebアプリとしての環境構築ばかりでした。

欲しいのはJSやTSをビルドするだけの環境です。

色々調べているとviteの裏側にあるRollupのプラグインでGAS向けのものがあったのでこれを使ってみます。

環境構築

適当なフォルダで以下のツールをインストール。

ここではyarn(v4.1.1)を使ってインストールしていますが、他のツールを使っている場合も同じような感じかと思うので読み替えていただければと。

yarn add clasp vite rollup-plugin-google-apps-script

それぞれのリポジトリをいかにおいておきます。

GitHub - google/clasp: 🔗 Command Line Apps Script Projects

GitHub - vitejs/vite: Next generation frontend tooling. It's fast!

GitHub - mato533/rollup-plugin-gas: Rollup plugin for Google Apps Script. This plugin supports local development of applications that run on Google Apps Script.

vite/rollupの設定

viteは設定ファイルが必要です。

しかし、必要なものは以下に参考としてあるので、これをもとにちょっと手直しします。

GitHub - mato533/rollup-plugin-gas: Rollup plugin for Google Apps Script. This plugin supports local development of applications that run on Google Apps Script.

// vite.config.js
import { defineConfig } from "vite";
import rollupPluginGas from "rollup-plugin-google-apps-script";
import path from "path";

export default defineConfig({
  plugins: [rollupPluginGas()],
  build: {
    rollupOptions: {
      input: "src/main.js",
      output: {
        dir: "dist",
        entryFileNames: "main.js",
      },
    },
    minify: false, // trueにすると関数名が消えるのでfalse必須
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});


ここではsrc/main.jsというファイルを作り、これをdist/main.jsへビルドする形を作っていきます。

GASのコードを書く

では、src/main.jsへ適当なコードを書きます。

単一ファイルだけでなく、せっかくなので分割してimportする形で書いてみます。

// src/main.js
import parts from "./parts";

const greet = () => {
  Logger.log("hello");
};

global.greet = greet;

global.parts = parts;


// src/parts.js
export default parts = () => {
  Logger.log("parts");
};


では、ビルドします。

ビルドは以下のコマンドでできます。

yarn run vite build

ビルドすると以下のようなコードが吐き出されるはず。

// dist/main.js
var global = this;
function greet() {
}
;
function parts() {
}
;
(function(factory) {
  typeof define === "function" && define.amd ? define(factory) : factory();
})(function() {
  "use strict";
  const parts$1 = parts = () => {
    Logger.log("parts");
  };
  const greet2 = () => {
    Logger.log("hello");
  };
  global.greet = greet2;
  global.parts = parts$1;
});


では、コードをGASへアップしましょう。

Google Apps Scriptへプッシュする

まずは、claspからログインしましょう。

以下のコマンドを実行すると、ブラウザが立ち上がるので、画面に従ってGoogleアカウントへログインしましょう。

clasp login

ログイン後、以下のコマンドでApps Scriptを作成します。 なお、すでに作成済みの場合は場合はcloneでもよいです。

> clasp create
? Create which script? standalon
reated new standalone script: 
Warning: files in subfolder are not accounted for unless you set a '/path/to/project/.claspignore' file.
Cloned 1 file.
└─ /path/to/project/appsscript.json


clasp createを実行するとどんなスクリプトか聞かれるので、今回はstandaloneを指定してます。

完了すると、URLが表示されます。

これを開くと、作成されたApps Scriptへアクセスできます。

また、clasp openでも開けます。

そして、appsscript.json、.clasp.jsonの2ファイルが生成されます。

.clasp.jsonファイルを開き、rootDirをvite.config.jsで設定したdistフォルダを指定します。

// .clasp.json
{
  "scriptId":"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  "rootDir":"/path/to/project/dist"
}

そして、appsscript.jsonファイルをdistフォルダへコピーします。

では、clasp pushでコードをApps Scriptへアップロードします。

clasp push

Apps Scriptを開くと、以下のようにコードが反映されているはずです。

では、関数名を指定して実行ボタンを押して動作確認しましょう。



greetを実行すると以下のように表示されるはずです。



はい、これにてviteでGASを書くための環境ができました。

まとめ

今回はローカルでGASを書くためviteでビルドする環境を作ってみました。

viteは裏側がrollupであり、プラグインもrollupのものが使えるようなので、プラグインを見てから判断してもよいかもしれません。

プラグイン | Vite https://ja.vitejs.dev/plugins/

今回は、ここまで。

おわり


JavaScript で TOTP を計算する
2024-02-09T02:11:50+09:00
TOTP: Time-Based One-Time Password Algorithm とは、二要素認証でよく見る Google Authenticator 等で QRコード を読み込ませたりして、一定時間毎に替わる 6桁 くらいの数字を入力するアレだ。

RFC 6238 に詳しい仕様が書かれている。

コイツを TOTP をブラウザ上で生成したい。

幸い近年の Web API には、バイナリ操作やクリプトまわりの機能が出揃っているので、わりかし簡単に実装できそうだ。

…とまぁ、そんな愚生が思いつくような話など既に、偉大なる先人たちによる多くのサンプルが残されている。

せっかく自分で実装するなら、最新の ES 仕様や Web API を活用して簡潔に、それでいて汎用的な仕様で書いてみよう。

実装

// @ts-check
const base32Alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ234567';
const base32AlphabetValuesMap = new Map([
    ...Array.from(base32Alphabet, (key, index) => /** @type {[string, number]} */([key, index])),
]);
/** @type { (strBase32: string) => Uint8Array } */
function decodeBase32(strBase32) {
    const strTrimmed = strBase32.replace(/=*$/, "");
    const result = new Uint8Array(strTrimmed.length * 5 >>> 3);
    let dataBuffer = 0;
    let dataBufferBitLength = 0;
    let byteOffset = 0;
    for (const encoding of strTrimmed) {
        const value = base32AlphabetValuesMap.get(encoding);
        if (typeof value === "undefined") throw new Error("Invalid base32 string");
        dataBuffer <<= 5;
        dataBuffer |= value;
        dataBufferBitLength += 5;
        if (dataBufferBitLength >= 8) {
            dataBufferBitLength -= 8;
            result[byteOffset++] = dataBuffer >>> dataBufferBitLength;
        }
    }
    if (dataBufferBitLength >= 5) throw new Error("Invalid base32 string");
    if ((dataBuffer << (4 - dataBufferBitLength) & 0xf) !== 0) throw new Error("Invalid base32 string");
    return result;
}

const hashAlgorithmNameMap = new Map([
    ["SHA1", "SHA-1"],
    ["SHA256", "SHA-256"],
    ["SHA512", "SHA-512"],
]);
/** @type { (secretUint8Array: Uint8Array, unixTimeMilliseconds: number, digits?: 6|7|8, period?: number, algorithm?: "SHA1"|"SHA256"|"SHA512") => Promise } */
async function generateTOTP(secretUint8Array, unixTimeMilliseconds, digits = 6, period = 30, algorithm = "SHA1") {
    // unixTimeMilliseconds to step binary
    const stepsBuffer = new ArrayBuffer(8);
    const dv = new DataView(stepsBuffer);
    dv.setBigUint64(0, BigInt(Math.floor(unixTimeMilliseconds / 1000 / period)));

    // calc Hash
    const hashAlgorithmName = hashAlgorithmNameMap.get(algorithm);
    if (!hashAlgorithmName) throw new Error(`invalid algorithm: ${algorithm}`);
    const cryptKey = await crypto.subtle.importKey("raw", secretUint8Array, { name: "HMAC", hash: hashAlgorithmName }, false, ["sign"]);
    const hash = new Uint8Array(await crypto.subtle.sign("HMAC", cryptKey, stepsBuffer));

    // Truncate
    const offset4Bit = hash.at(-1) & 0xf;
    const binary = (
        (hash[offset4Bit] & 0x7f) << 24 |
        hash[offset4Bit + 1] << 16 |
        hash[offset4Bit + 2] << 8 |
        hash[offset4Bit + 3]
    );

    // stringify
    const otp = binary % Math.pow(10, digits);
    return otp.toString().padStart(digits, "0");
}


実行例

// 実行例
await generateTOTP(decodeBase32('XXXXXXXXXXXXXXXX'), Date.now(), 8, 30, "SHA1");
// 実行例2 => "94287082"
await generateTOTP(decodeBase32('GEZDGNBVGY3TQOJQGEZDGNBVGY3TQOJQ'), Date.parse("1970-01-01T00:00:59Z"), 8)
// 実行例2.2 => "94287082"
await generateTOTP(decodeBase32('GEZDGNBVGY3TQOJQGEZDGNBVGY3TQOJQ'), Date.parse("1970-01-01T00:00:59Z"), 8, 30, "SHA1")
// 実行例3 => "32247374"
await generateTOTP(decodeBase32('GEZDGNBVGY3TQOJQGEZDGNBVGY3TQOJQ'), Date.parse("1970-01-01T00:00:59Z"), 8, 30, "SHA256")
// 実行例4 => "69342147"
await generateTOTP(decodeBase32('GEZDGNBVGY3TQOJQGEZDGNBVGY3TQOJQ'), Date.parse("1970-01-01T00:00:59Z"), 8, 30, "SHA512")


ハッシュアルゴリズムや、表示桁数、表示期間と言ったパラメータを変化させて、TOTP を出力できる。

応用例

例えば、前回の QRコード リーダーと組み合わせれば、 TOTP の管理を Web アプリ側で完結させるような実装もできる。

D&DしたQRコード画像をブラウザ上でデコードする | Aqua Ware つぶやきブログ

ちゃんと多要素認証の一要素として所有者認証を満たせるよう、実装にはかなり気をつける必要はあるだろうが。

参考


RFC 6238
Key Uri Format · google/google-authenticator Wiki
[JavaScript] Unicode 文字列やバイナリデータを Base32 エンコードおよびデコードする #JavaScript - Qiita
JavaScript で HOTP および TOTP を計算する #JavaScript - Qiita



D&DしたQRコード画像をブラウザ上でデコードする
2024-02-08T01:37:05+09:00
ブラウザ上にドラッグ＆ドロップ (D&D) されたQRコードの画像を、読み込んでデコードするUIを作りたい。

Pure JavaScript で動作する、QR コードデコーダー（パーサー） cozmo/jsQR が有名なので、これを使ってみよう。

jsQR は、 png や jpg といった画像コンテナの解凍機能も、 HTML や DOM, Web 周りに特化した機能も一切無いため、読み込ませた画像は何らかの方法で Uint8ClampedArray な RAW 画像に変換して渡す必要がある。

ちょっと遠回りにはなるが、


D&D されたファイルの File API を読み取る
FileReader API を使って、ファイルを DataURI として読み込ませ、 img タグに表示させる
OffscreenCanvas と OffscreenCanvasRenderingContext2D を経由して ImageData を作成する
jsQR に処理を投げる


といった処理になるだろうか。

早速実装してみよう。

実装


    Drag and drop an image file here
    or 
    


    
    






  See the Pen 
  decode D&Ded QR images by advanceboy (@advanceboy)
  on CodePen.




いったん img タグで画像を表示させるワンクッションを置いているおかげで、 png, jpg のみならず svg 等の画像もデコードできるようになっている。

Edge や Chrome ブラウザであれば、表示されている画像をそのまま D&D してきてのデコードもできるぞ。



jsQR の処理は、 JavaScript のスレッドで行われるので、処理が重くなるとブラウザが固まってしまう。

このため、理想的には Web Worker に処理を渡してしまうほうがよさそうではある。

ただ、1000x1000ピクセル程度の画像であれば、近年のデバイスなら一瞬でデコードできるので、実際のところはメインスレッド側で処理してしまって問題ないだろう。


ブラウザのタイトルや URL をコピーするブックマークレット【スマホ＆阿部寛対応】
2024-02-08T01:34:00+09:00
ブラウザで表示しているページのタイトルと URL を一括でコピーしたり、 markdown などのマークアップ言語でフォーマットされたものを、クリップボードにコピーしたくなることは無いだろうか？

意外にも、主要なブラウザには表示ページのタイトル名すら簡単にコピーする方法がない。

いくつかのブラウザ拡張機能（アドオン）には、上述の機能を提供しているものがいくつもある。

しかし、これだけのために拡張機能を入れるのもなんだかなと。

場合によっては、ポリシー等様々な理由で拡張機能を入れることを制限されている場合もあるだろうし。

そこで、表示中ページのタイトルと URL を任意の種類にフォーマットしてクリップボードへコピーしてくれるブックマークレットを作ってみた。

ブックマークレットとした事により、拡張機能の使えないスマートフォンの Chrome や Safari といった、とても不便なブラウザでも利用できる。

使い方

ブラウザのタイトルや URL をコピーするブックマークレット 

上記のリンクを（Firefox なら右クリックから直接、 Edge や Chrome なら ブックマークバーに D&D する等の方法で）ブックマークとして保存し、任意のページで呼び出すと、下記のようなダイアログが表示される。

お好きなボタンをクリックすれば、クリップボードにフォーマット済みのリンクが格納されるという算段だ。



暗転したところをクリックすれば、ダイアログはクローズされる。

最低限のコードにするため、 CSS は表示中のページのものを使っており、開いたページによってダイアログのデザインが変わるのは仕様となっている。

Firefox, Chrome, Edge いずれでも動作することは確認している。

Edge の場合ツールバーの「お気に入り☆」ボタンからではブックマークレットが動かないようなので、ブックマークバーから実行する必要があるようだ。（v121 現在）

もちろん、「阿部 寛のホームページ」にも対応している。

このようにフレームセットを使っている場合は、最初のフレームにダイアログを表示させる形で、対応している。



カスタマイズ方法

既定で markdown, textile, LaTeX などいくつかのテンプレートを用意している。

もし追加したいものがあれば、後述のソースコードの Object.entries({の後ろに、 JSON キーにボタンのタイトルを、 JSON 値に変換のテンプレートを指定したものを追加し、 各自 minify して使ってもらえれば OK だ。（ライセンスは CC-0）

ソースコード中に %5B, %5D などといった URL エンコードと解釈できてしまう部分があるため、ブックマークの編集画面の URL に直接貼り付ける場合は、 %255B, %255D などとエスケープしておこう。

なお、テンプレートの定義方法だが、 {{}} で括った部分に title (ページタイトル) もしくは url と、 0～8 の偶数個の / を記述し、置換対象を表す正規表現と、置換後の文字列を交互に記述する。

例えば、

String.raw`{{url/\[/%5B/\]/%5D/\|/%7C}}`


なら、以下と等価となる。

url.replace(RegExp(String.raw`\[`, "g"), "%5B")
  .replace(RegExp(String.raw`\]`, "g"), "%5D")
  .replace(RegExp(String.raw`\|`, "g"), "%7C");


雑な説明だがわかって。




macでdownshiftを使うと変換時の確定がおかしい
2022-10-03T20:23:11+09:00
macでdownshiftを使うと、変換中にEnterキーで入力を確定するとその時点でdownshiftに確定が伝播されてしまい、タグの入力が確定してしまう。

原因としてはcompositionendイベントがうまく発火していない、もしくは内部で正しく処理できていないため。

そのためdownshiftのonKeyDownイベントにて、isComposingをチェックして変換中かどうかをチェックして処理を行う必要がある。

    onKeyDown: (e: React.KeyboardEvent) => {
      if (e.key === 'Enter' && !e.nativeEvent.isComposing) {
        e.preventDefault()
        setText({ name: inputText })
      }
    },



【JS/Webpack】ビルドしたフォルダの不要ファイルを削除する
2022-08-24T23:45:46+09:00
こんにちは、しきゆらです。今回は、Webpackでビルドしたものが出力されるフォルダにできる不要ファイルを削除する方法を知ったのでメモしておきます。

WebpackでJSのコードをビルドしていると、結構な頻度で不要なファイルができたりします。例えば、デバッグ用に生成したソースマップファイルがそのまま残っていたり、過去に設定を変えてあるところから出力しなくなったファイルが残っていたり等、ビルド先のdistフォルダの中はごちゃごちゃしがちです。これを何とかしたいなぁ、と思って調べたら簡単に解決できました。

Webpackでこういうことできないかなぁと調べると大抵プラグインが出てきて追加しないといけないことが多く、今回もそのパターンでよくわからないものを追加しないといけないのかなぁ・・・と思っていたのですが、どうも標準機能として用意されているようでした。ということで結論。

結論: outputの中に[clean: true]を追加すればよい

ドキュメントを読むことは大事ですね。しっかり記載がありました。

https://webpack.js.org/guides/output-management/#cleaning-up-the-dist-folder

こちらによると、ビルドしたものを置くdistフォルダの中身をビルドのたびにきれいにしたい場合はoutput.cleanオプションを使え、とあります。ただし、この方法が使えるのはWebpack5以降のみなので注意してください。

// webpack.config.jsの一部分
~~~~~~
output: {
   filename: "output.js",
   path: path.resolve(__dirname, "dist"),
   clean: true // この1行を追加すればよい
}


はい、たったこれだけ。１行追加するだけで、ビルドのたびにdistフォルダの中身をきれいにしてくれるので、過去にビルドした残骸が残ることはなくなりました。

また、こちらのページには細かい設定方法もありました。

https://v4.webpack.js.org/guides/output-management/#cleaning-up-the-dist-folder

そして、前述の通りこの方法が使えるのはWebpack5以降のみとのことでした。Webpack4などを使っている方は、プラグインでの対応となるようです。

Webpack4を使っている方: clean-webpack-pluginを使う

https://v4.webpack.js.org/guides/output-management/#cleaning-up-the-dist-folder

Webpack4版のドキュメントを見ると、同様の項目ですが対応方法が異なっていました。「clean-webpack-plugin」というプラグインを使えば削除できるので、導入・設定しましょうとのことでした。以下にドキュメントにあったサンプルを載せておきます。

# プラグインのインストール
npm install --save-dev clean-webpack-plugin


webpack.config.jsはこんな感じ。

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// プラグインを読み込む
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  entry: {
    app: './src/index.js',
    print: './src/print.js',
  },
  plugins: [
    new CleanWebpackPlugin(), // この行を追加する
    new HtmlWebpackPlugin({
      title: 'Output Management',
    }),
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};


これにより、output.pathで指定したフォルダにある不要ファイルを削除したうえでビルドしてくれるとのことでした。さらに、Webpack5では細かい設定ができましたが、clean-webpack-pluginでも似たような設定はできそうです。

https://www.npmjs.com/package/clean-webpack-plugin

まとめ

今回は、Webpackで過去にビルドした残骸をきれいに削除する方法をまとめました。不必要なプラグインを導入せずに、たった１行の設定追加だけでやりたかったことが実現できてとてもハッピーです。

そして、Webpack5ではデフォルトでこの機能が入っていることを知りませんでした。過去に調べたときはプラグイン対応だったよなぁと思いつつ調べると、やはりプラグインを導入しろ、という記事が多く出てきました。とりあえずググるのは大事ですが、ドキュメントをさっくりと眺めておく、というのも必要ですね。




【JS】flatMapで不要なものを削除したい
2022-08-14T18:34:08+09:00
こんにちは、しきゆらです。今回は、flatMapの処理の中で不要な要素が出てきた場合にそれを排除する方法を知ったのでメモしておきます。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMapこちらのページの「map()のアイテムの追加と削除」の項目にある通り、処理の中で空配列([])を返すと、その要素の処理を削除することができるようです。

let array = [1,2,3,4,5,6,7,8];
array.flatMap( (item) => {
    if (item % 2 === 0) {
        return item * 2;
    } else {
        return [];
    }
})
// => [4, 8, 12, 16]


なお、同様の処理をmapで行うと、そのまま要素が空配列に置き換わってしまいました。(それはそう)

let array = [1,2,3,4,5,6,7,8];
array.map( (item) => {
    if (item % 2 === 0) {
        return item * 2;
    } else {
        return [];
    }
})
// =>[Array(0), 4, Array(0), 8, Array(0), 12, Array(0), 16]


ということで、flatMapの場合は処理の中で不要な要素を削除ができるようです。

なぜ、flatMapで空配列を返すと要素を削除することができるのかというのは


  flatMap()はmap()の後にflat()を行うのと同じ

  参照元: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap


とある通り、処理の中でflat()をかけるので空配列は消えてしまいます。ということで、flatMapの中で空配列を返してあげれば要素を削除することができるよ、という話でした。

・・・で、これで終わるとしょうもないので、Rubyで同様のことができるのかやってみました。https://docs.ruby-lang.org/ja/latest/method/Enumerable/i/collect_concat.html

irb(main):001:0> a = [1,2,3]
=> [1, 2, 3]
irb(main):002:0> b = [-1, 0, 9]
=> [-1, 0, 9]
irb(main):003:0> list = [a, b]
=> [[1, 2, 3], [-1, 0, 9]]
irb(main):004:0> list.flat_map{|array| array.select{|i| i < 0}}
=> [-1]
irb(main):005:0> list.flat_map{|array| array.include?(-1)? []: array}
=> [1, 2, 3]


こちらも同様で、空配列を返すと削除される動きをしています。ただ、リファレンスにはそのような記載はないので、当たり前だよね、として書かれていないのかなと。

不要な要素をはじく場合、flatMapとmap+αはどっちが速いのか

この手の処理はmap()メソッドの前後で特定の値をはじいたりしていましたが、どちらが速いのでしょう。気になったので、ついでに調べてみました。ここでもJSとRubyで測ってみました。

例としては微妙ですが、-5から5の間の乱数の中で０以上の場合に3倍する処理をflatMapと他の処理で処理時間を計測してみます。

JSの場合

こんな感じの雑さで試してみます。

なお、処理の中で不要なコードが混じってますが一応2つの処理で同じ結果が返ってくるかを確認したかったのでequalArrayという雑チェック関数を作ってます。

import * as Benchmark from "benchmark";

const filterMapTest = (array) => {
    return array.filter((item) => {
        return item >= 0;
    }).map(item => item*3)
}

const flatMapTest = (array) => {
    return array.flatMap((item) => {
        if(item >= 0) {
            return item * 3;
        } else {
            return [];

        }
    })
}

const equalArray = (a, b) => {
    if(!Array.isArray(a)) return false;
    if(!Array.isArray(b)) return false;
    if(a.length !== b.length) return false;

    for(let i = 0; i < a.length; i += 1) {
        if(a[i] !== b[i]) return false;
    }

    return true;
}

// initialize
const minNum = -5;
const maxNum = 5;
const array = [...Array(99*99)].map(_ =>; Math.floor(Math.random() * 10) - 5);
let suite = new Benchmark.Suite

// benchmark
suite
    .add("filter + map", () => {
        filterMapTest(array)
    })
    .add("flatMap", () => {
        flatMapTest(array)
    })
    .on("cycle", (event) => {
        console.log(String(event.target))
    })
    .on("complete", function() {
        console.log("Fastest is " + this.filter("fastest").map("name"));
    })
    .run({async: true})

const filterTest = filterMapTest(array);
const flatTest = flatMapTest(array);


console.log(equalArray(filterTest, flatTest))


実行結果はこんな感じでした。

$ > node dist/bench.js
true
filter + map x 21,538 ops/sec ±18.58% (87 runs sampled)
flatMap x 1,673 ops/sec ±0.93% (96 runs sampled)
Fastest is filter + map


大きな差はなさそうですが、flatMapよりもfilter+mapのほうが速そうです。

Rubyの場合

こんな感じの雑さで試してみました。

require "benchmark"

def map_uniq(array)
  array.map { |item| item.negative? ? next : item * 3}.compact
end

def flatmap(array)
  array.flat_map{|item| item.negative? ? []: item * 3 }
end

array = Array.new(99*99){ rand(-5...5) }

Benchmark.bmbm do |r|
  r.report("flatMap") { flatmap(array) }
  r.report("map_uniq") { map_uniq(array) }
end


実行結果はこんな感じでした。

Rehearsal --------------------------------------------
flatMap    0.001012   0.000000   0.001012 (  0.001012)
map_uniq   0.000562   0.000000   0.000562 (  0.000562)
-----------------------------------total: 0.001574sec
user     system      total        real
flatMap    0.000815   0.000000   0.000815 (  0.000814)
map_uniq   0.000564   0.000000   0.000564 (  0.000563)


よく考えなくても、flatMapのほうは無駄に配列生成して処理スキップさせているので遅いよなぁ、という印象でした。

まとめ

今回は、JSのflatMapで不要な要素をはじいて処理することができる、ということを知ったのでメモしました。また、気になったので、同様な処理がRubyでもできるか確認したり、flatMapで不要要素を弾く場合とfilterなどをかけた場合の処理時間の差を見てみました。

今回はここまで。おわり


JavaScript: Cookieから特定要素を見つけ出す際のトリム
2022-07-17T07:52:23+09:00
jQuery.Cookieなどのラッピングされたものを使用する場合には、なんの考慮もいらないはずです。

裸のJavaScriptでハンドリングする場合に忘れがちなのがトリムです。

サンプル

function getCookie (key) {
  var cookies = document.cookie;
  var cookiesArray = cookies.split(';');
  for (var tuple of cookiesArray){
    var strArray = tuple.split('=');
    var str = strArray[0];
    if (str.trim() == key) {  // トリムしてあげましょう
      str = strArray[1];
      return str.trim();
    }
  }
  return '';
}


CやPerlなんかで書く場合には、まあ忘れることはないんですけどね。私の場合、JavaScriptの場合が特に油断しますね。

トリムのオーバーヘッドなんてわずかでしょうからね、私の場合は、要らないんじゃない？と思える場合でもとりあえずトリムしますよ。


HTML + JavaScript: 見出しやボタンなどの表示文字列を統一させたいとき
2022-07-16T15:21:02+09:00
とあるシステムに登場する複数のWEB画面のあいだで、見出しやボタンの表示文字列を統一させたい場合に、私が使う手法のひとつがこれです。

いろんな方が、これと同じような手法をとられていると思います。かな？

サンプル

JavaScript側からです。これを各HTMLにインクルードして使います。

// JavaScript
function label_print () {
  var arrVar = {
    label_lastname: "姓",
    label_firstname: "名",
    label_birthday: "生年月日",
  };
  var arrVarButton = {
    button_save: "保存",
    button_cancel: "キャンセル",
  };
  for (let key in arrVar) {
    if(document.getElementById(key) != null) {
      $('#' + key).html(arrVar[key]);
    }
  }
  for (let key in arrVarButton) {
    if(document.getElementById(key) != null) {
      $('#' + key).val(arrVarButton[key]);
    }
  }
}


HTML側です。


  ...
  
  ...
    
      
    
  ...  


サーバ・サイドで、データベースなどを用いて処理する手法もあったり、いろんな手法があっていずれも賛否両論だと思います。上記はレガシーで単純、必要なパーツも少なく取り回しが楽ですね。Simple is best.


JavaScript で互いにオブジェクトを要素に持つ配列2つを比較して、重複していない要素のみを取り出す
2022-07-14T23:39:50+09:00
経緯

JavaScript で、互いにオブジェクトを要素に持つ配列2つを比較して、重複していない要素のみを取り出す処理を試みたのでメモしておきます。

前提

前提として、次のような2つの配列があったとします。


互いにオブジェクトを要素として持つ配列
配列2は配列1の子集合(サブセット)


この2つの配列を比較して、配列1の中から配列2に含まれない要素のみの配列を作りたい、と考えました。

想定する最終結果も併せて付記しておきます。

配列1

[
    {
        "value": "value-0",
        "label": "Château d'If"
    },
    {
        "value": "value-1",
        "label": "Marseille"
    },
    {
        "value": "value-2",
        "label": "France"
    },
    {
        "value": "value-3",
        "label": "Le Comte de Monte-Cristo"
    },
    {
        "value": "value-4",
        "label": "Alexandre Dumas"
    },
    {
        "value": "value-5",
        "label": "Rhino"
    },
    {
        "value": "value-6",
        "label": "prison"
    },
    {
        "value": "value-7",
        "label": "François I"
    },
    {
        "value": "value-8",
        "label": "Jean-Baptiste Kléber"
    }
]


配列2

[
    {
        "value": "value-0",
        "label": "Château d'If"
    },
    {
        "value": "value-1",
        "label": "Le Comte de Monte-Cristo"
    },
    {
        "value": "value-2",
        "label": "Alexandre Dumas"
    }
]


得たい配列

[
    {
        "value": "value-1",
        "label": "Marseille"
    },
    {
        "value": "value-2",
        "label": "France"
    },
    {
        "value": "value-5",
        "label": "Rhino"
    },
    {
        "value": "value-6",
        "label": "prison"
    },
    {
        "value": "value-7",
        "label": "François I"
    },
    {
        "value": "value-8",
        "label": "Jean-Baptiste Kléber"
    }
]


「2つの配列で重複した要素を除去した配列を生成する」というのはいくつか記事を見かけました。

しかし、それらは1次元配列のサンプルばかりだった上に、今回はさらに「要素の中の labelキー の値で比較したい」という内容だったので、さらにハードルが上がりました。

コード


JavaScript：filter()を使って配列内の重複要素を削除・取得したり、2つの配列から共通要素を取得する方法 - NxWorld


最終的にはこちらのコードをベースにして作りました。

サンプルは以下。


Home - L'enfer de Chateau d'If


// 配列
const Ar1 = [
    // 略
];
const Ar2 = [
    // 略
];

// 重複要素を除去した配列を返す関数
const getArraysDiff = (array1, array2) => {
    // 引数の各々の配列から label のみの配列を生成
    const array1LabelArray = array1.map((itm) => {
        return itm.label;
    });
    const array2LabelArray = array2.map((itm) => {
        return itm.label;
    });
    // label のみの配列で比較
    const arr1 = [...new Set(array1LabelArray)];
    const arr2 = [...new Set(array2LabelArray)];
    return [...arr1, ...arr2].filter((val) => {
        return !arr1.includes(val) || !arr2.includes(val);
    });
};

// 上述関数で重複除去した label の配列を得る
const ChateuDiff = getArraysDiff(Ar1, Ar2);
// filter メソッドで、元配列 から該当する label が存在する要素を除去する
const enferChateuDiff = Ar1.filter((item) => {
    return ChateuDiff.includes(item.label);
});


ざっくりこのような処理で想定していた結果を得られました。

余談

何故このようなことをしようかと思ったかというと、 React Select で defaultCalue で指定した選択済みの項目が選択候補にも上がってしまっていたので、除外しようとしたためでした。

が、そもそも React Select 側は選択済み項目を除外する機能を元々持っていたので上述の処理は不要ということが分かったため、今回のコードは未使用となりました。

ちなみに、この機能が働かなかった原因は API で取得した 値から 上述のような label と value のオブジェクトを生成するループ処理の際に、 value に ID の数値を振り方を間違えていたため、 React Select から「異なる値」として認識されてしまっていたためでした。

また、仮に今回の処理をかけたとしても、初期表示では上手く選択済み項目が除外されますが、選択済み項目を削除した場合は選択可能な項目として再度選択肢に復活させる必要があるため、かなり手間がかかることが想定されたためオミットしていたと思います。

……本当、 React Select 側に標準搭載されていて良かったです。

参考

本題


JavaScript：filter()を使って配列内の重複要素を削除・取得したり、2つの配列から共通要素を取得する方法 - NxWorld
配列同士で重複する値があるか確認する | grgr-dkrkのブログ


label のみの配列を作る


JavaScriptで連想配列から特定のキーだけ抽出 - Qiita


配列操作


JavaScriptの配列の使い方まとめ。要素の追加,結合,取得,削除。 - Qiita


JSON のフォーマット


JSON.stringifyの出力結果を整形して可読性を向上させる - Qiita



脱jQuery メモ
2022-04-30T00:03:10+09:00
経緯

Bootstrap でブレークポイント未満(スマホ時)のナビゲーションリンクにアンカーリンクがある場合、アンカーリンクをタップしてもナビゲーションリンクのメニューが開いたままアンカーリンクへ遷移するので、それを制御するコードを自前で書いていました。その部分を脱 jQuery したのでメモしておきます。

コード

jQuery

まずは Bootstrap 4 までの jQuery でのコード。

// ナビゲーションバー
const $navbar = $('#navbar');
// ブランド名とドロップダウンコンポーネント以外のナビゲーションリスト
$navbar.find('.navbar-brand, .nav-item:not(.dropdown) a, .dropdown-item').on('click', function (e) {
    // 略
    const navBarListID = 'navbarList';
    if ($(e.currentTarget).closest('#' + navBarListID).length > 0) {
        let breakpoint = 0;
        if (/(^|\s)navbar-expand-(\S*)/g.test($navbar.children('.navbar').prop('class'))) {
            switch (RegExp.$2) {
                case 'sm':
                    breakpoint = 576;
                    break;
                case 'md':
                    breakpoint = 768;
                    break;
                case 'lg':
                    breakpoint = 992;
                    break;
                case 'xl':
                    breakpoint = 1200;
                    break;
                default:
                    breakpoint = 0;
                    break;
                }
            }
            if ($(window).outerWidth() < breakpoint && !$navbar.find('.navbar-toggler[data-target="#' + navBarListID + '"]').hasClass('collapsed')) {
                // 現在の表示がハンバーガーメニューの場合
                $navbar.find('.navbar-toggler[data-target="#' + navBarListID + '"]').trigger('click'); // 移動したらハンバーガーを折りたたむ
            } else if ($(e.currentTarget).hasClass('dropdown-item') && $(e.currentTarget).closest('.dropdown').hasClass('show')) {
                // 現在の表示がハンバーガーメニューではなく、ドロップダウン内のメニューをクリックした場合
                $(e.currentTarget).closest('.dropdown').trigger('click'); // 移動したらドロップダウンを折りたたむ
            }
        }
        return false;
    }
};


ざっくりこんなコードでした。やっていることとしては


ブランド(.navbar-brand), ドロップダウンではないナビゲーションリンク(.nav-item:not(.dropdown) a, ドロップダウン内のリンク(.dropdown-item) がクリックされた場合


クリック(タップ)された要素の直近の祖先要素に #navbarList の id属性 がある要素が存在する場合


ナビゲーションバー要素のクラスにある .navbar-expand-XX のクラスのブレークポイントの文字列を取得してブレークポイント値をセット
その値と現在のウィンドウの幅を比較してウインドウ幅の方が小さい (=ハンバーガーメニューに表示が切り替わっている) 、かつ .navbar-toggler 要素が .collapsed のclass属性 を持っている (=メニュー展開) 場合


ハンバーガーメニューを折りたたむ (ハンバーガーアイコンを1度クリックする)

またはクリックされた要素が .dropdown-item class属性 を持っている (=ドロップダウンメニュー) 、かつ直近の祖先要素で .dropdown class属性 を持つ要素が .show class属性 を持っている (=ドロップダウンが開かれている) 場合


ドロップダウン要素を折りたたむ





という挙動。

プレーン JavaScript

これを Bootstrap 5 対応でプレーンな JavaScirpt に書き換え。

const navbar = document.querySelector('#navbar');
const navBarListID = 'navbarList';
if (
    typeof e.currentTarget.closest(`#${navBarListID}`) !== 'undefined'
     && e.currentTarget.closest(`#${navBarListID}`) !== null
) {
    let breakpoint = 0;
    if (/(^|\s)navbar-expand-(\S*)/g.test(navbar.className)) {
        switch (RegExp.$2) {
            case 'sm':
                breakpoint = 576;
                break;
            case 'md':
                breakpoint = 768;
                break;
            case 'lg':
                breakpoint = 992;
                break;
            case 'xl':
                breakpoint = 1200;
                break;
            case 'xxl':
                breakpoint = 1400;
                break;
            default:
                breakpoint = 0;
                break;
        }
    }
    if (window.innerWidth < breakpoint) {
        // ブレークポイント未満の幅のとき
        const navbarTogglers = navbar.querySelectorAll(`.navbar-toggler[data-bs-target="#${navBarListID}"]`);
        navbarTogglers.forEach((navbarToggler) => {
            if(!navbarToggler.classList.contains('collapsed')) {
                // 現在の表示がハンバーガーメニューの場合、
                // 移動したらハンバーガーを折りたたむ
                navbarToggler.dispatchEvent(new Event('click'));
            }
            else if(
                e.currentTarget.classList.contains('dropdown-item')
                 && e.currentTarget.closest('.dropdown').classList.contains('show')
            ) {
                // 現在の表示がハンバーガーメニューではなく、ドロップダウン内のメニューをクリックした場合
                // 移動したらドロップダウンを折りたたむ
                e.currentTarget.closest('.dropdown').dispatchEvent(new Event('click'));
            }
        });
    }
}


やっていることは大体同じです。ただし、いくつか置き換えが必要な部分があったので以下その点について触れていきます。

置き換えた部分

複数のクラス指定で要素を取得


JavaScript | getElementsByClassNameで複数のclass名を指定して取得する方法 | ONE NOTES
脱jQuery .find() | q-Az


const elms = document.querySelectorAll('.hoge, .fuga');


jQuery のようにカンマ区切りで document.querySelectorAll() でOK。

.on()


脱jQuery .on() .off() | q-Az


普通に .addEventListener('eventName', function) でOK。

複数の要素に対するイベントハンドラ


どうして！？document.querySelectorAll(selector).addEventListener()が動かないわけ | フロントエンドBlog | ミツエーリンクス


const elms = document.querySelectorAll('.hoge, .fuga');
elms.forEach(elm => {
    elm.addEventListener('click', process);
},
false);


.querySelectorAll() で取得した要素を .forEach() で反復処理させます。

親要素・祖先要素


【Javascript】親要素や祖先要素を取得する方法 parentNode\/closest | ゆうやの雑記ブログ


普通に .closet('.parent') 。

子要素


脱jQuery!DOM要素取得コードの素のJavaScriptへの書き換え │ Webty Staff Blog
【JavaScript】脱JQuery！？メソッドを比べてみた！要素取得編 - Web.fla


jQuery の .children('selectorName') は一応プレーンな JavaScript にも .childrenプロパティ がある模様。

ただし、 jQuery のように .children へセレクタ指定はできなさそうなので、この部分は HTML のクラスを子要素の方に付けることで回避しました。

クラス名全てを取得


クラス名（class属性の値）をすべて取得 | JavaScript逆引き | Webサイト制作支援 | ShanaBrian Website


jQuery では .prop('class') としていたところですが、 .className でOK。

子孫要素の中から探す


脱jQuery .find() | q-Az


jQueryでは .find() だったところを、 elm.querySelector('selectorName') と指定すればOK。

ウインドウ幅


スクリーン・ウインドウ・画面サイズをjavascriptで取得する方法まとめ | WEMO
脱jQuery .innerHeight() .innerWidth() .outerHeight() .outerWidth() | q-Az
ウィンドウサイズとスクローリング


jQuery で $(window).outerWidth() としてたところを、今回の用途では window.innerWidth へ置き換えました。

クラスの存在チェック


脱jQuery .addClass() .hasClass() .removeClass() .toggleClass() | q-Az


jQuery では .hasClass('className') だったところを、 .classList.contains('className') へ置き換え。

イベントハンドラの指定とイベント発火要素の取得


【JavaScript】addEventListenerで関数に引数をわたす｜北の南｜note
脱jQueryに向けた第一歩 | フロントエンドBlog | ミツエーリンクス


普通に関数指定で elm.addEventListener('click', hoge(elm), false) と書いてしまっていました。

しかし、参考記事に拠るとこれだとその関数の実行結果が渡されるとのこと。しかもイベント発火時ではなく該当コード読み込み時に実行されてしまうため、挙動がおかしくなってしまいます。

これについては第二引数はオブジェクト (または JavaScript の純粋な関数) なので elm.addEventListener('click', hoge, false) と関数名だけにしなければならず、その通りに書けばOK。

一方、 const hoge = (e) => { /* 処理 */ }; で普通にイベントは渡ってくるので、「クリックされた要素」をイベントハンドラ内で利用したい場合は e.currentTarget とすれば問題ないですね。

最初これに気付かずしばらく嵌まっていました。参考記事に感謝。

イベント発火


jQueryを使わない書き方 ajax, each, trigger, on\/off, extend, deferred, animate, css編 | maesblog


イベントがクラスで渡す必要がありますがほぼ同じで、 elm.dispatchEvent(new Event('click')) とすればOK。



このような形でガシガシ書き換えていけば大きな問題はなさそうです。

とはいえ、この置き換えは地味にアンカーリンクへのスクロールアニメーションを scroll-behavior: smooth; に移行したおかげで上述以外の大半の JS を破棄しても問題ないと判断できたのが非常に大きいですね。そうでなければもっと大きなボリュームと対峙する必要がありました……。

しかも Scroll-margin-top で上部固定ナビゲーションバーの裏側にアンカーリンクが隠れてしまう問題を回避できる、というのも JS コードを削減できた要因の一つなので、この2つのプロパティは個人的にかなり神がかっていると感じます。細かいイージングは犠牲になりますが、今回は全然目を瞑ることができるレベルなので良しとします。

参考

複数のクラス指定で要素を取得


JavaScript | getElementsByClassNameで複数のclass名を指定して取得する方法 | ONE NOTES
脱jQuery .find() | q-Az


.on()


脱jQuery .on() .off() | q-Az


複数の要素に対するイベントハンドラ


どうして！？document.querySelectorAll(selector).addEventListener()が動かないわけ | フロントエンドBlog | ミツエーリンクス


親要素・祖先要素


【Javascript】親要素や祖先要素を取得する方法 parentNode\/closest | ゆうやの雑記ブログ


子要素


脱jQuery!DOM要素取得コードの素のJavaScriptへの書き換え │ Webty Staff Blog
【JavaScript】脱JQuery！？メソッドを比べてみた！要素取得編 - Web.fla


クラス名全てを取得


クラス名（class属性の値）をすべて取得 | JavaScript逆引き | Webサイト制作支援 | ShanaBrian Website


子孫要素の中から探す


脱jQuery .find() | q-Az


ウインドウ幅


スクリーン・ウインドウ・画面サイズをjavascriptで取得する方法まとめ | WEMO
脱jQuery .innerHeight() .innerWidth() .outerHeight() .outerWidth() | q-Az
ウィンドウサイズとスクローリング


クラスの存在チェック


脱jQuery .addClass() .hasClass() .removeClass() .toggleClass() | q-Az


イベントハンドラの指定とイベント発火要素の取得


【JavaScript】addEventListenerで関数に引数をわたす｜北の南｜note
脱jQueryに向けた第一歩 | フロントエンドBlog | ミツエーリンクス


イベント発火


jQueryを使わない書き方 ajax, each, trigger, on\/off, extend, deferred, animate, css編 | maesblog


その他


JQueryをVanilla JSに緩やかに置き換える - Qiita


Bootstrap 5 のブレークポイント


ナビゲーションバー～Bootstrap5設置ガイド
ブレークポイント～Bootstrap5設置ガイド



気象庁の公開データを node.js と chrome ブラウザ (browserify) で表示する。
2022-04-26T17:01:11+09:00
https://rentry.co/nc73d

雨なので気象庁の公開データを Javascript を使って見てみる。

pathCode (json) を表示してみる

気象データを問い合わせるのに、定数になっている日本全国の場所のコード（ pathCode ）を見てみる。

なぜなら、それをしらないとエリアごとの気象データを問い合わせできない。

javascript

tenki_area.js

const axios = require("axios");
const url = "https://www.jma.go.jp/bosai/common/const/area.json";

(get_area = async () => {
  try {
    const response = await axios.get(url);
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
})();


terminal:

> node tenki-area.js > tenki-area.json


Rf:

https://mindtech.jp/?p=1754

Ruby

require "json"
require "net/http"
area_code_url = "https://www.jma.go.jp/bosai/common/const/area.json"
response = Net::HTTP.get_response(URI.parse(area_code_url))
h_area = JSON.parse(response.body)
pp h_area["offices"]


tenki_area.rb

require "json"
require "net/http"
area_code_url = "https://www.jma.go.jp/bosai/common/const/area.json";

response1 = Net::HTTP.get_response(URI.parse(area_code_url))
h_area_code = JSON.parse(response1.body)

uri = "https://www.jma.go.jp/bosai/forecast/data/forecast/"
#area = "260000" #Kyoto

h_area_code["offices"].each {|v|
  area = v[0]
  begin
    response2 = Net::HTTP.get_response(URI.parse("#{uri}#{area}.json"))
    h_area_data = JSON.parse(response2.body)
    h_area_data.each {|vv|
      pp vv["publishingOffice"]
      pp vv["reportDatetime"]
      vv["timeSeries"].each {|x|
        x["areas"].each {|xx| pp xx['area']}
      }
      puts
      puts "--------------------------------------------------"
      puts
    }
  rescue
    puts
  end
}


Python

tenki_area.py

import requests
import json

area_code_url = "https://www.jma.go.jp/bosai/common/const/area.json";
headers = {"content-type": "application/json; charset=utf-8"}
response = requests.get(area_code_url, headers=headers)
data = response.json()

print(json.dumps(data['offices'],ensure_ascii=False,indent = 4))


Nim

#nim -d:ssl

import httpclient,strutils,uri
import json

const area_code_url = "https://www.jma.go.jp/bosai/common/const/area.json"

let client0  = newHttpClient()
let response = client0.get(area_code_url)
let jsObj = parseJson(response.body)
client0.close()
echo jsObj["offices"].pretty()


get weather data

Rf:

https://qiita.com/youtoy/items/932bc48b03ced5a45c71

Ruby

tenki.rb

例えば京都という場所の天気を問い合わせる。

javascript

tenki.js

const axios = require("axios");

const url = "https://www.jma.go.jp/bosai/forecast/data/forecast/";
const area = "260000"; // Kyoto

(getWeatherForecast = async () => {
  try {
    const response = await axios.get(`${url}${area}.json`);

    console.log(response.data);
    console.log(response.data[0].publishingOffice);
    console.log(response.data[0].timeSeries[0].areas);

    for(const area of response.data[0].timeSeries[0].areas){
        console.log(`----${area.area.name}----`);
        for(const weather of area.weathers){
            console.log(weather);
        }
    }
  } catch (error) {
    console.error(error);
  }
})();



terminal:

> node tenki.js


> node tenki.js

[
  {
    publishingOffice: '京都地方気象台',
    reportDatetime: '2022-04-26T17:00:00+09:00',
    timeSeries: [ [Object], [Object], [Object] ]
  },
  {
    publishingOffice: '京都地方気象台',
    reportDatetime: '2022-04-26T17:00:00+09:00',

    timeSeries: [ [Object], [Object] ],
    tempAverage: { areas: [Array] },
    precipAverage: { areas: [Array] }
  }
]
京都地方気象台
[
  {
    area: { name: '南部', code: '260010' },
    weatherCodes: [ '300', '311', '100' ],
    weathers: [
      '雨　所により　夜遅く　雷を伴い　激しく　降る',
      '雨　昼前　から　くもり　後　晴れ　所により　明け方　まで　雷を伴い　激しく　降る',
      '晴れ'
    ],
    winds: [ '南の風　後　南西の風', '南西の風　後　北西の風', '北の風' ]
  },
  {
    area: { name: '北部', code: '260020' },
    weatherCodes: [ '300', '311', '100' ],
    weathers: [
      '雨　所により　夜遅く　雷を伴い　激しく　降る',
      '雨　昼前　から　くもり　後　晴れ　所により　明け方　まで　雷を伴い　激しく　降る',
      '晴れ'
    ],
    winds: [ '南の風　やや強く　海上　では　南の風　強く', '南西の風　後　北東の風　 海上　では　南西の風　やや強く', '北の風' ],
    waves: [ '１．５メートル　後　２メートル', '２メートル　後　１．５メートル', '１ ．５メートル' ]
  }
]
----南部----
雨　所により　夜遅く　雷を伴い　激しく　降る
雨　昼前　から　くもり　後　晴れ　所により　明け方　まで　雷を伴い　激しく　降る
晴れ
----北部----
雨　所により　夜遅く　雷を伴い　激しく　降る
雨　昼前　から　くもり　後　晴れ　所により　明け方　まで　雷を伴い　激しく　降る
晴


これをサンプルにして Javascript を学習する。

browserify

node.js で動いたプログラムを browserify によってブラウザで動作するようにする。

https://browserify.org/


  Browsers don't have the require method defined, but Node.js does. With Browserify you can write code that uses require in the same way that you would use it in Node.


インストール

terminal:

> npm install -g browserify


tenki_2.js

他の言語である println のように使っているコンソール.ログがブラウザでどうなるのかわからないので、require しておいてみる。

const console = require("console");
const axios = require("axios");

const url = "https://www.jma.go.jp/bosai/forecast/data/forecast/";
const area = "260000"; // Kyoto

(getWeatherForecast = async () => {
  try {
    const response = await axios.get(`${url}${area}.json`);

//    console.log(response.data);
//    console.log(response.data[0].publishingOffice);
//    console.log(response.data[0].timeSeries[0].areas);

    for(const area of response.data[0].timeSeries[0].areas){
        console.log(`----${area.area.name}----`);
        for(const weather of area.weathers){
            console.log(weather);
        }
    }
  } catch (error) {
    console.error(error);
  }
})();



tenki_2.js をブラウザ仕様の javascript ファイル bundle.js に変換する。

terminal:

> browserify tenki_2.js -o bundle.js


bundle.js

https://pastebin.com/szscGNsR

html ファイルを作って、 bundle.js  を読み込むようにする。

例えば tenki という名前でフォルダを作って、index.html, bundle.js を tenki フォルダに配置する。

index.html





tenki_area browserify example







chrome ブラウザーで tenki フォルダの中の html ファイルを開く。

chrome browser:

CTRL + shift + i

DevTools

index.html:




Dartを使った大規模なアプリ開発
2022-01-20T19:00:13+09:00
こんにちは、Quireです。

Quireは、Dartで開発された初めてのWebアプリケーションではありませんが、クライアントとサーバーの両方でDartをふんだんに使ったものとしては、初めてかもしれません。



動作の軽い、徹底して階層構造のタスク管理ツールです。このプロジェクトはDartコードで合計53992行、1620 KB。コミュニティーからのオープンソース ライブラリも使っています。

私たちについて

このプロジェクトを開始するまで、私たちはRikuloというDartファンの集まりでした。Rikuloはこれまで、UIフレームワークやUIライブラリ、Webサーバー、メッセージサーバー、DBクライアントなどのDartライブラリをリリースしています。

Dartが2011年に初めてリリースされたとき、すぐに将来性を感じ、さっそく小規模のプロジェクトに着手。その後、ほとんどDartで書かれた大規模アプリの開発へと進みました。今回はそのときの経験をお話しします。Dartによる開発に興味を持っていただければ幸いです。

なぜDartか

私たちがDartを選んだ理由はたくさんありますが、以下に大きなものを挙げてみます。

- 強く型付けされていて、無数の小さなミスを防ぐことができる。公式IDEのDart Editorは、タイプミスへの即時フィードバックやオートコンプリート機能を備えており、トラッキングも容易。

- 継承がクラスベースで、プロトタイプベースよりも直感的に使える。

- クライアントとサーバーの両方で同じ言語が使えて、データモデルやコードベースを共有できる。

- JavaScriptの問題点をほぼ解消。完全ではないが、以前にあった問題の99％には対応している。

- JavaScript Harmonyで人気の特徴をいくつか備えている。例えばFuture（Promise）パターン、矢印関数など。

- 強力なチームの後ろ盾があり、ハイクオリティーな公式ライブラリや使いやすいAPIを利用できる。まだ開発途上ながら、仕様はすでにかなり安定している。

- サーバーサイドではマルチスレッドではなくイベントループ方式で、好みだった。

- JavaScriptへのコンパイル時にTree Shakingできる（下記参照）。

もちろんデメリットもあります。以下に挙げてみます。


コミュニティーがJavaScriptよりも圧倒的に小さい。
DartとJavaScript間の通信が自明でない。
強い型付けなので、APIのPolyfillが面倒。
Dart Editorの性能が（今のところ）大規模プロジェクトに適さない。


強い型のサポートにより、書くプロセスがJavaScriptよりもずっとロバストです。また、Javaよりもシンプルで、Vanilla JavaScriptと比べてもシンプルなことがあります（関数の書き方など）。全体的にDartは扱いやすい言語ですが、以下のような例外はあります。


コンストラクタのボディよりも先にイニシャライザでFinalフィールドを初期化する必要がある。
ミックスインの仕様が使いにくく、2.0まで改善されそうにない。
ジェネリック型パラメータがクラスにしかなく、関数宣言にない。（そのためコンパイラの負荷が増す）。


クライアントサイド

Dart VMがChromeに統合される日まで、JavaScriptにコンパイルして作成することになります。JavaScriptにコンパイルする言語はたくさんありますが、Dartには以下のような独自のメリットがあります。


私たちは開発時、Dart VMを内蔵したChromiumベースのブラウザー、DartiumでDartをネイティブに実行している。このイテレーションではコンパイルが不要で、スムーズに進めることができる。
テストとプロダクションの段階でJavaScriptにコンパイルし、すべてのメジャーなブラウザーで実行する。このとき使用するコンパイラがTree Shakingを行い、不要なコードを除去するため、JavaScriptのコードサイズを小さくできる。


サーバーサイド

サーバーサイドについてはあまりコミュニティーで話題になりませんが、私たちは以下の理由から、Dartはサーバーサイドのプログラミング言語に入ると考えています。


Webサービスは本質的に非同期なため、イベントループ方式と相性がいい（マルチスレッドと比べて）。
クライアントサイドよりもサーバーサイドのほうが、よりロバストで安全なコードが必要。強い型付けの言語はこの点において有利。


サポートライブラリ

Quireは約30のライブラリをインポートしています。そのうち10ライブラリはコミュニティーからで、残りはDartからリリースされたものです。Dartに詳しい方ならAngularDARTとPolymer.dartがあると思うかもしれませんが、実はどちらも使っていません。

AngularDARTを使わない理由は、以下のとおりです。


DOMを細かく制御したい。
私たちはクライアント構造の構築に独自のアーキテクチャガイドラインを使用しており、そのパラダイムがAngularのロジックと異なる。
AngularDARTについて調べたとき、コンパイルされたJavaScriptのコードサイズにかなりのオーバーヘッドが生じた。ただし、これはその後かなり改善された。


私たちは以下の理由から、Polymer.dartも使っていません。


カプセル化とイベント リターゲティングのため、ShadowDOMはBootstrapのようなセレクター指向のフレームワークと併用できない。
ShadowDOMの外部からスタイルを適用できない。サードパーティーのコンポーネントセットがPolymerで作成されている場合、ユーザーが見た目や感じを変えることは不可能に近い。(更新：2013年12月時点で、内部のスタイルを外部から変更可能。Shadow DOM 201を参照。)


DQuery＆Bootjack

私たちのクライアントサイド スタックの基盤は、Rikuloリリースのオープンソース プロジェクト、DQueryとBootjackです。

- DQueryはjQueryの一部、特にイベントデリゲートの仕組みの部分をDartに移植したものです。

- BootjackはBootstrap 3の完全な移植で、CSS およびAPIとほぼ同じです。

このようにアプリケーション スタックを構築して、JavaScriptについて知っていること、できることを活用しています。

Stream

私たちのWebサーバーは、Dartのみで書かれ、ルーティング、フィルター、サーバーサイドMVCなどを備えたStreamです。イベントループ方式とシームレスに連携して動作します。リクエストハンドラーも、ノンブロッキングのルーチンをつなげるだけで書くことができ、従来のマルチスレッド方式よりも生産的かつ快適に仕事ができます。私たちは、Webサービスをスケールし、nginxでHTTPSを処理し、Streamにリクエストをデリゲートしたりもしています。このアーキテクチャによりDart VMを個別にSpawn／Despawnでき、サーバーのアップグレードもユーザーの使用を妨げずに実施できます。

終わりに

Dartは使い勝手の良い言語です。この記事がDartコミュニティー成長の一助となることを願っています。最後に、Dartで何ができるか興味のある方は、ぜひQuireを試してみてください。


GitHub ActionsでJestを叩くときのタイムゾーンと言語を設定する
2021-08-30T17:14:25+09:00
GitHub リポジトリにプッシュした時、GitHub Actions のワークフローで自動的に Jest を走らせるようにしています。GitHub 上で自動的に走る Jest と、手動で直接叩く Jest との違いはタイムゾーンとロケールです。ここでは、GitHub 上で Jest を動かすときに環境変数としてタイムゾーンとロケールを指定する方法について説明します。

1. package.json にグローバル設定ファイルを指定する

以下のように設定を追記します。jest-global-setup.jsに設定を記載すれば、環境変数から読み込まれた値を上書きできます。

  "jest": {
    "globalSetup": "./jest-global-setup.js"
  },


2. jest-global-setup.js の中身を記載する

タイムゾーンと言語を指定します。

module.exports = async () => {
  process.env.TZ = "Asia/Tokyo";
  process.env.LANG = "en_US.UTF-8";
};


3. 動作結果を確認する

Jest のテストで出力される日時の文字列を確認したところ、言語が日本語から英語になっていることが確認できました。

    -     "date": "Wed Apr 01 2020 09:00:00 GMT+0900 (日本標準時)",
    +     "date": "Wed Apr 01 2020 09:00:00 GMT+0900 (Japan Standard Time)",



【分かる方教えてください】GASで、スプレッドシートに入力した値と、現在の日（年・日時ではなく、「日」のみの値が合致しているかどうか） が同じであれば、チャットワークにその値を表示する というプログラムを作成しています。
2021-08-14T18:58:28+09:00
プログラム自体にエラーは出ていないのですが、スプレッドシートに「14」と入力しているけれど（本日の日と合致しているけれど）、

チャットワークにelseの値（15）がに表示されてしまうため、正しく日を拾えていないかと思います。

理由が分かれば教えていただきたいです。よろしくお願いします。

以下コード

===

function myFunction() {

//スプレッドシートの、特定の範囲を読み込む

var sheet = SpreadsheetApp.getActiveSheet();

var x = sheet.getRange(2,1).getValue();

//日付の定義（日を取得する）

var date = new Date

var day = date.getDate();

var yesterday = date.getDate(day-1);

var tomorrow = date.getDate(day+1);

//入力した日と条件が合致していれば、（CWに値を表示する）

if( x > yesterday && x < tomorrow)

{

x=x;

}

else{

x=x+1;

}

var client = ChatWorkClient.factory({token: '8314e1a8f4c4e0c5891d1d90f731e85b'});

client.sendMessage({room_id:100266334, body:x});

}


Cypress + reg-cli でビジュアルリグレッションテスト環境を作る
2021-07-31T17:37:19+09:00
経緯


BackstopJS を試す (Error: Failed to launch the browser process! エラー発生→ puppeteer のバージョンを指定して解決) - Crieit
BackstopJS で背景画像の高さを `vh` 単位で指定したページで画像やスクリーンショットが引き伸ばされる現象についてメモ (未解決) - Crieit


arm-band/test_backstop_randa_back_stopper_2: BackstopJS のテストです。



BackstopJS が上手く行かなかったので Cypress を使う方法に切り替えたところ、わりと上手く行きそうだったのでこちらの方法に切り替えてみました。

成果物


GitHub - arm-band/cypres_bij_sterrennacht: Cypress + reg-cli によるビジュアルリグレッションテストのスクリプト。


スクリプトのベースは


Cypress + REG CLI ではじめたビジュアルリグレッションテスト - Qiita


こちらを参考に、自分で使いやすいようにさらにいくつかチョイ足しをした感じになります。

構成

ディレクトリ構造

PROJECT_ROOT/
    ├ cypress/
    │   ├ fixtures/
    │   │   └ visual-regression-test/
    │   │      └ config.json.sample                 // 設定サンプル
    │   │
    │   ├ integration/
    │   │   └ visual-regression-test/
    │   │      ├ cafe_bij_nacht-before.spec.js      // ref のキャプチャを取得するスクリプト
    │   │      └ cafeterras_bij_nacht-after.spec.js // test のキャプチャを取得するスクリプト
    │   │
    │   ├ plugins/
    │   │   └ index.js                              // イベントにフックさせて動作させるスクリプト
    │   │
    │   └ support/                                  // 略
    │
    ├ package.json
    ├ sterrennacht.js                               // Cypress + reg-cli のチェック後に reg-cli のレポートのHTMLを開く
    └ zonnebloemen.js                               // Cypress 実行時の設定パラメータを調整する



package.json

{
    "name": "cypres_bij_sterrennacht",
    "version": "0.0.1",
    "description": "Cypress + reg-cli によるビジュアルリグレッションテストのスクリプト。",
    "main": "sterrennacht.js",
    "scripts": {
        "result": "node ./sterrennacht",
        "cypress:before": "cypress run --config-file false --config trashAssetsBeforeRuns=true -s cypress/integration/visual-regression-test/cafe_bij_nacht-before.spec.js",
        "cypress:after": "cypress run --config-file false --config trashAssetsBeforeRuns=false -s cypress/integration/visual-regression-test/cafeterras_bij_nacht-after.spec.js",
        "cypress": "run-s cypress:*",
        "reg": "reg-cli ./cypress/screenshots/visual-regression-test/before ./cypress/screenshots/visual-regression-test/after ./cypress/screenshots/visual-regression-test/diff -R ./cypress/screenshots/visual-regression-test/report/index.html -M 0.2 -I",
        "test": "run-s cypress:* reg result"
    },
    "author": "Arm Band",
    "license": "ISC",
    "dependencies": {
        "browser-sync": "^2.26.14",
        "cypress": "^7.6.0",
        "npm-run-all": "^4.1.5",
        "opener": "^1.5.2",
        "reg-cli": "^0.17.0"
    }
}



npm scripts にタスクを記述、 yarn test で以下の4つのタスクを一括で動かします。


Cypress による変更前サイトのキャプチャの撮影
Cypress による変更後サイトのキャプチャの撮影
reg-cli で1., 2.の比較とレポート生成
レポートのHTMLを openner で開く


zonnebloemen.js

/**
 * zonnebloemen : 設定を生成する
 */
class zonnebloemen
{
    /**
     * getParameters         : 設定用のフラグを生成
     *
     * @param {booelan} flag : フラグ
     *
     * @return {Object}      : 設定パラメータの内容
     */
    getParameters (flag)
    {
        return flag === 'BEFORE' ? {
            outStr: 'before',
            urlKey: 'ref',
            flag  : true,
        } : {
            outStr: 'after',
            urlKey: 'test',
            flag  : false,
        };
    };
    /**
     * getConfig             : 設定を生成
     *
     * @param {Object} data  : JSONファイル のデータ
     * @param {booelan} flag : フラグ
     *
     * @return {Object}      : 設定の内容
     */
    getConfig (data, flag)
    {
        if (data !== undefined && data !== null && Object.keys(data).length > 0) {
            flag ? data.commons['trashAssetsBeforeRuns'] = true : data.commons['trashAssetsBeforeRuns'] = false;
        }
        return data;
    };
};

module.exports = zonnebloemen;



フラグによって変更前なのか変更後なのか、スクリプトを実行する際の設定の配列のパラメータを弄るクラス。

具体的には以下の2つ。


変更前


参照先URL: refキー にセットされた値
trashAssetsBeforeRuns(キャプチャ取得スクリプト実行前にキャプチャ格納ディレクトリをクリーンアップするか): true

変更後


参照先URL: testキー にセットされた値
trashAssetsBeforeRuns: false



config.json.sample

{
    "commons": {
        "url": {
            "ref": "https://www.example.jp",
            "test": "https://demo.example.jp"
        },
        "hideElements": [
            "#__bs_notify__",
            ".returnPageTop",
            ".c-returnPageTop",
            "#navbar",
            ".navbar"
        ],
        "screenshot": {
            "capture": "fullPage",
            "waitMsec": 1000
        }
    },
    "viewports": [
        {
            "name": "phone",
            "width": 375,
            "height": 667
        },
        {
            "name": "tablet",
            "width": 1024,
            "height": 768
        },
        {
            "name": "pc",
            "width": 1920,
            "height": 1080
        }
    ],
    "pages": [
        {
            "test_id": "top",
            "uri": "/"
        },
        {
            "test_id": "about",
            "uri": "/about.html"
        }
    ]
}



サンプルですがやりたいことは最低限押さえてあるかと。


commons:


url:


ref: お手本として参照するサイトのURL
test: テストしたいサイトのURL


viewports: デバイス(ブラウザ)の幅と高さ。デフォルトではスマートフォン、タブレット、PCとして3つのサイズを指定
pages: テストしたいページのURLとキャプチャのファイル名に使用するID


基本的にこの設定に従って Cypress でキャプチャを撮っていきます。

cafe_bij_nacht-before.spec.js

const flag              = 'BEFORE';

const configDataOrigin  = require('../../fixtures/visual-regression-test/config.json');
const zonnebloemenClass = require('../../../zonnebloemen');
const zonnebloemen      = new zonnebloemenClass();
const parameters        = zonnebloemen.getParameters(flag);
const configData        = zonnebloemen.getConfig(configDataOrigin, parameters.flag);

describe(`${parameters.outStr} screenshot`, function () {
    const pages     = configData.pages;
    const domain    = configData.commons.url[parameters.urlKey];
    const viewports = configData.viewports;
    const ss_dir    = parameters.outStr;
    var test_id     = '';
    var ss_path     = '';
    var url         = '';

    pages.forEach(({ test_id, uri }) => {
        viewports.forEach(({ name, width, height }) => {
            context(test_id, () => {
                beforeEach(() => {
                    url = domain + uri;
                    cy.visit(url);
                });

                it('take screenshot', function () {
                    ss_path = ss_dir + '/' + test_id + '-' + name;
                    cy.wait(configData.commons.screenshot.waitMsec);
                    cy.viewport(width, height);
                    cy.scrollTo('bottom');
                    cy.screenshot(ss_path, {
                        onBeforeScreenshot($el) {
                            for (const selector of configData.commons.hideElements) {
                                const $selector = $el.find(selector);
                                if ($selector) {
                                    $selector.hide();
                                }
                            }
                        },
                        capture: Cypress.env(configData.commons.screenshot.capture),
                    });
                });
            });
        });
    });
});



最初の定数 flag 以外は cafe_bij_nacht-before.spec.js と cafeterras_bij_nacht-after.spec.js で共通となります。本当は1つのファイルにしたかったのですが上手く動かなかったので2つにしました。

やっていることは flag によって zonnebloemen.js で設定パラメータの配列を生成、その値を以てキャプチャを撮影する、というもの。

cafeterras_bij_nacht-after.spec.js

const flag              = 'AFTER';

const configDataOrigin  = require('../../fixtures/visual-regression-test/config.json');
const zonnebloemenClass = require('../../../zonnebloemen');
const zonnebloemen      = new zonnebloemenClass();
const parameters        = zonnebloemen.getParameters(flag);
const configData        = zonnebloemen.getConfig(configDataOrigin, parameters.flag);

describe(`${parameters.outStr} screenshot`, function () {
    const pages     = configData.pages;
    const domain    = configData.commons.url[parameters.urlKey];
    const viewports = configData.viewports;
    const ss_dir    = parameters.outStr;
    var test_id     = '';
    var ss_path     = '';
    var url         = '';

    pages.forEach(({ test_id, uri }) => {
        viewports.forEach(({ name, width, height }) => {
            context(test_id, () => {
                beforeEach(() => {
                    url = domain + uri;
                    cy.visit(url);
                });

                it('take screenshot', function () {
                    ss_path = ss_dir + '/' + test_id + '-' + name;
                    cy.wait(configData.commons.screenshot.waitMsec);
                    cy.viewport(width, height);
                    cy.scrollTo('bottom');
                    cy.screenshot(ss_path, {
                        onBeforeScreenshot($el) {
                            for (const selector of configData.commons.hideElements) {
                                const $selector = $el.find(selector);
                                if ($selector) {
                                    $selector.hide();
                                }
                            }
                        },
                        capture: Cypress.env(configData.commons.screenshot.capture),
                    });
                });
            });
        });
    });
});



上述で説明した通りなので省略。

plugins/index.js

/// 
// ***********************************************************
// This example plugins/index.js can be used to load plugins
//
// You can change the location of this file or turn off loading
// the plugins file with the 'pluginsFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/plugins-guide
// ***********************************************************

// This function is called when a project is opened or re-opened (e.g. due to
// the project's config changing)

/**
 * @type {Cypress.PluginConfig}
 */
// eslint-disable-next-line no-unused-vars
const path = require('path');
const fs = require('fs');

const isExistFile = (file) => {
    try {
        fs.statSync(file);
        return true;
    }
    catch (err) {
        if (err.code === 'ENOENT') {
            return false;
        }
    }
};

module.exports = (on, config) => {
    on('after:screenshot', (details) => {
        const str = details.path;
        const newPath = str.replace(/[\w\d_]+\-(before|after)\.spec\.js/, '');
        const newDir  = path.dirname(newPath);
        fs.mkdirSync(newDir, { recursive: true });
        fs.renameSync(details.path, newPath);
        return { path: newPath };
    });
    on('after:spec', (details) => {
        const newPath = details.absolute.replace('integration', 'screenshots');
        newPath.match(/[\w\d_]+\-(before|after)\.spec\.js/);
        const childNewPath = path.join(newPath, RegExp.$1);
        if (isExistFile(childNewPath)) {
            fs.rmdirSync(childNewPath);
        }
        if (isExistFile(newPath)) {
            fs.rmdirSync(newPath);
        }
    });
};



通常だとキャプチャの保存先のディレクトリ名がキャプチャ撮影スクリプトのファイル名そのものになってしまい、ディレクトリ名にドットが入るなどややもやっとする形式なので、そこを before or  after のみになるように保存先ディレクトリのリネーム (ファイルコピー+オリジナルディレクトリ削除) を実行するようにしています。

sterrennacht.js

const opener = require('opener');
const dir    = {
    baseDir: './cypress/screenshots/visual-regression-test/',
    startPath: 'report/index.html',
};

opener(`${dir.baseDir}${dir.startPath}`);



opener で開くだけの簡単なスクリプト。

実行結果(サンプル)

試しに少し動かしてみます。サンプルはホーム | Kiribi Ususamaで、公開されているものを ref 、ローカルで Browsersync で開いたものを test として動作させてみます。



reg-cli のレポートのトップ。キャプチャのうちテストを通らなかったものが上部に、通ったものは下部に分類されて並べられています。



テストが通った例。トップページです。



テストNGの例。なんだかディレクトリ構造のツリー構造がずれているようです。左右にバーをスライドさせて比較を行うことができる他、差分を赤色で表示させるモードや、 ref のみの表示、 test のみの表示、と切り替えることもできます。ここも使いやすそうだとおもった点です。

これで、自分なりにビジュアルリグレッションテストができる環境が整備できた気がします。

余談

もはや恒例となりましたが、名前について。今回は「Cypres bij Sterrennacht」。オランダ語です。日本語訳すると「糸杉と星の見える道」。ゴッホの最晩年の作品ですね。名前は Cypress をツールとして使用しているから、というシンプルな理由です。

ちなみに自前の補助スクリプトの名前も


cafe_bij_nacht-before.spec.js: Cafe bij nacht →「夜のカフェ」
cafeterras_bij_nacht-after.spec.js: Cafeterras bij nacht →「夜のカフェテラス」
sterrennacht.js: Sterrennacht →「星月夜」
zonnebloemen.js: Zonnebloemen →「ひまわり」


でいずれもゴッホの作品の名前から採りました。

参考

Cypress

きっかけ


Cypress入門～初心者でも簡単にE2Eテストが作れる～ | フューチャー技術ブログ
Cypress - 書きやすいテストの秘密と独自コマンドの実装 | フューチャー技術ブログ
cypressを触ってみた - Qiita


ベース


Cypress + REG CLI ではじめたビジュアルリグレッションテスト - Qiita


Docs


Why Cypress? | Cypress Documentation


前回実施時のスクリーンショットの破棄 (trashAssetsBeforeRuns)


How to delete all screenshots before a test run while doing a cypress visual regression - Stack Overflow
【Cypress】Screenshotの設定 - UGA Boxxx


スクロール


scrollTo | Cypress Documentation


要素を隠す


Cypress.Screenshot | Cypress Documentation


.hide()

find の戻り値


find | Cypress Documentation


pluginsスクリプト のイベント


Plugins | Cypress Documentation


config


Configuration | Cypress Documentation


未使用


Cypressのheadlessモードでlogを表示させる - Qiita
Ability to add a message to stdout during cypress run ・ Issue #186 ・ cypress-io/cypress ・ GitHub
e2e testing - Cypress pipe console.log and command log to output - Stack Overflow
Cypress.config | Cypress Documentation


Vuetifyで作った画面のテストをCypressで自動化しようとした時に調べたことや、つまづいたこと - Qiita



reg-cli


reg-viz/reg-cli: ?? Visual regression test tool.



for文の中でawaitして返り値使う直列処理を Promise.all() で並列処理
2021-07-25T21:32:29+09:00
何か日本語の不自由なタイトルだが、実際僕の思った疑問をそのまま文章にするとこんな感じだった、というか実際こういう間抜けな文章で検索していたので、このままいくことにする。

JavaScriptでfor文の中でawaitして直列でやっている処理を、Promise.all()を使って並列にやりたい、ということだ。const answers = Promise.all( …. ) と書きたい、という話。さらっと検索すると返り値を使うサンプル。

やりたいこと

論よりコードということで、以下のようなfor文があったとする。

function triangle (base, height) {
  return new Promise(resolve => {
    setTimeout(() => {
      const area = base * height / 2;
      console.log(area);
      resolve(area);
    }, 3000);
  });  
}

(async () => {
  let areas = []
  for (const i of [1, 2, 3, 4, 5]) {
    const area = await triangle(i, i);
    areas.push(area);
  }
  console.log(areas);
})();


底辺と高さが1, 2, 3, 4, 5の三角形について面積を求めて、最後に出力している。直列でやっているため、3秒ずつ結果が順番に表示され、15秒後にすべての答えが表示される。

これらの処理は独立であるので、並列で書けるはずだ。

並列化

これを並列化すると、以下のようになる。

(async () => {
  const areas = await Promise.all([1, 2, 3, 4, 5].map(async (element) => {
    return await triangle(element, element);
  }));
  console.log(areas);
})();


実行してみるとわかるが、3秒ですべての処理の答えが出るので、並列で処理してその結果を利用できることがわかる。

２つの処理を同時に走らせてみると、以下のように出力される。

0.5
0.5
2
4.5
8
12.5
[ 0.5, 2, 4.5, 8, 12.5 ]
2
4.5
8
12.5
[ 0.5, 2, 4.5, 8, 12.5 ]


まず並列処理の回答がすべて表示されて、その後逐次直列の処理の結果が出ていることがわかる。

以上。

参考

ありがとうございました。


for文、forEach文のループ処理でasync/await、Promise.allを効果的に使う方法 – ブロックチェーンエンジニアとして生きる



次の○曜日 や 来週の○曜日 を取得する JavaScript
2021-07-22T00:14:34+09:00
JavaScript の標準組込みオブジェクトは、日時関連の処理が非常に貧弱だ。

次の水曜日は何月何日? とか、 来週の月曜日は何月何日? といった値を取得しようと思ったら、タイムゾーン周りの処理と合わさって、思いのほか面倒だった。

とりあえず、動くコードができたので、記事にして紹介する。

/**
 * 「次の○曜日」を取得する
 * @param {Date} date 元となる日時
 * @param {number} dayOfWeek 曜日を示す 0-6 の値。 Date.prototype.getDay() と同様、 0 は日曜日を表す。
 * @param {{?includeToday: boolean}} option includeToday: 本日を含めるかどうかを指定する。省略時は false。
 * @returns {Date}
 */
function getNextDayOfWeek(date, dayOfWeek, option) {
    option = option || {};
    const includeToday = 'includeToday' in option ? option.includeToday : false;
    const retDate = new Date(date.valueOf());
    retDate.setDate(retDate.getDate() + (includeToday ? 0 : 1));
    retDate.setDate(retDate.getDate() + (7 - retDate.getDay() + dayOfWeek) % 7);
    return retDate;
}

// 実行例
console.log(
    [19,20,21,22,23,24,25,26,27,28,29]
        .flatMap(i => [new Date(`2021-07-${i}T00:00:00.000`), new Date(`2021-07-${i}T23:59:59.999`)])
        .map(d => `${d.toLocaleString('en-CA')} => ${getNextDayOfWeek(d, 3 /* Wednesday */, null).toLocaleString('en-CA')}`)
);


/**
 * 「来週の○曜日」を取得する
 * @param {Date} date 元となる日時
 * @param {number} dayOfWeek 曜日を示す 0-6 の値。 Date.prototype.getDay() と同様、 0 は日曜日を表す。
 * @param {{?weekStartDay: number}} option weekStartDay: 週の始まりの曜日を指定する。省略時は 0 (日曜)。
 * @returns {Date}
 */
function getDayOfNextWeek(date, dayOfWeek, option) {
    option = option || {};
    const weekStartDay = 'weekStartDay' in option ? option.weekStartDay : 0;
    const retDate = new Date(date.valueOf());
    retDate.setDate(retDate.getDate() + 1);
    retDate.setDate(retDate.getDate() + (7 - retDate.getDay() + weekStartDay) % 7 + (7 + dayOfWeek - weekStartDay) % 7);
    return retDate;
}

// 実行例
console.log(
    [19,20,21,22,23,24,25,26,27,28,29]
        .flatMap(i => [new Date(`2021-07-${i}T00:00:00.000`), new Date(`2021-07-${i}T23:59:59.999`)])
        .map(d => `${d.toLocaleString('en-CA')} => ${getDayOfNextWeek(d, 5 /* Friday */, {weekStartDay: 1 /* Monday */}).toLocaleString('en-CA')}`)
);


引数などの使い方は、 JSDoc コメントを参照してのこと。


１００万円失いながらハッキングを乗り越え誰でも１分で切り抜きを作れるサービスを公開するまでの失敗と学び
2021-07-13T02:44:33+09:00
先日、誰でも最短1分でYouTubeの切り抜きを作れるウェブサービスを公開しました。

私はプログラミングの勉強を始めて1年半の初学者ですが、個人開発でサービスを公開するまでに、数多くの失敗と苦労をしてきました(そして今もしてます笑)。後ほど詳しく書きますが、以下のような経験をしました。


ハッキングを受けデータを盗まれる
α版をリリースするも作り直しを決意する
巻き返しのため海外フリーランサーを雇うも無駄金となる
公開前に本家が同じ機能を発表し諦めかける
β版をリリースするも使われない


同じようにプログラミングの勉強をし始めたばかりの方や、個人開発でいつかはサービスを公開したいと考えている方の「転ばぬ先の杖」として、私の経験が役に立てばと思っております。

開発したサービス

YouTubeの公式APIを利用してウェブ上で切り抜きを作成・紹介できるウェブサービス「YouClip」を開発しました。



ここから実際に触れます→https://youclip.app

私自身が所属するスポーツチームの動画をYouTubeにアップすることが多くあり、試合やプレーの振り返りをするのにあったら便利だなと思ったのが着想のきっかけです。考えてみると、これはスポーツのプレー分析以外にも色々と用途があるのではないかと思い、プログラミングの学習も兼ねて一般向けのサービスとして開発を始めました。

今までの失敗と学び

１．ハッキングを受けデータを盗まれる

開発を始めて間もないある日、いつものように本番サイトを開こうとするとエラーでページが表示されません。おかしいなと思いサーバ上のDBを確認すると、あったはずのテーブルが全て消えており、見慣れないWARNINGと言う名のテーブルが１つだけありました。そこにはデータが１つだけ入っており、「データを復元して欲しければビットコインを振込め」との脅迫文が書かれていました。



(テーブルに入っていた全文)

To recover your lost databases and avoid leaking it: visit xxxx and enter your unique token xxxx and pay the required amount of Bitcoin to get it back. 
Databases that we have: xxxx, xxxx. Your databases are downloaded and backed up on our servers. 
If we dont receive your payment in the next 9 Days, we will sell your database to the highest bidder or use them otherwise.



  (日本語訳)

  失ったデータを復元し漏洩したくなければ、xxxxのサイトを訪れ、記載のトークンを入力した上で指定された金額のビットコインを支払え。お前のデータベースはダウンロードし、我々のサーバにバックアップしてある。９日以内に支払いがなければ、誰か高く買ってくれる人に売るか、別の方法で利用するだろう。


そこではじめて何者かがDBをハッキングし、データを人質にビットコインを身代金として要求しているのだと分かりました。幸いまだ開発初期で、ユーザーは身内と知り合い数人しかいなく、個人情報もメールアドレスくらいだったので、彼らにはお詫びをしてデータは諦めることにしました。まさかサーバに上げてすぐにハッキングされるとは思ってもおらず、衝撃でした。

原因は、あまり深く考えずサーバにphpMyAdminを入れていたのですが、アカウント名やパスワードが単純だったためブルートフォースアタック(総当り攻撃)でハッキングされたのだと思います(アホすぎるorz)。セキュリティに無知だった自分が悪いのですが、これが正式なリリース後だったら・・とゾッとしました。リリースする際には十二分にセキュリティ対策をしようと、苦い教訓となりました。(当然現在はphpMyAdminも入れてません)

２．α版をリリースするも作り直しを決意する

当初作ろうと思っていた機能とデザインを一通り実装し終えたので、α版として身近な友人や親戚に使ってもらうことにしました。Adobe XDでUI案を作った段階で友人などからフィードバックはもらっていたし、自分でも使いやすく作ったつもりだったので、それほど大きな問題はないだろうと思ってました。しかし、いざ使ってもらうと肝心の切り抜き機能が使いづらいと感じる人が多いことが分かりました。そのため、切り抜き機能のフローやUIを抜本的に見直すことを決意し、その影響はサービス全体にも及んで結果として大改修をする羽目になりました。

Adobe XDでUI案を作った段階で友人からフィードバックをもらっていたのですが、それでも今回の問題に気付けなかったのは、２つ陥りがちな罠にはまっていたと思います。


画面デザインを見せて意見を聞くだけで、ユーザーが操作しているところを観察しなかった
元からサービスの内容を知っている友人に意見を聞くだけで、完全に初見の人からフィードバックをもらわなかった


やはり実際に操作するのを見て初めて気が付くことが多くあり、XDの画面デザインを見せるだけでなく、プロトタイプ機能を使って模擬的に操作してもらうべきでした。また、サービスの前提知識がある人やITリテラシーが高い人だと、多少分かりにくくても使いこなせてしまいます。実際にこれから使うターゲットユーザーに合わせ、初見でITリテラシーもそこまで高くない人からもフィードバックをもらうべきでした

３．巻き返しのため海外フリーランサーを雇うも無駄金となる

３−１．Crowdworks経由で中国人のエンジニアと働く

大改修により、当初の予定よりだいぶリリース時期が遅れることが見込まれたため、巻き返しにスポットで外部のエンジニアを雇えないか考えました。知り合いをはじめ、Twitterや、クラウドワークス、ランサーズなどのクラウドソーシングサイトを利用して、フリーランスエンジニアの方々に連絡してみましたが、いいなと思う人はやはり時給にすると5,000円以上といった感じでした。自腹を切る上に、どれぐらい開発に時間がかかるかも読み切れない中で、言い方は悪いですが少しでもコストパフォーマンスの良さそうな人を必死に探しました。

そんな中、クラウドワークスに登録していたエンジニアの1人が、技術スタックや経験、公開しているポートフォリオの観点からも良さそうで、かつ時給3,000円程度のオファーだったので、その人にお願いしてみることにしました。やりとりしている段階で気が付きましたが、登録してある情報は日本語でしたが実際には彼は中国人で、英語と中国語しか使えないようでした。私自身は留学経験もあり、英語でやりとりするのに抵抗はなかったのでそのまま彼と契約することにしました。

彼とは作業時間に応じて支払いをする形(プロジェクト形式)で、途中休暇を挟みながらも足掛け2ヶ月程度リモートで一緒に働いたのですが、完成前に契約を打ち切りました。今も使っている有用なライブラリを紹介してくれたり、技術力はある程度期待通りだったのですが、次第に胡散臭いところや、面倒な交渉が多く発生するようになったのが原因です。

例えば、タスク量はそれほど変わっていないはずなのに、後半になるにつれ作業時間がなぜか右肩上がりで増えていました。また、兄弟がコロナにかかって重症で大変なのでボーナスをくれないかと交渉されたり、契約の終わりの方には次のクライアントを見つけるのに海外のフリーランスサイトに登録したいが出来ないので、アカウントを貸してくれないかとお願いされたりしました。このようなことが積み重なって、次第に信用できなくなっていきました。

３−２．海外のクラウドソーシングサイトでインド人・ウクライナ人・スペイン人と働く

ただ、作業自体はある程度スピードアップしたのは確かだったので、もう少し試してみようと、今度は直接海外のクラウドソーシングサイトを利用してみることにしました。前回の反省を活かして、数時間で出来る小さいタスクに対するコンペ方式で支払いを抑えつつ、何人か試してみていい人がいたら継続しようと考えました。

海外のクラウドソーシングサイトで有名なFreelancer.comやUpworkを使って、インド人、ウクライナ人、スペイン人と働いてみることにしました。確かに金額的には日本よりだいぶ低く抑えられましたが、お願いした仕様と全く違うものを作ってきたり、その多くが自分でやり直さなければいけないことになりました。

結局トータル１００万円近く掛けましたが、果たしてその価値があったかと聞かれると「はい」とは素直に言えない感じになりました。日本のフリーランスの方と働いたことがないため一概には言えないものの、(中国・インド等の)海外エンジニアだからコスパ的に良いといったことはないというのが今回の感想です。

４．公開前に本家が同じ機能を発表し諦めかける

改修も終えそろそろリリースできそうだなと考えていたある日、YouTube本家が動画の一部を切り取ってSNSでシェアできるクリップと言う機能を実験的に米国で開始したと言うニュースが流れてきました。

本家が、名前もほぼそのまま、同等の機能を出してくるとは思ってもおらず、リリースしても本家に勝てるはずがないと諦めかけました。しかし少し冷静になって考えてみると、まだ実験的な位置付けで本当に追加されるかもわからないことに加え、そもそも本家は１つの場面しか切り抜けないが、YouClipは複数の場面を切り抜いて繋げられることなど、機能面でも違いがありました。

そこで、この機能面の違いに目を向ければ、特定のユースケースでYouClipにも需要がまだあるのではないかと考え直し、そのユースケースに集中しようと考え直しました。具体的には、複数の場面を切り抜いて繋げる必要があるような、長時間のライブ配信がメインのVTuber動画や、ゲーム実況配信にサービスの主眼を置くことにしました。

５．β版をリリースするも使われない

そうやって何とかβ版のリリースに漕ぎ着け、知り合いやTwitter経由でユーザーを集め始めたのですが、一度はサイトに訪問してくれるものの、そのまま何もせずに帰ってしまう人がほとんどでした。Google Analyticsで見てみると、ホーム画面や再生画面の直帰率が70%近くあり、全く以て穴の開いたバケツのような状態であることがわかりました。

そこからは直接ユーザーに意見を聞いたり、Analyticsで取れる各種KPIやMicrosoft Clarity(※)の画面レコーディングデータを見つつ、仮説を立てて離脱率が下がるよう改善を繰り返しました。

例えば、再生画面の画面レコーディングを見ると、ミュート解除ボタンに気づかず、そのままミュート状態で見続けているユーザーが多くいることに気づきました。ミュート状態だと面白さは半減するため、ミュート解除ボタンをより目立つ位置と見た目に変えることで、再生画面の離脱率を10pt%近く下げることができました。



まだまだ十分とは全く言えない状態ですが、このような小さな改善を繰り返すことで、バケツの穴を少しずつ塞いでいっています。


  （※）Microsoftの無料ヒートマップツール「Clarity」について

  Clarityは、ユーザーの行動を無料で把握できる分析ツールで、匿名化されたユーザーの画面操作記録を見ることが出来ます。





  詳しくは以下のサイトなどを見てもらうと良いと思いますが、実際にユーザーがどんな風にサービスを使っているのかを知るのにとても役立ちます！

  https://sogyotecho.jp/clarity/


最後に

このようにたくさん失敗をし、正直こんなことやって意味あるのか自問自答することもありましたが、長年やってみたいと思っていた個人開発でサービスを作れた事は楽しかったし良い経験となりました。

こんなこと出来ないかと空想することから始まり、そこからどうやったら実現出来るか1つずつ考え・調べて・学びながら実装していく作業はとても楽しかったです。そうやって苦労して作ったサービスが誰かに使われているのを見るのはとても嬉しく、新しく投稿があると思わず全部いいねしてしまいます笑

また、当然サービスをリリースしても知ってもらわなければ意味がないので、苦手なSNSの運用やマーケティングについても現在進行系で試行錯誤しながら学んでいます。(こちらも現在進行系で失敗?!しているので、いつか振り返りたい)

以上が個人開発でサービスを公開するまでの私の失敗と学びです。

何かしら個人開発をしている人、これからしたい人の参考になれば嬉しいです！

「JavaScript」の記事 - Crieit

【JS】テキストを一定の文字数で切り捨てる

【JS】Google Apps Scriptのコードをviteでバンドルする

JavaScript で TOTP を計算する

D&DしたQRコード画像をブラウザ上でデコードする

ブラウザのタイトルや URL をコピーするブックマークレット【スマホ＆阿部寛対応】

macでdownshiftを使うと変換時の確定がおかしい

【JS/Webpack】ビルドしたフォルダの不要ファイルを削除する

【JS】flatMapで不要なものを削除したい

JavaScript: Cookieから特定要素を見つけ出す際のトリム

HTML + JavaScript: 見出しやボタンなどの表示文字列を統一させたいとき

JavaScript で互いにオブジェクトを要素に持つ配列2つを比較して、重複していない要素のみを取り出す

脱jQuery メモ

気象庁の公開データを node.js と chrome ブラウザ (browserify) で表示する。

Dartを使った大規模なアプリ開発

AngularDARTを使わない理由は、以下のとおりです。

GitHub ActionsでJestを叩くときのタイムゾーンと言語を設定する

Cypress + reg-cli でビジュアルリグレッションテスト環境を作る

for文の中でawaitして返り値使う直列処理を Promise.all() で並列処理

次の○曜日 や 来週の○曜日 を取得する JavaScript

１００万円失いながらハッキングを乗り越え誰でも１分で切り抜きを作れるサービスを公開するまでの失敗と学び

次の○曜日や来週の○曜日を取得する JavaScript