JavaScriptの役割

HTMLがWebページの「構造」、CSSが「見た目」なら、 JavaScriptは「動作・処理」を担当します。

最初のJavaScript

console.log("Hello, JavaScript!");

console.log()は値をコンソールへ表示します。 開発中の確認に非常によく使います。

コメント

// これはコメントです

/*
  複数行コメントも書けます
*/

文

const message = "Hello";
console.log(message);

JavaScriptでは処理を上から順番に実行することが基本です。

const

const name = "Taro";
const age = 20;

console.log(name);
console.log(age);

let

let score = 10;

score = 20;

console.log(score);

基本的には、再代入しない値には const、 再代入する値には let を使います。

代表的なデータ型

const text = "Hello";        // string
const number = 123;          // number
const flag = true;           // boolean
const nothing = null;        // null
let unknown;                 // undefined

const array = [1, 2, 3];     // Array
const object = { name:"Taro" }; // Object

typeof

console.log(typeof "Hello");
console.log(typeof 123);
console.log(typeof true);

算術演算子

console.log(10 + 5);
console.log(10 - 5);
console.log(10 * 5);
console.log(10 / 5);
console.log(10 % 3);

比較演算子

console.log(10 > 5);
console.log(10 < 5);
console.log(10 === 10);
console.log(10 !== 5);

論理演算子

const age = 20;

console.log(age >= 18 && age <= 30);
console.log(age < 18 || age > 60);
console.log(!(age === 20));

if

const age = 20;

if (age >= 18) {
  console.log("成人です");
} else {
  console.log("未成年です");
}

else if

const score = 85;

if (score >= 90) {
  console.log("S");
} else if (score >= 80) {
  console.log("A");
} else if (score >= 70) {
  console.log("B");
} else {
  console.log("C");
}

三項演算子

const age = 20;

const result = age >= 18 ? "成人" : "未成年";

console.log(result);

for

for (let i = 0; i < 5; i++) {
  console.log(i);
}

while

let count = 0;

while (count < 5) {
  console.log(count);
  count++;
}

for...of

const fruits = ["りんご", "バナナ", "みかん"];

for (const fruit of fruits) {
  console.log(fruit);
}

基本的な関数

function greet(name) {
  return "こんにちは、" + name + "さん！";
}

console.log(greet("太郎"));

アロー関数

const add = (a, b) => {
  return a + b;
};

console.log(add(10, 20));

省略形

const double = n => n * 2;

console.log(double(5));

const fruits = [
  "りんご",
  "バナナ",
  "みかん"
];

console.log(fruits[0]);
console.log(fruits.length);

追加

fruits.push("ぶどう");

削除

fruits.pop();

分割代入

const [first, second] = fruits;

console.log(first);
console.log(second);

const user = {
  name: "Taro",
  age: 20,
  city: "Tokyo"
};

console.log(user.name);
console.log(user.age);

プロパティの追加

user.job = "Engineer";

メソッド

const person = {
  name: "Taro",

  greet() {
    console.log("こんにちは！");
  }
};

person.greet();

map

const numbers = [1, 2, 3];

const doubled = numbers.map(n => n * 2);

console.log(doubled);

filter

const numbers = [1, 2, 3, 4, 5];

const even = numbers.filter(n => n % 2 === 0);

console.log(even);

find

const users = [
  { name: "A", age: 15 },
  { name: "B", age: 22 }
];

const user = users.find(user => user.age >= 18);

console.log(user);

reduce

const numbers = [1, 2, 3, 4];

const total = numbers.reduce(
  (sum, number) => sum + number,
  0
);

console.log(total);

要素を取得する

const title = document.querySelector("h1");

文字を変更

title.textContent = "新しいタイトル";

クラスを操作

title.classList.add("active");
title.classList.remove("active");
title.classList.toggle("active");

HTMLを作る

const p = document.createElement("p");

p.textContent = "新しい文章です";

document.body.appendChild(p);

const button = document.querySelector("#button");

button.addEventListener("click", () => {
  console.log("クリックされました！");
});

よく使うイベント

• click
• input
• change
• submit
• keydown
• keyup
• mouseover

form.addEventListener("submit", event => {
  event.preventDefault();

  const value = input.value;

  console.log(value);
});

console.log("A");

setTimeout(() => {
  console.log("B");
}, 1000);

console.log("C");

出力は通常 A → C → B になります。 JavaScriptでは時間のかかる処理を待っている間にも、 別の処理を進められる仕組みがあります。

const promise = new Promise((resolve, reject) => {

  const success = true;

  if (success) {
    resolve("成功しました");
  } else {
    reject("失敗しました");
  }

});

promise
  .then(result => {
    console.log(result);
  })
  .catch(error => {
    console.error(error);
  });

function wait() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("完了");
    }, 1000);
  });
}

async function main() {

  console.log("開始");

  const result = await wait();

  console.log(result);

}

main();

async function loadData() {

  const response = await fetch(
    "https://example.com/data.json"
  );

  const data = await response.json();

  console.log(data);
}

loadData();

実際のWebアプリではAPIからデータを取得する処理が非常によく登場します。

const user = {
  name: "Taro",
  age: 20
};

const json = JSON.stringify(user);

console.log(json);

const restored = JSON.parse(json);

console.log(restored.name);

localStorage.setItem(
  "username",
  "Taro"
);

const username =
  localStorage.getItem("username");

console.log(username);

localStorage.removeItem("username");

オブジェクトを保存する

const settings = {
  darkMode: true,
  fontSize: 18
};

localStorage.setItem(
  "settings",
  JSON.stringify(settings)
);

const saved =
  JSON.parse(
    localStorage.getItem("settings")
  );

try {

  const result = dangerousFunction();

  console.log(result);

} catch (error) {

  console.error(
    "エラーが発生しました:",
    error
  );

} finally {

  console.log("処理終了");

}

throw

function divide(a, b) {

  if (b === 0) {
    throw new Error(
      "0では割れません"
    );
  }

  return a / b;
}

class User {

  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    return `こんにちは、${this.name}さん`;
  }

}

const user = new User("Taro", 20);

console.log(user.greet());

継承

class Admin extends User {

  deleteUser() {
    console.log("ユーザーを削除しました");
  }

}

const admin =
  new Admin("Admin", 30);

admin.deleteUser();

export

export function add(a, b) {
  return a + b;
}

import

import { add } from "./math.js";

console.log(add(10, 20));

const canvas =
  document.querySelector("canvas");

const ctx =
  canvas.getContext("2d");

ctx.fillStyle = "#35d9ff";

ctx.fillRect(
  50,
  50,
  200,
  100
);

Canvasを使えば、ゲーム、グラフ、アニメーションなどを作れます。

console.log

const score = 100;

console.log("score =", score);

console.table

const users = [
  { name:"A", age:20 },
  { name:"B", age:25 }
];

console.table(users);

debugger

const value = 100;

debugger;

console.log(value);

役割を分ける

// データ
const todos = [];

// データ操作
function addTodo(text) {
  todos.push({
    id: Date.now(),
    text,
    completed: false
  });
}

// 表示
function renderTodos() {
  // DOMを更新
}

// 保存
function saveTodos() {
  localStorage.setItem(
    "todos",
    JSON.stringify(todos)
  );
}

基本原則

• 1つの関数に仕事を詰め込みすぎない
• 意味のある名前を付ける
• 同じコードを何度も書かない
• データと表示処理をできるだけ分離する
• 小さい単位で動作確認する

🎯 クリックゲーム

10秒以内にできるだけ多くクリックしてください。

🎯 このコースのゴール

HTMLを「タグを覚えるだけ」で終わらせず、 Webページを自分で設計・構築できるところまで進みます。

HTMLの役割

HTMLはWebページに「これは見出し」「これは文章」 「これは画像」「これはリンク」といった意味と構造を与えます。

最小のHTML

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>My Page</title>
</head>

<body>

  <h1>こんにちは！</h1>
  <p>これは私のWebページです。</p>

</body>

</html>

<!DOCTYPE html>

<html lang="ja">

  <head>
    ページの設定
  </head>

  <body>
    実際に表示される内容
  </body>

</html>

DOCTYPE

HTML5として文書を扱うことをブラウザに伝えます。

html

HTML文書全体を囲みます。

head

タイトル、文字コード、SEO情報などを記述します。

body

ユーザーが実際に見るコンテンツを記述します。

<h1>一番大きな見出し</h1>

<h2>第2階層</h2>

<h3>第3階層</h3>

<p>
  これは文章です。
</p>

見出しの考え方

見た目の大きさだけで見出しを選ぶのではなく、 文書の階層構造として考えます。

<a href="https://example.com">
  Webサイトへ移動
</a>

新しいタブで開く

<a
  href="https://example.com"
  target="_blank"
  rel="noopener"
>
  サイトを開く
</a>

ページ内リンク

<a href="#about">
  Aboutへ移動
</a>

<section id="about">
  <h2>About</h2>
</section>

<img
  src="image.jpg"
  alt="青空と山の写真"
>

alt属性

画像の内容を説明するための重要な属性です。 画像が表示できない場合や支援技術でも利用されます。

サイズ指定

<img
  src="photo.jpg"
  alt="風景写真"
  width="800"
  height="500"
>

箇条書き

<ul>

  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>

</ul>

番号付きリスト

<ol>

  <li>HTMLを学ぶ</li>
  <li>CSSを学ぶ</li>
  <li>JavaScriptを学ぶ</li>

</ol>

説明リスト

<dl>

  <dt>HTML</dt>
  <dd>Webページの構造を作る</dd>

  <dt>CSS</dt>
  <dd>Webページを装飾する</dd>

</dl>

div

<div class="card">

  <h2>タイトル</h2>
  <p>文章</p>

</div>

複数の要素をまとめるためによく使われます。

span

<p>
  これは
  <span class="highlight">
    重要な文章
  </span>
  です。
</p>

文章の一部分を扱いたい場合に使います。

<input
  type="text"
  id="username"
  class="input"
  placeholder="名前を入力"
>

HTML要素には属性を追加できます。

<table>

  <thead>
    <tr>
      <th>名前</th>
      <th>年齢</th>
    </tr>
  </thead>

  <tbody>

    <tr>
      <td>太郎</td>
      <td>20</td>
    </tr>

    <tr>
      <td>花子</td>
      <td>22</td>
    </tr>

  </tbody>

</table>

基本

<form>

  <label for="name">
    名前
  </label>

  <input
    id="name"
    name="name"
    type="text"
  >

  <button type="submit">
    送信
  </button>

</form>

inputの種類

<input type="text">

<input type="email">

<input type="password">

<input type="number">

<input type="date">

<input type="checkbox">

<input type="radio">

<input type="file">

<input type="search">

<input type="range">

select

<label for="language">
  言語
</label>

<select id="language" name="language">

  <option value="html">
    HTML
  </option>

  <option value="css">
    CSS
  </option>

  <option value="javascript">
    JavaScript
  </option>

</select>

textarea

<textarea
  name="message"
  rows="8"
  placeholder="メッセージ"
></textarea>

「意味のあるHTML」を書くことを意識しましょう。

<header>
  ヘッダー
</header>

<nav>
  ナビゲーション
</nav>

<main>

  <section>

    <h2>記事一覧</h2>

    <article>
      記事
    </article>

  </section>

</main>

<footer>
  フッター
</footer>

代表的な要素

外部CSS

<head>

  <link
    rel="stylesheet"
    href="style.css"
  >

</head>

classを使う

<button class="primary-button">
  クリック
</button>

CSS側：

.primary-button {
  background: blue;
  color: white;
  padding: 12px 20px;
}

<button id="helloButton">
  押してください
</button>

<script>

const button =
  document.querySelector(
    "#helloButton"
  );

button.addEventListener(
  "click",
  () => {

    alert("こんにちは！");

  }
);

</script>

<head>

  <meta charset="UTF-8">

  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  >

  <meta
    name="description"
    content="HTMLを学ぶための講座"
  >

  <title>
    HTML完全攻略
  </title>

</head>

viewport

スマートフォンなどの画面幅に合わせてページを表示するために重要です。

description

ページの内容を説明するメタデータです。

基本的な考え方

• ページの内容が分かるtitleを付ける
• 適切な見出し構造を作る
• 画像に適切なaltを付ける
• 意味のあるHTML要素を使う
• ページの内容を明確にする

<title>
  JavaScript初心者講座 | Web開発入門
</title>

<meta
  name="description"
  content="JavaScriptを基礎から学ぶ講座です。"
>

labelを使う

<label for="email">
  メールアドレス
</label>

<input
  id="email"
  type="email"
>

ボタンにはbutton

<button type="button">
  開く
</button>

クリックできる見た目を作るためだけに divをボタンとして使うより、 本来の意味を持つbutton要素を使う方が適切です。

画像の説明

<img
  src="cat.jpg"
  alt="窓辺で寝ている猫"
>

<button
  data-id="123"
  data-category="game"
>
  商品を見る
</button>

JavaScriptから取得できます。

const button =
  document.querySelector("button");

console.log(
  button.dataset.id
);

console.log(
  button.dataset.category
);

音声

<audio
  controls
  src="music.mp3"
>
</audio>

動画

<video
  controls
  width="800"
>

  <source
    src="movie.mp4"
    type="video/mp4"
  >

</video>

<iframe
  src="https://example.com"
  width="600"
  height="400"
  title="Example"
>
</iframe>

最初に構造を考える

<body>

  <header>

    ロゴ

    <nav>
      メニュー
    </nav>

  </header>

  <main>

    <section>
      ヒーロー
    </section>

    <section>
      サービス紹介
    </section>

    <section>
      お問い合わせ
    </section>

  </main>

  <footer>
    コピーライト
  </footer>

</body>

<!DOCTYPE html>
<html lang="ja">

<head>

  <meta charset="UTF-8">

  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  >

  <title>
    プロフィール
  </title>

</head>

<body>

  <header>

    <h1>
      Taro's Profile
    </h1>

  </header>

  <main>

    <section>

      <h2>
        自己紹介
      </h2>

      <p>
        Web開発を勉強しています。
      </p>

    </section>

    <section>

      <h2>
        スキル
      </h2>

      <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
      </ul>

    </section>

  </main>

  <footer>
    &copy; 2026 Taro
  </footer>

</body>

</html>

<form id="contactForm">

  <div>

    <label for="name">
      お名前
    </label>

    <input
      id="name"
      name="name"
      type="text"
      required
    >

  </div>

  <div>

    <label for="email">
      メールアドレス
    </label>

    <input
      id="email"
      name="email"
      type="email"
      required
    >

  </div>

  <div>

    <label for="message">
      メッセージ
    </label>

    <textarea
      id="message"
      name="message"
      required
    ></textarea>

  </div>

  <button type="submit">
    送信
  </button>

</form>

HTML

<button id="counterButton">
  クリック
</button>

<p id="counter">
  0
</p>

JavaScript

const button =
  document.querySelector(
    "#counterButton"
  );

const counter =
  document.querySelector(
    "#counter"
  );

let count = 0;

button.addEventListener(
  "click",
  () => {

    count++;

    counter.textContent =
      count;

  }
);

• DOCTYPEを書いている
• htmlにlang属性がある
• 文字コードを指定している
• viewportを設定している
• titleがある
• 見出し構造が自然
• 画像にaltがある
• フォームにlabelがある
• buttonを適切に使っている
• リンクにはaを使っている
• ページ構造にsemantic HTMLを使っている
• CSSとJavaScriptを適切に分離している