Frontend Weekly 2025-06-27

1
<!-- 従来の動作 -->
2
<div data-content="<u>hello</u>"></div>
3

4
<!-- Chrome 138以降 -->
5
<div data-content="&lt;u&gt;hello&lt;/u&gt;"></div>

1
const div = document.querySelector(
2
  'div[data-content="<u>hello</u>"]'
3
);
4

5
// これらのAPIは従来通りデコードされた値を返す
6
console.log(div.getAttribute("data-content")); // "<u>hello</u>"
7
console.log(div.dataset.content); // "<u>hello</u>"
8

9
// シリアライゼーション時はエスケープされる
10
console.log(div.outerHTML); // '<div data-content="&lt;u&gt;hello&lt;/u&gt;"></div>'

1
// 設定ファイルのインポート
2
import settings from './app-settings.json' with { type: 'json' };
3

4
// 動的にJSONを読み込み
5
const userPrefs = await import('./user-preferences.json', {
6
  with: { type: 'json' }
7
});
8

9
console.log(settings.theme); // "dark"
10
console.log(userPrefs.default.language); // "ja"

1
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
2

3
// イテレータを使った効率的な処理
4
const result = numbers
5
  .values()
6
  .filter((n) => n % 2 === 0) // 偶数のみ
7
  .drop(1) // 最初の1つをスキップ
8
  .take(2) // 最初の2つを取得
9
  .map((n) => n * 3) // 3倍にする
10
  .toArray(); // 配列に変換
11

12
console.log(result); // [12, 18]

1
const frontendSkills = new Set(["HTML", "CSS", "JavaScript"]);
2
const backendSkills = new Set(["JavaScript", "Node.js", "Python"]);
3

4
// 共通スキル（積集合）
5
const commonSkills = frontendSkills.intersection(backendSkills);
6
console.log(commonSkills); // Set { 'JavaScript' }
7

8
// 全スキル（和集合）
9
const allSkills = frontendSkills.union(backendSkills);
10
console.log(allSkills); // Set { 'HTML', 'CSS', 'JavaScript', 'Node.js', 'Python' }
11

12
// フロントエンド専用スキル（差集合）
13
const frontendOnly = frontendSkills.difference(backendSkills);
14
console.log(frontendOnly); // Set { 'HTML', 'CSS' }

1
const userInput = "price: $9.99 (tax included)";
2
const searchTerm = "$9.99";
3

4
// 特殊文字を含む文字列を安全にエスケープ
5
const escapedTerm = RegExp.escape(searchTerm);
6
const regex = new RegExp(escapedTerm, "g");
7

8
const isFound = regex.test(userInput);
9
console.log(isFound); // true
10

11
// 置換処理での活用
12
const highlighted = userInput.replace(
13
  new RegExp(RegExp.escape(searchTerm), "g"),
14
  `<mark>${searchTerm}</mark>`
15
);
16
console.log(highlighted); // "price: <mark>$9.99</mark> (tax included)"

1
const text = "Visit our STORE or browse the catalog";
2

3
// 特定の単語のみ大文字小文字を無視
4
const pattern = /visit.*(?i:store).*catalog/;
5
console.log(pattern.test(text)); // true
6

7
// 複数の修飾子を組み合わせ
8
const emailPattern = /^[a-z]+@(?i:GMAIL|YAHOO)\.com$/;
9
console.log(emailPattern.test("[email protected]")); // true
10
console.log(emailPattern.test("[email protected]")); // false（ユーザー名は小文字のみ）
11

12
// 部分的にマルチライン対応
13
const multiPattern = /start(?m:^middle$)end/;

1
// 日付フォーマットの解析（同じグループ名を異なる選択肢で使用）
2
const datePattern =
3
  /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})|(?<day>\d{2})\/(?<month>\d{2})\/(?<year>\d{4})/v;
4

5
const isoDate = "2025-06-27";
6
const usDate = "27/06/2025";
7

8
const isoMatch = datePattern.exec(isoDate);
9
console.log(isoMatch.groups); // { year: "2025", month: "06", day: "27" }
10

11
const usMatch = datePattern.exec(usDate);
12
console.log(usMatch.groups); // { year: "2025", month: "06", day: "27" }
13

14
// どちらの形式でも同じグループ名でアクセス可能
15
console.log(isoMatch.groups.year); // "2025"
16
console.log(usMatch.groups.year); // "2025"

1
function parseUserData(jsonString) {
2
  // JSON.parseは同期関数だが例外を投げる可能性がある
3
  return Promise.try(() => {
4
    const data = JSON.parse(jsonString);
5
    return validateUser(data); // 非同期のバリデーション関数
6
  })
7
    .then((user) => {
8
      console.log("Valid user:", user);
9
      return user;
10
    })
11
    .catch((error) => {
12
      console.error("Parse or validation error:", error);
13
      return null;
14
    });
15
}
16

17
// 使用例
18
parseUserData('{"name": "Alice", "age": 30}').then((result) =>
19
  console.log(result)
20
);
21

22
parseUserData("invalid json").then((result) => console.log(result)); // null（エラーがキャッチされる）

1
// 16ビット浮動小数点数への丸め
2
const originalValue = 3.141592653589793;
3
const float16Value = Math.f16round(originalValue);
4
console.log(float16Value); // 3.140625（16ビット精度に丸められる）
5

6
// Float16Arrayの使用
7
const float16Array = new Float16Array([1.5, 2.7, 3.9]);
8
console.log(float16Array); // Float16Array(3) [ 1.5, 2.69921875, 3.900390625 ]
9

10
// DataViewでの16ビット浮動小数点数操作
11
const buffer = new ArrayBuffer(8);
12
const view = new DataView(buffer);
13

14
view.setFloat16(0, 42.5);
15
view.setFloat16(2, -17.25);
16

17
console.log(view.getFloat16(0)); // 42.5
18
console.log(view.getFloat16(2)); // -17.25
19

20
// メモリ効率的なグラフィックスデータ処理に有用
21
const vertices = new Float16Array([0.0, 1.0, 0.5, -0.5, -0.5, -0.5]);