JavaScriptの基礎【ブラウザで動くプログラミング入門】

JavaScriptはブラウザ上で動くプログラミング言語です。HTMLページに動きや対話性を加えることができます。この記事ではJavaScriptの基礎を解説します。

JavaScriptの基本構文
DOM操作（HTMLを動的に変更する）
非同期処理（fetch APIでデータ取得）
まとめ

JavaScriptの基本構文

// 変数
const name = "Taro";  // 再代入不可
let count = 0;        // 再代入可

// 配列とオブジェクト
const fruits = ["apple", "banana", "cherry"];
const user = { name: "Taro", age: 25 };

// テンプレートリテラル
console.log(`こんにちは、${name}さん！`);

// アロー関数
const square = (n) => n ** 2;
console.log(square(5));  // 25

DOM操作（HTMLを動的に変更する）

// 要素の取得
const btn = document.getElementById("myButton");
const items = document.querySelectorAll(".item");

// テキストの変更
document.getElementById("title").textContent = "新しいタイトル";

// クリックイベント
btn.addEventListener("click", () => {
  alert("ボタンがクリックされました！");
});

// 要素の追加
const li = document.createElement("li");
li.textContent = "新しいアイテム";
document.getElementById("list").appendChild(li);

非同期処理（fetch APIでデータ取得）

// fetch APIでJSONを取得
async function getData() {
  try {
    const res = await fetch("https://api.example.com/users");
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.error("エラー:", err);
  }
}
getData();