JavaScriptの基本 — 現場で使える最初の一歩

投稿日：2025-12-26

目次

はじめに

この文書はIT初心者が「現場で使える」JavaScriptの最初の一歩を踏み出すための実践ガイドです。具体例を多く示し、よくある失敗と現場での判断ポイントに重点を置いています。

開発環境の準備（ブラウザとNode.js）

  • ブラウザ：Chrome（DevToolsが充実）。Firefoxも検証に便利。
  • Node.js：LTS版をインストール。npmまたはpnpmでパッケージ管理。
  • エディタ：VS Code（拡張機能：ESLint, Prettier, Live Server）
  • 開発サーバー：ローカルで静的ファイル確認は Live Server や http-server を利用。

例：簡単なローカルサーバ起動（npm）

npm install -g http-server
http-server ./public -p 8080

注意：npm install -g はグローバル環境にインストールします。社内PCや権限が厳しい環境では運用ルールに従い、問題がある場合はプロジェクトローカル（npm install --save-dev 等）での導入を検討してください。

変数とデータ型（var/let/const・型の変換）

  • var：関数スコープ。ホイスティングと意図しない再宣言の原因になるため現場では非推奨。
  • let：ブロックスコープ、再代入可。
  • const：ブロックスコープ、再代入不可（参照先のオブジェクトは変更可能）。

例：

const PI = 3.14; // 定数
let count = 0;   // 状態を持つ変数
// var old = '使わないで';

型変換：

  • Number("123") -> 123、parseInt/parseFloat の違い（parseInt は第二引数で基数指定）
  • String(123) またはテンプレートリテラル ${value}

注意：== と ===

  • == は型変換して比較（例："0" == 0 は true）
  • === は厳密比較。現場では === を推奨。

制御構文とよく使うメソッド（if/for/Arrayメソッド）

制御構文の基本（読み書きできると現場で困りません）：

if (condition) { ... } else { ... }
for (let i=0;i<array.length;i++) { ... }
for (const item of array) { ... }

配列メソッド（現場で頻出）：

  • map: 元配列を変換して新配列を返す
  • filter: 条件に合う要素を抽出して新配列を返す
  • reduce: 集約処理（合計・連結・オブジェクト化など）
  • find: 条件に合う最初の要素を返す（なければ undefined）
  • forEach: 各要素に対して処理する（戻り値は使わない／副作用向け）

例：

const nums = [1,2,3,4];
const squares = nums.map(n => n*n); // [1,4,9,16]
const evens = nums.filter(n => n%2===0); // [2,4]
const sum = nums.reduce((acc,n)=>acc+n, 0); // 10

reduce の初期値（第2引数）の注意：

  • 初期値を省略すると「配列の最初の要素」が初期値扱いになるため、空配列だと例外になります。

注意（よくある失敗）: forEach のコールバック内で await しても、ループ全体は待ってくれません。非同期で順に処理したい場合は for..of と await を使います。

関数・スコープ・クロージャの実務ポイント

  • 関数宣言・関数式・アロー関数は書き方だけでなく挙動も異なります。特にアロー関数は this を自分で持たず、外側の this をそのまま参照します（メソッドやイベントハンドラでの意図しない this ずれに注意）。
  • クロージャは「外側の変数を覚えている関数」です。イベントハンドラや factory パターンで、状態を安全に閉じ込めたいときに有用です。

例（クロージャ）：

function makeCounter() {
  let count = 0;
  return function() {
    count += 1;
    return count;
  };
}
const c = makeCounter();
c(); // 1

よくある失敗：ループ内で var を使うと、クロージャが「最後の値」を参照してしまうことがあります。回避法は次のとおりです。

  • let を使って、反復ごとに別の束縛を作る
  • 即時関数（IIFE）で値をキャプチャする

オブジェクトと配列の扱い（破壊的操作と不変性）

  • オブジェクトのコピー：スプレッド演算子 {...obj}、Object.assign({}, obj)
  • 配列の変更：push/pop は破壊的、concat/map/filter は非破壊的

注意（重要）: 破壊的操作（ミューテーション）は元のデータを直接書き換えるため、状態の追跡が難しくなり、バグや意図しない副作用の原因になります。特にReduxなどの状態管理では不変性（イミュータブル）を前提にしているため、破壊的変更は避けてください。

  • 破壊的な変更は状態管理を難しくし、差分検知やデバッグを壊しやすい
  • DOM要素の innerHTML を直接上書きしたり、配列を直接 mutate する操作はバグの元になりやすい
const a = [1,2];
a.push(3); // 破壊的。元配列を変更
const b = a.concat(4); // 非破壊的。新しい配列 b を返す

DOM操作とイベント（現場でよく使うパターン）

よく使うAPI：

  • document.querySelector / querySelectorAll
  • element.addEventListener('click', handler, { once: true, passive: true })
  • element.classList.add / remove / toggle
  • fetchでAPIを叩き、結果をDOMに描画

例：クリックでボタンを無効化し、クリック回数を表示

<button id="btn">Click</button>
<span id="count">0</span>
<script>
const btn = document.querySelector('#btn');
const span = document.querySelector('#count');
let cnt = 0;
btn.addEventListener('click', () => {
  cnt++;
  span.textContent = cnt;
  if (cnt >= 5) btn.disabled = true;
});
</script>

イベントオプションの意味：

  • capture: イベントの伝播フェーズを切り替える（trueでキャプチャリング＝親→子、falseでバブリング＝子→親）
  • once: 最初の1回だけ実行して自動的に解除する
  • passive: リスナー内でpreventDefault()しないことを宣言し、スクロールなどのパフォーマンス改善に寄与（必要な場合はfalseに）