JavaScriptの動的って何？ 誰でも分かるHTML... | 侍エンジニアブログ

JavaScriptの動的って何？誰でも分かるHTML要素の書き換え手法 | 侍エンジニアブログ ロゴ Business 法人の方はこちら Seminar 無料セミナー e-Learning 侍テラコヤ 無料カウンセリング MENU ホーム プログラミング プログラミング基礎 プログラミング教育 プログラミング学習 プログラミング言語 HTML CSS C言語 C# VBA Go言語 Kotlin Java JavaScript PHP Python SQL Swift Ruby その他言語 ITスクール キャリア エンジニア プログラマー WEBデザイナー システムエンジニア インフラエンジニア フリーランス 副業 生成AI おすすめコンテンツ プログラミング学習プラン診断 ITキャリア診断 学習教材 卒業生インタビュー キャリアブック 運営元について ホーム プログラミング プログラミング基礎 プログラミング教育 プログラミング学習 プログラミング言語 HTML CSS C言語 C# VBA Go言語 Kotlin Java JavaScript PHP Python SQL Swift Ruby その他言語 ITスクール キャリア エンジニア プログラマー WEBデザイナー システムエンジニア インフラエンジニア フリーランス 副業 生成AI おすすめコンテンツ プログラミング学習プラン診断 ITキャリア診断 学習教材 卒業生インタビュー キャリアブック 運営元について ホーム プログラミング言語 JavaScript Javascript入門 JavaScriptの動的って何？誰でも分かるHTML要素の書き換え手法 JavaScriptの動的って何？誰でも分かるHTML要素の書き換え手法 2024 5/06 Javascript入門 2024年5月6日 侍エンジニア編集部 静的コンテンツ、動的コンテンツってなんだろう JavaScriptからどうやってHTML要素を取得したらいいの？ HTML要素をプログラムで制御できるのかな JavaScriptの基本的な文法が分かるようになってきたら、HTML要素を制御してWebサイトをダイナミックに変化してみませんか？ HTML要素を思い通りに制御することができる唯一のプログラミング言語としても知られるJavaScriptですが、一体どのような方法で実現できるのか悩む方も少なくないでしょう。 こんにちは！ライターのマサトです。 この記事では、初心者でも今日からJavaScriptでHTML要素を制御できる手法について分かりやすく解説していきますので、ぜひ最後まで読んで理解を深めて頂ければ幸いです。 この記事はこんな人のために書きました 動的コンテンツを学びたい方 HTML要素を取得・制御したい方 JavaScriptでHTML要素を生成したい方 JavaScriptを使ってHTML要素を自在に制御するスキルを身につけると、Webサイトをより魅力的に変化させることができます。しかし、どのように始めれば良いか悩む方も多いのではないでしょうか。そんな時は、専門的なサポートを受けることで、効率的にスキルを習得することができます。 この環境では、生成AIとWeb制作を組み合わせた実践的なスキルを学び、すぐに使えるノウハウを手に入れることができます。これにより、将来的なキャリアや収入の可能性を大きく広げることができるでしょう。 少しでも興味がある方は、まずセミナーの詳細を確認して、自分に合った学びの機会を探してみませんか？ セミナーの詳細をみる 目次 「動的」ってどういう意味？ 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つのコツ！ 更新日：2025年12月29日 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タグ内の要素を取得、設定する方法 更新日：2024年5月6日 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徹底解説 更新日：2024年5月6日 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を使う 上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！ Javascript入門 JavaScript 動的 この記事を書いた人 侍エンジニア編集部 【プロフィール】 DX認定取得事業者に選定されている株式会社SAMURAIのマーケティング・コミュニケーション部が運営。「質の高いIT教育を、すべての人に」をミッションに、IT・プログラミングを学び始めた初学者の方に向け記事を執筆。 累計指導者数4万5,000名以上のプログラミングスクール「侍エンジニア」、累計登録者数1万8,000人以上のオンライン学習サービス「侍テラコヤ」で扱う教材開発のノウハウ、2013年の創業から運営で得た知見に基づき、記事の執筆だけでなく編集・監修も担当しています。 【専門分野】 IT/Web開発/AI・ロボット開発/インフラ開発/ゲーム開発/AI/Webデザイン この著者の記事一覧へ 侍エンジニアの法人サービス 人気記事 プログラミング言語とは？種類別に特徴やできることをわかりやすく解説 プログラミング言語とは？種類別に特徴やできることをわかりやすく解説 【5分でわかる】VBAとは？言語の特徴を初心者向けにわかりやすく解説 ChatGPTとは何かをわかりやすく解説！仕組みやできることも簡単に紹介 Macのショートカットキー早見表92個｜効かないときの対処法も紹介します カテゴリー WEBデザイン Webデザインスクール プログラミング プログラミング言語 プログラミングスクール Webサイト制作 アプリ開発 開発環境・ツール ノーコード AI（人工知能） ITリテラシー テクノロジー パソコン IT専門学校 IT職種 リスキリング ワークライフバランス キャリア 殿堂入り記事 あなたの目的 に合わせた SAMURAI ENGINEERの運営サービス 未経験でも挫折しない プログラミングスクール 詳細はこちら 日本最大級の サブスク型オンラインITスクール 詳細はこちら 「一人で稼げる」スキルを身につける フリーランスコース 詳細はこちら 目次 閉じる 目次 閉じる