はじめに
JavaScriptは現代のウェブ開発において不可欠なスキルです。これからプログラミングを始めようとしている方や、基本からしっかり学びたいという方のために、本記事ではゼロからJavaScriptを学ぶための実践的なガイドを提供します。
JavaScriptとは？
JavaScriptは、ウェブページに動的な機能を追加するためのプログラミング言語です。クライアントサイドで実行されるため、ユーザーのブラウザで直接動作し、インタラクティブなユーザー体験を提供します。
JavaScriptの基本構文
1. 変数とデータ型
let message = "Hello, World!"; // 文字列型
let number = 42; // 数値型
let isActive = true; // 真偽値型
2.演算子
let a = 5;
let b = 10;
let sum = a + b; // 足し算
let difference = a - b; // 引き算
let product = a * b; // 掛け算
let quotient = a / b; // 割り算
3.条件分岐
let age = 20;
if (age >= 18) {
console.log("成人です");
} else {
console.log("未成年です");
}
4.ループ処理
for (let i = 0; i < 5; i++) {
console.log(i);
}
5.関数の理解
function add(a, b) {
return a + b;
}
let result = add(5, 3); // resultは8になります
console.log(result);
6.無名関数
let multiply = function(x, y) {
return x * y;
};
7.アロー関数
let divide = (x, y) => x / y;
8.オブジェクト
let person = {
name: "John",
age: 30,
greet: function() {
console.log("Hello, " + this.name);
}
};
console.log(person.name); // "John"
person.greet(); // "Hello, John"
9.配列
let fruits = ["apple", "banana", "cherry"];
console.log(fruits[0]); // "apple"
fruits.push("date"); // 配列に新しい要素を追加
console.log(fruits); // ["apple", "banana", "cherry", "date"]
非同期処理とPromise
JavaScriptでは、非同期処理を扱うためのPromiseやasync/awaitがあります。これにより、時間のかかる処理を効率的に扱うことができます。
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve("Done!"), 1000);
});
promise.then((message) => {
console.log(message); // "Done!"
});
// async/awaitの基本例:
async function fetchData() {
let response = await fetch('https://api.example.com/data');
let data = await response.json();
console.log(data);
}
fetchData();
DOM操作とイベント処理
JavaScriptを使ってHTMLの要素を操作したり、ユーザーのアクションに応じた処理を行うことができます。
let heading = document.getElementById("main-heading");
heading.textContent = "新しい見出し";
// イベント処理の例
<button id="clickButton">クリックしてね</button>
<script>
document.getElementById("clickButton").addEventListener("click", () => {
alert("ボタンがクリックされました！");
});
</script>
実践的な例
ユーザーからの入力を受け取り、それに応じた処理を行う例です。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ユーザー入力</title>
</head>
<body>
<input type="text" id="nameInput" placeholder="名前を入力してください">
<button onclick="greetUser()">挨拶</button>
<p id="greeting"></p>
<script>
function greetUser() {
let name = document.getElementById("nameInput").value;
let greeting = `こんにちは、${name}さん！`;
document.getElementById("greeting").textContent = greeting;
}
</script>
</body>
</html>
まとめ
JavaScriptの基本を学ぶことで、ウェブ開発の基礎を築くことができます。