Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
JavaScript
ユーティリティライブラリ
のご紹介
自己紹介
@cloud10designs

平尾 優典(ひらお ゆうてん)
マークアップ/フロントエンドエンジニア
株式会社ディーゼロ
JavaScriptは
楽しい
でも

JavaScriptは
不便
PHPやRubyにくらべると
関数・メソッドが少なすぎる
配列操作・文字列操作
日付フォーマット etc...
DOM操作はjQueryを使うのに
不便と思いつつも
なんだかんだスクラッチで書いちゃうこと
ありませんか?
オススメライブラリ

あります
配列
配列(orハッシュ)操作なら
Underscore.js
配列(orハッシュ)操作なら
Lo-Dash.js
繰り返し処理はもちろん
フィルタリング
任意のキーの値を抽出
最大値を取得
シャッフル
階層を平坦化
任意の範囲から数列を生成
文字列
文字列操作なら
Underscore.string
3桁のカンマ区切り
キャメルケース化
文字列の省略
sprintf
0(など)埋め
日付
日付なら
moment.js
日付フォーマット
多言語対応
もちろん日本語も!
経過時間
単位は自動的に最適化
加算
うるう年かどうか
日付・時間の丸め
これらをほぼ全部できる
ツワモノもいます
配列も文字列も日付も

Sugar.js
ビルトインオブジェクトに
直接定義しているので
リテラルから直接呼び出せます
Dateオブジェクトは
自然言語で生成できる
こちらも
多言語対応
文字列操作も
多言語対応
というか

日本語対応
hiragana
katakana
zenkaku
hankaku
Sugar.js

最強?
注意

Object.definePropertyで定義しているので
オブジェクト汚染は解決していますが
モンキーパッチに変わりはありません。
アップデートが頻繁なブラウザでの使用は注意が必要です。
逆にアップデートが任意な Node などサー...
紹介したライブラリは
全て Node.js に対応しています

$ npm install underscore
$ npm install underscore.string
$ npm install moment
$ npm instal...
是非
つかってみて!
それでは

楽しいJS開発を
Upcoming SlideShare
Loading in …5
×

JavaScriptユーティリティライブラリの紹介

JavaScriptのオススメのユーティリティ(配列・文字列・日付)ライブラリを紹介します。

  • Be the first to comment

JavaScriptユーティリティライブラリの紹介

  1. 1. JavaScript ユーティリティライブラリ のご紹介
  2. 2. 自己紹介 @cloud10designs 平尾 優典(ひらお ゆうてん) マークアップ/フロントエンドエンジニア 株式会社ディーゼロ
  3. 3. JavaScriptは 楽しい
  4. 4. でも JavaScriptは 不便
  5. 5. PHPやRubyにくらべると 関数・メソッドが少なすぎる
  6. 6. 配列操作・文字列操作 日付フォーマット etc...
  7. 7. DOM操作はjQueryを使うのに 不便と思いつつも なんだかんだスクラッチで書いちゃうこと ありませんか?
  8. 8. オススメライブラリ あります
  9. 9. 配列
  10. 10. 配列(orハッシュ)操作なら Underscore.js
  11. 11. 配列(orハッシュ)操作なら Lo-Dash.js
  12. 12. 繰り返し処理はもちろん
  13. 13. フィルタリング
  14. 14. 任意のキーの値を抽出
  15. 15. 最大値を取得
  16. 16. シャッフル
  17. 17. 階層を平坦化
  18. 18. 任意の範囲から数列を生成
  19. 19. 文字列
  20. 20. 文字列操作なら Underscore.string
  21. 21. 3桁のカンマ区切り
  22. 22. キャメルケース化
  23. 23. 文字列の省略
  24. 24. sprintf
  25. 25. 0(など)埋め
  26. 26. 日付
  27. 27. 日付なら moment.js
  28. 28. 日付フォーマット
  29. 29. 多言語対応 もちろん日本語も!
  30. 30. 経過時間 単位は自動的に最適化
  31. 31. 加算
  32. 32. うるう年かどうか
  33. 33. 日付・時間の丸め
  34. 34. これらをほぼ全部できる ツワモノもいます
  35. 35. 配列も文字列も日付も Sugar.js
  36. 36. ビルトインオブジェクトに 直接定義しているので リテラルから直接呼び出せます
  37. 37. Dateオブジェクトは 自然言語で生成できる
  38. 38. こちらも 多言語対応
  39. 39. 文字列操作も 多言語対応 というか 日本語対応
  40. 40. hiragana
  41. 41. katakana
  42. 42. zenkaku
  43. 43. hankaku
  44. 44. Sugar.js 最強?
  45. 45. 注意 Object.definePropertyで定義しているので オブジェクト汚染は解決していますが モンキーパッチに変わりはありません。 アップデートが頻繁なブラウザでの使用は注意が必要です。 逆にアップデートが任意な Node などサーバー側ならアリだと思います!
  46. 46. 紹介したライブラリは 全て Node.js に対応しています $ npm install underscore $ npm install underscore.string $ npm install moment $ npm install sugar
  47. 47. 是非 つかってみて!
  48. 48. それでは 楽しいJS開発を

×