TokyoFacebookTwitterHatenaPocket「脱jQuery」をめぐる議論は何年も前からありますが、jQueryの使い勝手のよさは無視できません。StandardではjQuery風の使いやすいAPIが考案されています。jQueryがリリースされた2006年当時、人気になった理由の1つは、jQueryを使えばDOM要素を簡単に選択、移動し、コンテンツを変更できたからでした。5が出てくるのはまだ数年後のことでした。幸いなことに、当時と比べるとブラウザーは標準に対応しており、ネイティブなJavaScriptの機能も飛躍的に進化しています。耳にすることが増えました。ここではその議論はしませんが、jQueryという優れたライブラリーから着想を得た、DOM要素を操作するネイティブのメソッドを6つ紹介します。append()prepend()after()before()replaceWith()remove()ネイティブなDOM操作メソッドと、jQueryのメソッドとの共通点と違いを説明します。jQueryの便利さを理解した上で、素のJavaScriptを記述する力を身につけられれば幸いです。append()appendメソッドはDOMツリーにノードを挿入する操作です。append(追加)の名前のとおり、渡された引数を、呼び出されたノードのリストに追加します。次のサンプルを見てください。appendメソッドのように子のリストに対してそれぞれノードを追加できる点です。先ほどのスニペットに続けてみます。<p></p></div>*/引数は文字列でも構いません。appendChild()では冗長な構文を書く必要がありました。text'))append()では短い記述で同じ結果が得られます。text</div>*/文字列はテキストノードに変換されるので、HTML要素には対応しません。&lt;p&gt;foo&lt;/p&gt;</div>*/マークアップ記号も変換されます。対応したノードが生成されて、DOMツリーに追加されるjQueryメソッドとは対照的です。通常は、すでにツリー内にあるノードが追加された場合、もともとあった場所からは削除されます。<div></div>"append()とappendChild()の最後の違いは、前者は追加されたノードを戻り値として返しますが、後者はundefinedを返すことです。prepend()prependメソッドはappend()とよく似ています。同じように子要素を追加しますが、prependメソッドの場合は先頭に追加されます。メソッドによって呼び出されたリストの最初の子要素の前に追加されます。<p></p></div>*/メソッドの戻り値はundefinedで、対応するjQueryのメソッドはprepend()です。after()もう1つの挿入メソッドはafterです。特定の親ノードが存在している状態で子ノード上で呼び出します。次のサンプルで、並列な兄弟ノードとして挿入されているのを確認してください。item</li><li></li></ul>戻り値はundefinedで、対応するjQueryでの操作はafter()です。before()beforeメソッドもafter()と似ていますが、子ノードの直前にノードを挿入します。item</li></ul>*/今回も戻り値はundefinedで、対応するjQueryメソッドはbefore()です。replaceWith()DOMのノードを置き換えたいこともあるでしょう。子要素なので、サブツリーのDOM要素を丸ごと置き換えます。紹介したメソッドを知らなければ、replaceChild()を使っていました。<li>third</li></ul>*/innerHTMLとテンプレートリテラルのおかげでツリー構造が記述しやすくなりました。replaceWithなら、同じ操作を冗長性を省いて実行できます。href="#">second</a>'secondChild.replaceWith(newSecondChild)このメソッドは構文を短くできるだけでなく、複数の引数を受け入れてノードを別のノードのリストに置き換えられます。前述のJavaScriptに記述を追加して結果を確認します。<li>third</li></ul>*/戻り値はundefinedです。同じ名前のjQueryメソッドがあるので比べてみてください。remove()DOMツリーからノードを削除する場合、昔のやり方ならremoveChild()でしょう。関数名のとおり、親のノード上で呼び出して指定したノードを削除します。n.parentNode.removeChild(n)remove()なら、操作がさらにシンプルになります。<ul></ul>jQueryのremoveとの違いは、削除されたノードと関連付けられたインベントリスナーの扱いです。jQueryでは要素と関連付けられたイベントとデータはすべて削除されますが、ネイティブメソッドではイベントリスナーには手を付けません。...この動作はjQueryのdetachメソッドにより近いものです。replaceWith()をサポートしているデスクトップブラウザーです。Edgeはサポートなし(Edgeでは現在開発中)removeメソッドには幅広いサポートがあります。Edgeでもバージョン14から実装されます。現在対応していないブラウザーでも、ポリフィルで対応できる場合もあります。childNode.jsはその1つですが、今回取り上げたメソッド用のほかのポリフィルもMDN上で見つけられます。insertAdjacentHTMLまとめの前に、insertAdjacentHTMLについても少し書きます。最初の4つの挿入メソッド(append()、prepend()、after()、before())と同じような挿入操作で、指定されたHTMLの文字列の挿入操作ができます。class="after"></div></div>*/別の子ノードを追加するためにbeforebeginとafterendの引数を使う場合は、先にparentノードを作ります。insertAdjacentHTML()はどの環境でも使えるので助かります。最後にjQueryに着想を得たDOMメソッドを簡単に紹介しました。ネイティブなDOMのAPIがどんな進化しているか、jQueryで実装していたものをどうすればネイティブメソッドで簡単に置き換えられるか、伝えられたらうれしいです。Seitzが査読を担当しています。最高のコンテンツに仕上げるために尽力してくれたSitePointの査読担当者のみなさんに感謝します。Mainardiフロントエンド開発を勉強中です。