Zenn
🌄

カスタム要素時代のVanilla JS開発

2023/04/16に公開
HTML
jQuery
WordPress
JavaScript
Shopify
tech

Jitoinを開発しているitteと申します。Webエンジニア向けのサービスや記事を公開しています。

私はカスタム要素について、過去に記事を書いたような独自のタグを作るものだと誤解していました。

VueやReactを使わなくても、頑張ればVanilla JS（ライブライを使わないJavaScript）だけでコンポーネント指向の開発ができるものなのだとばかり。。。

もちろんそれも合っているのですが、

むしろ、jQueryによる開発を置き換えるもの、
あるいは、ネイティブアプリ（デスクトップアプリ）風に開発できるもの

という認識のほうが正しいかもしれません。

カスタム要素時代と勝手に呼んでしまいましたが、イベントドリブン型開発について、各時代のJavaScriptの書き方を見ながら、最後にカスタム要素を使った開発のメリットを見てみます。

問い

JavaScriptでクリックされたらアラートを出すボタンを作ってください。

回答

昔のVanilla JS時代

HTML
<button type="button" onclick="handleClick()">クリックしてください</button>

<script src="./script.js"></script>
JS
function handleClick() {
  alert('こんにちは')
}

メリット

  • 単純明快
  • ライブラリ不要
  • ターゲット要素を複数にできる

デメリット

  • グローバル変数が汚染される（致命的）
    • 要素やイベントが増えるともう大変
  • ある要素のイベントをバラバラの場所に記述できるのでコードリーディングしづらい

jQuery時代

HTML
<button type="button" id="button">クリックしてください</button>

<script src="//code.jquery.com/jquery-3.6.4.slim.min.js"></script>
<script src="./script.js"></script>
JS
$('#button').on('click', () => {
  alert('こんにちは')
})

メリット

  • シンプル
  • グローバル変数が汚染されない

デメリット

  • ターゲット要素を複数にできない
    • classを使えば複数要素に適用できるがCSSでもclassを使うのでごちゃごちゃになる
  • idの重複に注意が必要
  • ライブラリの読み込みが必要
  • ある要素のイベントをバラバラの場所に記述できるのでコードリーディングしづらい

jQueryを捨て去ったVanilla JS時代

HTML
<button type="button" id="button">クリックしてください</button>
<script src="./script.js"></script>
JS
document.querySelector('#button').addEventListener('click', () => {
  alert('こんにちは')
})

メリット

  • シンプル
  • グローバル変数が汚染されない
  • ライブラリ不要

デメリット

  • ターゲット要素を複数にできない
    • classを使えば複数要素に適用できるがCSSでもclassを使うのでごちゃごちゃになる
  • idの重複に注意が必要
  • 記述が長め
  • ある要素のイベントをバラバラの場所に記述できるのでコードリーディングしづらい

カスタム要素時代

HTML
<button type="button" is="custom-button">クリックしてください</button>

<script src="//unpkg.com/@ungap/custom-elements"></script>
<script src="./script.js"></script>
JS
class CustomButton extends HTMLButtonElement {
  constructor() {
    super()

    this.addEventListener('click', this.handleClick)
  }

  handleClick() {
    alert('こんにちは')
  }
}

customElements.define('custom-button', CustomButton, { extends: 'button' })

メリット

  • グローバル変数が汚染されない
  • ライブラリ不要
  • ターゲット要素を複数にできる
  • ある要素のイベントをクラス内にまとめて記述できるのでコードリーディングしやすい

デメリット

  • カスタム要素名の重複に注意が必要
    • とはいえエラーになるので気づいやすい
  • 記述が長い
    • しかしその分読みやすい
  • SafariのせいでPolyfillが必要

カスタム要素をどんどん使おう

カスタム要素は、最近見かけるようになったというくらいで、広く普及しているとは言えない状況です。多くのエンジニアにとっては学習コストが必要となります。しかし、Vanilla JSの開発がしやすくなるので、まだ使っていない人は今すぐ勉強して使っていきましょう。

特にVueやReactの入っていない、WordPressやShopifyとは相性抜群です。海外では当たり前に使われ始めていますので、この辺りを触っている人は必須スキルになります。

とても残念なことにSafariがis属性に対応していませんのでPolyfill（不足している標準機能を補完するやつ）が必要になります。こちらのPolyfillがおすすめです。

https://www.npmjs.com/package/@ungap/custom-elements

Discussion