option要素のtext部分をみてselect要素の値をJavascriptから変更する方法 ES5 ES6編

javascript

以前option要素のtext部分をみてselect要素の値をJavascriptから変更する方法についてという記事を書きました。
この記事はもう3年も前に書いたものなのですが現在でもこのブログ全記事の中で5本の指に入るほど頻繁に閲覧していただいています。

ただ3年の間に内容が多少古くなってしまいました。
先の記事ではjQueryを用いて行う方法とライブラリを用いずに行う方法を考えましたが、特に後者についてはその後ES5が主流となりES6(ES2015)も定まったため現在では古さを感じざるを得ないものとなっています。
そこでこの記事では現在主流であるES5そして最新規格であるES6を用いてこれを行う方法を考えてみたいと思います。

以下のHTMLに対して選択中のoptionを変更する操作を考えていきます。

<select id="sampleSelect">
    <option value="0">Apple</option>
    <option value="1">Orange</option>
    <option value="2">Lemon</option>
    <option value="3">Strawberry</option>
</select>

ES5ではArray.prototypeにfilterメソッドが追加されています。以前の記事でjQueryを使う場合にjQueryのfilterメソッドを使用していましたがこれと同じような機能が組み込みオブジェクトのArrayに用意されています。これをcallメソッドを使ってDOMノードリストに適用することでjQuery使用時同様に条件でノードを篩にかけることができます。

// ES 5
var options = document.querySelectorAll('#sampleSelect option');
		
[].filter.call(options, function(ele){
	return ele.text === 'Strawberry'; // Strawberryを選択する場合
})[0].selected = true;

Arrayのfilterメソッドは戻り値もArrayとなるので[0]というインデックス指定が必要です。

次にES 6で書く場合を考えます。
処理の流れ自体は上記のES 5の場合と全く同じなのですがES 6で追加された機能により下のように書き換えることができます。

// ES 6
let options = document.querySelectorAll('#sampleSelect option');
		
Array.from(options).filter(ele => ele.text === 'Strawberry')[0].selected = true;

ES 6ではArrayオブジェクトにfromメソッドが追加されました。(Array.prototypeに、ではないので注意です)
これはArray-likeオブジェクト(インデックスのついた要素とlengthプロパティを持つオブジェクト)からArrayを作成するメソッドです。
これを利用してDOMノードリストからノードの配列を作成します。これは配列なのでfilterメソッドが使用できます。

またfilterのコールバックにES 6で導入されたアロー関数を使っています。アロー関数では{}の中身がreturn文のみの場合returnを省略できるため上のように書くことができます。

さてES5, 6で書く場合をそれぞれ考えましたがここまで書いて思ったのはちょっとしたDOM操作などに関しては今でもjQueryすごく便利ってことですね。(^_^;)
jQueryはDOMノードリストと配列の違いを意識せず操作できることや選択されているノードのインデックスを明示的に指定しなくてもうまく処理してくれる点などとても便利だと思います。
そういった「勝手に裏でうまく処理してくれる」のがあいまいで嫌い、という方もいらっしゃるとは思いますが今回の内容のような処理ならば私は便利だなーと感じます。