JavaScriptのbindpolyfillモジュールについて現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptのbindpolyfillモジュールについて現役エンジニアが解説しています。bindpolyfillモジュールとは、Node.jsで使うモジュールでbindメソッドに対応していない環境でbindを使えるようにするものです。bindpolyfillモジュールの使い方について説明します。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

JavaScriptのbindpolyfillモジュールについて、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptのbindpolyfillモジュールについて詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

bindpolyfillモジュールとは

bindpolyfillモジュールとは、サーバーサイドでも使われるNode.jsというJavaScriptの実行環境で使える部品の1つです。

bindpolyfillモジュールは、名前がそのまま意味を表しているので用語を分解して説明します。

bindは、JavaScriptのbindメソッドのことでthisの値を指定した関数を生成するものです。polfill(ポリフィル)は、古いブラウザなどで非対応になっている機能を動作するようにするものです。

モジュールは、機能や処理が集まった部品です。つまりbindpolyfillモジュールは、bindメソッドに対応していない環境で、bindを使えるようにするNode.jsで使う部品ということになります。

Node.jsの初期の頃のバージョンにはbindに対応していないものがあります。このような場合に、bindpolyfillモジュールを使うことでbindが使えるようになります。

Node.jsのバージョンと対応している機能の一覧は下記で確認できます。
https://node.green/

[PR] フロントエンドで挫折しない学習方法を動画で公開中

bindpolyfillモジュールの使い方

bindpolyfillモジュールは、MDNサイトのbindページに記載しているPolyfillのコードをモジュールにしたものになります。そのため、読み込むだけで特に処理を記述する必要はありません。

読み込んだソースの中でbindが使えるようになります。ほとんどの環境でbindは使えるので、bindが非対応な環境でbindを使いたい場合にbindpolyfillモジュールの使用を検討していみてください。

Node.jsで開発したソースを、ビルドツールを使ってブラウザで実行する場合はCan I useのサイトでブラウザの対応状況を確認できます。


IE8以前やChrome6以前のような赤くなっているバージョンが非対応になります。

実際に使ってみよう

まずは、bindpolyfillモジュールをインストールします。

コマンドラインツールで下記のコマンドを実行してください。

npm install bindpolyfill

インストールが終わったら、requireを使って読み込みます。Node.jsでモジュールを使う場合は、requireの引数にモジュール名、または、モジュールのパスを渡すことで読み込む事ができます。

下記のような記述になります。

require('bindpolyfill');

読み込むだけでbindが使えるようになるモジュールなので、requireで読み込んだファイルを変数に格納する必要もありません。

これでbindをサポートしていない環境で実行される場合でも、bindを使って処理を記述できるようになりました。

まとめ

bindpolyfillモジュールを紹介しました。

他にもモジュールはたくさんあります。npmの公式サイトでモジュールを検索することができます。

筆者プロフィール

横山茂雄(よこやましげお)

フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。