UPDATE：2022.3.18
- CATEGORY
- ホームページのこと仕事のこと
Javascriptでレスポンシブな電話番号リンク【Jqueryを使わない】
さやさんです。電話番号が掲載されたホームページ等をスマートフォンから閲覧した場合には、
リンクタグでそのまま電話をかけられるようにするのがより親切ですよね。
一方でPCから閲覧した場合、通常は電話をかけられないので電話番号のリンクは不要です。
電話番号のリンクをスマートフォンの時だけ有効にしたい場合、
その実装方法を検索してみるとjQueryを使ってスマホ時だけaタグを付与してリンクさせる方法が多く出てきます。
しかしjQueryを使わず、純粋なJavascript（Vanilla JS）のみを使ってコーディングしたい場合もありますよね。
そんな方のためにjQueryを利用しないで動く、Javascriptのみの記述方法をご紹介します。
記述方法
HTML
<span data-action="call" data-tel="0000-000-0000">電話する</span>
Javascript（Vanilla）
window.addEventListener('DOMContentLoaded', function(){
if (!isPhone())
return;
const actionTarget = document.querySelectorAll('span[data-action=call]');
for (let i = 0; i < actionTarget .length; i++){
actionTarget [i].outerHTML = '<a href="tel:' + actionTarget [i].dataset.tel + '">' + actionTarget [i].outerHTML + '</a>';
}
});
function isPhone() {
return (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('Android') > 0);
}
ポイント $.wrap()→outerHTMLで書き換える
jQueryでは指定した要素を別のHTMLタグで囲うことができる便利な$.wrap()が使えます。これを使えばレスポンシブ時に
しかしJavascript（Vanilla JS）では使えないので、outerHTMLを使って自力で書き換える必要があります。
そのため6行目の記述は、Javascript（Vanilla JS）とjQueryではこんなにも差が…
Javascript（Vanilla JS）
actionTarget[i].outerHTML = '<a href="tel:' + actionTarget[i].dataset.tel + '">' + actionTarget[i].outerHTML + '</a>';
jQuery
$.wrap('<a href="tel:' + $.data('tel') + '"></a>');
この記述量の差が、「jQueryが便利」である証拠ですね。
もっと知りたいjQueryの便利な所！
DOM要素取得の$(‘.hoge’)
jQueryからJavascript（Vanilla JS）への書き換え時、
私がハマった（とても初歩的な）点で
「document.querySelectorAll(selector).addEventListener()」が実行できないという問題がありました。
【イベント処理を記述するために使われるjQueryのメソッド「$.on」】
$.on(‘イベント名’)（jQuery）は.addEventListener(‘イベント名’)（Javascript（Vanilla JS））に書き換えが可能
しかし
$(‘.hoge’).on()は問題なくて
document.querySelectorAll(selector).addEventListener()はエラーになってしまう
この問題に直面して、改めてjQueryの便利さに気付いてしまったのです…。
HTMLのオブジェクト（DOM要素）を取得する時、jQueryでは$(‘.hoge’)という形で取得しますよね。
この$(‘.hoge’)、知らずに使っているうちはわからないのですが、
Vanilla JSを意識すると驚くほど便利なものだということに気付かされます。
どう便利かというと、$(‘.hoge’)で取得したDOM要素には「暗黙的にforEachのようなループ処理が実行される」のです。
このためjQueryではループ処理を記述しなくても$(‘.hoge’)に対して何かしら処理を行うこともできます。
（実際にはjQueryも内部的には要素1つ1つに処理を実行しているのですが…）
しかしJavascript（Vanilla JS）で$(‘.hoge’)の代わりに.querySelectorAllで要素を取得した場合は、
ループ処理等を行って要素一つ一つに対して処理を行う必要があります。
つまりdocument.querySelectorAll(selector).addEventListener()が実行できない問題を解決するには
取得した要素一つずつに.addEventListener()を実行すれば良いのです
↓上記に関して詳細を知りたい方は以下が参考になります
私がハマった（とても初歩的な）点で
「document.querySelectorAll(selector).addEventListener()」が実行できないという問題がありました。
【イベント処理を記述するために使われるjQueryのメソッド「$.on」】
$.on(‘イベント名’)（jQuery）は.addEventListener(‘イベント名’)（Javascript（Vanilla JS））に書き換えが可能
しかし
$(‘.hoge’).on()は問題なくて
document.querySelectorAll(selector).addEventListener()はエラーになってしまう
この問題に直面して、改めてjQueryの便利さに気付いてしまったのです…。
HTMLのオブジェクト（DOM要素）を取得する時、jQueryでは$(‘.hoge’)という形で取得しますよね。
この$(‘.hoge’)、知らずに使っているうちはわからないのですが、
Vanilla JSを意識すると驚くほど便利なものだということに気付かされます。
どう便利かというと、$(‘.hoge’)で取得したDOM要素には「暗黙的にforEachのようなループ処理が実行される」のです。
このためjQueryではループ処理を記述しなくても$(‘.hoge’)に対して何かしら処理を行うこともできます。
（実際にはjQueryも内部的には要素1つ1つに処理を実行しているのですが…）
しかしJavascript（Vanilla JS）で$(‘.hoge’)の代わりに.querySelectorAllで要素を取得した場合は、
ループ処理等を行って要素一つ一つに対して処理を行う必要があります。
つまりdocument.querySelectorAll(selector).addEventListener()が実行できない問題を解決するには
取得した要素一つずつに.addEventListener()を実行すれば良いのです
↓上記に関して詳細を知りたい方は以下が参考になります
最後に
jQueryはとても便利ですが、使わないでコーディング出来ればそれに越したことはないと最近感じています。jQueryを使わなければJSの読み込みが軽くなることがありますし、
あるいはjQueryを利用できない環境でのコーディングもあるので、
その場合にJavascript（Vanilla JS）のみで対応できるだけの知識があると安心ですね。
参考リンク
【脱jQuery！】ネイティブなJavaScript（Vanilla JS）への書き換え方まとめ
「Vanilla JS」というフレームワークの紹介記事もありますが、
最軽量のフレームワーク（中身は何もない）というジョークのようです。