JavaScriptでbindメソッドを使う方法【初心者向け】

プログラミング初心者向けに、JavaScriptで【bind】を使う方法を解説した記事です。本記事では、bindをどんな時に使うのか、書き方の例などを紹介します。実際のサンプルを書きながら解説しているので、参考にしてみてください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptをプログラミング初心者向けに紹介した記事です。

今回は、JavaScriptでbindを使う方法について解説します。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

大石ゆかり

田島メンター!bindって何でしょうか?

田島悠介

関数に対し、thisや引数を指定することができるんだ。

大石ゆかり

thisや引数を指定、ですか・・・?

田島悠介

例を見ながら説明していくね!

 

bindとは

bindとは、関数に対してthisや引数を指定することができるメソッドです。これにより、同じプログラムでも振る舞いを変えることができます。

実際の開発現場では、共通で利用する関数に対し、関数のプログラムを変えずに多様性を持たせたい時などに利用しています。

やや中級者向けのメソッドですので、説明だけでは理解が難しいかもしれません。例を見て確認していきましょう。

 

bindの書き方

基本的なプログラムは以下のようになります。対象となるfunctionの後ろに「.」ピリオドを付けて記載します。

function名.bind(thisに対応する変数[, 引数に対応する値...])

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

bindメソッドの例

この記事では、bindメソッドの書き方について解説します。

まずは、簡単な関数を用意します。

<!DOCTYPE html>
<html lang = "ja">
  <head>
    <meta charset = "utf-8">
    <title>JavaScriptの練習</title>
  </head>
  <body>
    <script>
      // bind のサンプル1
      function say(){
        console.log("こんにちは。" + this + "です");
      }
      var taro = say.bind("煌木太郎");
      taro();

      // bind のサンプル2
      function sum(x, y, z){
        return x + y + z;
      }
      var keisan = sum.bind(null, 10, 20, 30);
      console.log(keisan());
    </script>
  </body>
</html>

 

実行すると次のようになります。

 

では、それぞれの内容を詳しく見ていきましょう。

bindのサンプル1

// bind のサンプル1
function say(){
 console.log("こんにちは。" + this + "です");
}
var taro = say.bind("煌木太郎");
taro();

こちらは、bindによりthisを指定する例です。

「say」というfunction(関数)を用意し、bindで「煌木太郎」という文字をthisに割り当てています。say関数の中のthisが「煌木太郎」という文字として扱われます。

その結果「こんにちは。煌木太郎です」という文字列が出力されます。

 

bindのサンプル2

// bind のサンプル2
function sum(x, y, z){
 return x + y + z;
}
var keisan = sum.bind(null, 10, 20, 30);
console.log(keisan());

こちらは、bindにより引数を指定する例です。

「sum」というfunction(関数)を用意し、bindで引数に「null, 10, 20, 30」という値を割り当てます。

thisを指定しない場合、bindの第一引数に null を設定します。

これにより、say関数の引数にそれぞれ「x=10、y=20、z=30」と値が設定されます。

その結果「60」という結果が出力されます。

 

今回の記事は以上です。

 

大石ゆかり

bindは、便利そうですが、使い方が少し難しいですね。。。

田島悠介

そうだね。
bindはJavaScriptでオブジェクト指向プログラミングをする時便利なメソッドなんだ。まずはthisの使い方に慣れてから、いろいろな例を参考に使ってみるといいと思うよ。

大石ゆかり

がんばりま〜す。

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を増やしたい、使いやすいWebサービスを作ってみたい方はぜひご覧ください。