マーカーネット株式会社

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

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

関連記事

【Illustrator】多角形を使った簡単な花形の作り方

【Illustrator】多角形を使った簡単な花形の作り方

みなさまこんばんは、新人Aです。 今日は、多角形を使って一瞬でお花の形にする方法をお話しようと思います! 数値をずらすだけで形が簡単に変わるので、とってもおすすめです。     【 …

面白い動きや便利な機能をJSで実装! その4:ちょっと変わったマウスオーバーを実装してみました。

面白い動きや便利な機能をJSで実装! その4:ちょっと変わったマウスオーバーを実装してみました。

【今までにご紹介したJSの一覧】 面白い動きや便利な機能をJSで実装! その3:一目で印象に残るアニメーション背景を作成! 面白い動きや便利な機能をJSで実装! その2:いろんな種類のグラフを簡単に作 …

普通の写真も一風変わった感じに!【Photoshopで写真をミニチュア風に加工】

普通の写真も一風変わった感じに!【Photoshopで写真をミニチュア風に加工】

デザインする時、「この素材写真イマイチだなー」と思ったことありませんか? ここで普通の写真をミニチュア風に加工するPhotoshopの小技をご紹介します。 STEP1 まず加工する写真をPhotosh …

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

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

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

【デザイナーをお助け!】○○に特化したフリー素材サイト5選

【デザイナーをお助け!】○○に特化したフリー素材サイト5選

なるべく早く作ってほしい!! 今週末までに提出お願い!! ・・・・・・ヤバイ、時間がない。 こんな急ぎの依頼が来たときに、デザイナーさんの手助けをしてくれる素材サイト。 今回は、特定のジャンルに特化し …