JavaScriptでHTMLを操作しよう｜コード例付きで丁寧に解説

（最終更新月：2023年11月）

✔当記事は次のような疑問を持つ方に向けて書かれています

「htmlとjavascriptの役割とは何なのか？」

「htmlとjavascriptの記述方法を学びたい」

「htmlとjavascriptの具体的な例を確認したい」

✔当記事を通じて伝えること

htmlとjavascriptの基本概念
htmlとjavascriptの記述方法及びその活用
htmlとjavascriptの実使用例

当記事では、htmlとjavascriptの基本的な概念から、それらの具体的な記述方法、さらには活用例まで、詳細に説明します。

具体的な例を挙げながら解説を進めていきますので、ぜひ最後までお付き合いください。

筆者プロフィール

【現職】プロダクトマネージャー

【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

見るからにきれいなコードの書き方
コードの分割方法
変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

¥2,640 (2024/05/19 14:24:31時点 Amazon調べ-詳細)

HTMLとJavaScriptの基盤を理解する

こちらでは、「HTMLとJavaScriptの基盤」についてお伝えしていきます。

HTMLとJavaScriptの重要性を知る
HTMLとJavaScriptの関係性を理解する

HTMLとJavaScriptの重要性を知る

HTMLとJavaScriptの特徴は以下のとおり。

HTML：ウェブページの骨組みを形成するマークアップ言語
JavaScript：ウェブページに動的な要素を追加するためのプログラミング言語

これらの組み合わせにより、ユーザーに魅力的でインタラクティブな体験を提供できます。

HTMLとJavaScriptの関係性を理解する

HTMLは静的なコンテンツを表示するためのものであり、JavaScriptはそのコンテンツを動的に変更するためのものです。

JavaScriptはHTMLの要素を選択、変更、追加、削除する能力を持っています。

これによりリアルタイムでのページの更新やユーザーとのインタラクションが可能となるのです。

HTML内でJavaScriptを活用する方法

こちらでは、「HTML内でJavaScriptを活用する具体的な方法」について詳しく解説します。

script要素をうまく使う方法
HTMLファイル内でscript要素を配置する適切な場所
外部JavaScriptファイルの呼び出し方

script要素をうまく使う方法

HTML内でJavaScriptを実行するためには、<script>要素を使用します。

この要素内には、直接JavaScriptのコードを書くことが可能です。

<script>
    alert("Hello, World!");
</script>

HTMLファイル内でscript要素を配置する適切な場所

<script>要素は、通常、<body>要素の終了タグの直前に配置されます。

主な理由は以下の2つ。

ページの読み込み速度が向上する
JavaScriptのエラーが発生してもページの表示に大きな影響を与えないようになる

外部JavaScriptファイルの呼び出し方

外部のJavaScriptファイルを読み込む場合、<script>要素のsrc属性を使用します。

<script src="path/to/your/script.js"></script>

JavaScriptでHTML要素を操作する方法

こちらでは、「JavaScriptを使用してHTML要素を操作する方法」について詳しく解説します。

IDやclass属性を使ってHTML要素を取得する
具体的な取得方法とその適用例

IDやclass属性を使ってHTML要素を取得する

JavaScriptでは、getElementByIdやgetElementsByClassNameなどのメソッドを使用して、HTML要素を取得できます。

let elementById = document.getElementById("myId");
let elementsByClass = document.getElementsByClassName("myClass");

具体的な取得方法とその適用例

例えば、特定のボタンがクリックされたときにアラートを表示する場合、以下のようにコードを書きましょう。

<button id="myButton">Click me!</button>
<script>
    document.getElementById("myButton").onclick = function() {
        alert("Button was clicked!");
    };
</script>

getElementByIdでボタン要素を取得したら、onclickプロパティに必要な処理を記述してください。

HTML要素の動的生成と活用

こちらでは、「HTML要素の動的生成とその活用方法」について詳しく解説します。

createElement関数を利用する方法
jQueryライブラリの利用とその利益
動的HTML要素生成の例示

createElement関数を利用する方法

createElement関数を使用すると、新しいHTML要素を動的に生成できます。

let newElement = document.createElement("div");
newElement.textContent = "This is a new element!";
document.body.appendChild(newElement);

jQueryライブラリの利用とその利益

jQueryは、JavaScriptのライブラリのひとつで、HTML要素の選択、操作、アニメーションなどを簡単におこなえるもの。

このライブラリを使用することで、ブラウザ間の互換性の問題を気にせずに、効率的にコードを書けるようになります。

// jQueryを使用して、p要素のテキストを変更する例
$("p").text("This is changed text using jQuery!");

動的HTML要素生成の例示

JavaScriptで、ユーザーのアクションに応じた新しいHTML要素を、動的に生成できます。

例えば以下は、ボタンをクリックすると新しいリストアイテムが追加される場合のコードです。

<ul id="myList">
    <li>Item 1</li>
</ul>
<button onclick="addItem()">Add Item</button>

<script>
    function addItem() {
        let newItem = document.createElement("li");
        newItem.textContent = "New Item";
        document.getElementById("myList").appendChild(newItem);
    }
</script>

魅力的で動的なウェブサイトを作るためのヒント

こちらでは、「魅力的で動的なウェブサイトを作成するためのヒント」について詳しく解説します。

モダンなウェブデザインに必要な要素
JavaScriptとHTMLを応用して洗練されたウェブサイトを作成する

モダンなウェブデザインに必要な要素

モダンなウェブデザインは、レスポンシブデザインやクリーンなUI、直感的なナビゲーションなどの要素を取り入れることが求められます。

また、ユーザーエクスペリエンスを最優先に考え、サイトの速度やアクセシビリティも重要です。

JavaScriptとHTMLを応用して洗練されたウェブサイトを作成する

JavaScriptとHTMLを組み合わせることで、アニメーション効果やインタラクティブな要素を取り入れ、ユーザーのエンゲージメントを高められるでしょう。

スクロールに応じてコンテンツが表示されるアニメーション
ユーザーのアクションに応じて変化するインターフェース

スクロールに応じたアニメーション表示

スクロールすると特定の要素がフェードインする効果です。

HTMLのコードはこちら。

   <!DOCTYPE html>
   <html>
   <head>
       <title>Scroll Animation Demo</title>
       <style>
           .hidden { opacity: 0; }
           .fade-in { transition: opacity 1s; }
       </style>
   </head>
   <body>
       <div class="hidden" id="animatedElement">コンテンツがここに表示されます</div>

       <script src="script.js"></script>
   </body>
   </html>

JavaScript (script.js)のコードです。

   document.addEventListener('scroll', function() {
       var element = document.getElementById('animatedElement');
       var position = element.getBoundingClientRect();

       // ウィンドウのビューポートに要素が表示された場合
       if(position.top < window.innerHeight && position.bottom >= 0) {
           element.classList.add('fade-in');
           element.style.opacity = 1;
       }
   });

ユーザーアクションに応じたインターフェースの変化

ボタンをクリックすると背景色が変わるシンプルな例です。

HTMLは以下のとおり。

   <!DOCTYPE html>
   <html>
   <head>
       <title>Interactive Interface Demo</title>
   </head>
   <body>
       <button id="changeColorButton">背景色を変える</button>

       <script src="interaction.js"></script>
   </body>
   </html>

JavaScript (interaction.js)です。

   document.getElementById('changeColorButton').addEventListener('click', function() {
       document.body.style.backgroundColor = 'lightblue';
   });