JavaScriptの入り口はここから！基本文法をしっかりマスターして、Web開発の可能性を広げよう🚀
JavaScriptとは？基本を理解しよう
JavaScriptは、ウェブページにインタラクティブ性を持たせるためのプログラミング言語です。HTMLとCSSがウェブページの構造と見た目を定義するのに対し、JavaScriptは動きや変化を加える役割を担います。
たとえば、ボタンをクリックしたときの反応、アニメーション、フォームの入力チェックなど、JavaScriptによって実現されています。最近では、ウェブブラウザだけでなく、サーバーサイド（Node.js）、モバイルアプリ（React Native）、デスクトップアプリ（Electron）など、様々な環境で利用されています。
JavaScriptは動的型付け言語であり、変数の型を明示的に宣言する必要はありません。また、オブジェクト指向プログラミング（OOP）の概念もサポートしており、柔軟な開発が可能です。
JavaScriptの基本文法：変数、データ型、演算子
JavaScriptの基本文法を理解することは、プログラミングの第一歩です。ここでは、変数、データ型、演算子という3つの重要な要素について解説します。
変数は、データを格納するための名前付きの場所です。JavaScriptでは、var、let、constを使って変数を宣言します。
var message = "Hello, world!"; // varで宣言（古い記法）
let count = 10; // letで宣言（再代入可能）
const PI = 3.14159; // constで宣言（再代入不可）letとconstはES6（ECMAScript 2015）で導入された新しい変数宣言の方法です。letは再代入可能な変数を宣言し、constは定数を宣言します。varは古い記法ですが、現在でも使用できます。
JavaScriptには、様々なデータ型があります。主なデータ型は以下の通りです。
– 数値型（Number）：整数や浮動小数点数を表します (例: 10, 3.14)
– 文字列型（String）：テキストを表します (例: “Hello”, ‘World’)
– 真偽値型（Boolean）：真（true）または偽（false）を表します
– Null型（Null）：値が存在しないことを表します
– Undefined型（Undefined）：変数が宣言されたが、まだ値が割り当てられていないことを表します
– オブジェクト型（Object）：複数の値をまとめて扱うための複合データ型です
– 配列型（Array）：複数の値を順番に格納するためのデータ型です
let age = 30; // 数値型
let name = "Taro"; // 文字列型
let isAdult = true; // 真偽値型
let emptyValue = null; // Null型
let notDefined; // Undefined型
let person = { name: "Hanako", age: 25 }; // オブジェクト型
let numbers = [1, 2, 3, 4, 5]; // 配列型演算子は、値に対して何らかの操作を行うための記号です。JavaScriptには、様々な演算子があります。
– 算術演算子：足し算（+）、引き算（-）、掛け算（*）、割り算（/）、剰余（%）など
– 代入演算子：=、+=、-=、*=、/= など
– 比較演算子：==、===、!=、!==、>、<、>=、<= など
– 論理演算子：&&（AND）、||（OR）、!（NOT）など
let x = 10;
let y = 5;
console.log(x + y); // 足し算: 15
console.log(x - y); // 引き算: 5
console.log(x * y); // 掛け算: 50
console.log(x / y); // 割り算: 2
console.log(x % y); // 剰余: 0
console.log(x == y); // 等しい: false
console.log(x > y); // より大きい: true
console.log(x > 5 && y < 10); // AND: trueJavaScriptの基本文法：条件分岐と繰り返し
プログラムの流れを制御するために、条件分岐と繰り返しは非常に重要な概念です。
if文は、指定された条件が真（true）の場合に、特定のコードブロックを実行します。else文やelse if文と組み合わせて、複数の条件を扱うことも可能です。
let age = 20;
if (age >= 20) {
console.log("成人です");
} else {
console.log("未成年です");
}
let score = 75;
if (score >= 80) {
console.log("Excellent!");
} else if (score >= 60) {
console.log("Good!");
} else {
console.log("Try again!");
}for文は、指定された回数だけコードブロックを繰り返します。
for (let i = 0; i < 5; i++) {
console.log(i);
}while文は、指定された条件が真（true）である間、コードブロックを繰り返します。
let i = 0;
while (i < 5) {
console.log(i);
i++;
}for...of文は、配列や文字列などのiterableオブジェクトの要素を順番に処理するために使用されます。
const colors = ["red", "green", "blue"];
for (const color of colors) {
console.log(color);
}JavaScriptの関数：処理をまとめる
関数は、特定の処理をまとめた再利用可能なコードのブロックです。関数を使うことで、コードの可読性と保守性が向上します。
function greet(name) {
console.log("Hello, " + name + "!");
}
greet("Alice"); // Hello, Alice!
greet("Bob"); // Hello, Bob!関数は値を返すこともできます。
function add(x, y) {
return x + y;
}
let result = add(5, 3); // resultは8になる
console.log(result);アロー関数は、ES6で導入された関数の簡潔な書き方です。
const multiply = (x, y) => x * y;
let product = multiply(4, 6); // productは24になる
console.log(product);JavaScriptのDOM操作：HTMLを操作する
DOM（Document Object Model）は、HTMLドキュメントをJavaScriptから操作するためのAPIです。DOM操作を使うことで、ウェブページのコンテンツやスタイルを動的に変更できます。
例えば、HTML要素の取得、テキストの変更、要素の追加などが可能です。
// IDで要素を取得
const element = document.getElementById("myElement");
// テキストを変更
element.textContent = "新しいテキスト";
// 新しい要素を作成
const newElement = document.createElement("p");
newElement.textContent = "これは新しい段落です。";
// 要素を追加
document.body.appendChild(newElement);イベントリスナーを使うことで、ユーザーの操作に応じてJavaScriptのコードを実行できます。
// ボタン要素を取得
const button = document.getElementById("myButton");
// クリックイベントのリスナーを追加
button.addEventListener("click", function() {
alert("ボタンがクリックされました！");
});参考リンク
まとめ
この記事では、JavaScriptの基本的な文法、条件分岐、繰り返し、関数、DOM操作について解説しました。これらの基本をマスターすることで、ウェブページにインタラクティブな機能を追加したり、動的なウェブアプリケーションを開発したりすることができます。さらに学習を進めて、JavaScriptのスキルを向上させましょう。
