Webサイトにインタラクティブな要素を加え、動きをつけるための技術がJavaScriptです。HTMLやCSSだけで作成されたWebページは静的ですが、JavaScriptを使うことで、ユーザーの操作に応じてページの内容を動的に変更したり、アニメーションを加えたりすることが可能になります。
本記事では、JavaScriptの基礎と、Webページに動きをつけるための具体的な方法について解説します。
JavaScriptの基本を理解し、簡単なプログラムを作れるようになること
前提知識
HTML/CSSの基礎知識
[目次を開く]
1. JavaScriptとは？
JavaScriptは、Webブラウザ上で動作するプログラミング言語で、Webページを動的に制御できる特徴があります。例えば、次のようなことがJavaScriptで実現できます。
- ユーザーがボタンをクリックしたときにコンテンツを表示・非表示にする
- フォームに入力された内容を確認し、エラーメッセージを表示する
- 画像や要素にアニメーション効果を追加する
- ユーザーの操作に応じてページを更新する（非同期通信）
JavaScriptはHTMLやCSSと連携して使用され、Webの「動き」を生み出す中心的な技術です。
2. JavaScriptの基礎構文
まずは、JavaScriptの基本的な構文を理解しましょう。以下の項目を押さえておくと、スムーズに学習を進められます。
🏷️変数とデータ型
JavaScriptでは、var、let、constを使って変数を定義します。変数には数値、文字列、配列、オブジェクトなど、さまざまなデータ型を格納できます。
let name = "John"; // 文字列
const age = 25; // 数値
var isStudent = true; // ブール値-
let: 再代入可能な変数 -
const: 再代入できない定数 -
var: 古い変数定義方法（推奨されない）
JavaScriptの変数について、より詳しく知りたい方は以下の記事を参照してください。
📄
JavaScriptのlet、const、varの違いと使い分け
🏷️条件分岐
条件に応じて異なる処理を行うためには、if文を使います。
let score = 85;
if (score >= 90) {
console.log("A");
} else if (score >= 80) {
console.log("B");
} else {
console.log("C");
}🏷️ループ処理
繰り返し処理を行う場合、forやwhileループを使います。
for (let i = 0; i < 5; i++) {
console.log(i);
}🏷️関数
JavaScriptでは、処理をひとまとめにした関数を作成できます。関数は、再利用可能なコードを作成するのに便利です。
function greet(name) {
console.log("Hello, " + name);
}
greet("Alice"); // "Hello, Alice"と表示される JavaScriptの関数には、上記の他、アロー関数や即時関数、高階関数などがあります。
より詳しく知りたい方は下記の記事を参照してください。
3. DOM操作とは？
JavaScriptを使って、Webページの構造や内容を動的に変更するためには、DOM操作を理解する必要があります。DOM（Document Object Model）は、HTML文書をオブジェクトとして扱い、JavaScriptからそのオブジェクトにアクセスして操作することを可能にします。
1. 要素を取得する
まずは、JavaScriptを使ってHTMLの要素を取得しましょう。例えば、document.getElementById()メソッドを使うと、指定したIDを持つ要素を取得できます。
<p id="message">こんにちは！</p>
<button id="changeText">テキストを変更する</button>
<script>
const message = document.getElementById("message");
const button = document.getElementById("changeText");
button.addEventListener("click", function() {
message.textContent = "Hello, World!";
});
</script>このコードでは、ボタンをクリックすると、段落のテキストが「Hello, World!」に変更されます。
2. イベントリスナーを追加する
JavaScriptでは、ユーザーの操作（クリックやキー入力など）に応じて動作するプログラムを書くことができます。このために、イベントリスナーを使用します。先ほどの例で使ったaddEventListener()メソッドは、指定したイベントが発生したときに、実行する処理を定義します。
4. Webページに動きをつける方法
次に、JavaScriptを使ってWebページに動きを加える具体的な方法をいくつか紹介します。
1. スライドメニュー
サイドメニューがボタンのクリックでスライドして表示されるインターフェースはよく見かけます。これもJavaScriptで簡単に実装できます。
<button id="menuButton">メニューを表示</button>
<div id="menu" style="display:none;">サイドメニュー</div>
<script>
const menuButton = document.getElementById("menuButton");
const menu = document.getElementById("menu");
menuButton.addEventListener("click", function() {
if (menu.style.display === "none") {
menu.style.display = "block";
} else {
menu.style.display = "none";
}
});
</script>ボタンをクリックすると、サイドメニューが表示されたり非表示になったりします。
2. スクロールアニメーション
JavaScriptとCSSを組み合わせると、ページをスクロールする際にアニメーションを発動させることができます。これにより、視覚的に魅力的なWebページを作成できます。
<div class="fade-in">スクロールで表示されるテキスト</div>
<script>
window.addEventListener("scroll", function() {
const element = document.querySelector(".fade-in");
const position = element.getBoundingClientRect();
// 要素が画面に表示されたらクラスを追加
if (position.top < window.innerHeight && position.bottom >= 0) {
element.classList.add("visible");
}
});
</script>
<style>
.fade-in {
opacity: 0;
transition: opacity 1s ease;
}
.fade-in.visible {
opacity: 1;
}
</style>5. JavaScriptのライブラリを活用する
jQueryやGSAP（GreenSock Animation Platform）などのライブラリを使用すると、より複雑なアニメーションやインタラクティブな要素を簡単に実装できます。これらのライブラリは、JavaScriptの機能を強化し、少ないコードで効果的な動きを実現します。Reactも位置づけとしてはJavaScriptのライブラリです。
jQueryの例
$(document).ready(function() {
$("#hideButton").click(function() {
$("#text").hide();
});
});このコードでは、ボタンをクリックすると、指定した要素が非表示になります。jQueryを使うと、よりシンプルなコードでDOM操作が行えます。
ただ昔から稼働しているシステムなどではまだまだ使われているので、こういうのがあるんだなあ程度に覚えておくと役にたちます。
また、jQuery再評価の向きもあり、技術トレントの変化が激しい業界なので、固定概念に縛られず、必要であればキャッチアップするという柔軟な姿勢が大切です！
まとめ
JavaScriptは、Webページに動きを加え、ユーザー体験を向上させるための強力なツールです。基本的な文法とDOM操作を学んでおくことで、クリックやスクロールに応じたインタラクティブなWebページを作成できるようになります。初めは小さなプロジェクトから始め、少しずつ実践的なスキルを磨いていきましょう。
