JavaScriptとHTMLの基本的な関係と使い方を初心者向けに解説

2024-05-06

当サイトでは一部リンクに広告が含まれています

JavaScriptを使うと、HTMLで作ったWebページに動きをつけることができます。しかし、JavaScriptとHTMLの関係性や使い方がわからないという初心者の方も多いのではないでしょうか。

この記事では、そんな初心者の方に向けて、JavaScriptとHTMLの基本的な関係と使い方について詳しく解説していきます。

最後まで読めば、JavaScriptを使ったWebサイト制作に必要な基礎知識がしっかり身につくはずです。それでは、さっそく見ていきましょう！

この記事を書いた人

未経験からWebエンジニアとして転職成功（年収 30% アップ）
現役のフルスタックエンジニアとして活躍中
開発チームリーダーとして複数プロジェクトをリード
副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ

JavaScriptとHTMLの関係

JavaScriptとHTMLは、どちらもWebサイトを構築するための言語です。しかし、それぞれ役割が異なります。

HTMLの役割

HTMLは「HyperText Markup Language」の略で、Webページの基本的な構造や内容を作る言語です。

見出しやパラグラフ、画像、リンクなどの要素を定義
文書の論理構造を表現

HTMLはマークアップ言語なので、Webページに動きをつけたり複雑な処理を行うことはできません。

JavaScriptの役割

一方、JavaScriptはプログラミング言語の一つで、HTMLで作ったWebページに動きや機能を追加するために使われます。

スライドショーやプルダウンメニューなどの動的な機能を実装
ユーザーのアクションに応じた処理を実行
サーバーとデータをやり取りして動的にページを生成

つまり、HTMLは静的なページを作り、JavaScriptはそのページを動的にコントロールする、という関係にあるのです。

HTMLでJavaScriptを呼び出す方法

それでは実際に、HTMLファイルでJavaScriptを使う方法を見ていきましょう。基本的には以下の2通りの方法があります。

HTMLファイル内にJavaScriptのコードを直接記述する
JavaScriptファイルを外部から読み込む

HTMLにコードを埋め込む方法

HTMLファイルの<head>タグまたは<body>タグ内に<script>タグを記述し、その中にJavaScriptのコードを直接書きます。

<script>
  // ここにJavaScriptのコードを記述
</script>

この方法は手軽に使えますが、コードが長くなるとHTMLが見づらくなるというデメリットがあります。

外部ファイルとして読み込む方法

JavaScriptのコードを別ファイル（.jsファイル）に記述し、HTMLから読み込む方法です。<script>タグのsrc属性にファイルのパスを指定します。

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

この方法なら、JavaScriptのコードを分離できるのでHTMLが見やすくなります。複数のページで同じスクリプトを使いまわすこともできます。

async / defer属性で読み込みを最適化

通常、<script>タグがHTMLの途中にあると、そこで一旦HTMLの読み込みが止まってしまいます。これを避けるため、async属性やdefer属性を使って非同期読み込みを行うのがベストプラクティスです。

async：スクリプトのダウンロードとHTMLの解析を並行して行い、ダウンロードが完了次第すぐに実行
defer：スクリプトのダウンロードとHTMLの解析を並行して行うが、実行はHTMLの解析が終わってから

<script src="script.js" async></script>
<script src="script.js" defer></script>

JavaScriptでHTML要素を取得する

JavaScriptからHTMLの要素を取得して操作することで、Webページに動きをつけることができます。要素の取得には主に以下の方法があります。

ID属性を使う方法

HTML側であらかじめ要素にID属性を設定しておき、JavaScriptのgetElementById()メソッドでそのIDを指定して要素を取得します。

// HTML
<p id="msg">Hello</p>

// JavaScript
const el = document.getElementById('msg');

class属性を使う方法

同様にclass属性を設定しておき、getElementsByClassName()メソッドでクラス名を指定して要素を取得します。class属性は複数の要素に付けられるので、戻り値は配列になります。

// HTML
<p class="headline">見出し1</p>
<p class="headline">見出し2</p>

// JavaScript
const headlines = document.getElementsByClassName('headline');

JavaScriptでHTML要素を操作する

取得したHTML要素に対して、JavaScriptから様々な操作を行うことができます。

要素の内容を変更する

textContentプロパティやinnerHTMLプロパティを使うと、要素内のテキストやHTMLを変更できます。

// HTML
<p id="msg">Hello</p>

// JavaScript
const el = document.getElementById('msg');
el.textContent = 'こんにちは'; // テキストを変更
el.innerHTML = 'こんにちは<br>JavaScriptより'; // HTMLを変更

要素を追加・削除する

createElement()メソッドで新しい要素を作り、appendChild()メソッドで既存の要素に追加できます。逆にremoveChild()メソッドで要素を削除することもできます。

// 新しいli要素を作成
const li = document.createElement('li');
li.textContent = 'アイテム4';

// ul要素の子要素として追加
const ul = document.querySelector('ul');
ul.appendChild(li);

// 2番目のli要素を削除
const item2 = document.querySelectorAll('li')[1];
ul.removeChild(item2);

JavaScriptが動かない原因と対処法

JavaScriptのコードを書いたのに思った通りに動かないという経験はありませんか？そんな時は以下の点をチェックしてみましょう。

JavaScriptが無効になっている

まずは、ブラウザの設定でJavaScriptが有効になっているか確認しましょう。無効になっている場合は設定を変更します。

コードにエラーがある

JavaScriptのコードにエラーがないか、ブラウザの開発者ツールなどを使ってデバッグしてみましょう。コンソールにエラーメッセージが出ていれば、それを手がかりに修正していきます。

実行タイミングが合っていない

JavaScriptを実行するタイミングがHTMLの読み込みより早いと、まだ存在しない要素を取得しようとしてエラーになります。defer属性を使ったり、DOMContentLoadedイベントのリスナーでコードを囲むなどして実行タイミングを調整しましょう。

document.addEventListener('DOMContentLoaded', function() {
  // ここに実行したいコードを書く
});

セレクターが間違っている

要素を取得する際のセレクター（IDやクラス名など）が間違っていると、目的の要素を取得できません。IDやクラス名が合っているか確認し、必要ならばconsole.log()などを使って取得した要素の中身を確かめましょう。

まとめ

今回は、JavaScriptとHTMLの関係性や使い方について、初心者にもわかりやすく解説してきました。

JavaScriptはHTMLで作られた文書に動きや機能を与える
JavaScriptをHTMLで使うには外部ファイルを読み込むのが基本
DOM APIを使ってJavaScriptからHTMLの要素を操作できる

JavaScriptの入門としてはDOM操作がおすすめですが、それ以外にもイベント処理やWeb APIの活用など、いろいろな使い方ができます。ぜひ今回紹介したことを手がかりに、さらにJavaScriptの勉強を進めていってください。

最後に、HTMLとCSSの知識もしっかり身につけておくと、より実践的なWebサイト制作につなげていくことができます。基礎をマスターして、オリジナルのWebサイトを作ってみましょう！

JavaScript を挫折せず学習するならプログラミングスクールがおすすめ！

この記事を読んでくれた方は、JavaScript を学習中、もしくは使い始めている人かと思います。
ただ、JavaScript は「知らないと困る知識・コツ」が多く、私も最初は苦労しました…。

そのため確実に就職・転職を目指すのならばプログラミングスクールでの学習を検討してみませんか？

JavaScript はフロントエンドのすべてに通じますので、体系的に学んでおくと給与アップにもつながりますよ。

おすすめのプログラミングスクールについては、別の記事でまとめていますので是非ご覧ください。

現役のエンジニア兼プログラミングスクール講師として、自信を持っておすすめできるスクールだけを紹介しています！

Muscle Coding

JavaScriptを学べるおすすめプログラミングスクールを現役エンジニアが解説 | Muscle Coding JavaScriptを学べるプログラミングスクールの中でも特におすすめのスクールを現役エンジニアが詳しく解説します。料金、給付金、受講期間、サポート、チーム開発、など、各…