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制作

関連記事

先取り!春の色彩のトレンド

先取り!春の色彩のトレンド

こんにちは! web初心者のKです。 暖かくなってきたこの頃、みなさまいかがお過ごしでしょうか? 本日は春に先駆けて、 春色が感じられるサイトを集めてみようと思います。 まずひとつ目はこちら! htt …

【2024年最新版】ホームページのリニューアル制作で利用できる補助金は?申請の注意点などについても解説

【2024年最新版】ホームページのリニューアル制作で利用できる補助金は?申請の注意点などについても解説

ホームページのリニューアルは、ビジネスの成長に不可欠ですが、費用面で課題を感じる企業も多いと思います。そこで注目したいのが、制作費用の一部をカバーできる補助金制度です。本記事では、ホームページリニュー …

【Photoshop マジック】ビンテージ風の素材がさくさくカンタンに作れちゃう!

【Photoshop マジック】ビンテージ風の素材がさくさくカンタンに作れちゃう!

Webデザインのトレンド手法のひとつとして、「レトロ感」や「ヴィンテージ感」のあるwebデザインがよく見かけます。 素材がなくても、Phoshopを使えば普通の写真もステキな素材になります! ここで写 …

オンライン上で複数のPDFファイルを結合(連結)させる方法【MERGE PDF】

オンライン上で複数のPDFファイルを結合(連結)させる方法【MERGE PDF】

今日はあんまり面白い記事が見つからなかったので、ちょっと趣向を変えて、日常のWEB制作フローのなかで重宝しているものの中からひとつ紹介します。 WEB制作の業界に限ったことだけではないかもしれませんが …

モバイルフレンドリーでいたい!~素敵サイトレスポンシブの旅~

モバイルフレンドリーでいたい!~素敵サイトレスポンシブの旅~

みなさん、こんにちは! web初心者のKです! この度、googleがモバイルフレンドリーな webサイトのランクを上げるアルゴリズムの変更を発表しましたね! http://www.itmedia.c …