javascriptの便利が詰まったメソッド集「30 seconds of code」



javascriptの便利が詰まったメソッド集、「30 seconds of code」の紹介です。

 2017年12月辺りから、GitHub上で「30 seconds of code」という javascriptのレポジトリが盛り上がりを見せています。

「30 seconds of code」の公式ページのスクリーンショット 

「30 seconds of code」は lodash.jsに近い、javascriptの ユーティリティーが集まったスニペット集で、外部ライブラリを使わず、全ての処理が 1行ないしは 数行のコードで書かれているのが特徴です。

// 重複しない配列を抜き出す処理
distinctValuesOfArray([1, 2, 2, 3, 4, 4, 5]); // [1,2,3,4,5]

// 処理で使われている実際のコード
const distinctValuesOfArray = arr => [...new Set(arr)];


 今まではドキュメントとしてWeb上にスニペットが公開されていただけでしたが、この度 「30 seconds of code」がパッケージとして公開されたので npm からプロジェクトに導入できるようになりました。
 

30-seconds-of-code のインストール

「30 seconds of code」の導入は npm 又は yarn コマンドを使います。

 また、古いブラウザでも使用出来るように babel-polyfill を使ったバージョンも用意されており、CDNを通してブラウザから直接読み込むことも可能です。

# npm
npm i -S 30-seconds-of-code
# yarn
yarn add 30-seconds-of-code

# scriptタグ内で下記のURLを読み込めば、ブラウザからライブラリを読み込む事ができます
# babel-polyfillが使用されています
https://unpkg.com/30-seconds-of-code/dist/_30s.es5.min.js

 

30-seconds-of-code の使い方

npm や yarn を通して導入した場合は、モジュールとして、本体を読み込むことが出来ます。

const _ = require('30-seconds-of-code'); // 本体を読み込み

var arr = ['arr1', 'arr2', undefined, 'arr3', 'arr4'];

_.join(arr, '-'); // arr1-arr2-undefined-arr3-arr4
_.join(_.compact(arr), '-'); // arr1-arr2-arr3-arr4
_.capitalizeEveryWord(_.join(_.compact(arr), '-')); // Arr1-Arr2-Arr3-Arr4


  CDN経由で読み込むなど scriptタグを通して直接ブラウザから 「dist/_30s.es5.js」を読み込んだ場合は ' _30s ' オブジェクトを通してメソッドを呼び出します。

var obj = { a: 1, b: '2', c: 3 };
// pickメソッドを使って key : a, cを呼び出し
_30s.pick(obj, ['a', 'c']); // {"a":1,"c":3}

// ブラウザ専用のメソッドも用意されています
_30s.currentURL(); // http://co.bsnws.net/article/273
_30s.UUIDGeneratorBrowser() // fc5bbbf7-05a7-4dca-9ce8-0e6ce4c735f4 

 

Summary

 30 seconds of codeには2018年1月4日時点では、180以上のメソッドが用意されており、全てのコードが短く書かれているので、ライブラリ本体の容量も小さくなっています。
( * 圧縮された  _30s.min.js ファイルが 16KB )

ドキュメントもサンプル付きで使い方がわかりやすくまとまっているので、プロジェクトを問わず、どこでも便利に使えそうです。

 GitHub : Chalarangelo/30-seconds-of-code

 

この記事のカテゴリ
プログラミング

この記事に付けられているタグ