マーカーネット株式会社

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

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

関連記事

初心者向けWEBデザイン力強化トレーニング法

学生時代デザインを勉強してきて、いいものを作る、作れる自信を持っている新人さんが驚くことは先輩デザイナーの圧倒的なスピードだと思います。 社会に出ると当然「納期」があり、「自分のペースで」なんてことが …

ボタンを押すだけ!? 【Photoshop】 フリー  レイヤースタイル ゴールド(金色)系 厳選素材まとめ!

ボタンを押すだけ!? 【Photoshop】 フリー  レイヤースタイル ゴールド(金色)系 厳選素材まとめ!

こんにちは。 今回はクリックするだけでゴールド&メタリックな質感のデザインが作れてしまうPhotoshopのレイヤースタイル素材と活用方法についてご紹介いたします。 このフレームを・・・ たっ …

CSS3のみで吹き出しを作成してみました!上下左右どこでも大丈夫!

凝ったデザインなどには吹き出しなどを作成したりします。 ですが、内容を画像ではなくテキストにしたい場合があると思います。 吹出し画像を文字数に合わせて調節したり、分割して組み立てたりするのは大変ですよ …

CSS3の便利機能紹介。

CSS3の便利機能紹介。 http://www.markernet.co.jp/blog/2015/09/03/post-6063/ Facebook

Movable Type6がリリースされました

Movable Type6がリリースされました

movable type6 以下の新機能が追加されたとのことです。 – Data API APIを通じてMovable Typeの管理画面の操作や記事の読み込みが可能になったとのことです。 – Cha …