JavaScriptの動的って何？誰でも分かるHTML要素の書き換え手法

JavaScriptの基本的な文法が分かるようになってきたら、HTML要素を制御してWebサイトをダイナミックに変化してみませんか？

HTML要素を思い通りに制御することができる唯一のプログラミング言語としても知られるJavaScriptですが、一体どのような方法で実現できるのか悩む方も少なくないでしょう。

こんにちは！ライターのマサトです。

この記事では、初心者でも今日からJavaScriptでHTML要素を制御できる手法について分かりやすく解説していきますので、ぜひ最後まで読んで理解を深めて頂ければ幸いです。

この記事はこんな人のために書きました

「動的」ってどういう意味？

JavaScriptはもちろんのこと、Webプログラミングを学習していると「静的ページ」「動的ページ」という言葉をよく見かけます。一体これは何を指している言葉なのでしょうか？

ざっくり簡単に説明すると次のようになります。

つまり、JavaScriptなどプログラミング言語からHTML / CSSが生成されることによって、新しいコンテンツが表示されたり変化します。このようなサイトは動的ページと一般的に言われます。

分かりやすい例で言えば、TwitterやFacebookなどはユーザーが投稿したコンテンツによって随時Webページ内が変化していますよね？ つまり、このようなページは動的と言えるわけです。

HTML要素を動的に変更する

この章では、動的ページを作成するために欠かせないHTML要素の取得・変更方法についてご紹介します。基本的なJavaScriptのメソッドを利用して取得したHTML要素の変更方法について学んでいきましょう。

getElementByIdでHTML要素を取得しよう

getElementByIdメソッドは、JavaScriptを利用してHTML要素を取得するためのもっとも基本的なメソッドと言えます。

使い方としては、HTML要素に付与したID属性を利用して取得することになります。例えば、次のようなHTMLがあるとします。

Hello world!

ID属性値としてmyidが設定されていますよね？ この値をgetElementByIdの引数に指定すれば良いのです。

const p = document.getElementById("myid");

console.log(p);

実行結果

Hello world!

実行結果を見ると見事にp要素が取得できているのが分かりますね。以降は、変数pを使ってJavaScript側からHTML要素を制御できるようになるというわけです。

ちなみに、getElementByIdメソッドの基本から活用技を次の記事で体系的にまとめているのでぜひ参考にしてみてください！

innerHTMLで任意のHTML要素を追加・変更しよう

JavaScriptから取得したHTML要素を使って、今度はHTML要素を新規に作成して追加・変更してみましょう！

そこで、次のようなdivタグを配置しておきます。

divタグの中には何もHTML要素が配置されていませんが、ここにJavaScriptから別のHTML要素を追加してみましょう。

まずは、前回と同じようにdiv要素をJavaScriptから取得します。

const div = document.getElementById("wrap");

変数divにHTML要素が格納されているので、ここからinnerHTMLを利用して別のHTML要素を文字列で指定します。

div.innerHTML = '
こんにちは！
';

実行後のHTML

    
こんにちは！

実行後のHTMLを見るとdivタグの中にinnerHTMLで指定したp要素が配置されているのが分かりますね。

このinnerHTMLの基本的な仕組みや活用術については、次の記事でまとめているので合わせて参考にしてみてください！

textContentで文字列を変更しよう

textContentは任意のHTML要素が持つ文字列を取得したり変更するのに役立ちます。今度は、このtextContentをJavaScriptで利用する方法について見ていきましょう！

次のようなHTML要素があるとします。

こんにちは

このp要素には【こんにちは】という文字列が記述されていますが、この文字を別の文字列に変更してみましょう。

const element = document.getElementById('text');

element.textContent = 'おはよう';

実行後のHTML

おはよう

実行後のHTMLを見てみると【こんにちは】から【おはよう】という文字列に変更されているのが分かりますね。ただし、innerHTMLと違ってHTMLタグは認識されないので注意しましょう。

HTML要素を動的に生成する

この章では、JavaScriptから新しいHTML要素を生成する方法について見ていきましょう。主に、createElementの使い方とライブラリの動的読み込みについて学んでいきます。

createElementでHTML要素を生成しよう

createElementはJavaScriptからHTML要素を生成するためのメソッドであり、HTMLを制御するのに欠かせない存在と言えます。

使い方は簡単で生成したいHTML要素のタグ名を引数に指定するだけです。

const h1 = document.createElement('h1');
      
h1.textContent = 'こんにちは';

この例では、h1タグを生成しておりJavaScriptから【こんにちは】という文字列を設定しているのが分かりますね。ただし、この状態だとJavaScriptでh1タグを生成しただけなので、実際にHTMLソースへ組み込まなければ表示はされません。

そこで必要になるのがappendChildというメソッドです。

引数に生成したHTML要素を指定すれば、HTMLソースへ組み込まれるので画面に表示されるようになります。

document.body.appendChild(h1);

この例では、bodyタグの一番最後にJavaScriptで生成したh1タグを配置するようになります。このようにcreateElementとappendChildは1セットで覚えておくと便利でしょう。

ちなみに、appendChildの基本的な使い方に関しては次の記事で体系的にまとめているので合わせて参考にしてみてください！

jQueryライブラリを動的に読み込んでみよう

createElementとappendChildを利用すれば、JavaScriptライブラリを動的に読み込むことも可能になります。これにより、ライブラリの使用可否を任意のタイミングで制御できるようになるので便利です。

方法としてはこれまで通りにscriptタグを生成して、jQueryのファイルパスを設定すれば良いわけです。

const script = document.createElement('script');

script.src = 'https://code.jquery.com/jquery-3.4.0.min.js';

document.body.appendChild(script);

この例では、jQueryのライブラリをsrc属性に設定したあとにscriptタグをHTMLソースに組み込んでいますね。

実際にjQueryで簡単な記述をしてみましょう！

$('h1').text('こんにちは');

これはh1要素の文字列を【こんにちは】という文字に変更しているのですが、実行結果はエラーになってしまいます。

理由としては、jQueryライブラリがすべて読み込まれる前にjQueryのコードが実行されているためです。これを回避するには、ライブラリの読み込みが完了してからコードを実行すれば良いわけです。

そのため、生成したscript要素にloadイベントを記述するのが良いでしょう。

script.addEventListener('load', function() {

    $('h1').text('こんにちは');

});

このようなイベント処理を記述することで、scriptの読み込みが完了したあとにjQueryのコードが実行されるようになるのです。

まとめ

今回は、JavaScriptによる動的コンテンツの作り方について学習しました。

最後に、もう一度ポイントをおさらいしておきましょう！

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！