痒い所に手が届く【ユーティリティ系】jsライブラリ10選

今回は、「あんなことがもっと簡単にできれば良いのに。。」というような痒い所に手が届く【ユーティリティ系】jsライブラリをまとめてみました。

shave.js

指定された「max-height」まででテキストを切り捨てることができるライブラリ。CSSだと1行の場合は寒天に切り捨て3点リーダーにできますが、このプラグインでは複数行を3点リーダーにできるので便利です。

ダウンロードは以下から

github.com

GitHub - yowainwright/shave: 💈 Shave is a 0 dep JS plugin that truncates text to fit within an element based on a set max-height ✁

💈 Shave is a 0 dep JS plugin that truncates text to fit within an element based on a set max-height ✁ - yowainwright/shave

www.npmjs.com

shave - npm

Shave is a javascript plugin that truncates multi-line text within a html element based on set max height. Latest version: 5.0.4, last published: 5 months ago. Start using shave in your project by running `npm i shave`. There are 31 other projects in the npm registry using shave.

MITライセンス

imagesLoaded

画像の読み込みイベントを取得するライブラリです。 オプションで「画像が全て読み込んだら〜」「全ての画像正常に読み込まれたら〜」「画像の読み込みに失敗があったら〜」などが指定できます。 jQueryプラグインとして使用することもできます。

ダウンロードは以下から

github.com

GitHub - desandro/imagesloaded: :camera: JavaScript is all like "You images done yet or what?"

:camera: JavaScript is all like "You images done yet or what?" - desandro/imagesloaded

www.npmjs.com

imagesloaded - npm

JavaScript is all like _You images done yet or what?_. Latest version: 5.0.0, last published: 2 years ago. Start using imagesloaded in your project by running `npm i imagesloaded`. There are 242 other projects in the npm registry using imagesloaded.

MITライセンス

isMobile.js

モバイル端末を判別する時に便利なJavascriptライブラリです。

ダウンロードは以下から

github.com

GitHub - kaimallea/isMobile: A simple JS library that detects mobile devices.

A simple JS library that detects mobile devices. Contribute to kaimallea/isMobile development by creating an account on GitHub.

www.npmjs.com

ismobilejs - npm

A simple JS library that detects mobile devices.. Latest version: 1.1.1, last published: 4 years ago. Start using ismobilejs in your project by running `npm i ismobilejs`. There are 549 other projects in the npm registry using ismobilejs.

MITライセンス

使い方はこちらから

hibi-update.org

Redirecting to: https://hibi-update.org/blog/ismobile-js/

smooth-scroll.js

ページ内のアンカーリンクのアニメーション化できるプラグイン。 jQuery無しで対応できる点が○

ダウンロードは以下から

github.com

GitHub - cferdinandi/smooth-scroll: A lightweight script to animate scrolling to anchor links.

A lightweight script to animate scrolling to anchor links. - cferdinandi/smooth-scroll

www.npmjs.com

smooth-scroll - npm

Animate scrolling to anchor links. Latest version: 16.1.3, last published: 4 years ago. Start using smooth-scroll in your project by running `npm i smooth-scroll`. There are 78 other projects in the npm registry using smooth-scroll.

MITライセンス

List.js

リスト、テーブルなどの要素に、【検索、並び替え、フィルターがけ】を実装することができます。

ダウンロードは以下から

listjs.com

Search, sort, filters, flexibility to tables, list and more! - List.js

Perfect library for adding search, sort, filters and flexibility to tables, lists and various HTML elements. Built to be invisible and work on existing HTML.

github.com

GitHub - javve/list.js: The perfect library for adding search, sort, filters and flexibility to tables, lists and various HTML elements. Built to be invisible and work on existing HTML.

The perfect library for adding search, sort, filters and flexibility to tables, lists and various HTML elements. Built to be invisible and work on existing HTML. - javve/list.js

MITライセンス

Cleave.js

日付や電話番号などの入力フォームコンテンツを自動的にフォーマットすることができます。

ダウンロードは以下から

github.com

GitHub - nosir/cleave.js: Format input text content when you are typing...

Format input text content when you are typing... Contribute to nosir/cleave.js development by creating an account on GitHub.

www.npmjs.com

cleave.js - npm

JavaScript library for formatting input text content when you are typing. Latest version: 1.6.0, last published: 4 years ago. Start using cleave.js in your project by running `npm i cleave.js`. There are 314 other projects in the npm registry using cleave.js.

Apache-2.0ライセンス

parsley.js

【parsley.js】はフォームのカスタムバリデーションを作成できるJSライブラリです。【jQueryが必要です】

ダウンロードは以下から

github.com

GitHub - guillaumepotier/Parsley.js: Validate your forms, frontend, without writing a single line of javascript

Validate your forms, frontend, without writing a single line of javascript - guillaumepotier/Parsley.js

www.npmjs.com

parsleyjs - npm

Validate your forms, frontend, without writing a single line of javascript!. Latest version: 2.9.2, last published: 4 years ago. Start using parsleyjs in your project by running `npm i parsleyjs`. There are 36 other projects in the npm registry using parsleyjs.

MITライセンス

Voca.js

【Voca.js】は簡単に文字列操作することができるライブラリです。 大文字小文字の変更やトリム、切り捨てなどの機能が提供されています。

ダウンロードは以下から

vocajs.com

github.com

GitHub - panzerdp/voca: The ultimate JavaScript string library

The ultimate JavaScript string library. Contribute to panzerdp/voca development by creating an account on GitHub.

MITライセンス

Chart.js

「Chart.js」はCanvasを使用したグラフ/チャートを描画するJSライブラリです。グラフ用のデータを用意すれば、折れ線グラフや棒グラフ、円グラフなど様々なグラフを描画することができます。

ダウンロードは以下から

github.com

GitHub - chartjs/Chart.js: Simple HTML5 Charts using the <canvas> tag

Simple HTML5 Charts using the <canvas> tag. Contribute to chartjs/Chart.js development by creating an account on GitHub.

www.npmjs.com

chart.js - npm

Simple HTML5 charts using the canvas element.. Latest version: 4.4.3, last published: 14 days ago. Start using chart.js in your project by running `npm i chart.js`. There are 4071 other projects in the npm registry using chart.js.

MITライセンス

使い方は以下から

最後に

以上今回は、「あんなことがもっと簡単にできれば良いのに。。」というような痒い所に手が届く【ユーティリティ系】jsライブラリをまとめてみました。