スライドショー

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


静的コンテンツ、動的コンテンツってなんだろう
JavaScriptからどうやってHTML要素を取得したらいいの?
HTML要素をプログラムで制御できるのかな

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

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

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

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

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

  • 動的コンテンツを学びたい方
  • HTML要素を取得・制御したい方
  • JavaScriptでHTML要素を生成したい方

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

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

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

  • 静的ページ:Webページ内のコンテンツが一切変化しない
  • 動的ページ: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メソッドの基本から活用技を次の記事で体系的にまとめているのでぜひ参考にしてみてください!

【JavaScript入門】getElementByIdを完全理解する3つのコツ!
更新日 : 2019年4月25日

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の基本的な仕組みや活用術については、次の記事でまとめているので合わせて参考にしてみてください!

【JavaScript入門】innerHTMLでdivタグ内の要素を取得、設定する方法
更新日 : 2019年3月30日

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の基本的な使い方に関しては次の記事で体系的にまとめているので合わせて参考にしてみてください!

【JavaScript入門】appendと何が違う?appendChild徹底解説
更新日 : 2019年4月4日

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による動的コンテンツの作り方について学習しました。

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

  • 動的ページはWebページ内のコンテンツが変化するサイトである
  • HTML要素の取得・変更にはinnerHTML / textContentが使える
  • HTML要素を生成するにはcreateElement / appendChildを使う

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

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

マサト

マサト

JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。
JavaScript以外の趣味は、旅をしながらの街歩きや登山など。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説