【JavaScript】bindとは？仕組みと使い方を初心者向けに徹底解説

プログラミング言語•2025/2/15

はじめに

JavaScriptで関数を扱うとき、意外と厄介に感じることがあるかもしれません。
そのひとつが、this が指し示す対象です。

特にクラスでのメソッド呼び出しや、イベントリスナー内でのコールバックなどでは、意図しないまま this が別のオブジェクトを参照してしまうことがあります。
こうした混乱を解消するための方法のひとつとして、bindメソッド が存在します。

bindメソッド は、JavaScriptの関数に用意されたメソッドです。
このメソッドを使うと、ある特定のオブジェクトへ this を結び付けた新しい関数を返せるようになります。

これにより、たとえば「イベントリスナーのコールバック内でも、常に自分が想定したオブジェクトを参照したい」ときや、「ある特定の引数をあらかじめセットしておきたい」といったシーンで、とても役に立ちます。

本記事では、初心者 の方でも理解しやすいように、実務における具合的な活用シーンや、bind の基本的な仕組みについて丁寧に解説していきます。
さらに、call/apply との使い分けや、クラス設計時の活用法についても取り上げます。

この記事を読むとわかること

bindメソッド の基本的な役割
this が変化する仕組み
bind を使った具体的な実務での活用シーン
call/apply との違い
部分適用（partial application）としての利用方法
クラス設計やコールバック処理での bind の使いどころ

ここから、JavaScript初学者の方にもなるべく分かりやすい形で解説していきましょう。

bindメソッドとは何か

bindメソッド は、JavaScriptの関数オブジェクトがもつメソッドのひとつです。
ある関数に対して bind(オブジェクト) とすると、元の関数が呼ばれたときの this が、指定したオブジェクトを参照するように固定された新しい関数を作り出します。

より具体的にいうと、bind は以下のような機能を提供します。

第一引数として渡したオブジェクトが、呼び出し時の this になる
さらに、第二引数以降に与えた引数をあらかじめセットしておき、それらは実際の呼び出し時に続けて渡した引数と合わさる

もともとJavaScriptの関数は、どのように呼び出すかによって this が変化するという特徴があります。
そのため、メソッドを別の変数に受け渡したり、コールバック関数として別の場所で呼び出すときに、意図しない this を参照してしまうことがあるのです。

thisが指し示すコンテキストの仕組み

bindメソッド の仕組みを正しく理解するには、まず this がいかにして決定されるかを簡単に知っておく必要があります。
JavaScriptでは、どのように関数を呼び出すかで、this の値が動的に変わります。

1. 普通の関数呼び出し

通常の関数呼び出し（たとえば myFunction()）では、this はデフォルトでグローバルオブジェクトを指します。
ただし、strict mode（厳格モード）の場合は undefined となります。
以下は単純な例です。


function showThis() {
  console.log(this);
}

showThis(); 
// strict modeならundefined、非strict modeならWindowやglobalThisなどを参照

このように、関数を単純に呼び出すだけだと、this は意図しない対象になりやすいでしょう。

2. arrow function

一方で、arrow function（アロー関数）は、通常の関数とは異なる仕組みを持ちます。
アロー関数の this は、宣言されたスコープの this をそのまま引き継ぐようになっています。
これにより、アロー関数自体は this を再定義せず、周囲のコンテキストの this がそのまま使われます。

たとえば、クラス内部でアロー関数をメンバとして書いた場合、そのアロー関数の this はクラスのインスタンスを指します。
ただし、この仕組みが便利な場合もあれば、普通の関数書き方のほうが使いやすい場合もあります。

bindメソッドの基本的な構文

bindメソッド を使った関数の記法はシンプルです。
たとえば、ある関数 fn に対して、fn.bind(obj) とすると、this が obj に固定された新しい関数を作成できます。


function showInfo() {
  console.log(this.info);
}

const data = { info: "bindを利用した例です" };
const boundedFunc = showInfo.bind(data);

boundedFunc(); 
// 結果: "bindを利用した例です"

元の showInfo 関数では、this.info を参照しています。
その this を data オブジェクトに固定することで、showInfo 関数が呼ばれたときに、常に data.info の値を表示できるようになるわけです。

引数の指定方法

bind は、this に設定したいオブジェクトだけでなく、追加の引数を先に渡すこともできます。
たとえば次のように書くと、myFunction を呼び出すときに先に "Hello" が自動的に引数にセットされます。


function myFunction(greeting, name) {
  console.log(greeting + ", " + name);
}

const greetTom = myFunction.bind(null, "Hello");
greetTom("Tom"); 
// 結果: Hello, Tom

ここで第一引数の null は、this として設定したいオブジェクトが特に無い場合にしばしば使われるものです。
もちろん、特定のオブジェクトに固定したい場合は、null の代わりにそのオブジェクトを渡します。

戻り値について

bind は、元の関数そのものではなく、新しく生成された関数 を返します。
生成された関数は、this と一部の引数がすでに固定されています。
これが、“部分適用” と呼ばれるテクニックの一種にも応用されます。

新しい関数を呼び出すと、固定されていない残りの引数を自由に渡せるので、元の関数が要求する引数の一部を事前にセットしておくことが可能です。

実務での活用シーン

ここでは、bind が頻繁に活躍する実務での具体的な場面を見ていきます。
「thisが意図しないオブジェクトを指して困る」といった状況をよく解決してくれます。

イベントリスナーとbind

DOM操作において、イベントリスナーのコールバック関数内で this を活用したいケースが多々あります。
しかし、イベントが発火したときのコールバック内では、this がイベント発生元の要素を指す場合があります。

例えば、以下のようにコンストラクタでメソッドを関連付ける場合、this.handleClick が this（クラスのインスタンス）を見失うことがあり得ます。


class MyComponent {
  constructor(element) {
    this.element = element;
    this.element.addEventListener("click", this.handleClick);
  }

  handleClick() {
    console.log(this.element); 
    // 期待したオブジェクトではなく、クリックされた要素を指してしまう可能性がある
  }
}

そこで bind が役立ちます。


class MyComponent {
  constructor(element) {
    this.element = element;
    // thisを自分自身に固定した新しい関数を作ってイベントリスナーに渡す
    this.element.addEventListener("click", this.handleClick.bind(this));
  }

  handleClick() {
    console.log(this.element);
    // 常にクラスのインスタンスが持つelementが参照される
  }
}

このように、bind するとコールバック関数内でも、クラスのインスタンスを正しく参照できるようになります。

コールバック関数とbind

非同期処理やコールバック関数の中で this を使いたい場合にも、bind はよく利用されます。
たとえば、通信処理の完了時に実行するコールバックを別メソッドにまとめておき、そこからインスタンス変数を参照したい、といった状況です。


class DataFetcher {
  constructor(url) {
    this.url = url;
  }

  async fetchData(callback) {
    // 非同期処理が完了したら callback が呼ばれる
    const response = await fetch(this.url);
    const result = await response.json();
    callback(result);
  }

  processData(data) {
    console.log("取得したデータ:", data);
    console.log("URLは", this.url);
  }
}

const fetcher = new DataFetcher("https://example.com/data.json");
fetcher.fetchData(fetcher.processData.bind(fetcher));

fetcher.fetchData(...) 内部では、引数として受け取った callback をそのまま呼び出すかもしれません。
その場合に this が fetcher を指さなくなってしまう恐れがありますが、bind(fetcher) しておけば安心です。

call/applyとの違い

JavaScriptには、bind と似たような働きをするものとして、call と apply があります。
これらは、関数を呼び出すタイミングで this を指定できる点で共通しています。

しかし、call/apply はその場で関数を “即時に” 実行するのに対し、bind は「新しい関数を返す」点が異なります。

call/applyとbindの違い

call : myFunction.call(context, arg1, arg2, ...) のように書き、指定したコンテキストで即時に関数を実行する
apply : myFunction.apply(context, [arg1, arg2, ...]) のように書き、配列として引数をまとめて渡し、指定したコンテキストで即時に関数を実行する
bind : myFunction.bind(context, arg1, arg2, ...) のように書き、新たに生成された関数を返す（その関数の this は context に固定される）

使い分けとしては、「関数をその場ですぐ呼び出して結果が欲しい」 ときには call/apply が有効です。
一方で、「あとで呼び出すための関数を作りたい」 ときには bind が役立ちます。

bindのメリット

bind を使うと、this を固定した関数をあらかじめ渡せるので、イベントハンドラーやコールバックなど、後で呼び出される処理に対して柔軟に対応できます。
また、部分適用のように引数の一部を先に仕込んでおくこともできるため、コードの見通しが良くなることがあります。

ただし、用途によってはアロー関数を使ったほうがシンプルに書ける場面もあります。
状況に合わせて選択するのが大切です。

部分適用（partial application）とbind

bind は、単に this を固定するだけでなく、部分適用（partial application）の機能も備えています。
つまり、関数が必要とする引数の一部を先に指定しておいて、後から残りの引数だけを渡すようにできるのです。

以下の例では、multiply.bind(null, 2) により、最初の引数が 2 で固定された新しい関数を作成しています。
この新しい関数を呼び出せば、自動的に 2 が掛け算に使われます。


function multiply(a, b) {
  return a * b;
}

const double = multiply.bind(null, 2);
console.log(double(5)); 
// 結果: 10
console.log(double(10)); 
// 結果: 20

実務の観点では、こうした部分適用によって、処理を使い回したり、あらかじめパラメータを設定した状態で別の場所に渡したりすることが容易になります。
これによりコードの意図が明確になり、特定の引数を使う処理であることを見た人にも理解してもらいやすくなるでしょう。

クラス設計とbind

クラスを用いた設計においても、メソッド内で使用する関数を外部に渡すときに this が変わるという問題が起きがちです。
例えば、クラスメソッドをイベントリスナーとして登録する際は、前述したように this が指す先を固定する工夫が必要になります。

メソッドのコンテキスト固定

クラスのメソッドを、コンストラクタ内でまとめて bind しておく手法も見られます。


class UserManager {
  constructor(name) {
    this.name = name;
    // メソッド内でthisを参照するときにずれないよう、事前にbindしておく
    this.logName = this.logName.bind(this);
  }

  logName() {
    console.log(this.name);
  }

  registerListener() {
    document.addEventListener("click", this.logName);
  }
}

このように、コンストラクタ内で this.logName = this.logName.bind(this); と書いておくと、registerListener() の中でメソッドをイベントリスナーに渡しても、this がずれることはありません。

サードパーティライブラリなどでの使いどころ

たとえば、ReactやVueなどのフレームワーク・ライブラリでイベントハンドラを指定するときにも、関数やメソッドをpropsやコンポーネントのオプションとして別の場所へ渡すケースがあります。
その過程で this が意図しない値を指すおそれがあるなら、bind やアロー関数が役立ちます。

また、サードパーティの関数を使う際に「自分のオブジェクトを this として使わせたい」という要望があるなら、bind でそのコンテキストを固定することが可能です。

setTimeout等でのthis対策

setTimeout や setInterval は、コールバック関数を指定するときに、this がグローバルオブジェクトを指してしまうことがあります。
これを防ぐには、アロー関数を使うか、または bind で明示的に this を固定する方法があります。

bindを使った解決策

例えば以下のように書くと、this が自分のインスタンスを指した状態でコールバックを実行できます。


class Timer {
  constructor(name) {
    this.name = name;
  }

  start() {
    setTimeout(this.sayHello.bind(this), 1000);
  }

  sayHello() {
    console.log("Hello from " + this.name);
  }
}

const timer = new Timer("MyTimer");
timer.start();
// 1秒後に "Hello from MyTimer" と表示される

この書き方ならば、sayHello が呼び出されるときに this は timer インスタンスを指すので、this.name を正しく参照できます。

arrow functionを使った対策

アロー関数でも、同じような結果を得られます。


class Timer {
  constructor(name) {
    this.name = name;
  }

  start() {
    setTimeout(() => {
      console.log("Hello from " + this.name);
    }, 1000);
  }
}

アロー関数の場合、クラスのコンテキストをそのまま引き継ぐため、わざわざ bind する必要はありません。
ただし、用途によってはアロー関数のほうが可読性が高いものの、bindを使ってメソッドとして明示的に定義するメリットがある場合もあります。
いずれにしても、「なぜ this が参照できるのか？」を理解することが大事です。

実務でよくある注意点

bind は強力ですが、いくつか注意点を知っておくとトラブルを回避できます。

メモリ使用量への影響

bind は新しい関数を作り出すため、必要以上に何度も呼び出していると、無駄な関数オブジェクトが増えてメモリ使用量を圧迫することがあります。
特に、イベントごとに bind を乱用するとパフォーマンスに影響が出る場合があるかもしれません。

そのため、コンストラクタなどで一度だけ bind した関数をプロパティに保持しておき、使い回す方が良いケースもあります。

過剰なbindによる可読性低下

あまりにも大量のメソッドを bind していると、コードを読む人が「どこでどのコンテキストがバインドされているのか」を把握しにくくなります。
また、アロー関数と組み合わせて考えると「どちらが適切か」を判断するのが難しくなることもあります。

このあたりは、開発チームやプロジェクトのコーディングスタイルを統一しておき、「こういう状況なら bind を使う」「こういう場合はアロー関数で書く」といったガイドラインを決めることが大切です。

補足: プロジェクトによっては、クラスメソッドのバインドをコンストラクタでまとめて行うスタイルが推奨されたり、アロー関数で書くのが推奨されたりと、さまざまな方針があります。

よくある疑問

ここからは、bind に関して初心者の方が感じるかもしれない疑問点を補足的にまとめます。

bindを使うべきか、arrow functionで代替できるか

「アロー関数を使えば this の参照がブレにくいから、bind は不要なのでは？」と疑問に思うかもしれません。
たしかに、アロー関数を使えば、メソッドをわざわざ bind する必要がないケースもあります。
しかし、アロー関数はそのスコープでの this を常に継承するため、今度は「動的に this を切り替える」ような使い方がしにくくなります。

一方で、bind は「ある関数を、特定のオブジェクトに結び付けたコピーを作る」という明示的な操作です。
後から参照先を変えたいときや、元の関数とは別に管理したいときなどには便利です。

つまり、アロー関数のほうが簡単な場面もあれば、bind のほうが目的を明確に表せる場面もあります。

bindは非同期処理でどのように使えるか

非同期処理のコールバックに bind を使うケースは多いです。
特に、外部APIとの通信やイベント駆動型のアプリケーションでは、this が期待と違うオブジェクトを指してしまうことがしばしばあります。

bind を適切に利用すれば、これらのコールバックから自身のインスタンスへアクセスしたり、保持している状態を参照したりすることが簡単になります。
複数のコールバックを扱うときでも、コードが読みやすくなり、デバッグしやすくなるでしょう。

コールバックが複雑になりすぎると可読性が下がることがあります。
その際は、構造を単純化するか、コード分割を検討するなどの工夫も大切です。

まとめ

ここまで、bindメソッド の基本的な仕組みから、実務での具体的な活用シーンまでを解説してきました。

bind は、JavaScriptのなかでもthis をしっかり扱ううえで重要なメソッドです。
コールバック関数やイベントリスナーなどで、思わぬところで this がずれる問題を解消し、意図したオブジェクトを常に参照させることができます。

一方で、アロー関数も同様に this を扱う際に混乱しにくい特性があります。
どちらを選ぶかは、プロジェクトのコーディングスタイルや、実現したい処理内容によって判断すると良いでしょう。

最後に、この記事のポイントを改めて整理してみます。

bind は「呼び出し時の this と、一部の引数を固定した新しい関数」を返す
コールバック関数やイベントリスナーで this が変化しないようにできる
call/apply は「即時実行」、bind は「新しい関数を生成」と覚えておく
部分適用 の実装にも応用できる
乱用すると可読性やメモリ効率に影響が出る恐れがあるので、適切に使い分ける

初心者の方は、まずは「関数が呼ばれるときに this がどこを指すのか」を意識しながらコードを書いてみるとよいかもしれません。
そのうえで、どうしてもうまくいかない場合に bind を考慮してみると、「なるほど、こういう仕組みか」と一段深く理解できるでしょう。