たとえば、https://app.example.com の画面から https://api.example.com のAPIを fetch() で呼び出すと、ブラウザは「この別の場所から返ってきたレスポンスをJavaScriptへ渡してよいか」を確認します。

CORSエラーは、通信が一切サーバーへ届いていないという意味ではありません。多くの場合、ブラウザがレスポンスをJavaScriptへ渡さない状態です。

この記事では、CORSの意味、オリジンの考え方、Access-Control-Allow-Origin の役割、プリフライト、よくある直し方を初心者向けに整理します。

まず結論：CORSは別オリジンAPIの受付ゲート

CORSは、Cross-Origin Resource Sharingの略です。日本語では「オリジン間リソース共有」と説明されますが、最初は 別のオリジンにあるAPIのレスポンスを、ブラウザ上のJavaScriptが読めるようにするための許可ルール と考えると分かりやすいです。

重要なのは、CORSの判断をしている中心がブラウザだという点です。サーバーはレスポンスに許可ヘッダーを付け、ブラウザはそのヘッダーを見て、JavaScriptへレスポンスを渡すかどうかを決めます。

次の図では、画面のJavaScript、ブラウザ、APIサーバーの間にある「受付ゲート」としてCORSを見てください。どこで許可を確認しているかを押さえると、エラーの読み方が変わります。

CORSエラーが出る典型例

CORSエラーは、フロントエンドとAPIを別々の場所で動かすとよく出ます。学習中なら、ReactやVueなどの開発サーバーが http://localhost:3000、APIサーバーが http://localhost:8080 という構成で起きやすいです。

fetch("http://localhost:8080/api/users")
  .then((response) => response.json())
  .then((users) => console.log(users));

このコード自体が間違っているとは限りません。問題は、ブラウザから見ると localhost:3000 と localhost:8080 はポートが違うため、別オリジンとして扱われることです。

そのためAPIサーバー側が、http://localhost:3000 からの読み取りを許可するヘッダーを返さないと、ブラウザはJavaScriptにレスポンスを渡しません。

オリジンとは何か

オリジンとは、Web上の出どころを表す単位です。MDNの同一オリジンポリシーの説明でも、オリジンはスキーム、ホスト、ポートの組み合わせとして扱われます。

スキームは https や http、ホストは example.com のような名前、ポートは 443 や 3000 のような番号です。どれか1つでも違うと、ブラウザは別オリジンとして扱います。

次の図では、オリジンを3点セットとして見てください。CORSエラーの原因を探すときは、ドメインだけでなく、http と https の違いやポート番号の違いも確認します。

同一オリジンポリシーとCORSの関係

ブラウザには、同一オリジンポリシーという重要なセキュリティの仕組みがあります。これは、あるオリジンで読み込まれた文書やスクリプトが、別オリジンのリソースへ自由にアクセスしないように制限する考え方です。

もしこの制限がなければ、悪意のあるページが、利用者がログイン中の別サイトの情報をブラウザ経由で読み取れてしまう可能性があります。CORSは、この制限を壊す仕組みではなく、サーバーが明示的に許可した範囲だけ例外を作る仕組みです。

つまり、同一オリジンポリシーは基本のブレーキ、CORSはサーバーが許可した相手だけに開くゲートです。

CORSの流れ

CORSでは、ブラウザがリクエストに Origin ヘッダーを付けることがあります。APIサーバーは、そのOriginを見て、許可する場合はレスポンスに Access-Control-Allow-Origin を返します。

次の図では、Origin、許可ヘッダー、ブラウザの照合、JavaScriptへの受け渡しの順番を見てください。CORSの主役が「ブラウザの照合」であることが分かります。

Origin: https://app.example.com

Access-Control-Allow-Origin: https://app.example.com

上のように、リクエスト元のOriginと、レスポンスの Access-Control-Allow-Origin が対応していれば、ブラウザはレスポンスをJavaScriptへ渡せます。対応していなければ、コンソールにCORSエラーが表示されます。

Access-Control-Allow-Originの意味

Access-Control-Allow-Origin は、APIサーバーが「このオリジンのJavaScriptには、レスポンスを読ませてよい」とブラウザへ伝えるレスポンスヘッダーです。

開発中にすべてを許可したくなり、* を設定する例を見ることがあります。公開APIのように誰が読んでもよいリソースでは選択肢になりますが、ログイン情報やCookieを含むリクエストでは注意が必要です。

Access-Control-Allow-Origin: https://app.example.com
Vary: Origin

特定の画面からだけAPIを読ませたい場合は、上のように具体的なオリジンを返します。複数のオリジンを許可する場合でも、レスポンスには実際のリクエスト元に対応した1つのオリジンを返す実装が一般的です。

また、Cookieなどの認証情報を含める場合は、Access-Control-Allow-Credentials: true やJavaScript側の credentials: "include" も関係します。この場合、Access-Control-Allow-Origin: * を安易に使えない点に注意します。

プリフライトとは何か

プリフライトとは、本番のリクエストを送る前に、ブラウザが OPTIONS メソッドで事前確認する仕組みです。すべてのCORSリクエストで必ず発生するわけではありません。

たとえば、PUT や DELETE、独自ヘッダー、JSONの Content-Type: application/json などが関係すると、ブラウザは先に「このメソッドやヘッダーで送ってよいか」をAPIサーバーへ確認することがあります。

次の図では、プリフライトを「受付での事前確認」として見てください。OPTIONSが失敗すると、本番のPOSTやPUTの前に止まって見えることがあります。

OPTIONS /api/users HTTP/1.1
Origin: https://app.example.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type

APIサーバーは、この事前確認に対して、許可するメソッドやヘッダーを返します。ここで必要なヘッダーが不足していると、ブラウザは本番リクエストへ進めません。

CORSエラーの直し方

CORSエラーが出たときは、まずブラウザのConsoleだけで判断せず、Networkタブで実際のリクエストとレスポンスヘッダーを見ます。特に、Origin、Access-Control-Allow-Origin、プリフライトの OPTIONS を確認します。

次の図では、CORSエラーを調べる順番を見てください。フロントエンドの fetch() を何度も書き換える前に、APIサーバーがどのヘッダーを返しているかを確認するのが近道です。

• Consoleで、拒否されたOriginとURLを読む
• Networkで、OPTIONSが出ているか、本番リクエストまで進んでいるかを見る
• レスポンスにAccess-Control-Allow-Originがあるか確認する
• 許可したいOriginが、実際のOriginと完全一致しているか確認する
• Cookieを使う場合は、credentials設定とAllow-Credentialsを合わせて確認する

根本的な修正は、多くの場合APIサーバー側で行います。フロントエンド側でCORSヘッダーを追加しても、ブラウザが見ているのはAPIサーバーから返ってくるレスポンスヘッダーです。

CORSと認証・CSRF対策の違い

CORSはセキュリティに関係しますが、認証や権限チェックそのものではありません。CORSを許可したからといって、ログイン不要で何でも見せてよいという意味にはなりません。

認証は、利用者が誰かを確認する仕組みです。権限チェックは、その利用者がそのデータを見たり操作したりしてよいかを判断する仕組みです。CSRF対策は、利用者のブラウザを勝手に使った操作を防ぐための仕組みです。

次の図では、CORS、認証、CSRF対策の役割を分けて見てください。CORSは「読む許可」の話であり、本人確認や権限確認の代わりではありません。

既存記事とあわせて読む順番

CORSは、JavaScriptの fetch()、HTTPヘッダー、Web APIの理解とつながっています。先にAPIやHTTPの用語を押さえておくと、CORSエラーの原因を読みやすくなります。

• 【JavaScript】fetch APIとは？GETとPOSTの使い方
• APIとは？APIとWeb APIの違い
• REST APIとは何か？
• HTTPとは？HTTPSとは？
• async/awaitとは？Promiseとの違い

公式情報と確認先

仕様として確認する場合は、WHATWG Fetch StandardとMDNのCORS、同一オリジンポリシーの説明を参照します。Fetch Standardは、fetch、CORSプロトコル、リダイレクトなど、ブラウザの取得処理を一貫した仕組みとして定義しています。

• Fetch Standard
• MDN: Cross-Origin Resource Sharing
• MDN: Same-origin policy
• MDN: CORS configuration

まとめ

CORSは、別オリジンのAPIレスポンスをブラウザ上のJavaScriptが読めるかどうかを、サーバーのHTTPヘッダーで判断する仕組みです。

• CORSは、別オリジンのレスポンスを読めるかを決めるブラウザ中心の仕組み
• オリジンは、スキーム、ホスト、ポートの3点で決まる
• Access-Control-Allow-Originは、APIサーバーが許可するOriginをブラウザへ伝えるヘッダー
• プリフライトは、本番リクエスト前のOPTIONSによる事前確認
• CORSは認証や権限チェックの代わりではない

CORSエラーが出たら、まずConsole、Network、レスポンスヘッダー、サーバー設定の順に見ます。フロントエンドだけで解決しようとせず、APIサーバーが正しい許可ヘッダーを返しているかを確認しましょう。

Promiseが分かると、fetch、then、catch、async/await のコードを「何を待って、どこで結果を受け取るのか」という流れで読めるようになります。

Promiseは「結果そのもの」ではなく、「あとで結果を受け取る入口」です。最初はこの理解だけで十分です。

この記事では、Promiseの意味、3つの状態、then・catch・finallyの使い方、fetchでつまずきやすいポイント、async/awaitとの関係を順番に解説します。

まず結論：Promiseは将来の結果を表すオブジェクト

Promiseは、非同期処理の最終的な成功または失敗を表すオブジェクトです。MDNでも、Promiseは非同期処理の完了または失敗と、その結果の値を表すものとして説明されています。

ただし、初心者のうちは仕様文を暗記するより、次の読み方を先に覚える方が実用的です。

非同期処理を始める
  ↓
Promiseが返る
  ↓
成功したら then
失敗したら catch
最後に finally

この時点で大事なのは、Promiseが返ってきても、まだ中身の結果を直接持っているとは限らないことです。結果はあとから成功または失敗として確定します。

Promiseが必要になる場面

JavaScriptでは、通信、タイマー、ファイル読み込みのように、すぐ終わらない処理がよく出てきます。特にWebアプリでは、APIからデータを取るfetchが代表例です。

通信が終わるまで画面全体を止めると、ユーザーは操作できません。そのためJavaScriptでは、通信を待っている間も他の処理を進め、結果が返ってきたときに続きを実行します。

この「あとで続きを実行する」ための約束を整理するのがPromiseです。

Promiseの流れを図で見る

次の図では、Promiseを「非同期処理の結果を、成功・失敗・最後の処理へ分けて受け取る流れ」として見てください。細かい用語より先に、左から右への読み順を作るのがポイントです。

pending・fulfilled・rejectedの3状態

Promiseには状態があります。まずは次の3つだけ押さえれば十分です。

Promiseは最初にpendingになり、その後、成功すればfulfilled、失敗すればrejectedになります。成功と失敗のどちらかに決まった状態を、実務では「settled」と表現することもあります。

then・catch・finallyの役割

Promiseでよく使うのは、then、catch、finallyです。

fetch("/api/users")
  .then((response) => response.json())
  .then((users) => {
    console.log(users);
  })
  .catch((error) => {
    console.error("取得に失敗しました", error);
  })
  .finally(() => {
    console.log("読み込み処理を終了します");
  });

ポイントは、前のthenで返した値が、次のthenへ渡されることです。response.json()を返すから、次のthenで変換後のデータを受け取れます。

fetchでよくある誤解：HTTPエラーは必ずcatchに入るわけではない

Promiseをfetchで使うとき、初心者がつまずきやすいのがエラー処理です。ネットワーク自体に失敗した場合はcatchに入りますが、HTTPステータスが404や500の場合は、必ずしも自動でcatchに入るとは限りません。

fetchの結果では、response.okを見て、HTTPとして成功扱いできるかを確認するのが安全です。

fetch("/api/users")
  .then((response) => {
    if (!response.ok) {
      throw new Error("HTTPエラー: " + response.status);
    }
    return response.json();
  })
  .then((users) => {
    console.log(users);
  })
  .catch((error) => {
    console.error(error);
  });

このように書くと、通信そのものの失敗だけでなく、サーバーがエラーを返した場合も同じcatchで扱いやすくなります。

async/awaitはPromiseを読みやすくする書き方

async/awaitは、Promiseと別物ではありません。Promiseを、上から順に読む形で書きやすくするための構文です。

async function loadUsers() {
  try {
    const response = await fetch("/api/users");

    if (!response.ok) {
      throw new Error("HTTPエラー: " + response.status);
    }

    const users = await response.json();
    console.log(users);
  } catch (error) {
    console.error(error);
  }
}

awaitはPromiseの完了を待ち、その結果を取り出します。つまり、async/awaitを使っていても、裏側ではPromiseを扱っています。

最初に覚える判断基準

• fetch()の戻り値はPromiseとして読む
• thenでは次へ渡したい値をreturnする
• HTTPステータスの失敗はresponse.okで確認する
• async/awaitはPromiseを消すものではなく、読みやすくする書き方と考える

Promise.allは最初から暗記しなくてよい

Promiseを調べると、Promise.all、Promise.race、Promise.allSettledなども出てきます。これらは複数のPromiseをまとめて扱うための機能です。

ただし、初学者が最初に全部を覚える必要はありません。まずは、1つのPromiseが成功・失敗へ分かれる流れを読めることが先です。複数の通信を同時に待つ必要が出てきたときに、Promise.allを学ぶ順番で問題ありません。

たとえば、ユーザー情報と注文履歴を同時に取得したい場合は、複数のPromiseをまとめて待つ考え方が必要になります。一方、単に1つのAPIからデータを取るだけなら、then・catch・finallyとasync/awaitを理解していれば十分です。

コードレビューで見るポイント

Promiseを使ったコードを読むときは、まず「どこでPromiseが作られ、どこで結果を取り出しているか」を見ます。次に、失敗時の処理があるか、ローディング表示などの後片付けが漏れていないかを確認します。

特にWeb画面では、通信中の表示、成功時の表示、失敗時の表示がそろっているかが重要です。Promiseの文法だけでなく、ユーザーに何が見えるかまで考えると、実務のコードを読みやすくなります。

公式情報と関連して読みたい記事

• MDN: Promise
• MDN: Fetch API の使用
• fetch APIとは？GETとPOSTの使い方
• async/awaitとは？Promiseとの違い

まとめ

Promiseは、非同期処理の結果をあとで受け取るための仕組みです。最初は「将来の結果を表すオブジェクト」と考えれば十分です。

• 成功時はthen
• 失敗時はcatch
• 最後の処理はfinally
• fetchではresponse.okも確認する
• async/awaitはPromiseを読みやすくする構文

条件分岐の制御フローを定義する命令には、if文を使う方法もありますが、条件が多分岐になる場合にはswitch文を用いるほうが可読性が上がります。

このページでは、switch文の使い方を解説しif文との使い分け方法をサンプルコード付きで解説します。

JavaScript初心者であれば、知らないと恥ずかしい基本的な知識です。是非最後までご覧ください。

条件分岐とは？

条件分岐とは、プログラム中である条件を満たしているかどうかを判定し、満たしている場合/満たしていない場合に応じて処理を変えることです。

基本的には、「もし○○ならば××せよ」というような書き方で処理の内容を分岐させていきます。

JavaScriptでは、if文と本ページで解説するswitch文を用いて条件分岐を指定します。

JavaScriptで用いる条件分岐命令

• if文　　　⇒　二分岐に用いる
• switch文　⇒　多分岐に用いる

if文について詳しく知りたい方はこちら。

【JavaScript】if文で条件分岐の書き方の基本とコツを３分で解説

JavaScriptのif文の基本から応用までを簡潔に解説。初心者向けにelseやelse ifの使い方、論理演算子の活用方法をサンプルコード付きで紹介します。条件分岐をマスターして、効率的なプログラミングを始めましょう。

it-biz.online

2024.02.02

switch文：構文ルール

switch (変数) {
case 値1:
(変数が値１の場合の処理);
break;
case 値2:
(変数が値２の場合の処理) ;
break;
　・・・・
default;
(変数がどの値にも合致しない場合)
}

この構文により、変数の値に応じて複数の条件分岐を定義することができます。

• 「変数が値１の場合に処理〇〇を行う」
• 「変数が値２の場合に処理△△を行う」

このように記述することで、多分岐の条件を分かりやすく記述することが可能です。

"default" はどの条件にも合致しない場合を表します。if文でいう「else」の役割と同じように考えてOK。

JavaScriptのswitch文では、上から順に変数の値を比較していき、合致した時点で該当する処理が行われます。そして、なんとそれ以降に記載された処理もすべて実行されてしまうのです。

switch文の「break」の必要性

"break" は強制的に処理を抜ける命令です。この命令は、for文やwhile文でも利用することができます。

"break" を意図的に書かずにコーディングする方法もありますが、基本的にはswitch文を利用して記述するのが一般的です。

仮に、"break" を用いずに以下のようなコードを記述したとしましょう。

See the Pen switch② by ビズドットオンライン (@BizOnline) on CodePen.

お気づきですね。「case 2;」以降のコードがすべて実行されてしまうのです。

基本的にcase文は条件分岐で用いる命令であるため、繰り返し処理（順次処理）的に利用するのはお勧めできません。そのため、基本的には "break" とセットで用いるのが正解と言えるのです。

switch文の使い方

実際に、switch文を利用したサンプルコードがこちらです。

「今日の天気」を選択して「ボタン」をクリックしてみましょう。（右下の「Rerun」ボタンを押せば何度も実行できます！）

See the Pen switch① by ビズドットオンライン (@BizOnline) on CodePen.

いかがでしょうか？

選択したラジオボタンに応じて、表示される文章が変わることが分かるかと思います。

上記のサンプルコードでは、以下のようにswitch文を用いて条件分岐を定義しています。

 switch (result) {
   case "晴れ":
     document.write(`本日は晴天なり`);
     break;
   case "曇り":      
     document.write(`本日はどんより曇りです`);
     break;
   case "雨":
     document.write(`本日は傘が必要です`);
     break;
   case "雪":
     document.write(`雪だるまを作りましょう`);
     break;
   }

if文との比較

ちなみに、冒頭でも説明した通り、必ずしもswitch文を使う必要はありません。if文でも同じ条件分岐を定義することが可能です。

 if (result = "晴れ") {
     document.write(`本日は晴天なり`);
    } else if(result = "曇り"){      
      document.write(`本日はどんより曇りです`);
    } else if(result = "雨"){
      document.write(`本日は傘が必要です`);
    } else if(result = "雪"){
      document.write(`雪だるまを作りましょう`);
    }

if文の方がコードの行数自体は減りますが、なんとなく読みやすさはswitch文の方が勝っている気がします。

また、switch文の場合は、１つの変数の値をもとに条件分岐させていくのに対して、if文は条件式に記述すべき変数は１つでなくてもOK。

そのため、条件をMECEにしたいという人は、switch文を好むようです。

JavaScriptを体系的に学びたい方は

プログラミングをより実践的に学びたい―。実際にコーディングをしながら学びたい―。独学に限界を感じている―。

そんな方には、無料体験/オンライン完結もあるプログラミングスクールで学ぶのがおすすめです。都度検索しながら知識を補完していくのではなく、１から体系立てて学ぶことで短時間・かつ効率的にスキルハックすることが可能です。

各プログラミングスクールの特徴をまとめた記事をこちらに記載しておきますので、是非ご覧ください。

おすすめプログラミングスクールTOP５【現役エンジニア推薦】

プログラミングスキルを習得したい社会人・学生の方へおすすめしたいプログラミングスクールをニーズ別に３つに絞ってご紹介します。本当に未経験からでも実務レベルのスキルはみにつくか？現役エンジニアが口コミや実体験をもとに解説します。

it-biz.online

2023.05.30

初心者にとっては理解しづらい返り値（Boolean型の変数）など、分かりやすく丁寧に説明していきます。

比較演算子についてはJavaScriptの超・基本的な内容なので、是非このページでマスターしておきましょう！

比較演算子とは？

比較演算子とは「==（等価）」「>=（以上）」などのことで、２つの値を比較するために用います。また、ただ値を比較するだけではなく、比較した結果を論理値（Boolean型）として返すことができます。

そのため、比較演算子は、if文 / for文 / while文などのループ処理の条件式で利用されることが一般的です。

この章では、比較演算子の意味と使い方・注意点を解説していきます。

等価 (==)

等価演算子（==）は、２つの値が等しいかどうか？を検証します。

比較する２つの値が等しい場合、結果を「TRUE」で返却します。

早速、以下のサンプルコードをご覧ください。

See the Pen 比較演算子== by ビズドットオンライン (@BizOnline) on CodePen.

5行目で、変数「hensu1」と「hensu2」を比較しています。

今回、２つの変数に代入されている値はどちらも「１」です。この場合、等価演算子で比較した結果は「真」となりますので、比較結果として「TRUE」が返されます。

※比較結果については、任意の変数に代入することができます。代入は必須ではありません。

逆に２つの値が一致しない場合は、「FALSE」が返却されます。

See the Pen 比較演算子==② by ビズドットオンライン (@BizOnline) on CodePen.

ちなみに、なぜ "=" を２つ続けるか？これは、"=" １つでは代入の意味になるためです。

「A = B」としてしまうと、Bの値をAに代入する処理になってしまいますので、注意して覚えましょう。

不等価（!=）

等価演算子の反対です。２つの値を比較して値が等しくない場合に "TRUE" が返却されます。

See the Pen 比較演算子!= by ビズドットオンライン (@BizOnline) on CodePen.

～より大きい（>）/より小さい（<）

左オペランドが右オペランドより大きい（小さい）場合に "TRUE" が、そうでない場合に "FALSE" が返却されます。

See the Pen 比較演算子 > by ビズドットオンライン (@BizOnline) on CodePen.

～以上（>=）/～以下（<=）

左オペランドが右オペランドより同じか大きい（小さい）場合に "TRUE" が、そうでない場合に "FALSE" が返却されます。

See the Pen 比較演算子>= by ビズドットオンライン (@BizOnline) on CodePen.

厳密等価演算子（===）の意味

さて、ここまでは比較的理解しやすい演算子を解説してきました。

この章では、厳密等価演算子と呼ばれる "===" と記述する演算子の意味について解説します。

厳密等価演算子は、２つの値に加えて２つの値のデータ型まで比較します。

どういうことか早速以下のサンプルコードをご覧ください。

単純な等価演算子（==）であれば、変数の値だけを比較するため結果は "TRUE" となりますが、厳密等価演算子（===）は、２つの変数のデータ型も一致しているかどうか？を比較します。

したがって、上記サンプルコードでは、"===" で比較を行った結果 "FALSE" が返却されているのです。

厳密不等価演算子(!==)　⇒　"===" の反対

厳密不等価演算子（!==）は、ちょっと理解しづらいのですが（===）の反対の結果を返すと覚えればOKです。

See the Pen 厳密不等価　!== by ビズドットオンライン (@BizOnline) on CodePen.

JavaScriptを体系的に学びたい方は

プログラミングをより実践的に学びたい―。実際にコーディングをしながら学びたい―。独学に限界を感じている―。

そんな方には、無料体験/オンライン完結もあるプログラミングスクールで学ぶのがおすすめです。都度検索しながら知識を補完していくのではなく、１から体系立てて学ぶことで短時間・かつ効率的にスキルハックすることが可能です。

各プログラミングスクールの特徴をまとめた記事をこちらに記載しておきますので、是非ご覧ください。

おすすめプログラミングスクールTOP５【現役エンジニア推薦】

プログラミングスキルを習得したい社会人・学生の方へおすすめしたいプログラミングスクールをニーズ別に３つに絞ってご紹介します。本当に未経験からでも実務レベルのスキルはみにつくか？現役エンジニアが口コミや実体験をもとに解説します。

it-biz.online

2023.05.30

そのため、単なる省略記法だと思っていると後で混乱しやすくなります。この記事では、アロー関数の意味、基本構文、function との違い、使いどころを初心者向けに整理します。

「短く書ける」だけでなく、「this が変わる」と覚えておくと実務で役立ちます。

結論：アロー関数は短い関数を書くのに向いている

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

上のように、function を使わず => で関数を書けるのがアロー関数です。特に、配列処理やコールバック関数でよく使われます。

1. アロー関数の基本構文

通常の関数式は次のように書きます。

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

同じ処理をアロー関数で書くと、こうなります。

const greet = (name) => {
  return "こんにちは、" + name + "さん";
};

このように、function を省いて、引数の後ろに => を置くのが基本形です。

2. さらに短く書けるパターン

アロー関数は、条件がそろうとさらに短く書けます。

引数が1つなら () を省略できる

const double = n => {
  return n * 2;
};

1行で値を返すなら return と { } を省略できる

const double = n => n * 2;

この書き方はとても便利ですが、短くしすぎると読みにくくなることもあります。初心者のうちは、まずブロック付きで書ければ十分です。

3. アロー関数と function の大きな違い

ここが大事です。アロー関数は単なる短縮形ではありません。

this を自分で持たない

通常の function は呼び出し方によって this が変わりますが、アロー関数は外側の this をそのまま使います。

そのため、オブジェクトのメソッドやクラスのメソッドで、どちらを使うかによって挙動が変わることがあります。

arguments を持たない

通常の関数には arguments がありますが、アロー関数にはありません。可変長引数を扱いたいときは、通常は ...args を使います。

コンストラクタとして使えない

アロー関数は new と一緒には使えません。オブジェクトを生成するコンストラクタ用途なら、通常の関数や class を使います。

4. どんな場面で使うのか

アロー関数が特に活躍するのは、短いコールバック関数を書く場面です。

const numbers = [1, 2, 3];

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

console.log(doubled); // [2, 4, 6]

このように、配列の map や filter、イベント処理、非同期処理などで非常によく見かけます。

一方で、メソッド定義や this の理解が必要な場面では、通常の function のほうが意図が伝わりやすいこともあります。

5. よくあるつまずき

return が省略されていて意味が分からなくなる

1行アロー関数では、式の結果が自動で返ります。慣れるまでは、あえて { } と return を書いたほうが理解しやすいです。

オブジェクトを返したいのにエラーになる

オブジェクトを1行で返すときは、丸かっこで囲む必要があります。

const createUser = name => ({ name: name });

this が思った通りにならない

アロー関数は自分の this を持たないため、「メソッド内だから自動でそのオブジェクトを指す」と考えるとズレることがあります。ここは通常の関数との最重要ポイントです。

補足：アロー関数を実務で読むときの見方

アロー関数は「短く書ける関数」と説明されることが多いですが、実際のコードではそれだけでは少し足りません。特に、配列処理、イベント処理、コールバック関数の中でよく登場するため、コードを読むときは「どの値を受け取り、何を返しているのか」を先に見ると理解しやすくなります。

まずは、配列の map でアロー関数を使う例を見てください。アロー関数がどんな場面で自然に使われるのかが見えやすい例です。

この画像で見てほしいのは、price => { ... } の部分です。これは「priceを受け取り、税込価格に変換する処理」を map に渡しています。関数名を付けて何度も使うほどではない短い処理を、その場で渡したいときにアロー関数はよく使われます。

実務では、商品一覧の価格を加工する、ユーザー一覧から名前だけ取り出す、APIで受け取ったデータを画面表示用に整える、といった場面でよく出てきます。つまり、アロー関数は「短く書けるから使う」というより、「その場限りの小さな処理を読みやすく渡すために使う」と考えると自然です。

const users = [
  { name: "田中", age: 24 },
  { name: "佐藤", age: 31 }
];

const names = users.map(user => user.name);

console.log(names); // ["田中", "佐藤"]

この例では、user => user.name が「ユーザー情報から名前だけ取り出す処理」です。処理が1行で済むため、アロー関数にすると何をしているかが見えやすくなります。

一方で、アロー関数には注意点もあります。特に this の扱いは、通常の function と違います。次の図で、アロー関数が this をどう扱うかを整理します。

この図で重要なのは、アロー関数が「自分専用の this を持たない」という点です。通常の function は呼び出し方によって this が変わりますが、アロー関数は外側の this をそのまま使います。

この性質は、クラスやオブジェクトの中でイベント処理を書くときに役立つことがあります。ただし、オブジェクトのメソッドそのものをアロー関数で書くと、期待した this にならないこともあります。初心者のうちは、短いコールバックや配列処理ではアロー関数、オブジェクトのメソッドでは通常の function やメソッド記法、と分けて考えると安全です。

よくあるミスは、アロー関数を「functionの完全な置き換え」と思ってしまうことです。確かに似た場面で使えますが、this、arguments、コンストラクタ利用では違いがあります。迷ったときは、まず function（関数）の基本 を押さえ、そのうえで コールバック関数 や JavaScriptのthis とつなげて読むと理解しやすいです。

使ってよい場面・避けたほうがよい場面

アロー関数が特に向いているのは、配列処理や一時的なコールバックです。map、filter、forEach のように、関数をその場で渡す処理では、短く書けることが読みやすさにつながります。

一方で、オブジェクトのメソッドとして this を使う処理では注意が必要です。アロー関数は外側の this を引き継ぐため、「このオブジェクト自身」を指してほしい場面で期待と違う挙動になることがあります。

const user = {
  name: "田中",
  greet: function() {
    console.log(this.name);
  }
};

user.greet(); // 田中

このように、オブジェクト自身の情報を使うメソッドでは、まず通常の関数やメソッド記法で書くと安全です。アロー関数は便利ですが、いつでも短くすればよいわけではありません。

初心者が見るべきポイント

• => の左側は受け取る値、右側は実行する処理
• 1行で返すときは return が省略されていることがある
• this を使う処理では、通常の function との違いを見る
• 配列処理やイベント処理でよく出てくると覚える

読みづらいアロー関数に出会ったとき

アロー関数は短く書ける反面、短くしすぎると初心者には読みづらくなります。特に、引数が複数あり、さらに三項演算子やオブジェクトの返却が混ざると、どこまでが引数で、どこからが戻り値なのか見失いやすくなります。

そのようなコードに出会ったら、いったん通常の関数の形に戻して読むと理解しやすいです。user => user.name なら「userを受け取ってuser.nameを返す関数」、(a, b) => a + b なら「aとbを受け取って足し算の結果を返す関数」と読み替えます。

また、アロー関数の中で処理が長くなっている場合は、無理に1行で書かず、{ } と return を使って複数行にしたほうが読みやすいこともあります。短さよりも、何をしているかがすぐ分かることを優先しましょう。

実務では、チームのコード規約によってアロー関数を積極的に使う場合もあれば、読みやすさを優先して通常の関数を選ぶ場合もあります。大切なのは、どちらか一方を丸暗記することではなく、処理の短さ、this の扱い、読みやすさを見て選べるようになることです。

アロー関数を通常の関数に戻して読む練習

アロー関数が読みにくいと感じたときは、頭の中で通常の関数に戻してみると理解しやすくなります。たとえば price => price * 1.1 は、次のように読み替えられます。

function(price) {
  return price * 1.1;
}

このように戻してみると、左側の price が引数で、右側の price * 1.1 が戻り値だと分かります。アロー関数は記号が少ないぶん、慣れるまでは情報が省略されているように感じます。読みづらいときは、無理に一瞬で理解しようとせず、通常の関数に展開して確認しましょう。

また、アロー関数が連続して出てくるコードでは、最初から全部を理解しようとすると疲れます。まずは「配列の要素を1つ受け取って、別の形に変換しているのか」「条件に合うものだけ残しているのか」「クリック後に実行する処理なのか」を見ると、コードの目的がつかみやすくなります。

実務のコードレビューでは、アロー関数が短いかどうかよりも、意図が伝わるかどうかを見ます。1行で書ける処理でも、条件分岐が増えて読みにくいなら、複数行にして変数名を付けたほうがよい場合があります。

特に、画面表示用のデータ変換では、アロー関数の中で価格表示、日付整形、ステータス変換などをまとめて行うことがあります。処理が増えたら、無理にその場へ詰め込まず、名前付きの関数へ分けると読みやすくなります。

初心者の方は、アロー関数を見たらまず「これはどこへ渡されている関数なのか」を確認してください。map に渡されているなら変換、filter に渡されているなら絞り込み、クリックイベントに渡されているなら操作後の処理、というように周辺の関数名から役割を推測できます。

この見方ができるようになると、アロー関数は単なる省略記法ではなく、JavaScriptの処理の流れを表す重要なサインとして読めるようになります。

最初は記号に目が行きますが、慣れてくると「受け取る値」と「返す値」を素早く読めるようになります。そこまで来ると、配列処理やイベント処理のコードがぐっと身近になります。

関連して学びたい記事

• JavaScriptの関数 function の使い方
• JavaScriptの関数式とは？
• JavaScriptのコールバック関数とは？

まとめ

アロー関数は、JavaScriptを学ぶうえで避けて通れない基本文法です。まずは「短い関数を書きやすい仕組み」と理解し、次に this の違いまで押さえると、実務でもかなり読みやすくなります。

alertメソッドは、JavaScript内であらかじめ用意されているwindowオブジェクトのメソッドです。

alertメソッドを利用することで、以下の画像のように「ポップアップ画面」を表示することが可能になります。

このページでは、alertとは何か？アラートメッセージの表示方法を１から解説し、基本的な利用方法をマスターできるようサンプルコード付きで解説します。

JavaScript学習中の方であれば、知らないと恥ずかしい超・基本知識ですので、是非最後までご覧ください。

alert（アラート）とは？

alert（アラート）は、テキストメッセージと「OK」ボタンが設置されている画面をポップアップで表示するメソッドです。

入力した内容に誤りがある場合や、注意メッセージを読ませたい場合などに用いられます。alertは決して「警告文」を表示させるだけではありません。使い方は自由です。

ユーザに何らかのメッセージを伝えたい場合は、このalertメソッドが用いられることが多いです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>はじめてのalert</title>
  </head>
  <body>
    <script>
    alert("ここには注意喚起したい内容などが記載されます。")
    </script>
  </body>
</html>

ここでは簡易的にポップアップを表示させるだけのコードを載せていますが、他のロジックと組み合わせることでボタンを押したタイミングでポップアップを表示させたり、表示するメッセージを動的に変更したりすることが可能になります。

【補足】alert：モーダルウィンドウ

alertメソッドで表示される画面はモーダルウィンドウという種類の画面です。

モーダルウィンドウとは、その画面を閉じない限り（OKボタンか×ボタンを押さない限り）他の操作が行えない画面のことです。このページでは、ポップアップとモーダルウィンドウを区別していませんが、厳密に言えば両者は別物です。

alert（アラート）メソッドの使い方

alertメソッドの構文は非常にシンプルです。

（　）の中に表示させたいメッセージを記述します。ここには、数字でも文字列でも、その他事前に定義した変数でも指定することが可能です。

数値を表示させる

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>はじめてのalert</title>
  </head>
  <body>
    <script>
    alert("20201231")
    </script>
  </body>
</html>

変数の値を表示させる

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>はじめてのalert</title>
  </head>
  <body>
    <script>
    const str = "変数strの値";
    alert(str)
    </script>
  </body>
</html>

【補足】window.alert()の意味/alert()との違い

初心者にとっては、少しだけ分かりづらいのですが、alertメッセージはwindowオブジェクトの中の１つのメソッドです。

したがって、本来は以下の記述方法が正式な形です。

ただし、このwindowは基本的に省略可能なので、通常はコードの可読性向上のために単に「alert()」とコーディングすることが多いです。

window.alert('メッセージ');     //windowを記述しても処理内容は全く同じです

alert('メッセージ');            //windowを省略することもできます

JavaScriptを体系的に学びたい方は

プログラミングをより実践的に学びたい―。実際にコーディングをしながら学びたい―。独学に限界を感じている―。

そんな方には、無料体験/オンライン完結もあるプログラミングスクールで学ぶのがおすすめです。都度検索しながら知識を補完していくのではなく、１から体系立てて学ぶことで短時間・かつ効率的にスキルハックすることが可能です。

各プログラミングスクールの特徴をまとめた記事をこちらに記載しておきますので、是非ご覧ください。

おすすめプログラミングスクールTOP５【現役エンジニア推薦】

プログラミングスキルを習得したい社会人・学生の方へおすすめしたいプログラミングスクールをニーズ別に３つに絞ってご紹介します。本当に未経験からでも実務レベルのスキルはみにつくか？現役エンジニアが口コミや実体験をもとに解説します。

it-biz.online

2023.05.30

document.write()は、JavaScript初心者が初めて動かすメソッドになることが多いのですが、そもそもdocument.write()って何？と疑問に思う方も大勢いらっしゃるはずです。

このページでは、document.write()の意味と使い方、基本的な構文ルールや実際の利用シーンなどを網羅的に解説します。

JavaScript初心者の方にとって、JavaScriptをマスターするために避けては通れない必須知識ですので是非最後までご覧ください。

document.writeとは？

document.write()は、文字列や変数の値を表示させるメソッドです。

引数「( )の中」に直接表示させたい内容を指定するだけでOKです。

document.write(表示させたい内容)

See the Pen document.write1 by ビズドットオンライン (@BizOnline) on CodePen.

文字列だけではなく、例えば変数の内容を表示させることもできます。

See the Pen document.write1 by ビズドットオンライン (@BizOnline) on CodePen.

JavaScriptでは、例えば変数の中身を知りたいときや、処理の結果を知りたいときにこのdocumentwrite()メソッドを高頻度で利用します。

※JavaScriptの「変数宣言」について詳しく知りたい方はこちらのページをご覧ください。

【JavaScript】let・const・var の違いとは？初心者向けに使い分けを3分で整理

JavaScript初心者向けガイド：変数の宣言方法をvar, let, constの違いを中心に解説。関数スコープ、ブロックスコープ、巻き上げ、再代入の可否などの基本概念を明確に理解し、実用的なサンプルコード付きでわかりやすくご説明します。

it-biz.online

2026.04.26

文字列は``or""で囲む

文字列は、``（シングルクォーテーション）もしくは""（ダブルクォーテーション）で囲む必要があります。

document.write("Hello World!");　//正常に出力される

document.write(`Hello World!`);       //こちらも正常に出力される

document.write(Hello World);          //出力エラー

最後のHello World!は文字列とみなされないため、エラーが発生します。

ちなみに、シングルクォーテーションとダブルクォーテーションを混ぜて利用するのはNGです。

document.write(`Hello World!");　//これはエラーになります

document.writeーHTMLタグと組み合わせ

【初心者向け】HTMLの書き方の基本/基礎を３分で解説

【HTML入門編】HTMLの書き方を初心者向けにわかりやすくまとめました。HTMLって何？イメージがわきづらい方もこのページをご覧になれば「何となく」のイメージをつかめるはずです。

it-biz.online

2023.07.10

document.write()では、引数の中身にHTMLタグを設置することができます。

document.write("<開始タグ>文字列</終了タグ>")

See the Pen document.write3 by ビズドットオンライン (@BizOnline) on CodePen.

ここで注意すべきは、あくまでも表示される内容はHTMLのコードであるということです。

つまり、JavaScript自体はHTMLのタグを認識しません。いわば通常のHTMLのタグも通常通りの文字列として一旦主力され、ブラウザで表示する際にHTMLタグが読み込まれるとも言えます。

したがって、変数の値にHTMLタグを表示する際には、以下のようにそれぞれ別に””でくくる必要があります。

See the Pen document.write7 by ビズドットオンライン (@BizOnline) on CodePen.

そうしないと、以下のように文字列の一部として認識されてしまいます。

See the Pen document.write4 by ビズドットオンライン (@BizOnline) on CodePen.

初心者の方ほど、この点を誤ってしまうため注意が必要です。

document(オブジェクト).write(メソッド)

ここまでの解説で、「document.write()」を利用すれば指定した文字列を表示できることが分かりました。

この章では「document.write()」について少しだけ深堀して補足します。

document　⇒　オブジェクト

「document.write()」の「document」はJavaScriptの中の１つのオブジェクトです。

オブジェクトは、目に見える対象物のことを表し、具体的にこのページで解説したdocumentは「今見ているページ」のことを指し示しています。

write　⇒　メソッド

対して、write()は「documentオブジェクトのメソッド」のこと。

メソッドとは、オブジェクトに備えらている「動作」のことです。具体的に説明すると「write()」は、（）の中に指定した文字列を書き込む処理のことを表しています。

すなわち「document.write()」は、今見ているページに「（）の中の内容を書き込む」処理を表している処理であると理解できます。初心者の方であれば、オブジェクトとメソッドについてはまだ理解できていない、という方もいらっしゃるかもしれませんが、ここではなんとなくの意味をつかめればOKです。

JavaScriptを体系的に学びたい方は

プログラミングをより実践的に学びたい―。実際にコーディングをしながら学びたい―。独学に限界を感じている―。

そんな方には、無料体験/オンライン完結もあるプログラミングスクールで学ぶのがおすすめです。都度検索しながら知識を補完していくのではなく、１から体系立てて学ぶことで短時間・かつ効率的にスキルハックすることが可能です。

各プログラミングスクールの特徴をまとめた記事をこちらに記載しておきますので、是非ご覧ください。

おすすめプログラミングスクールTOP５【現役エンジニア推薦】

プログラミングスキルを習得したい社会人・学生の方へおすすめしたいプログラミングスクールをニーズ別に３つに絞ってご紹介します。本当に未経験からでも実務レベルのスキルはみにつくか？現役エンジニアが口コミや実体験をもとに解説します。

it-biz.online

2023.05.30

ただし、3つの違いを曖昧なまま使うと、変数のスコープや再宣言の挙動で混乱しやすくなります。この記事では、let・const・var の違い、使い分け、よくあるつまずきを初心者向けに整理します。

迷ったら、まず const で書けないかを考えるのがいちばん実務的です。

結論：let・const・var の違いはここだけ押さえればOK

1. var は古い書き方で、挙動が少し特殊

var は昔からある変数宣言です。いまでも古いJavaScriptコードではよく見かけますが、ブロックスコープを持たないため、初心者が混乱しやすい書き方でもあります。

if (true) {
  var message = "varで宣言";
}

console.log(message); // varで宣言

この例では、if 文の中で宣言した message を外でも使えています。これは var が { } のブロックではなく、関数単位で有効になるためです。

さらに var は同じスコープで再宣言もできるので、意図しない上書きが起きやすくなります。

var count = 1;
var count = 2;

console.log(count); // 2

この柔らかさが便利な場面もありますが、現在の開発ではバグの原因になりやすいため、新しく書くコードではあまり使いません。

2. let は「あとで値が変わる変数」に使う

let はブロックスコープを持つ変数宣言です。つまり、if 文や for 文などの { } の中で宣言すると、その外では使えません。

if (true) {
  let total = 10;
  console.log(total); // 10
}

// console.log(total); // ReferenceError

また、let は再代入できます。

let score = 0;

score = 100;

console.log(score); // 100

そのため、カウントアップや入力値の更新など、途中で値が変わる前提の変数に向いています。

3. const は「基本の選択肢」

const も let と同じくブロックスコープです。違いは、再代入できないことです。

const taxRate = 0.1;

// taxRate = 0.2; // TypeError

一度決めた値を後から変えたくないときに使うことで、「この値は書き換えないつもりです」という意図がコードから伝わります。

ただし、ここで1つだけ勘違いしやすい点があります。const は「中身が完全に不変」という意味ではありません。再代入できないのは変数そのもので、オブジェクトや配列の中身は変更できます。

const user = {
  name: "田中"
};

user.name = "佐藤";

console.log(user.name); // 佐藤

この性質まで知っておくと、const への苦手意識がかなり減ります。

4. どう使い分ければよいのか

実務でも学習でも、使い分けは次のルールでほぼ十分です。

• 基本は const
• あとで値を入れ替えるなら let
• var は古いコードを読むときの知識

たとえば、APIのURLや設定値、固定のメッセージなどは const に向いています。ループ回数や状態の更新などは let が自然です。

変数の有効範囲まで含めて理解したい方は、JavaScriptのスコープの記事もあわせて読むと、より整理しやすくなります。

5. よくあるつまずき

宣言前に使おうとしてエラーになる

let と const は、宣言より前で使うとエラーになります。これは不具合ではなく、安全のための仕様です。

// console.log(price); // ReferenceError
let price = 500;

const なのに中身を書き換えられる

const は再代入を禁止するだけなので、配列の push やオブジェクトのプロパティ変更はできます。ここで「壊れている」と感じやすいですが、仕様どおりです。

var を使っていて思わぬ場所で値が見えてしまう

古いサンプルコードをそのまま写すと、if 文の外でも値が使えてしまい、なぜ動くのか分からなくなることがあります。そういうときはまず「var だからかもしれない」と疑うと解決しやすいです。

補足：コードと実務場面で見る let・const・var の選び方

ここまでで let・const・var の基本的な違いを整理しました。ここでは、実際にコードを書いているときに迷いやすい場面を、もう少し具体的に見ていきます。

特に初心者の方がつまずきやすいのは、「値を変えられるか」だけで判断してしまうことです。もちろん再代入できるかどうかは大事ですが、実務ではそれと同じくらい「その変数がどこから見えるか」も重要になります。

まずは次の画像で、var と let の見え方の違いを確認してください。コードそのものは短いですが、JavaScriptの変数宣言で混乱しやすいポイントが詰まっています。

この画像で見てほしいのは、if の中で宣言した変数が、外側から使えるかどうかです。var で宣言した oldName は外側でも表示されますが、let で宣言した newName は外側で参照すると ReferenceError になります。

一見すると、外側でも使える var のほうが便利に見えるかもしれません。しかし、実務では「思ったより広い範囲から変数が見えてしまう」ことがバグにつながります。たとえば、画面の入力チェック、一覧の絞り込み、フォームの送信処理などでは、同じ名前の変数を別の場所で使ってしまうことがあります。そのとき、変数の有効範囲が広すぎると、どこで値が変わったのか追いかけにくくなります。

そのため、今から新しくJavaScriptを書くなら、まずは const を基本にして、値を後から入れ替える必要がある場合だけ let を使うのが安全です。var は「古いコードを読むために知っておくもの」と考えると、かなり整理しやすくなります。

この図では、迷ったときの判断順を示しています。最初に「その値は後から変わるか」を考えます。変わらないなら const、変わるなら let、古いコードを読むときだけ var を理解する、という流れです。

たとえば、消費税率、APIのURL、HTML要素を取得した結果など、基本的に差し替えない値は const が向いています。一方で、クリック回数、フォーム入力の途中状態、ループの中で更新する合計値などは let が向いています。

const taxRate = 0.1;
let total = 0;

for (const price of [100, 200, 300]) {
  total += price;
}

console.log(total); // 600

この例では、taxRate のように変わらない値は const、total のように後から加算していく値は let にしています。こうして役割を分けると、後から読んだ人も「この値は変わるのか、変わらないのか」をすぐ判断できます。

よくあるミスは、すべてを何となく let で書いてしまうことです。動きはしますが、変わらないはずの値まで再代入できる状態になってしまいます。逆に、すべてを const にしてしまうと、カウントや合計のように値を更新する処理で困ります。大事なのは、宣言方法を暗記することではなく、変数の役割に合わせて選ぶことです。

実務でよく見る場面

実際の開発では、const は「参照先を変えないもの」によく使います。たとえば、フォーム要素を取得した結果、APIのエンドポイント、画面に表示する固定メッセージなどです。これらは一度決めたら別の値に差し替えないため、const にしておくと読み手が安心できます。

let は、処理の途中で値が変わること自体に意味がある場面で使います。たとえば、検索条件を組み立てる途中の文字列、合計金額、ページ番号、バリデーション結果などです。あとで値が変わることが分かっているなら、let を使う理由があります。

var は、古い記事や古い社内システムのコードを読むときに出てきます。新しく書くコードでは避けることが多いですが、既存コードを保守する場面では、var がなぜ外側から見えてしまうのかを理解しておく必要があります。

迷ったときのチェックリスト

• その値を後から入れ替える必要がないなら、まず const を選ぶ
• カウントや合計のように値を更新するなら、let を選ぶ
• 古いコードを読むときだけ、var の関数スコープに注意する
• 同じ名前の変数を近い場所で何度も使っていないか確認する

この違いが分からないと困ること

変数宣言の違いを曖昧にしたままだと、最初は動いているように見えても、少しコードが長くなった時点で原因を追いにくい不具合が出ます。たとえば、同じ画面の中で検索条件、並び替え条件、入力チェック結果を扱っているとき、意図しない場所で変数が上書きされると、表示結果だけがおかしく見えることがあります。

このような不具合は、文法エラーとしてすぐ止まるとは限りません。画面は表示されるのに、検索結果だけ違う、ボタンを2回押したときだけ値が変になる、という形で現れることがあります。だからこそ、最初から変数の範囲を狭くし、変えない値は変えられないようにしておくことが大切です。

実務では、コードを書いた本人だけでなく、あとから別の人が読むことも多いです。const が使われていれば「この値は基本的に変わらない」、let が使われていれば「後で変わる可能性がある」と読み取れます。宣言方法そのものが、コードを読む人への小さなメッセージになります。

この考え方は、JavaScriptのスコープ や function（関数） を学ぶときにもつながります。変数がどこから見えるのか、どこで値が変わるのかを意識できると、JavaScriptのコードはかなり読みやすくなります。

もう少し実務寄りに考えると、変数宣言は「将来の自分が読み返したときのヒント」にもなります。数週間後に同じコードを見たとき、const で宣言されていれば、その値は途中で差し替えない前提だとすぐ分かります。

逆に let が使われている場合は、処理のどこかで値が変わる可能性を意識して読みます。デバッグするときも、最初から「この変数は更新されるものだ」と分かるため、確認すべき場所を絞り込みやすくなります。

初心者の段階では、まず「基本は const、必要なときだけ let、古いコードで var を読む」と決めておくと迷いが減ります。このルールだけでも、変数の上書きミスやスコープの勘違いをかなり減らせます。

小さなルールですが、コードが長くなるほど効果が出ます。変数宣言を丁寧に選ぶことは、バグを防ぐだけでなく、チームで読みやすいコードを書く第一歩になります。

関連して学びたい記事

• JavaScriptのスコープ（変数の有効範囲）とは？
• JavaScriptの関数 function の使い方
• JavaScriptのアロー関数とは？

まとめ

JavaScriptの変数宣言は、最初にきちんと整理しておくと後の学習がかなり楽になります。特にスコープと再代入の違いを押さえておくと、関数やアロー関数、非同期処理を学ぶときにもつまずきにくくなります。

意味だけ聞くと抽象的ですが、実際は配列処理やイベント処理、非同期処理で毎日のように使われます。この記事では、コールバック関数の意味、基本例、非同期処理との関係、Promiseとの違いを初心者向けに整理します。

「あとで呼び出すために渡す関数」と言い換えると、かなり分かりやすくなります。

結論：コールバック関数は処理の差し込み口

まずはシンプルな例を見てみます。

function processUser(name, callback) {
  console.log("処理開始");
  callback(name);
}

function greet(userName) {
  console.log("こんにちは、" + userName + "さん");
}

processUser("田中", greet);

この例では、greet がコールバック関数です。processUser に渡されて、内部であとから実行されています。

つまり、コールバック関数は「処理の流れのどこかで実行したい追加処理」を外から差し込むための仕組みです。

1. なぜコールバック関数を使うのか

コールバック関数を使うと、親の関数の中身を固定しすぎず、実行する処理だけを外から差し替えられます。

たとえば、同じ「データ取得後の処理」でも、ある画面では表示したい、別の画面では保存したい、ということがあります。そんなとき、結果の後処理だけをコールバックとして渡せば、関数の再利用性が高まります。

2. 配列処理でもコールバックは使われている

コールバック関数は非同期処理だけの話ではありません。配列の forEach や map でも使われています。

const numbers = [1, 2, 3];

numbers.forEach(function(number) {
  console.log(number);
});

forEach に渡している関数がコールバック関数です。配列の要素1つ1つに対して、あとで順番に呼び出されています。

この形はアロー関数と相性がよく、実務では次のようにもよく書きます。

numbers.forEach(number => {
  console.log(number);
});

forEach の記事やアロー関数の記事もあわせて読むと、実際の見え方がつかみやすいです。

3. 非同期処理でのコールバック関数

コールバック関数が特に重要になるのは、時間がかかる処理の完了後に何かをしたい場面です。

setTimeout(function() {
  console.log("2秒後に実行");
}, 2000);

ここでは、setTimeout に渡した関数が2秒後に実行されます。これも立派なコールバック関数です。

つまり、「今すぐではなく、ある条件がそろった後で呼び出す関数」がコールバックだと考えると整理しやすいです。

4. Promise や async/await と何が違うのか

昔からJavaScriptの非同期処理ではコールバック関数がよく使われてきました。ただ、非同期処理が何段も続くと、関数の入れ子が深くなって読みにくくなることがあります。

step1(function() {
  step2(function() {
    step3(function() {
      console.log("完了");
    });
  });
});

このような状態は「コールバック地獄」と呼ばれます。そこで、今のJavaScriptでは Promise や async/await を使って、もっと読みやすく非同期処理を書くことが増えました。

ただし、だからといってコールバック関数が不要になるわけではありません。イベント処理、配列メソッド、ライブラリのAPIなどでは今でも頻繁に登場します。

5. よくあるつまずき

関数を渡すのではなく、その場で実行してしまう

コールバック関数では、greet を渡すのであって、greet() を先に実行するわけではありません。この違いは非常に大切です。

processUser("田中", greet);   // OK
// processUser("田中", greet()); // これは別物

引数の流れが分からなくなる

親の関数からコールバックへ、どの値が渡されるのかを追う必要があります。慣れるまでは、サンプルコードを紙に書いて流れを追うと理解しやすいです。

非同期処理だけの用語だと思ってしまう

実際には forEach や map のような同期処理でも使われています。コールバックは「使われる場面」ではなく、「関数の渡し方」の名前だと考えるのがポイントです。

補足：コールバック関数を実務で読むための見方

コールバック関数は、言葉だけ見ると難しそうですが、実際には「あとで実行してほしい処理を、先に渡しておく仕組み」です。イベント処理、配列処理、API通信など、JavaScriptではかなり頻繁に登場します。

まずは、コールバックを処理の流れとして見てみます。ポイントは、関数をその場で実行するのではなく、別の関数に預けて、必要なタイミングで呼び出してもらうことです。

この図で見てほしいのは、「渡す」と「呼ぶ」が別のタイミングで起きることです。コールバック関数は、渡した瞬間に必ず実行されるわけではありません。親の関数の中で、条件がそろったとき、クリックされたとき、通信が終わったときなどに実行されます。

実務でよく見るのは、ボタンのクリック処理です。画面のボタンに対して「クリックされたらこの関数を実行してね」と登録する処理は、コールバックの代表例です。

function sayHello() {
  console.log("こんにちは");
}

button.addEventListener("click", sayHello);

この例では、sayHello をその場で実行しているのではなく、クリックされたときに実行してもらうために渡しています。ここで重要なのが、関数名の後ろに () を付けないことです。

この画像では、sayHello と sayHello() の違いを示しています。sayHello は関数そのものを渡しているため、クリック後に実行されます。一方で sayHello() はその場で関数を実行してしまい、イベントに登録したい処理としては意図とずれます。

初心者の方が混乱しやすいのは、「関数を渡す」と「関数を実行する」が見た目では少ししか違わないことです。カッコがあるかないかだけですが、意味は大きく変わります。コールバックを読むときは、まずその関数が今実行されるのか、あとで実行されるのかを確認しましょう。

もうひとつ大切なのは、コールバック関数は非同期処理だけの用語ではないという点です。forEach や map のような配列処理でも、引数として渡している関数はコールバックです。

const numbers = [1, 2, 3];

numbers.forEach(number => {
  console.log(number);
});

この例では、number => { ... } がコールバック関数です。配列の要素ごとにあとから呼ばれる処理として渡されています。配列処理でコールバックに慣れておくと、Promiseや async/await の理解にもつながります。

関連して、関数そのものの基本は function（関数）、短く書く記法は アロー関数、非同期処理の整理は async/await を読むと理解がつながりやすいです。

コールバックを読むときのチェックリスト

コールバック関数を読むときは、いきなり中身を細かく追うより、まず「誰が、いつ、この関数を呼ぶのか」を確認すると整理しやすいです。配列処理なら配列の各要素ごと、イベント処理ならクリックされたとき、通信処理なら結果が返ってきたとき、というように実行タイミングを先に押さえます。

• 関数を渡しているだけなのか、その場で実行しているのか
• コールバックに渡される引数は何か
• 戻り値を使う処理なのか、表示や保存などの副作用を起こす処理なのか
• 非同期処理なら、どの順番で実行されるのか

特に非同期処理では、コードに書いた順番と実行される順番が一致しないことがあります。たとえば、タイマー、API通信、ファイル読み込みなどは、後から処理が完了します。その「完了したあとに何をするか」を渡すのが、コールバックの重要な役割です。

console.log("開始");

setTimeout(() => {
  console.log("あとで実行");
}, 1000);

console.log("終了");

このコードでは、出力順は「開始」「終了」「あとで実行」になります。setTimeout に渡した関数は、すぐには実行されず、指定した時間のあとに呼び出されるからです。

コールバックで混乱しやすい実務場面

実務でコールバックが分かりにくくなるのは、処理が何段階もつながったときです。たとえば、ボタンを押す、入力値をチェックする、APIへ送る、結果を受け取る、画面を書き換える、という流れでは、それぞれのタイミングで関数が呼ばれます。

このとき、どの関数が最初に実行され、どの関数があとから実行されるのかを整理しないと、コードが急に読みにくくなります。特に、通信処理では結果が返ってくるまで時間がかかるため、「送った直後」と「結果が返った後」を分けて考えることが大切です。

最近のJavaScriptでは、非同期処理を Promise や async/await で書くことも多いですが、内部では「処理が終わったら次に何をするか」という考え方が残っています。つまり、コールバックを理解しておくと、より新しい書き方も読みやすくなります。

このように、コールバック関数は「処理の順番を後ろへ回す」「処理の一部を外から差し込む」ための基本的な考え方です。最初は難しく感じますが、イベント処理や配列処理の身近な例から慣れていくと、Promiseやasync/awaitも理解しやすくなります。

注意点として、コールバックに渡す関数をその場で実行してしまうミスはとても多いです。イベントに登録したいのに () を付けてしまうと、クリック前に処理が走ってしまい、クリック時には何も起きないように見えることがあります。

もうひとつのよくあるミスは、コールバックの中で使う値が、実行されるタイミングでは変わっているケースです。特にループや非同期処理では、コードを書いた順番だけでなく、実際にいつ呼ばれるかを意識する必要があります。

コールバックを読むときは、「渡している関数」「受け取っている関数」「実行されるタイミング」を分けてメモすると整理しやすいです。最初は少し面倒に感じますが、この3つを分けるだけで、イベント処理やAPI通信のコードがかなり読みやすくなります。

実務では、ボタンを押した後の処理、入力フォームの変更検知、通信完了後の画面更新など、ユーザー操作とコールバックが強く結びつきます。つまり、コールバックは文法だけでなく、画面の動きそのものを理解するための考え方でもあります。

慣れてきたら、コールバックで書かれた処理を async/await ではどう表すかを比べてみると理解が深まります。書き方は変わっても、「ある処理が終わった後に次の処理を実行する」という基本は同じです。

最初は、ボタンや配列処理のような身近な例から確認すると十分です。小さな例で「あとで呼ばれる」感覚をつかめると、非同期通信のコードも段階的に読みやすくなります。

迷ったときは、関数名の後ろにカッコがあるかを最初に確認しましょう。

関連して学びたい記事

• JavaScriptの関数 function の使い方
• JavaScriptのアロー関数とは？
• JavaScriptの forEach メソッドとは？

まとめ

コールバック関数は、最初は抽象的に見えますが、「後で呼び出すための関数を渡しているだけ」と分かると一気に読みやすくなります。JavaScriptの非同期処理を理解する土台にもなるので、ここでしっかり押さえておくのがおすすめです。

関数を理解すると、コードの重複を減らし、読みやすく保守しやすいプログラムを書けるようになります。この記事では、JavaScriptの関数とは何か、書き方、引数と戻り値、よくあるつまずきを初心者向けに整理します。

まずは「同じ処理を何度も使い回すための仕組み」と覚えるだけでも十分です。

結論：関数で押さえたいのは3つだけ

• 関数は処理のまとまり
• 引数は関数に渡す入力
• 戻り値は関数が返す結果

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

const result = add(3, 5);
console.log(result); // 8

この短いコードだけでも、関数の基本が詰まっています。add が関数名、a と b が引数、return a + b; が戻り値です。

1. 関数とは何か

関数は、一連の処理をひとまとまりにしたものです。たとえば「税込価格を計算する」「あいさつ文を作る」「ボタンが押されたら実行する処理」などを関数として切り出せます。

関数を使うメリットは主に次の3つです。

• 同じコードを何度も書かずに済む
• 処理の意味が名前で分かるようになる
• 修正箇所を1か所にまとめやすい

2. JavaScriptで関数を書く基本形

もっとも基本的な書き方は、function を使う関数宣言です。

function greet(name) {
  console.log("こんにちは、" + name + "さん");
}

greet("田中");

この例では、greet という名前の関数を定義し、後から greet("田中") のように呼び出しています。

書き方の流れは次のとおりです。

3. 引数と戻り値を理解すると実用的になる

関数は外から値を受け取り、その結果を返せます。これが引数と戻り値です。

function getTaxIncludedPrice(price) {
  return price * 1.1;
}

const total = getTaxIncludedPrice(1000);
console.log(total); // 1100

price が引数、price * 1.1 が戻り値です。こうしておくと、1000円でも2000円でも同じ関数を再利用できます。

初心者の方は、引数 = 入力、戻り値 = 出力 と考えると整理しやすいです。

4. 関数宣言と関数式の違い

JavaScriptでは、関数は function で宣言する以外に、変数へ代入する形でも書けます。これを関数式といいます。

const greet = function(name) {
  console.log("こんにちは、" + name + "さん");
};

動作の考え方は似ていますが、書き方や呼び出せるタイミングに違いがあります。関数式の基本を知りたい方は、関数式の記事も合わせて読むと理解が深まります。

また、最近のJavaScriptではこの関数式を短く書けるアロー関数もよく使われます。

5. 関数の中で作った変数は外では使えない

関数には独自のスコープがあります。つまり、関数の中で宣言した変数は、外からは参照できません。

function sample() {
  const message = "関数の中だけ";
  console.log(message);
}

sample();
// console.log(message); // ReferenceError

このルールを知っておくと、「なぜその変数が使えないのか」で悩みにくくなります。スコープをしっかり整理したい方は、JavaScriptのスコープ解説もおすすめです。

6. よくあるつまずき

関数を定義しただけで実行されたと思い込む

関数は定義しただけでは実行されません。最後に () を付けて呼び出して初めて動きます。

return と console.log を同じものだと思ってしまう

console.log は表示するだけ、return は関数の結果を返すためのものです。ここを区別できると、関数の理解が一気に進みます。

引数を受け取る関数に値を渡し忘れる

関数に必要な引数を渡さないと、undefined になることがあります。エラーではなく動いてしまう分、初心者が見落としやすいポイントです。

function greet(name) {
  console.log("こんにちは、" + name + "さん");
}

greet(); // こんにちは、undefinedさん

補足：関数を実務で使うときの見方

関数は、文法として覚えるだけでは少しもったいないです。実務では、関数を「処理を分けて、名前を付けて、あとから使いやすくするための部品」として使います。問い合わせフォーム、料金計算、入力チェック、画面の表示切り替えなど、同じような処理が何度も出てくる場面で特に役立ちます。

まずは、関数を入力から結果までの流れとして見てみます。関数が苦手な方は、function という単語よりも「引数・処理・戻り値」の3点に分けて考えると理解しやすくなります。

この図で見てほしいのは、関数の中に入るものと、関数から出てくるものです。引数は関数に渡す入力、戻り値は関数が呼び出し元へ返す結果です。たとえば税込価格を計算する関数なら、税抜価格が引数で、税込価格が戻り値になります。

function addTax(price) {
  return Math.floor(price * 1.1);
}

const total = addTax(1000);
console.log(total); // 1100

この例では、1000 が引数として関数に入り、計算された 1100 が戻り値として返っています。戻り値があるからこそ、結果を total に入れて、次の処理で使えます。

初心者が特につまずきやすいのが、return と console.log の違いです。どちらも画面上では何かが表示されることがあるため、同じものだと思いやすいですが、役割はまったく違います。

この画像では、関数の中で console.log(a + b) を実行しているため、画面には 5 が表示されます。しかし、関数が return していないため、result には undefined が入ります。

実務でよくあるのは、デバッグ中に console.log で値が見えたため「関数が値を返している」と勘違いするケースです。画面に表示するだけなら console.log で十分ですが、その計算結果を別の関数へ渡したり、画面表示に使ったりするなら return が必要です。

もうひとつ大事なのは、関数名です。関数名はコメントの代わりにもなります。calc のような曖昧な名前より、calculateTotalPrice や validateEmail のように、何をする関数なのか分かる名前にすると、あとから読む人が理解しやすくなります。

関数を理解したら、次は アロー関数 や コールバック関数 へ進むと自然です。どちらも関数の考え方を土台にしているため、引数と戻り値を押さえておくと一気に読みやすくなります。

関数に切り出すか迷ったときの判断

初心者のうちは、どこまでを関数にすればよいか迷いやすいです。判断の目安は、「同じ処理が2回以上出てくるか」「処理に名前を付けると読みやすくなるか」です。同じ計算、同じチェック、同じ表示処理が何度も出てくるなら、関数に切り出す価値があります。

たとえば、メールアドレスの形式チェックを複数の画面で使うなら、毎回同じコードを書くより validateEmail のような関数にまとめたほうが安全です。あとでチェック条件を変えたいときも、修正箇所を1つにできます。

function validateEmail(email) {
  return email.includes("@");
}

if (!validateEmail(inputValue)) {
  console.log("メールアドレスを確認してください");
}

この例では、メールアドレスらしいかを確認する処理を関数にしています。実務ではもっと厳密なチェックが必要になることもありますが、「何を確認している処理なのか」が関数名で分かる点が大きなメリットです。

よくあるミスを防ぐコツ

• 関数を作っただけで満足せず、必要な場所で呼び出す
• 戻り値を使うなら、必ず return を書く
• 関数名は「何をするか」が分かる動詞から始める
• 1つの関数に、関係ない処理を詰め込みすぎない

関数を小さく分けるメリット

関数を小さく分けると、コード全体の流れが追いやすくなります。たとえば、会員登録画面の処理を考えると、入力値を取得する、メールアドレスをチェックする、パスワードをチェックする、エラーを表示する、送信する、という複数の役割があります。これを1つの大きな関数に全部入れると、どこで何をしているのか分かりにくくなります。

一方で、それぞれを関数に分けると、処理の名前を見るだけで流れを読めるようになります。getFormValues、validateEmail、showErrorMessage のように分けておけば、細かい中身を読む前に全体像をつかめます。

もちろん、何でも細かく分ければよいわけではありません。1回しか使わず、名前を付けても分かりやすくならない処理まで無理に関数化すると、逆に読みにくくなります。まずは「同じ処理が繰り返される」「名前を付けると意味が伝わる」「修正箇所をまとめたい」という場面から関数化するとよいです。

関数を書くときの順番

関数を書くときは、いきなり文法から入るよりも、「何を受け取るか」「何を返すか」「関数名を何にするか」の順番で考えると整理しやすいです。たとえば税込価格を計算するなら、受け取るのは税抜価格、返すのは税込価格、関数名は addTax や calculateTaxIncludedPrice のようになります。

この順番で考えると、関数の中身も自然に決まります。引数が足りない、戻り値を返し忘れる、関数名と処理内容が合っていない、といったミスにも気づきやすくなります。

• まず、関数に渡す入力を決める
• 次に、呼び出し元へ返す結果を決める
• 最後に、処理内容が分かる名前を付ける

関数は、JavaScriptだけでなく多くのプログラミング言語で使う基本です。ここで「入力、処理、戻り値」の感覚をつかんでおくと、アロー関数、コールバック関数、Promise、async/awaitを学ぶときにも土台になります。

関数は、コードを短くするためだけのものではありません。処理に名前を付け、あとから読み返しやすくし、修正しやすくするための整理方法でもあります。

実務では、関数を作ったあとに「この関数は何を知らなくてよいか」も考えます。たとえば、税込価格を計算する関数なら、画面のどこに表示するかまでは知らなくて構いません。計算は計算、表示は表示に分けると、修正時の影響範囲が小さくなります。

この分け方ができると、同じ関数を別の画面でも使いやすくなります。商品一覧、カート、注文確認画面で同じ計算を使う場合、計算処理を1つにまとめておけば、税率や丸め方を変えるときも修正漏れを防げます。

初心者のうちは、まず「関数名だけを読んで処理の目的が想像できるか」を確認してみてください。名前を見ても目的が分からない場合は、処理を詰め込みすぎているか、名前が曖昧な可能性があります。

関数は、プログラムの中に小さな見出しを作るようなものです。適切に分けられた関数は、コード全体を読みやすくし、ミスが起きたときに調べる場所を見つけやすくしてくれます。

また、関数を小さくしておくとテストもしやすくなります。入力に対して期待した戻り値が返るかを確認できるため、画面全体を動かさなくても一部の処理だけを検証できます。

関連して学びたい記事

• JavaScriptの関数式とは？
• JavaScriptのアロー関数とは？
• JavaScriptのスコープとは？

まとめ

JavaScriptの関数は、文法そのものよりも「何のために使うのか」が分かると覚えやすくなります。まずは短い関数を自分で書いて、引数と戻り値の流れに慣れていくのがおすすめです。