【初心者必見】JavaScriptとHTMLで作る動的Webサイト入門 - 5つの実践例で基礎をマスター
こんにちは、とまだです。
プログラミングを始めたいけど、「HTMLだけじゃ物足りない」「動きのあるWebサイトを作りたい」と思ったことはありませんか？
私も最初はHTMLで静的なページしか作れず、もっとインタラクティブなサイトを作りたいともどかしい思いをしていました。
今回は、HTMLとJavaScriptを組み合わせて、ボタンクリックで反応したり、フォームの入力をチェックしたりする動的なWebサイトの作り方を、5つの実践例とともに解説します。
JavaScriptとHTMLの関係を理解しよう
まず、JavaScriptとHTMLの役割の違いから説明しますね。
簡単に言うと、HTMLは「建物の骨組み」、JavaScriptは「電気設備」のようなものです。
HTMLで家の形を作り、JavaScriptで照明のスイッチや自動ドアなどの動く仕組みを追加するイメージです。
それぞれの役割
HTML（構造）
- ページの基本構造を定義
- 見出し、段落、画像などの配置
- 静的なコンテンツの表示
JavaScript（動作）
- ユーザーの操作に反応
- 要素の表示/非表示の切り替え
- データの計算や検証
環境構築は超シンプル！今すぐ始められる
JavaScriptとHTMLを始めるのに必要なものは、たった2つだけです。
- テキストエディタ（メモ帳でもOK）
- Webブラウザ（Chrome、Firefox、Safariなど）
特別なソフトのインストールは不要です。
これって実はすごいことなんです。他のプログラミング言語だと、環境構築だけで挫折することもありますからね。
ファイルの作り方
まずは、デスクトップに新しいフォルダを作りましょう。
myproject/
├── index.html
└── script.js
これだけで準備完了です！
実践例1：ボタンクリックでメッセージを表示
では、最初の実践例を見ていきましょう。
ボタンをクリックしたらメッセージが表示される、シンプルな仕組みを作ります。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScriptとHTMLの練習</title>
</head>
<body>
<h1>ようこそ！</h1>
<button id="myButton">クリックしてください</button>
<p id="message"></p>
<script src="script.js"></script>
</body>
</html>
script.js
// ボタンを取得
const button = document.getElementById('myButton');
const message = document.getElementById('message');
// クリックイベントを追加
button.addEventListener('click', function() {
message.textContent = 'ボタンがクリックされました！';
});
このコードのポイントは、HTMLで用意した要素にJavaScriptから「アクセス」して、動きを付けている点です。
getElementByIdは、指定したIDの要素を探してくる命令です。まるで住所を頼りに家を探すようなものですね。
実践例2：入力フォームの値を取得して表示
次は、フォームに入力した内容を取得して表示する例です。
HTMLに追加
<div>
<h2>名前を入力してください</h2>
<input type="text" id="nameInput" placeholder="お名前">
<button id="greetButton">挨拶する</button>
<p id="greeting"></p>
</div>
JavaScriptに追加
// 挨拶機能
const nameInput = document.getElementById('nameInput');
const greetButton = document.getElementById('greetButton');
const greeting = document.getElementById('greeting');
greetButton.addEventListener('click', function() {
const name = nameInput.value;
if (name) {
greeting.textContent = `こんにちは、${name}さん！`;
} else {
greeting.textContent = '名前を入力してください。';
}
});
ここではif文を使って、入力があるかどうかをチェックしています。
これは「もし〜なら」という条件分岐で、プログラミングの基本中の基本です。
実践例3：要素の表示/非表示を切り替える
Webサイトでよく見る「もっと見る」ボタンを作ってみましょう。
HTMLに追加
<div>
<h2>記事の詳細</h2>
<p>ここは最初から見える部分です。</p>
<div id="moreContent" style="display: none;">
<p>ここは最初は隠れている詳細情報です。</p>
<p>ボタンをクリックすると表示されます。</p>
</div>
<button id="toggleButton">もっと見る</button>
</div>
JavaScriptに追加
// 表示/非表示の切り替え
const moreContent = document.getElementById('moreContent');
const toggleButton = document.getElementById('toggleButton');
toggleButton.addEventListener('click', function() {
if (moreContent.style.display === 'none') {
moreContent.style.display = 'block';
toggleButton.textContent = '閉じる';
} else {
moreContent.style.display = 'none';
toggleButton.textContent = 'もっと見る';
}
});
style.displayを使って、CSSの表示プロパティを動的に変更しています。
これにより、ページをリロードすることなく、コンテンツの表示を切り替えられます。
実践例4：リアルタイムで文字数をカウント
SNSの投稿欄でよく見る、文字数カウンターを作ってみましょう。
HTMLに追加
<div>
<h2>メッセージを入力</h2>
<textarea id="messageArea" rows="4" cols="50" maxlength="100"></textarea>
<p>文字数: <span id="charCount">0</span> / 100</p>
</div>
JavaScriptに追加
// 文字数カウント
const messageArea = document.getElementById('messageArea');
const charCount = document.getElementById('charCount');
messageArea.addEventListener('input', function() {
const length = messageArea.value.length;
charCount.textContent = length;
// 80文字を超えたら赤色に
if (length > 80) {
charCount.style.color = 'red';
} else {
charCount.style.color = 'black';
}
});
addEventListener('input', ...)を使うことで、文字を入力するたびにリアルタイムで処理が実行されます。
実践例5：簡単なToDoリストを作る
最後に、少し応用的な例として、ToDoリストを作ってみましょう。
HTMLに追加
<div>
<h2>ToDoリスト</h2>
<input type="text" id="todoInput" placeholder="タスクを入力">
<button id="addButton">追加</button>
<ul id="todoList"></ul>
</div>
JavaScriptに追加
// ToDoリスト機能
const todoInput = document.getElementById('todoInput');
const addButton = document.getElementById('addButton');
const todoList = document.getElementById('todoList');
addButton.addEventListener('click', function() {
const task = todoInput.value;
if (task) {
// 新しいリスト項目を作成
const li = document.createElement('li');
li.textContent = task;
// 削除ボタンを追加
const deleteBtn = document.createElement('button');
deleteBtn.textContent = '削除';
deleteBtn.addEventListener('click', function() {
li.remove();
});
li.appendChild(deleteBtn);
todoList.appendChild(li);
// 入力欄をクリア
todoInput.value = '';
}
});
createElementで新しい要素を作り、appendChildで追加しています。
これにより、動的にHTMLの構造を変更できるんです。
よくあるエラーと対処法
JavaScriptを始めたばかりの頃によく遭遇するエラーをまとめました。
1. 要素が見つからない
// エラー: Cannot read property 'addEventListener' of null
原因: HTMLの読み込みが完了する前にJavaScriptが実行されている
対処法: <script>タグを</body>の直前に配置する
2. 関数が定義されていない
// エラー: Uncaught ReferenceError: myFunction is not defined
原因: 関数名のタイプミスや、定義前に呼び出している
対処法: スペルを確認し、定義の順番を見直す
3. thisの参照が違う
アロー関数と通常の関数ではthisの扱いが異なります。
最初は通常のfunctionを使うことをおすすめします。
次のステップへ
ここまでの内容を理解できたら、次はこんなことに挑戦してみてください。
- イベントの種類を増やす:
mouseover、keydownなど - アニメーションを追加: CSSと組み合わせて動きを付ける
- データの保存:
localStorageを使って情報を保持 - APIの利用: 外部データを取得して表示
もし、より体系的に学習したい場合は、Learning NextのJavaScriptカリキュラムがおすすめです。
環境構築から基本文法、DOM操作、非同期処理まで、段階的に学べる構成になっています。
特に練習問題が豊富なので、手を動かしながら確実にスキルを身につけられます。
まとめ
JavaScriptとHTMLを組み合わせることで、静的なWebページに命を吹き込むことができます。
今回紹介した5つの実践例は、どれもWebサイトでよく使われる基本的な機能です。
最初は難しく感じるかもしれませんが、一つずつ動かしてみることで、必ず理解できるようになります。
プログラミングは「習うより慣れろ」です。
まずは今回のコードをコピーして、自分なりにアレンジしてみてください。
エラーが出ても大丈夫。それも立派な学習の一部です。
一緒にJavaScriptの世界を楽しみましょう！
著者について
とまだ
フルスタックエンジニア
Learning Next の創設者。Ruby on Rails と React を中心に、プログラミング教育に情熱を注いでいます。初心者が楽しく学べる環境作りを目指しています。
著者の詳細を見る →