🥜
JavaScript 入門

2025/02/15に公開
JavaScript
プログラミング
DOM
tech
 1. はじめに現代のWeb開発では、Webページに静的な構造（HTML）やスタイル（CSS）だけでなく、ユーザーとの対話や動的な処理を追加するためにJavaScriptが不可欠です。

さらに、コードの信頼性や保守性を向上させるため、JavaScriptに型の概念を導入したTypeScriptも注目されています。
この入門記事では、まずはJavaScriptの基本概念と文法、そしてTypeScriptの導入によりどのようにコードの品質を向上できるかを解説します。Reactなどのライブラリでの利用を見据えて、今後の開発の土台となる知識を身につけましょう。

 2. JavaScriptの基本
 2.1 JavaScriptとは？JavaScriptは、Webブラウザ上で実行されるプログラミング言語です。

HTMLやCSSで作成したWebページに対して、以下のような動的な機能を追加できます。

ユーザー操作への反応

クリック、入力、スクロールなどのイベントに対応して、ページの内容を変更したり、アニメーションを実行したりできます。

DOM操作

HTMLの構造（DOM: Document Object Model）に直接アクセスし、要素の追加・変更・削除などを行えます。

非同期処理

サーバーとの通信（AJAXなど）を通じて、ページ全体をリロードせずにデータの取得や送信が可能です。

 2.2 JavaScriptの組み込み方法JavaScriptは、HTML内に直接記述する方法（インラインスクリプト）や、外部ファイルとして読み込む方法（外部スクリプト）があります。

 インラインスクリプトHTMLの<script>タグ内に直接コードを記述する方法です。
 index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>JavaScriptの基礎学習</title>
    <style>
      .output {
        padding: 10px;
        border: 1px solid #ccc;
        margin: 10px 0;
      }
    </style>
  </head>
  <body>
    <h1>JavaScript基礎学習</h1>
    
    <h2>基本的な出力</h2>
    <button onclick="showMessage()">メッセージを表示</button>
    <div id="messageOutput" class="output"></div>

    <h2>簡単な計算</h2>
    <input type="number" id="num1" placeholder="数字1">
    <input type="number" id="num2" placeholder="数字2">
    <button onclick="calculate()">計算する</button>
    <div id="calcOutput" class="output"></div>

    <script>
      // 基本的なメッセージ表示
      function showMessage() {
        document.getElementById('messageOutput').innerHTML = 
          'JavaScriptを使って文字を表示できました！';
      }

      // 簡単な計算機能
      function calculate() {
        const num1 = Number(document.getElementById('num1').value);
        const num2 = Number(document.getElementById('num2').value);
        const sum = num1 + num2;
        document.getElementById('calcOutput').innerHTML = 
          `${num1} + ${num2} = ${sum}`;
      }

      console.log('ページの読み込みが完了しました。');
    </script>
  </body>
</html>
これをブラウザで表示すると以下の１枚目のようになり、実際にボタンをおすと２枚目のようになります。
コードの中にあるconsoleとは、プログラムの実行結果を確認できる画面、またはその画面にアクセスするためのオブジェクトのことです。デバッグやテスト、コードの実行などに使用されます。﻿

画面を右クリックして出てくる「検証」を押すと以下のようになり、そこの "console" を押すことでエラーなどの確認ができます。


 外部スクリプトコードを別ファイル（例：app.js）に記述し、HTMLから読み込む方法です。

保守性が向上し、複数のHTMLページで共通のコードを使う際に有用です。
 index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>JavaScript基礎学習</title>
  </head>
  <body>
    <button id="action-button">クリック！</button>
    <div id="display">現在のスコア: 0点</div>

    <!-- 外部JavaScriptファイルの読み込み -->
    <script src="app.js"></script>
  </body>
</html>
 app.js
let score = 0;                    // let: 変更可能な変数
const maxScore = 100;             // const: 変更不可能な定数

// DOM要素の取得
const button = document.getElementById('action-button');
const display = document.getElementById('display');

// イベントリスナー（イベントが起きた時の処理）
button.addEventListener('click', function() {
    // 条件分岐
    if (score < maxScore) {
        // 数値の計算
        score += 10;
        
        display.textContent = `現在のスコア: ${score}点`;
        
        console.log('ボタンがクリックされました');
        
        // HTML要素の追加
        const messageDiv = document.createElement('div');
        display.appendChild(messageDiv);
    }
});


このような出力になります。

 2.3 JavaScriptの基本文法ここでは、JavaScriptの主要な概念をいくつか紹介します。

 変数宣言JavaScriptでは、データを格納するために変数を使います。

var、let、const の3種類があり、現在は再代入可能な変数にはlet、再代入が不要な定数にはconstを使うのが主流です。（varはあまり使われません）

 データ型JavaScriptの主なデータ型には、以下のようなものがあります。

• 数値（Number）
const age = 20;
• 文字列（String）
const name = 'Alice';
• 真偽値（Boolean）
let isStudent = true;
• オブジェクト（Object）
let person = {
  name: 'Bob',
  age: 25
};
• 配列（Array）
let colors = ['red', 'green', 'blue'];

 関数JavaScriptでは、関数を使って処理のまとまりを定義し、再利用することができます。
// 関数宣言
function greet(name) {
  return `こんにちは、${name}さん！`;
}

console.log(greet('太郎'));  // 出力: こんにちは、太郎さん！

// 関数式（匿名関数を変数に代入）
const add = function(a, b) {
  return a + b;
};

console.log(add(5, 3));  // 出力: 8

// アロー関数（ES6以降の記法）
const multiply = (a, b) => a * b;
console.log(multiply(4, 2));  // 出力: 8

 3. DOM についてDOM（Document Object Model）とは、HTMLやXML文書をプログラムから扱いやすいオブジェクトの集合に変換した「モデル」のことです。簡単に言うと、ウェブページの内部構造を「木（ツリー）構造」で表現し、その各部分（要素やテキストなど）をオブジェクトとして扱えるようにした仕組みです。

 3.1 DOM の基本概念• ツリー構造

ウェブページは、<html>, <head>, <body> などの要素から構成されていますね。DOMでは、これらの要素が親子関係を持つ「ノード」として表され、木（ツリー）のような構造になります。

例：<body>の中に<div>があれば、<div>は<body>の子ノードとなります。
<body>
    <div> 
        div が body の子ノードです！
    </div>
</body>
• 各要素がオブジェクト

DOM内の各ノードは、プログラムから操作可能なオブジェクトです。これにより、JavaScriptなどの言語でページ内の要素にアクセスし、内容を変更したり、属性を追加したりできます。

 3.2 JavaScript と DOM の関係• 動的なページ操作

JavaScriptはDOMを操作するための主要な手段です。たとえば、ユーザーのクリックに応じてテキストを変更したり、画像を追加したり、要素を削除したりと、ページの内容を動的に変更できます。

• DOM操作のメソッド例

document.getElementById("id名"): 指定したIDを持つ要素を取得

document.querySelector("セレクター"): CSSセレクターを使って要素を取得

document.createElement("タグ名"): 新しい要素を作成

element.appendChild(子要素): 要素の末尾に子要素を追加

element.innerHTML や element.textContent: 要素の中身の取得・変更

 3.3 実際の例以下は、ボタンをクリックするとページ内のテキストが変わる簡単な例です。
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>DOMの例</title>
</head>
<body>
  <!-- テキストを表示する要素 -->
  <div id="message">Hello World!</div>
  <!-- ボタン -->
  <button id="changeButton">テキストを変更</button>

  <script>
    // ボタン要素を取得
    const button = document.getElementById("changeButton");
    
    // ボタンにクリックイベントを登録
    button.addEventListener("click", function() {
      // "message"というIDの要素を取得してテキストを変更
      const messageDiv = document.getElementById("message");
      messageDiv.innerText = "こんにちは、DOM!";
    });
  </script>
</body>
</html>
この例では、ページが読み込まれた時にブラウザがHTMLをDOMとして構築します。JavaScriptはこのDOMにアクセスし、ボタンがクリックされたときに<div id="message">の中身を変更しています。

 4. 非同期処理の基本JavaScriptはシングルスレッド（単一の実行経路）で動作するため、長時間かかる処理（例：ネットワーク通信、ファイルの読み込み、タイマー処理など）を同期的に実行すると、プログラム全体が待たされてしまいます。そこで登場するのが「非同期処理」です。非同期処理を使うことで、時間のかかる処理をバックグラウンドで実行し、他の処理をブロックせずにプログラムを進めることが可能になります。

 4.1 非同期処理とは？非同期処理とは、ある処理の完了を待たずに次の処理を実行できる仕組みのことです。例えば、ユーザーの操作に応じてデータを取得する場合、データ取得中も他のUI操作を可能にするために非同期処理を利用します。JavaScriptでは、イベントループという仕組みを利用して非同期処理が管理されています。

 4.2 コールバック関数コールバック関数は、非同期処理が完了した際に呼び出される関数のことです。以下の例では、setTimeout関数を使って、2秒後にメッセージを出力する非同期処理を実装しています。
console.log("処理開始");

setTimeout(() => {
  console.log("非同期処理完了");
}, 2000);

console.log("処理終了");
実行結果の流れ：

1.	「処理開始」が出力される。

2.	setTimeoutによって2秒後に指定した関数が実行される予約がされる。

3.	「処理終了」がすぐに出力される。

4.	2秒後に「非同期処理完了」が出力される。
このように、待ち時間の間も他の処理が進むため、画面の操作性やレスポンスが維持されます。

 4.3 Promiseコールバック関数を使った非同期処理はシンプルですが、複数の非同期処理を連鎖させると「コールバック地獄」と呼ばれるコードが生まれてしまう可能性があります。そこで登場するのが Promise です。Promiseは、非同期処理の結果を「成功（resolve）」または「失敗（reject）」として返すオブジェクトで、より読みやすく、保守性の高いコードが書けます。
以下は、Promise を用いた例です。
// 非同期処理をPromiseでラップする関数
function fetchData() {
  return new Promise((resolve, reject) => {
    // 例として、setTimeoutで疑似的な非同期処理を実現
    setTimeout(() => {
      const success = true; // 処理の成功/失敗をシミュレート
      if (success) {
        resolve("データ取得成功！");
      } else {
        reject("データ取得失敗...");
      }
    }, 2000);
  });
}

console.log("データ取得開始");

fetchData()
  .then((data) => {
    console.log(data);  // 成功時の処理
  })
  .catch((error) => {
    console.error(error);  // 失敗時の処理
  });

console.log("他の処理");
fetchData 関数はPromiseを返し、2秒後に結果を返します。

.then() で成功時の処理、.catch() でエラー時の処理を定義できます。

Promise を使うことで、複数の非同期処理を連鎖させる場合にも読みやすいコードになります。

 4.4 async/awaitES2017（ECMAScript 2017）以降、Promiseをさらにシンプルに扱うための構文として、async/awaitが導入されました。async/awaitを使うと、あたかも同期処理のように非同期処理を記述でき、コードの可読性が向上します。
以下は、async/awaitを用いた例です。
// 先ほどのfetchData関数をそのまま利用
async function getData() {
  try {
    console.log("データ取得開始");
    // awaitによってPromiseが解決するまで待つ
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
  
  console.log("処理終了");
}

getData();
関数宣言の前に async を付けると、その関数内で await が使えるようになります。

await は Promise が解決するのを待ち、その結果を返します。

try/catch構文を利用して、エラー処理もシンプルに書くことができます。

 まとめこの記事では、現代のWeb開発において不可欠なJavaScriptの基本概念とその応用について解説しました。具体的には以下のポイントを抑えています。

•	JavaScriptの基本

変数宣言、データ型、関数など、言語の基礎知識から、HTMLに直接組み込む方法や外部ファイルとして読み込む方法を紹介しました。

•	DOM（Document Object Model）

HTML文書の内部構造をツリー状のオブジェクトとして扱い、JavaScriptで要素の操作ができる仕組みについて説明しました。

•	非同期処理

コールバック、Promise、async/awaitを用いた非同期処理の実装方法や、イベントループの役割について学び、処理がブロックされずに実行される仕組みを理解しました。
次回は、コードの信頼性や保守性をさらに向上させるためのTypeScriptについて詳しく解説します。TypeScriptの導入により、JavaScriptの学習をさらに一歩進め、実践的な開発環境を整える方法を学びましょう。
担当：生駒
https://zenn.dev/utokyo_aido/articles/b499e16d9189cb
1. はじめに

2. JavaScriptの基本

2.1 JavaScriptとは？

2.2 JavaScriptの組み込み方法

インラインスクリプト

外部スクリプト

2.3 JavaScriptの基本文法

変数宣言

データ型

関数

3. DOM について

3.1 DOM の基本概念

3.2 JavaScript と DOM の関係

3.3 実際の例

4. 非同期処理の基本

4.1 非同期処理とは？

4.2 コールバック関数

4.3 Promise

4.4 async/await

まとめ

Discussion
