バックエンドエンジニアでも結局「結果物」はブラウザ上で動きます。
フロントエンドまで専門的に行う必要はありませんが、最低限のJavaScript文法とメソッドを知っておけば:

  • バグの原因を特定するのがずっと簡単になり、

  • フロントエンドの仲間とスムーズにコミュニケーションができ、

  • 簡単な画面くらいは自分で手を入れることができます。

この記事では バックエンドエンジニアも知っておくと間違いなく役立つフロントエンドJavaScript Best 5 をまとめます。

1. fetch – ブラウザでHTTP呼び出しする

Commandbox 광고

なぜ重要か？

バックエンドエンジニアが最もなじみのあるのはHTTP APIです。
フロントエンドではこのAPIを fetch で呼び出すことが多いです。
リクエストがどのように送信され、レスポンス/エラーがどのように処理されるかを理解するだけでもデバッグが格段に楽になります。

基本的な使い方

// GETリクエストの例
fetch('https://api.example.com/users/1')
  .then((res) => {
    if (!res.ok) throw new Error('HTTP error ' + res.status);
    return res.json(); // JSONパース
  })
  .then((data) => {
    console.log('user:', data);
  })
  .catch((err) => {
    console.error('fetch error:', err);
  });

POST + JSONの例

async function createUser() {
  try {
    const res = await fetch('https://api.example.com/users', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ name: 'Alice', age: 30 }),
    });

    if (!res.ok) {
      throw new Error('HTTP error ' + res.status);
    }

    const data = await res.json();
    console.log('created:', data);
  } catch (e) {
    console.error(e);
  }
}

ポイント

  • res.okやres.statusを見てサーバーエラーを区別可能

  • JSON.stringify、res.json() の使用パターンはほぼテンプレートのように覚えておいても良い

  • CORSエラーが出たら、ブラウザコンソールでfetchリクエストがどう送られているのかを見る習慣をつけると良い

2. Promiseとasync/await – 非同期ロジックの基本

なぜ重要か？

フロントエンドはほとんどが非同期です。

  • UIイベント

  • HTTPリクエスト

  • タイマー、WebSocketなど

これらを扱う核心概念が Promise と async/await です。
バックエンドで非同期I/Oを使ったことがあれば概念は似ています。

Promiseの基本

function getUser(id) {
  return fetch(`/api/users/${id}`).then((res) => res.json());
}

getUser(1)
  .then((user) => {
    console.log(user);
  })
  .catch((err) => {
    console.error(err);
  });

async/awaitでより読みやすく

async function showUser(id) {
  try {
    const res = await fetch(`/api/users/${id}`);
    if (!res.ok) throw new Error('HTTP ' + res.status);

    const user = await res.json();
    console.log(user);
  } catch (e) {
    console.error(e);
  }
}

showUser(1);

並行呼び出し (バックエンドでもよく使われるパターン)

async function loadDashboard() {
  const [userRes, statsRes] = await Promise.all([
    fetch('/api/me'),
    fetch('/api/stats'),
  ]);

  const [user, stats] = await Promise.all([
    userRes.json(),
    statsRes.json(),
  ]);

  console.log(user, stats);
}

ポイント

  • PromiseベースのAPIは .then().catch() または async/awaitのいずれかで読みやすい方式を選択

  • 複数のリクエストを一度に送る場合はPromise.allパターンを知っておくこと

3. 配列メソッドの3兄弟: map, filter, reduce

Commandbox 광고

なぜ重要か？

フロントエンドでもデータを扱います。

  • サーバーから受け取ったJSONリストを画面用データ形式に変換

  • 特定条件のデータのみフィルタリング

  • 合計/統計を計算

このとき 配列メソッドを多く使用します。バックエンドでもよく見られる コレクション処理と同じ概念です。

map – 配列の各要素を「変換」

const users = [
  { id: 1, name: 'Alice', age: 31 },
  { id: 2, name: 'Bob', age: 27 },
];

const names = users.map((u) => u.name);
// ['Alice', 'Bob']

filter – 条件に合うものだけ残す

const adults = users.filter((u) => u.age >= 30);
// [{ id: 1, name: 'Alice', age: 31 }]

reduce – 配列を1つの値にまとめる

const totalAge = users.reduce((sum, u) => sum + u.age, 0);
// 58

チェイニングの例

const avgAgeOfAdults = users
  .filter((u) => u.age >= 30)
  .reduce((acc, u, _, arr) => acc + u.age / arr.length, 0);

ポイント

  • 「for文ばかりのフロントコード」を見ればmap/filter/reduceでリファクタリングポイントが目に入ってくる

  • バックエンド(Java, Kotlin, Python, Goなど)コレクションライブラリとの対応関係を整理しておくと理解が早まる

4. DOM操作の核心: querySelector, addEventListener, classList

なぜ重要か？

フレームワーク(React, Vueなど)を使うにしても、 デバッグ段階では結局DOMを直接見る必要があります。
簡単な管理ページや社内ツールはフレームワークなしでバニラJSで作成されることもあります。

要素選択 – querySelector

<button id="save-btn">保存</button>

const saveBtn = document.querySelector('#save-btn');

CSSセレクタの文法をそのまま使用します。

  • #id

  • .class

  • button.primary

  • div > spanなど

イベントハンドラ – addEventListener

saveBtn.addEventListener('click', () => {
  console.log('保存ボタンがクリックされました！');
});

スタイル/状態トグル – classList

<button id="save-btn" class="primary">保存</button>

saveBtn.classList.add('loading');     // クラス追加
saveBtn.classList.remove('primary');  // クラス削除
saveBtn.classList.toggle('hidden');   // あるなら削除、なければ追加

この組み合わせだけでも:

  • 「ボタンがなぜ押せないのか？」 → 実際のDOM要素が正しく取得できているか、イベントがバインドされているか確認可能

  • 「このdivがなぜ表示されないのか？」 → classListを見てどの状態クラスが適用されているか追跡可能

ポイント

  • フレームワーク内部の動作を理解する際にもDOM APIの基本があれば、ずっと混乱が少なくなる

  • ブラウザコンソールで直接document.querySelector(...)を試す習慣が重要

5. ES Modules – import / exportの基本

なぜ重要か？

今やフロントエンドJavaScriptは ES Module(ESM) を基本に使用します。

  • コードがファイル単位で分割され、

  • 必要なものをimportして使用し、

  • Webpack/Babel/バンドラーを使わなくてもブラウザが直接ESMを理解します。

バックエンド(Node.js)の方でもESMの使用が増えているので、一度整理しておけば両方に役立ちます。

モジュールのエクスポート – export

// mathUtils.js
export function add(a, b) {
  return a + b;
}

export const PI = 3.14;

// デフォルトエクスポート – モジュールを代表する値/関数
export default function mul(a, b) {
  return a * b;
}

モジュールのインポート – import

// main.js
import mul, { add, PI } from './mathUtils.js';

console.log(add(1, 2)); // 3
console.log(mul(3, 4)); // 12
console.log(PI);        // 3.14

  • { add, PI } : 名前付きエクスポート(named export)をインポート

  • mul : デフォルトエクスポートをインポート

ブラウザでモジュールスクリプトを使用する例

<script type="module" src="/static/js/main.js"></script>

こう宣言することでmain.jsの中でimport / export文法を使用できます。

ポイント

  • フロント/バックエンド共通の「モジュール化」概念は同じ

  • importのパスルール(./, ../, 絶対パス、バンドラーのエイリアスなど)を知っておくとフロントビルド設定を読むときにも混乱が少ない

バックエンドエンジニアがjsコードを書く様子

締め – 「フロントもできるバックエンド」の最低条件

まとめると、バックエンドエンジニアが フロントエンドJSを理解するために最低限知っておくべきことは:

  1. fetch – ブラウザでHTTP呼び出しおよびJSON処理

  2. Promise / async/await – 非同期ロジック構造の理解

  3. 配列メソッド(map, filter, reduce) – データ変換/フィルタリング/集計

  4. DOMの基本(querySelector, addEventListener, classList) – 画面要素の選択、イベント、状態トグル

  5. ES Modules(import / export) – モジュール単位のコード構造理解

この五つに慣れれば:

  • フロントエンドのコードレビューに参加でき、

  • 簡単な画面は自分で実装/修正でき、

  • API連携の問題をフロント/バック両方から同時に追跡できます。

その後は必要に応じて React/Vueのようなフレームワーク、 ビルド/バンドリング(Webpack, Vite, SWCなど) への範囲を広げていくと良いです。