JavaScriptでのライブラリの使用

ライブラリ使用の一般的な原則を見てみましょう。配列操作に便利な関数を提供するライブラリが必要だとします。例えば、検索してlodashというライブラリを見つけたとします。

ライブラリのサイトにアクセスし、ダウンロードリンクを探します。通常、ライブラリは通常版とミニファイ版の2つの形式で提供されています。通常版はライブラリのソースコードを調査したい場合に便利です。ミニファイ版はファイルサイズが小さいという利点があります。

ダウンロードリンクを探し、ライブラリをダウンロードします。ドキュメントにJavaScriptファイルへの直接リンクが記載されている場合があります。その場合、リンクをクリックするとファイルがダウンロードされるのではなく、ブラウザで開かれてしまうことがあります。そのような場合は、ブラウザのメニューから「名前を付けて保存」を選択するか、 Ctrl + Sを押して、ファイルとしてライブラリを保存します。

ダウンロードしたライブラリは、自身のHTMLファイルに接続する必要があります。

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<script src="lodash.js"></script>
	</head>
	<body>

	</body>
</html>

接続されたライブラリは、グローバルスコープに1つまたは複数の変数を作成します。 lodashの場合、この変数は_と呼ばれます。では、ライブラリの接続の下に、サイトのコードを記述する独自のファイルを接続してみましょう。

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<script src="lodash.js"></script>
		<script src="test.js"></script>
	</head>
	<body>

	</body>
</html>

このファイル内では、先に接続したlodashライブラリが作成したグローバル変数が利用可能になります。

console.log(_); // この変数にはlodashライブラリが入っています

接続したライブラリのメソッドの1つを使用してみましょう。

let res = _.chunk(['a', 'b', 'c', 'd'], 2);
console.log([['a', 'b'], ['c', 'd']]);

underscorejsライブラリを自身でダウンロードしてください。それを自身のHTMLファイルに接続し、このライブラリからいくつかの関数を試してください。