概要
この記事はJavaScriptが無効な状態でもサイトやアプリケーションを使えるようにしたい人のためのTips記事です。
JavaScriptが無効化されている時に操作できないようなサイトやアプリケーション、ありますよね。たくさん。
舐めやがって！誰もがJavaScriptを有効化していると思うな！
JavaScriptの使用を強制するのは良くない！なくても動くようにしよう！
あれ？でもJavaScriptが無効かどうかってどうやって取得するの？JavaScriptが無効化されてるんだからJavaScriptで取得できないよね？
JavaScriptが無効かどうかの判定
最初に断っておくと、JavaScriptが動かなくても動くようにするための実装はもちろん自分でやる必要があります。頑張れ！
判定方法はざっくり3つあります。
1. noscriptを使う
<noscript>JavaScriptが無効です</noscript>
noscriptの中にJavaScriptが無効な時表示したいものを入れます。
デメリットはHTMLがでかくなることです。
あと当たり前ですが、noscriptの外に書いたコンテンツはJavaScriptが有効化されていても無効化されていても表示されるので、出しわけできるのはnoscriptの中のコンテンツだけです。
これが欲しいと思ったことあんまりないんだよな…
2. state
<script>
let no_script = $state(true);
$effect.pre(() => {
no_script = false;
});
</script>
{#if no_script}
JavaScriptが無効です
{:else}
JavaScriptが有効です
{/if}
こうします。
こうすると$effect.preの部分はJavaScriptが無効な時実行されないので「JavaScriptが無効です」が表示され、JavaScriptが有効な場合は「JavaScriptが有効です」が表示され、出しわけできます。
これを使えば、例えば入力欄のサジェスト表示で
- JavaScriptが有効な場合はリッチなビジュアルと機能を持つものを表示
- 無効化されている場合は
<datalist>を使って表示
などすることができます。
datalistはモバイルSafariで見た時めっちゃ見にくいのであまり使いたくないですね…
3. awaitブロック
{#await Promise.resolve('')}
JavaScriptが無効です
{:then}
JavaScriptが有効です
{/await}
こうします。
Promiseはブラウザ側で解決されるので、JavaScriptが無効な時はawaitブロックのthenに入る前の部分が表示されます。
有効な場合はthenの中が表示されます。
まとめ
ここまで3つのやり方を紹介しましたが、どれも一瞬ちらつきます。
JavaScriptが無効でも動くぜ〜！とドヤることができても、JavaScriptが有効化されているユーザーにレイアウトシフト起こって体験が悪くなったら台無しです。
🤖 < 体験が悪くなるJavaScriptなんて書かなければいいのに…
見た目に差分が極力出ないようにCSSを頑張って書きましょう。