JavaScriptは、ウェブページに動的な機能を追加するためのプログラミング言語です。HTMLやCSSと組み合わせて使うことで、ボタンのクリックイベントやアニメーション、フォームのバリデーションなどを実装できます。
1. JavaScriptとは？
JavaScriptは、次のような特徴を持つ言語です。
- クライアントサイドで動作：ブラウザ上で直接実行される（サーバー側で動作するNode.jsもある）
- 動的なコンテンツを作成可能：ユーザー操作に応じて画面を変化させる
- イベント駆動型プログラミング：ユーザーの操作（クリック、スクロールなど）に応じた動作が可能
2. JavaScriptの基本構文
まずは、JavaScriptの基本的な構文を見ていきましょう。
変数の宣言
JavaScriptで変数を宣言するには、var、let、const を使用します。
let message = "Hello, JavaScript!";
console.log(message); // Hello, JavaScript!
let：再代入可能な変数const：再代入不可の定数var：古い書き方（最近はletやconstの使用が推奨される）
データ型
JavaScriptには主に以下のデータ型があります。
| 型 | 例 |
|---|---|
| 数値型 (Number) | let num = 10; |
| 文字列型 (String) | let str = "Hello"; |
| 真偽値 (Boolean) | let flag = true; |
| 配列 (Array) | let arr = [1, 2, 3]; |
| オブジェクト (Object) | let obj = { name: "Alice", age: 25 }; |
3. 条件分岐とループ
条件分岐
let age = 20;
if (age >= 18) {
console.log("成人です");
} else {
console.log("未成年です");
}
ループ処理
for (let i = 0; i < 5; i++) {
console.log(i); // 0, 1, 2, 3, 4
}
4. 関数
関数を使うと、処理をまとめて再利用できます。
function greet(name) {
return "Hello, " + name + "!";
}
console.log(greet("Alice")); // Hello, Alice!
最近ではアロー関数もよく使われます。
const greet = (name) => `Hello, ${name}!`;
console.log(greet("Bob")); // Hello, Bob!
5. DOM操作
DOM（Document Object Model）を操作することで、HTML要素を動的に変更できます。
HTMLの要素を取得
let title = document.getElementById("title");
console.log(title.innerText);
イベントリスナーの追加
document.getElementById("btn").addEventListener("click", function() {
alert("ボタンがクリックされました！");
});
6. 資料サイト
JavaScriptを学ぶのに役立つサイトを紹介します。
- MDN Web Docs – JavaScript
→ 基本から応用まで網羅されている公式ドキュメント - JavaScript.info
→ 実用的な解説が多く、初心者にもわかりやすい - W3Schools – JavaScript
→ 実際にコードを動かしながら学べるサイト
まとめ
JavaScriptは、ウェブ開発において欠かせない技術です。本記事では基本的な概念を紹介しましたが、今後さらに詳しく学びながら実践に活かしましょう。