JavaScriptのライブラリの作り方を現役エンジニアが解説【初心者向け】

JavaScriptのライブラリの作り方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

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

 

 

目次

• ライブラリとは
• JavaScriptのライブラリの作り方
• 実際に作ってみよう
• まとめ

 

ライブラリとは

平たく言うと機能の集まり、もしくは部品のようなものです。使われることの多い機能や処理は、ライブラリとして提供されていることが多いです。

例えば、画像をスライダーとして切り替えて表示してくれるものや、グラフや図形を書いてくれるものなどたくさんのライブラリが存在しています。

このようなライブラリを使うことで、自分で処理を作らなくても簡単にやりたいことが実現できます。

HTMLの操作や便利な機能がたくさん入ったjQueryなども有名なライブラリです。ライブラリを探す際は下記のサイトが便利です。

ライブラリを探すサイト

例えばここで画像のスライダーを探す場合は、sliderと入力して検索することでスライダーのライブラリがたくさん見つかります。

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

JavaScriptのライブラリの作り方

配布されているライブラリでは対応ができないような、独自性の強い処理を個人やチーム内で使いまわすような場合はライブラリを作ることがあります。

どのような利用方法をする機能かにもよりますが、基本的には通常通りJavaScriptを記述したファイルを用意して、拡張子をjsにしたJavaScriptファイルを作るだけです。

ライブラリを使う側はこのJavaScriptファイルを読み込むことで、処理を呼び出したり使ったりすることができます。

実際に作ってみよう

少ない記述で小さなライブラリを作成してみます。

キーボードの特定のキーを押すと、メッセージを表示するようにします。このライブラリを使うことで、こっそりメッセージを伝えたり、自分を励ましたりすることができます。

今回はキーボードのGのキーを押すと、アラートで「頑張れ自分」とメッセージを表示するようにします。

下記のJavaScriptを記述し、ファイル名をつけて保存します。拡張子は.jsのJavaScriptファイルとしておいてください。

document.addEventListener('keydown', event =>{
  if(event.key === 'g'){
    alert('がんばれ自分');
  }
});

これでライブラリ完成です。

キーボードイベントを検知し、キーがGだったらアラート表示という処理になっています。

使う際は、下記のようにscriptタグで読み込みます。

<script src="【JavaScriptファイルのパス】"></script>

このライブラリを読み込んだWebページでキーボードのgを押すとメッセージが表示されます。なにかに負けそうな時にこのライブラリを読み込んで、キーボードのGを押してみてください。

まとめ

ライブラリという形で機能や処理を使いまわす方法を紹介しました。

これで、すでに提供されているライブラリを使ってやりたいことを素早く実現する、もしくは、なければ自作するという選択肢が広がりました。

筆者プロフィール

横山茂雄（よこやましげお） フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。 言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

 

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

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。