ゼロから始めるstimulus入門3(古いブラウザを考慮した設計) #Rails

はじめに

今回は古いブラウザを考慮したstimulusの設計をドキュメントを見ながら、学んでいこうと思います。

過去回↓
第1回：ゼロから始めるstimulus入門1(ファーストコンタクト)
第2回：ゼロから始めるstimulus入門2(現実的なものを作る)

古いブラウザを考慮した設計

クリップボード APIは現在のブラウザでは十分にサポートされていますが、古いブラウザを使用するユーザーも少なからずいます。
また、ネットワークの接続不良、CDNが利用できない、jsの一部またはすべてが読み込まれない場合があります。
そうしたブラウザを考慮した設計をstimulusで行うことができます。

実装

clipboard_controller.js

static classes = [ "supported" ]というものを定義
connect()の中で"clipboard" in navigatorの部分でブラウザがクリップボードAPIをサポートしているかを確認
確認出来たら、supportedClass(supportedは定義したもの)をthis.elementに追加する

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = [ "source" ]
  static classes = [ "supported" ]
  connect() {
    if ("clipboard" in navigator) {
      this.element.classList.add(this.supportedClass);
    }
  }

  copy(event) {
    navigator.clipboard.writeText(this.sourceTarget.value)
  }
}

html

data-clipboard-supported-class="clipboard--supported"はコントローラーがクリップボード操作をサポートしていることを検出した場合に追加するクラス名を指定
clipboard--supportedが付与されたら、clipboard--supported .clipboard-buttonのルールが適用されるのでdisplay: initial;でボタンが表示される。

<div  data-controller="clipboard" data-clipboard-supported-class="clipboard--supported">
  PIN: <input data-clipboard-target="source" type="text" value="1234" readonly>
  <button data-action="clipboard#copy" class="clipboard-button">Copy to Clipboard</button>
</div>

<style>
.clipboard-button {
  display: none;
}

.clipboard--supported .clipboard-button {
  display: initial;
}
</style>

実際の画面

正常な場合の画面表示は以下になります。
jsが読み込まれるので、クリップボードAPIが動作します。

次に、jsをすべてコメントアウトして、画面をリロードしてみてください。
以下のようにjsが読み込まれないため、コピーボタンが非表示になります。

次回

古いブラウザを考慮した設計を学ぶことができました。
ドキュメントをさらに読み進めます。