【小技】JavaScript Array.from()関数で超便利にDOM操作

2018年7月23日

ホワイトボードの末ちゃんこと末吉です。

さてさて、前回の記事「【小技】JavaScriptでgetElementsByClassで要素を取得したときに配列に格納する」ですが、
誤りがありました。大変失礼しました。

× getElementsByClass
○ getElementsByClassName

 

ではお詫びもかねて、先の記事の続き（？）をしたいと思います。

今日ご紹介するのは Array.from() 関数になります。

Array.from()関数

Array.from関数についての詳しい解説をしよう。。。と思ったのですが、
MDNを見ていただいたほうが間違いがないので、MDNにお任せします（笑）

MDN Array.from()関数

ES6ゆえの注意

ただしご注意ください、この関数はES6になるため古いIEなどでは動作しません。
MDNのページの実装状況にもありますが、Edgeもサポートしていません。

IE、Edgeをサポートしないでよい環境で使うか、Babelなどを通して使うようにしてください。

どうやって使う？

さて基本的な使い方はMDNの例にありますが、
ウェブサイトを弄っていて特に使う場面が多いのが、やはりDOMの操作かと思います。

例えば、<select>に対してJavaScriptで取得してきたデータを元に<option>をセットしたい場合、
Arrow関数とfilter関数を使うと1行で済んでしまいます。

<select name="test">
  <option value="alpha">Alpha</option>
  <option value="bravo">Bravo</option>
  <option value="charley">Charley</option>
</select>

const targetElement = document.querySelector('select[name="test"]').options;
const targetValue = 'bravo';

Array.from(targetElement).filter(ele => ele.value === targetValue)[0].selected = true;

どうです？こんなに簡単です。

是非実践でも使ってみてください！

まとめ

日々どんどん便利になってきているJavaScriptですが、webpackなどを使うと特に気になるファイルの誇大化。

もちろんoptimization.splitChunksを使って分割したりもしていますが、何より無駄なライブラリを使用しないことが一番です。
ですが、開発コストにあわせてライブラリを使用するというのも・・・。

そんな悩みも言語の発達と共に解消してゆくのでしょう！
是非お願いしますね！M○さん！

それではまたお会いしましょう。

Share Button