Underscore.JS-クイックガイド
Underscore.JSは、Web開発を容易にする100以上の関数を提供する人気のあるJavaScriptベースのライブラリです。これは、マップ、フィルター、呼び出し、関数バインディング、JavaScriptテンプレート、詳細な等価性チェック、インデックスの作成などのヘルパー関数を提供します。Underscore.JSは、ブラウザー内で直接使用することも、Node.jsで使用することもできます。
JavaScriptを使用してオブジェクトを操作することは、特にオブジェクトを操作する必要がある場合、非常に困難な場合があります。アンダースコアには、オブジェクトの操作を容易にする多くの機能が付属しています。
Underscore.JSはオープンソースプロジェクトであり、ライブラリに簡単に貢献したり、プラグインの形で機能を追加したり、GitHubやNode.jsで利用できるようにしたりできます。
特徴
アンダースコアで利用できるすべての重要な機能を詳しく理解しましょう-
コレクション
Underscore.JSは、コレクションの各アイテムに操作を適用するために使用される、each、map、reduceなどのコレクションにさまざまな関数を提供します。これは、コレクションを処理し、多くのタスクを容易にするgroupBy、countBy、max、minのようなメソッドを提供します。
配列
Underscore.JSは、first、initial、lastIndexOf、intersection、differenceなどの配列を反復処理するなどの配列にさまざまな関数を提供します。
関数
Underscore.JSは、バインド、遅延、前、後などの機能を提供します。
オブジェクト
Underscore.JSは、オブジェクトを操作したり、オブジェクトをマップしたり、オブジェクトを比較したりするための関数を提供します。たとえば、keys、values、extends、extendsOwn、isEqual、isEmptyなどです。
ユーティリティ
Underscore.JSは、noConflict、random、iteratee、escapeなどのさまざまなユーティリティメソッドを提供します。
チェーン
Underscore.JSは、チェーン、バリューなどのチェーンメソッドを提供します。
以降の章では、Underscore.JSの重要な機能について説明します。
この章では、ローカルコンピューターでUnderscore.JSの作業環境をセットアップする方法について詳しく学習します。Underscore.JSでの作業を開始する前に、ライブラリにアクセスできる必要があります。次のいずれかの方法でファイルにアクセスできます-
方法1：ブラウザでUnderscore.JSファイルを使用する
この方法では、公式WebサイトからUnderscore.JSファイルが必要になり、ブラウザーで直接使用します。
ステップ1
最初のステップとして、Underscore.JSの公式ウェブサイトにアクセスします https://underscorejs.org/。
利用可能な最新のunderscore-min.jsファイルUMD（Production）を提供するダウンロードオプションが利用可能であることに注意してください。リンクを右クリックして、[名前を付けて保存]を選択します。ファイルは縮小の有無にかかわらず利用可能であることに注意してください。
ステップ2
今、含める underscore-min.js 中 scriptタグを付けて、Underscore.JSでの作業を開始します。これには、以下のコードを使用できます-
<script type = "text/JavaScript" src = "https://underscorejs.org/underscore-min.js"></script>ここに与えられているのは、より良い理解のための実用的な例とその出力です-
例
<html>
<head>
<title>Underscore.JS - Working Example</title>
<script type = "text/JavaScript" src = "https://underscorejs.org/underscore-min.js"></script>
<style>
div {
border: solid 1px #ccc;
padding:10px;
font-family: "Segoe UI",Arial,sans-serif;
width: 50%;
}
</style>
</head>
<body>
<div style = "font-size:25px" id = "list">
</div>
<script type = "text/JavaScript">
var numbers = [1, 2, 3, 4];
var listOfNumbers = '';
_.each(numbers, function(x) { listOfNumbers += x + ' ' });
document.getElementById("list").innerHTML = listOfNumbers;
</script>
</body>
</html>出力
方法2：Node.jsを使用する
この方法を選択する場合は、 Node.js そして npmシステムにインストールされています。次のコマンドを使用して、Underscore.JSをインストールできます-
npm install underscoreUnderscore.JSが正常にインストールされると、次の出力を確認できます-
+ [email protected]
added 1 package from 1 contributor and audited 1 package in 6.331s
found 0 vulnerabilitiesここで、Underscore.JSがNode.jsで正常に機能するかどうかをテストするには、ファイルtester.jsを作成し、それに次のコードを追加します-
var _ = require('underscore');
var numbers = [1, 2, 3, 4];
var listOfNumbers = '';
_.each(numbers, function(x) { listOfNumbers += x + ' ' });
console.log(listOfNumbers);上記のプログラムをに保存します tester.js。このプログラムをコンパイルして実行するには、次のコマンドを使用します。
コマンド
\>node tester.js出力
1 2 3 4Underscore.JSには、コレクションの反復に役立つ多くの使いやすいメソッドがあります。この章では、それらについて詳しく説明します。
Underscore.JSは、以下にリストされているように、コレクションを反復するためのさまざまなメソッドを提供します-
| シニア番号 | メソッドと構文 |
|---|---|
| 1 | 各 _.each（list、iteratee、[context]） |
| 2 | 地図 _.map（list、iteratee、[context]） |
| 3 | 減らす _.reduce（list、iteratee、[memo]、[context]） |
| 4 | reduceRight _.reduceRight（list、iteratee、[memo]、[context]） |
| 5 | 見つける _.find（list、predicate、[context]） |
| 6 | フィルタ _.filter（list、predicate、[context]） |
| 7 | どこ _.where（list、properties） |
| 8 | findWhere _.findWhere（list、properties） |
| 9 | 拒否する _.reject（list、predicate、[context]） |
| 10 | すべて _.every（list、[predicate]、[context]） |
| 11 | いくつか _.some（list、[predicate]、[context]） |
Underscore.JSには、コレクションの処理に役立つ多くの使いやすいメソッドがあります。この章では、それらについて詳しく説明します。
Underscore.JSは、以下に示すようにコレクションを処理するためのさまざまなメソッドを提供します-
| シニア番号 | メソッドと構文 |
|---|---|
| 1 | 含まれています _.contains（list、value、[fromIndex]） |
| 2 | 呼び出す _.invoke（list、methodName、* arguments） |
| 3 | 摘む _.pluck（list、propertyName） |
| 4 | 最大 _.max（list、[iteratee]、[context]） |
| 5 | 分 _.min（list、[iteratee]、[context]） |
| 6 | 並び替え _.sortBy（list、iteratee、[context]） |
| 7 | groupBy _.groupBy（list、iteratee、[context]） |
| 8 | indexBy _.indexBy（list、iteratee、[context]） |
| 9 | countBy _.countBy（list、iteratee、[context]） |
| 10 | シャッフル _.shuffle（list） |
| 11 | サンプル _.sample（list、[n]） |
| 12 | toArray _.toArray（list） |
| 13 | サイズ _.size（list） |
| 14 | パーティション _.partition（list、predicate） |
| 15 | コンパクト _.compact（list） |
Underscore.JSには、配列の反復に役立つ多くの使いやすいメソッドがあります。この章では、それらについて詳しく説明します。
Underscore.JSは、以下に示すように、配列を反復処理するためのさまざまなメソッドを提供します-
| シニア番号 | メソッドと構文 |
|---|---|
| 1 | 最初 _.first（array、[n]） |
| 2 | 初期 _.initial（array、[n]） |
| 3 | 最終 _.last（array、[n]） |
| 4 | 残り _.rest（array、[index]） |
| 5 | の指標 _.indexOf（array、value、[isSorted]） |
| 6 | lastIndexOf _.lastIndexOf（array、value、[fromIndex]） |
| 7 | ソートされたインデックス _.sortedIndex（array、value、[iteratee]、[context]） |
| 8 | findIndex _.findIndex（array、predicate、[context]） |
| 9 | findLastIndex _.findLastIndex（array、predicate、[context]） |
Underscore.JSには、配列の処理に役立つ多くの使いやすいメソッドがあります。この章では、それらについて詳しく説明します。
Underscore.JSは、以下に示すように配列を処理するためのさまざまなメソッドを提供します-
| シニア番号 | メソッドと構文 |
|---|---|
| 1 | 平らにする _.flatten（array、[shallow]） |
| 2 | なし _.without（array、* values） |
| 3 | 連合 _.union（* array） |
| 4 | 交差点 _.intersection（* arrays） |
| 5 | 差 _.difference（array、* others） |
| 6 | uniq _.uniq（array、[isSorted]、[iteratee]） |
| 7 | zip _.zip（* array） |
| 8 | 解凍 _.unzip（array） |
| 9 | オブジェクト _.object（list、[values]） |
| 10 | チャンク _.chunk（配列、長さ） |
| 11 | 範囲 _.range（[start]、stop、[step]） |
Underscore.JSには、関数の処理に役立つ使いやすいメソッドが多数あります。この章では、それらについて詳しく説明します。
Underscore.JSは、以下に示す関数を処理するためのさまざまなメソッドを提供します-
| シニア番号 | メソッドと構文 |
|---|---|
| 1 | 練る _.bind（関数、オブジェクト、*引数） |
| 2 | 部分的 _.partial（関数、*引数） |
| 3 | メモ化する _.memoize（function、[hashFunction]） |
| 4 | ディレイ _.delay（関数、待機、*引数） |
| 5 | 一度 _.once（function） |
| 6 | 前 _.before（count、function） |
| 7 | ラップ _.wrap（関数、ラッパー） |
| 8 | 否定する _.negate（述語） |
| 9 | 作曲 _.compose（*関数） |
Underscore.JSには、オブジェクトのマッピングに役立つ多くの使いやすいメソッドがあります。この章では、それらについて詳しく説明します。
Underscore.JSは、以下に示すように、オブジェクトマッピングを処理するためのさまざまなメソッドを提供します-
| シニア番号 | メソッドと構文 |
|---|---|
| 1 | キー _.keys（object） |
| 2 | allKeys _.allKeys（object） |
| 3 | 値 _.values（object） |
| 4 | mapObject _.mapObject（object、iteratee、[context]） |
| 5 | ペア _.pairs（object） |
| 6 | 反転 _.invert（object） |
| 7 | 作成する _.create（prototype、props） |
| 8 | 関数 _.functions（object） |
| 9 | findKey _.findKey（object、predicate、[context]） |
Underscore.JSには、オブジェクトの更新に役立つ多くの使いやすいメソッドがあります。この章では、それらについて詳しく説明します。
Underscore.JSは、以下に示すように、オブジェクトの更新を処理するためのさまざまなメソッドを提供します-
| シニア番号 | メソッドと構文 |
|---|---|
| 1 | 拡張する _.extend（destination、* sources） |
| 2 | ピック _.pick（object、* keys） |
| 3 | 省略 _.omit（object、* keys） |
| 4 | デフォルト _.defaults（object、* defaults） |
| 5 | クローン _.clone（object） |
| 6 | タップ _.tap（オブジェクト、インターセプター） |
| 7 | 持っている _.has（object、key） |
| 8 | プロパティ _.property（path） |
| 9 | propertyOf _.propertyOf（object） |
Underscore.JSには、オブジェクトの比較に役立つ多くの使いやすいメソッドがあります。この章では、それらについて詳しく説明します。
Underscore.JSは、以下に示すように、オブジェクト比較を処理するためのさまざまなメソッドを提供します-
| シニア番号 | メソッドと構文 |
|---|---|
| 1 | マッチャー _.matcher（attrs） |
| 2 | isEqual _.isEqual（object、other） |
| 3 | isMatch _.isMatch（オブジェクト、プロパティ） |
| 4 | isEmpty _.isEmpty（object） |
| 5 | isArray _.isArray（object） |
| 6 | isObject _.isObject（value） |
| 7 | isArguments _.isArguments（object） |
| 8 | isFunction _.isFunction（object） |
| 9 | isString _.isString（object） |
| 10 | isNumber _.isNumber（object） |
| 11 | isFinite _.isFinite（object） |
| 12 | isBoolean _.isBoolean（object） |
| 13 | isDate _.isDate（object） |
| 14 | isRegExp _.isRegExp（object） |
| 15 | isError _.isError（object） |
| 16 | isSymbol _.isSymbol（object） |
| 17 | isMap _.isMap（object） |
| 18 | isWeakMap _.isWeakMap（object） |
| 19 | isSet _.isSet（object） |
| 20 | isWeakSet _.isWeakSet（object） |
| 21 | isNaN _.isNaN（オブジェクト） |
| 22 | 無効である _.isNull（object） |
| 23 | isUndefined _.isUndefined（value） |
Underscore.JSには、使いやすいユーティリティメソッドが多数あります。この章では、それらについて詳しく説明します。
Underscore.JSは、以下に示すさまざまなユーティリティメソッドを提供します-
| シニア番号 | メソッドと構文 |
|---|---|
| 1 | 身元 _.identity（value） |
| 2 | 絶え間ない _.constant（value） |
| 3 | noop _.noop（） |
| 4 | タイムズ _.times（n、iteratee、[context]） |
| 5 | ランダム _.random（min、max） |
| 6 | 混入します _.mixin（object） |
| 7 | iteratee _.iteratee（value、[context]） |
| 8 | 一意のID _.uniqueId（[prefix]） |
| 9 | 逃れる _.escape（string） |
| 10 | エスケープ解除 _.unescape（string） |
| 11 | 結果 _.result（object、property、[defaultValue]） |
| 12 | 今 _.now（） |
| 13 | テンプレート _.template（templateString、[設定]） |
Underscore.JSには、一連のメソッドを作成し、その効果的な結果を取得するためのメソッドがあります。この章では、それらについて詳しく説明します。
Underscore.JSは、以下に示すさまざまなユーティリティメソッドを提供します-
| シニア番号 | メソッドと構文 |
|---|---|
| 1 | 鎖 _.chain（object） |
| 2 | 値 _.chain（obj）.value（） |