MENU
プログラミングを学んで自由な働き方を手に入れよう！Webエンジニアとして活躍するためのプログラミング学習方法・スクール情報メディア
  1. ホーム
  2. プログラミング
  3. JavaScript
  4. JavaScriptとHTMLの基本的な関係と使い方を初心者向けに解説

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

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

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

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

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

この記事を書いた人
筆者のプロフィールアイコン
  • 現役のフルスタックエンジニアとして活躍中
  • 開発チームリーダーとして複数プロジェクトをリード
  • 副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ
  • プログラミングスクールのカリキュラム執筆経験あり
目次

JavaScriptとHTMLの関係

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

HTMLの役割

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

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

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

JavaScriptの役割

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

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

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

HTMLでJavaScriptを呼び出す方法

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

  1. HTMLファイル内にJavaScriptのコードを直接記述する
  2. 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の勉強法3選を現役エンジニアが比較・解説！ | Muscle Coding JavaScriptの効果的な学習方法を現役エンジニアが解説！本、動画教材（Udemy）、プログラミングスクールの特徴を比較し、最適な方法を提案します。初心者でも理解しやすい…
JavaScript
JavaScript
目次