JavaScript：関数（Reactの前に必須の書き方）

投稿日：2026-01-13

音声

※ AI音声で読み上げます

thisはスコープや呼び出し方で参照先が変わるため初心者が混乱しやすいです。ここでは深掘りせず、簡単に言うと「アロー関数はthisを束縛しない（外側を参照）、通常関数は呼び出し時のオブジェクトを指す」と覚えておくと実務で困りにくくなります。Reactでは特にアローを使うケースが増えます。

最小コード：

function add(a,b){ return a+b; }                       // 関数宣言
const mult = function(a,b){ return a*b; };             // 関数式
const double = x => x*2;                                // アロー（短縮形）
function greet(name='guest'){ return `Hello ${name}`; } // デフォルト引数
function operate(a,b,op){ return op(a,b); }            // コールバック受け取り

// コールバック（関数を引数で受け取る）の確認
// クリックすると operate(2,3,add) を実行し、結果を画面に表示する（表示は動作確認用）
// ついでに this の違いを Console に出して、function とアロー関数の差を確認する
document.getElementById('btn').addEventListener('click', function () {
  const res = operate(2, 3, add);
  document.getElementById('out').textContent = '結果：' + res;
  console.log('traditional this：', this);
});

// ※this確認用は別ボタン（btn2）
// ※アロー関数でも、要素が欲しいなら event.currentTarget を使えばOK
document.getElementById('btn2').addEventListener('click', (e) => {
  console.log('arrow this：', this);                // 外側の this（ボタンではない）
  console.log('currentTarget：', e.currentTarget);  // クリックされた要素（btn2）
});


// memo
// アロー関数は“thisを使う場合に、入れ子でズレないようにする” ための対策をしており、外側のthisをそのまま固定で使う。 
// そのため、イベントで押した要素をthisで取りたい場合などは、素直な動作にならないためfunctionを使うのが一般的。 
// とりあえず、 下記で覚えておけばOK。
// thisを使いたいなら：function () { ... } 
// thisを使わないなら：アローでもOK
// 要素が欲しいなら：event.currentTarget を使う（アローでもOK）

<button id="btn">計算</button>
<button id="btn2">this確認</button>
<div id="out" style="margin-top:8px"></div>

貼り付け場所：CodePenを想定する場合はHTML欄に上のHTMLを、JS欄に最小コードのJavaScriptを貼り付けます。ローカルHTMLで試す場合はHTML内に<script>でJSを分けて配置します。

実行方法：CodePenなら「Run」または自動実行でそのまま動きます。ローカルではブラウザでHTMLファイルを開いてボタンをクリックします。

確認方法：#out要素に「結果: 5」が表示され、ブラウザの開発者ツールConsoleでthisの出力を確認します。add/mult/doubleの挙動はconsole.logで追うと理解が早くなります。

よくあるミス：関数そのものを渡すべきところで呼び出してしまい（doSomething() とすべきでない場面で実行してしまう）、意図したタイミングで動かないことがあります。渡すべきは関数名（または () => ... の形）であるかを確認すると直ります。

使い分けの基準：短く要素変換だけならmapを使います。条件で絞るならfilterを使います。単純な列挙や早期終了が必要ならfor/for...ofを使います。

配列操作で副作用を避けたい場合はmap/filterで新しい配列を作る方が安全です。オブジェクトの操作はfor...inやObject.keysで行います。

注意（ここだけ）

アロー関数は this を「外側のスコープから引き継ぐ」ため、メソッド用途で安易に置き換えると挙動が変わります。
コールバックに渡す関数は「呼び出し結果」ではなく「関数そのもの」を渡します（fn と fn() を混同しない）。
引数が増えたら、オブジェクト引数（{...}）にまとめると呼び出し側のミスを減らせます。

要約

関数宣言はホイスティングによりどこでも呼べますが、関数式は定義後でしか使えません。
アロー関数は短く書けてthisの扱いが異なるため、使いどころを意識します。
引数と戻り値は関数設計の基本で、デフォルト引数で未指定を安全に扱えます。
コールバックは関数を渡すパターンで、関数そのものを渡す点が迷いやすいです。
thisは挙動が複雑なので今回は最小限に理解し、実務ではアロー関数と通常関数の違いを意識して使い分けます。

JavaScript：関数（Reactの前に必須の書き方）

音声

目次

関数宣言と関数式の違い

アロー関数の基本（短縮形a）

引数・戻り値・デフォルト引数

コールバック関数の考え方

thisは最小限（深入りしない）

注意（ここだけ）

要約