【Javascript】 (小技) CSS Selectorで最初に見つけた1件以下を処理するワンライナー。

「先っぽだけだから！」

一番信用のないセリフNo.1

思い立ち

あるサイト用に、最初に見つけた画像を開く bookmerklet を作成しようと考えていた。
基本 ワンライナー は嫌いだが、bookmerklet となると少々事情が異なる。

今回は 新しく開く 動作を行うため、何度も実行されてしまうと、よもやセルフな ブラクラ になるのでなんとか避けたい。

そんな訳で butter better の な 犬 解 を模索してみた。

思案

① querySelectorAll + forEach

document.querySelectorAll('img[src]').forEach((img) => window.open(img.src));

('A｀).｡oO (1回ででええねんで...)

② Optional Chaining

window.open(document.querySelector('img[src]')?.src);

('A｀).｡oO (必ずopnenが処理されちゃって、無い時にエラーになっちゃって意味ないなぁ...)

③ if文

let img = document.querySelector('img[src]');
if(img) {
    window.open(img.src);
}

('A｀).｡oO (if文書きたくないなぁ...変数もわざわざ作りたくないでござる...)

④ querySelector + スプレッド構文

[...document.querySelector('img[src]')].forEach((img) => window.open(img.src));

('A｀).｡oO (ぬるぅ....)

⑤ スプレッド構文 + Optional Chaining

[...document.querySelector('img[src]')?].(略);

('A｀).｡oO (そんな構文はねぇ...)

⑥ 関数

let f = function(val, callback) {
    if(val) {
        callback.call(val);
    }
};
f(document.querySelector('img[src]'), (img) => window.open(img.src));

('A｀).｡oO (これならif文のほうがマシ...)

解

querySelectorAll + スプレッド構文 + slice + forEach

[...document.querySelectorAll('img[src]')].slice(0, 1).forEach((img) => window.open(img.src));

('A｀).｡oO (要素数が 0 or 1 で querySelectorAll の forEach がイキるぜ！)

おまけ( bookmarklet)

javascript:(function() {[...document.querySelectorAll('img[src]')].slice(0, 1).forEach((img) => window.open(img.src));})();

('A｀).｡oO (やっぱ bookmarklet には ワンライーナー の方が良い...)

余談

Selector とか Spread とか、なんか WIXOSS みたいだなと思った。
(iTMSでサントラ売ってるからみんな買うべし。井内舞子さん最高。)