お気楽 Underscore.js 超入門

WHAT'S NEW

2025/03/02 お気楽 Underscore.js 超入門を改訂

2025/03/02 はじめに
2025/03/02 参考文献, URL
2025/03/02 権利・免責事項など

2025/03/02 Collections
2025/03/02 Arrays
2025/03/02 Objects
2025/03/02 Functions
2025/03/02 Utility
2025/03/02 Chaining

はじめに

Underscore.js は DocumentCloud と Jeremy Ashkenas 氏が開発している JavaScript で作成されたライブラリです。Underscore.js は軽量なライブラリですが、100 以上の関数が定義されています。map, filter, reduce といった関数型言語でお馴染みの高階関数も定義されているので、とても便利に使用することができます。なお、これらの関数を使いこなすには、「クロージャ (closure)」を理解しておく必要があります。高階関数とクロージャについては、拙作のページお気楽 JavaScript プログラミング超入門高階関数, クロージャをお読みくださいませ。

Underscore.js は次のページからダウンロードすることができます。

Underscore.js

Development Version と Production Version (underscore-XXX-min.js) がありますが、ライブラリとして必要なのは underscore-XXX-min.js だけです。ライブラリの読み込みは CDN (Contents Delivery Network) を使うと簡単です。<script src="..."></script> の SRC に CDN の URL を記述するだけです。次のリストを見てください。

リスト : underscore.js の読み込み

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>お気楽 Underscore.js 超入門</title>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/underscore@1.13.7/underscore-umd-min.js"></script>
  <script>
    console.log(_.VERSION);
  </script>
</body>
</html>

underscore-XXX-min.js の XXX は次の文字列を指定します。

umd
CommonJS のモジュール
esm
ECMAScript のモジュール

unserscore-umd-min.js を読み込むと、アンダースコア ( _ ) というオブジェクトが生成されます。このオブジェクトに便利な関数 (メソッド) などが多数定義されています。あとは、<script> と </script> の間に JavaScript のプログラムを記述するだけで、Underscore.js を試してみることができます。

たとえば、_.VERSION は Underscore.js のバージョンを格納しているプロパティです。M.Hiroi の環境でこのプログラムを実行すると、Web ブラウザの JavaScript コンソールに 1.13.7 と表示されます。

Node.js で使用する場合、npm を使うと簡単にインストールすることができます。

$ npm install underscore

あとは、使用するモジュールシステムに合わせてライブラリを読み込みます。

リスト : CommonJS のモジュール (test_under.js)

const _ = require('underscore');
console.log(_.VERSION);

$ node test_under.js
1.13.7

リスト : ECMAScript のモジュール (test_under.mjs)

import _, { map } from 'underscore';
console.log(_.VERSION);

$ node test_under.mjs
1.13.7

Node.js の REPL から underscore.js を読み込むこともできます。

> const _ = require('underscore')
undefined
> console.log(_.VERSION)
1.13.7
undefined

> const {default: _, map} = await import('underscore')
undefined
> console.log(_.VERSION)
1.13.7
undefined

ところで、Underscore.js で関数 (メソッド) を呼び出す方法は 2 通りあります。

_.func(引数1, 引数2, ...)
_(引数1).func(引数2, ...)

本ページでは 1. の方法で関数 (メソッド) を呼び出すことにします。

参考文献, URL

Underscore.js, (Underscore.js 本家)
Underscoreドキュメント日本語訳
Underscore.jsの入り口, (早瀬まことさん, gihyo.jp --- 技術評論社)
Underscore.js入門(全10回), ドットインストール

権利・免責事項など

ただし、これらのプログラムは無保証であり、使用したことにより生じた損害について、作者「広井誠 (Makoto Hiroi) 」は一切の責任を負いません。また、これらのプログラムを販売することで利益を得るといった商行為は禁止いたします。

JavaScript Programming