Zenn
Open2

学び：JavaScript

kouichi.hoshikouichi.hoshi

例外処理 try...catch構文のユースケース

  • JSONのパースやデータのフォーマット変換
  • 非同期処理（async/await）内でのエラーキャッチ
  • ユーザー入力の検証とバリデーション
  • 外部ライブラリやAPIの利用時
  • ファイル操作やネットワーク通信などのI/O処理
  • カスタムエラーの定義と処理の分岐
    など
kouichi.hoshikouichi.hoshi

Array.from()の使い方

使ったことが無かったが、Array.from()が便利そうなのでメモ。

AIに聞いてみた

Array.from() メソッドは、ECMAScript 2015（ES6）で導入されました。この重要な機能の実装には、以下のような歴史的経緯があります。

JavaScriptの初期バージョンでは、配列の機能は非常に限られていました。1995年に登場したJavaScript 1.0では、配列オブジェクト自体が存在せず、開発者は手動で配列を作成する必要がありました7。その後、1996年のJavaScript 1.1で配列オブジェクトが導入され、基本的なメソッドが追加されましたが、依然として機能は限定的でした。

2009年にリリースされたECMAScript 5（ES5）では、配列に対する多くの新しいメソッドが追加されました。この時期には、配列の操作をより簡単にするための機能が求められており、その流れの中で Array.from() の必要性が認識されるようになりました。

Array.from() メソッドが正式に導入されたのは、ECMAScript 2015（ES6）においてです。具体的には、2015年6月17日にECMAScript 2015の仕様が最終的に承認され、JavaScriptの標準仕様に組み込まれました。このバージョンでは、JavaScriptの機能が大幅に拡張され、新しいデータ構造やメソッドが追加されました。

Array.from() の主な目的は、反復可能オブジェクトや配列風オブジェクト（例えば、NodeListやargumentsオブジェクト）を簡単に配列に変換することです。これにより、開発者はより直感的かつ効率的にデータを扱うことができるようになりました。

具体的な使用例として：

//文字列から配列を生成：
Array.from("hello") // ["h", "e", "l", "l", "o"]

// SetやMapから配列を生成：
Array.from(new Set([1, 2, 3])) // [1, 2, 3]

// NodeListから配列を生成：
const images = document.querySelectorAll("img");
const sources = Array.from(images, (image) => image.src);

//[
//  "https://yourdomain.com/images/photo1.jpg",
//  "https://example.com/images/photo2.png",
//  "https://yourdomain.com/assets/images/photo3.gif"
//]

このように、Array.from() メソッドは、JavaScriptの進化の重要な一部として位置づけられ、現代のJavaScript開発において不可欠な要素となっています。その導入により、配列操作の柔軟性と効率性が大幅に向上し、開発者はより簡潔で強力なコードを書くことができるようになりました。
:::