オジサン、脱jQueryを試みる

f:id:og_og:20210308234216p:plain

オジサンはマークアップエンジニアである。

DBから情報を非同期で引っ張ってきてコンテンツを表示したり、バナーを表示する仕組みは基本的にフロントエンジニア任せだが、デザインに関わる部分、例えばモーダルやアコーディオン等はオジサンが基本部分を実装してフロントエンジニアに引き渡すのである。

そんなオジサンは手軽にDOM操作ができるjavaScriptのライブラリであるjQueryをずっと使ってきたのだが、ここ2、3年の間に生のjavaScriptでもDOM操作が割と手軽にできるようになってきているので去年あたりから情報収集したり、実際にコードを書いて試したりもしている。

jQueryが結構長い事Web制作で使われていたのは、jQueryが現れた当時ブラウザ戦争の真っ只中で各ブラウザの仕様がバラけていたのをうまく吸収することで実装しやすくしたことや、有志による様々なプラグインの開発、それまで難解だったjs非同期通信の構築が容易になる、CSSの感覚でセレクターをトリガーにしてDOM操作できたりと理由は様々であるが、何といっても手軽にDOM操作の仕組みをリテラシー依存せず実装できるようにした事であろう。

jquery.com

ちなみにオジサンの職場だが、フロントエンジニアの方々は皆Sier上がりのオジサン達で、本業はPHPやJavaだったりする。そのせいか未だにjQueryをモダンなjsと思ってたりするのである苦笑

今回はとりあえず簡単なサンプルをjQueryを使って作成し、それをモダンなjavaScriptに置き換える実験をしてみようかと思う。

jQueryのサンプル

まずはよくあるアコーディオンメニューをjQueryで作成してみた。 見出しがボタンになっており、クリックするとコンテンツが表示される、といったデザインである。

今回はできるだけシンプルなソースにするためあまりDOM操作をガチャガチャいじらずに、トリガー用セレクタの有無で変化するようCSS側で制御するよう記述した。

見出しボタンにトリガー用セレクタ「acBlock__header--clicked」が付与されることで隣接した非表示のコンテンツが表示され、ボタンのテキストが「閉じる」に変わる。もう一度見出しボタンをクリックするとトリガー用セレクタは削除され隣接したコンテンツは非表示になり、ボタンのテキストも再び「ここをクリック」に戻る、と言った具合である。

See the Pen アコーディオン1 by Hiroyuki Ogino (@ogCode) on CodePen.

処理の流れ

  1. JSイベント発火用のクラスをjQueryオブジェクトにセットに変数「btn」に代入。
  2. 見出しのテキスト変更やコンテンツの開閉のトリガーとなるクラス「acBlock__header--clicked」を変数「trig」に代入。
  3. 変数「btn」にクリックイベントをセット。
  4. クリック毎にクラス「acBlock__header--clicked」をトグルで付与削除するのにメソッド「toggleCLass()」を使う。
  5. さらにif文で変数「btn」にクラス「acBlock__header--clicked」が含まれているかどうかで分岐を行う。調べるのにはメソッド「hasClass()」を使う。
  6. 含まれていればボタンのテキストを「閉じる」にメソッド「text()」で書き換え、含まれていなければ「ここをクリック」に書き換える

モダンなjavaScriptに置き換えたサンプル

最新のjavaScriptである、ECMAScript 2015(別名ES6)は従来のjavaScriptに比べてDOM操作がやりやすくなっている。 jQueryで必ずといって良いほど使う、セレクタをjQueryオブジェクトで取得し、変数に格納する、といった作業も、querySelectorメソッドを使うことで実現できる。

developer.mozilla.org

また、CSSのクラス名をつけたり外したり、DOM内に対象のセレクタを調べる場合等は classListメソッドを使う事で同等の操作を行うことができる。

developer.mozilla.org

今回のサンプルは上記2つのメソッドを使ってjQueryで実装したアコーディオンボタンを再現してみた。

See the Pen アコーディオンサンプル2 by Hiroyuki Ogino (@ogCode) on CodePen.

ソースをみるとやはりjQueryのソースのほうがシンプルに記述することができるが、 ライブラリ故に今回のDOM操作とは関係ない処理もページロード時に毎度行われるので ページ表示のパフォーマンスが落ちたり、jQuery本体をCDNで読み込んでいた場合、CDNサーバーが落ちた場合等はjQueryで記述された処理がすべて落ちてしまう。

また、最近のWebアプリに関しては現在はReact等のライブラリが多く使われているが、それらはjQueryと互換性は皆無であり、あらかじめHTML内にDOMを埋め込んでおくjQueryとは対局的な仮想DOMと呼ばれるJS内にDOMとスタイルを持っていて、必要に応じて出力するのである。

reactjs.org

それらはフロントエンジニアの仕事だからといって無関係ではいられない。彼らが実装しやすいようにあらかじめCSSやDOMの設計を行うのもマークアップエンジニアの大事なお仕事なのである。

普段ガジェット散財の記事ばかり書いているせいか、今回のようなテック記事はなかなか肩が凝るものである笑笑

それなりにPVがあればまたこの手の記事を自分の知識の棚卸しも兼ねて執筆していきたい。