毎朝のジョギングは、眠くてしんどいけれど、どうしてもやめられない体になってしまった、ユゲタです。
仕事も遊びも、自分の健康が一番最初に安定していないといけないから、体にいい生活習慣を身に着けたもん勝ちです。
そんな、健康志向の話はさておき、javascriptの負の遺産といえば、「document.write」という機能があります。
未だに、JSタグ型SaaSサービスで、このdocument.writeを使っているサービスなども、たま〜〜にですが、見かけてしまいます。
そして、javascriptのプログラムを覚えて、このdocument.writeを使ったプログラムを書いて、本番にアップしてしまうと、
思いも寄らない画面の表示になって、慌てた経験がある人も多いのではないでしょうか？
また、タグマネージャーで、document.write機能を使いたいけど、使えなくて困った企業のマーケティング部署の人もいるかと思います。
そんな人には、insertAdjacentHTMLという機能を使うことをオススメしたいと思い、今回ブログにその方法などを書いてみます。
document.writeはなんで都合が悪いのか？
document.writeは、javascriptの実行タイミングで、HTMLにダイレクトにタグを出力する機能で、
headタグのscriptタグ呼び出しの中に書いてある場合、scriptタグのすぐ後ろに、document.writeで指定された文字列が挿入されます。
この時に、タグが書かれていると、ちゃんとブラウザでHTMLレンダリングして対応してくれるという命令です。
<!DOCTYPE html>
<html>
<head>
<title>document-write</title>
<script src="document_write.js"></script>
</head>
<body>
<h1>sample</h1>
</body>
</html>
document.write("hoge-<b>hoge</b>-<font color='red'>hoge</font>");
こんな感じですが、headタグ内の文字が、ブラウザに表示されているのも、このdocument.writeが協力な機能だということの現れかもしれません。
では、今度は、html内のscriptタグに"async"属性を付けてみましょう。
この属性をつけると、外部モジュール（jsファイル）を読み込む時に「非同期」対応ができるようになり、読み込みが遅い場合に、画面の読み込みが遅延せずに、読み込まれたタイミングで、javascriptが実行されるようになります。
では実際にこの属性を付けてみると、document.writeでの表示がされなくなります。
どこかに消え去ってしまったようですね。
次に、setTimeoutで、時間差で表示をさせてみるとどうでしょう？
document_write.jsの中身を書き換える。
setTimeout(function(){
document.write("hoge-<b>hoge</b>-<font color='red'>hoge</font>");
},3000);
すると、今度は、3秒後に実行されたdocument.writeによって、実際のHTMLで表示されるHTMLが消えて、
document.writeだけが表示されるようになります。
これをwebサイトの本番でやってしまったら・・・と思うと、ゾッとしますよね。
なので、この危険なdocument.writeは、使ってはいけないシロモノだと言うことを分かってもらえましたでしょうか？
insertAdjacentHTMLの簡単使い方
それでは、どうやって、タグや文字列を、htmlに挿入すればいいかというと、
appendChildやinnerHTMLなどの特定のタグ内にHTMLを挿入する機能はありますが、
それよりも、簡単に行える方法として、"insertAdjacentHTML"というのが、あるので、それを紹介します。
document_write.jsを書き換える。
setTimeout(function(){
let target = document.querySelector("h1");
let html = "hoge-<b>hoge</b>-<font color='red'>hoge</font>";
target.insertAdjacentHTML("beforebegin" , html);
},3000);
こうすると、ページを読み込んで、3秒後に、さきほどと同じように、指定したHTMLの表示が挿入されます。
innerHTMLでも似たような事ができると思いますが、指定のelementに対して、appendChildやinsertBeforeのような挿入が同時に行えるというのが、この機能の便利どころです。
ただし、指定のelementを取得するというのは、手続きとしては必要になるので、document.writeと同じ効果にしたい場合は、scriptタグにid属性などを付けて、getElementByIdでそれを取得するというやり方が、わかりやすいかもしれません。
あと、このinsertAdjacentHTMLのリファレンスサイトのURLを書いておきますね。
MDN Web Docs : element.insertAdjacentHTML
それ以外で対応する力技
javascriptに慣れてくると、色々と力技で、同じ処理を行うことは可能です。
次のような方法もあるので、合わせて比べて自分に合ったものを採用してみてください。
setTimeout(function(){
let div = document.createElement("div");
let target = document.querySelector("h1");
div.innerHTML = "hoge-<b>hoge</b>-<font color='red'>hoge</font>";
target.parentNode.insertBefore(div , target);
},3000);
おわかりいただけただろうか？
appendChildやinsertBeforeは、divなどのinnerできるタグをwrap的に用意しなくてはいけません。
bodyタグに直接innerHTMLする場合は、挿入する箇所の正規表現的な文字判定をしっかりしないと、ページ内のHTMLが全部消える可能性もあるので、キケン方法なので、
極力避けましょう。
最後に
今回お伝えした方法は、タグマネージャーなどのサービスを使う際に困っていた人が理解すると、非常に便利に使える技なので、
お困りの人がいたら、ご活用くださいませ。
また、他にもお困りの人がいたら、その内容を教えてもらえると、対応方法をご紹介いたしますよ。
ちなみに、今現在、会社で使えるSaaSサービスを作っていて、気になって書いたブログでした。
