マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

javascript(jquery) WEB制作

javascriptの便利なライブラリについて

投稿日:2014年6月30日 更新日:

オブジェクト(配列)や文字列の処理は自作の作成した場合、時間を要してしまします。
そこで、これらの処理をおこなう際に便利なJavascriptライブラリを紹介します。

1. underscore.js
オブジェクト(配列)を操作する際にとても便利なライブラリです。

例1:_.size(list)
連想配列(オブジェクト)の要素数は、lengthでは取得できませんが、
size()メソッドを利用しますと要素数を返します。
console.log(_.size({one: 1, two: 2, three: 3})); // 3が出力されます。

例2: _.intersection(*arrays)
複数の配列を渡しまして、一致する値のみ返します。
var ret = _.intersection([1, 2, 3, 4], [2, 3, 4, 5], [3, 4, 5, 6]);
console.log(ret); // [3, 4]が出力されます

underscore.jsと互換性があります、より高速なLo-Dash.jsというライブラリも存在します。

 

2. Underscore.string
javascriptの文字列の操作は、
文字列の操作する際にとても便利なライブラリです。
underscore.jsを拡張して利用することも可能です。

例1. _.number_fomat
数字を千位毎にグループ化してフォーマットします。
var ret = _.number_format(1000);
console.log(ret); // 1,000が出力されます。

例2. _.string.truncate(string, length, truncateString)
文字列を省略します。
var ret = _.string.truncate(“hellow world”, 5);
console.log(ret); // hello…と出力されます。

例3. _.startsWith(string)
文字列が引数の文字列で開始している場合は、trueを返します。
var ret = _.string().startsWith(“sample.jpg”, “sample”);
console.log(ret); // trueが出力されます。
今回紹介させていただきました処理はごく一部で
underscore.jsとUnderscore.stirngにはその他にも多くの便利な処理が用意されております。

-javascript(jquery), WEB制作

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

え、うそ、なんか今っぽい。

え、うそ、なんか今っぽい。Photoshopで写真をDuo Toneにする方法 http://www.markernet.co.jp/blog/2015/09/02/post-6033/ Facebo …

ウェブ上学習プログラム「Dash」!ブラウザでWEB制作(HTML, CSS, JavaScript)の基礎を学べ

ウェブ上学習プログラム「Dash」!ブラウザでWEB制作(HTML, CSS, JavaScript)の基礎を学べ

この「Dash」と呼ばれるプログラムはGeneral Assemblyが起業家などを育てる教育分野に転身したのをきっかけにもともと自社内の教育ツールとして開発されたものだったらしいのですが、評判が良か …

初めてのホームページ運用。これだけ知っておけば始められます。

初めてのホームページ運用。これだけ知っておけば始められます。

初めてのホームページ運用。これだけ知っておけば始められます。 web制作の仕事をず~~~っとやっていると専門的な事も基本的なことと勘違いしてしまいがちです。私もwebに触れる前は「ブラウザって何?」「 …

【これぞPhotoshopマジック】イラスト風・水彩風・レトロ風に写真を加工するワザ

【これぞPhotoshopマジック】イラスト風・水彩風・レトロ風に写真を加工するワザ

Webデザインを制作する中で、写真素材を使用することが多々あります。 これらの素材にひと手間加えることで、写真の魅力がグッと加わったり、 サイトの印象を変えることができたり、ポイントにもなったりします …

知ってそうで知らないCSS3の便利な使い方【その3:box系プロパティ】

知ってそうで知らないCSS3の便利な使い方【その3:box系プロパティ】

今回はCSS3を使ったレイアウトで使えるbox系プロパティを使ってみました。 このbox系のプロパティを使えばCSS2等で使っていたfloatやtable-cellプロパティを使わずに横並びレイアウト …