Webデザイナーやフロントエンドエンジニアにとって、日々登場するフレームワークやライブラリをキャッチアップすることはとても大切です。
なぜなら、そうしたフレームワークやライブラリによって業務が効率化すれば、他の作業に時間を割くことができるからです。

しかし、フレームワークやライブラリが続々と登場するあまり、キャッチアップに追いついていないひともいるのではないでしょうか。

今回は、最近登場した注目のJavaScriptとCSSのライブラリを紹介していきます。
中には簡単なコードを挿入するだけで驚くほどの機能を実装できるものもあるので、ぜひ確認してみてください。

最近登場した注目のJavaScript＆CSSフレームワーク

1. AOS

2_aos.jpeg
https://michalsnik.github.io/aos/

AOS(Animate on Scroll)は、スクロールしながら要素をアニメーションでふわりと表示させることのできる、JavaScriptとCSSのライブラリです。
ライブラリ自体はとても軽量で、CDNで外部ファイルとして読み込むことができるので、インストール不要です。
動きがとてもユニークなので、活用できる場面が多そうですね。

2. PulltoReflesh.js

3_pulltoreflesh.jpeg
https://www.boxfactura.com/pulltorefresh.js/

PulltoRefresh.jsを使うと、モバイルアプリなどでよくある*「引っ張って更新」*が簡単に実装できます。
外部ライブラリを必要とせず、特別なマークアップも必要ありません。
カスタマイズを行いたい場合は、簡単なコードをJavaScript部分に書き足すだけでいいというシンプルなプラグインです。

3. CSSP IN

4_csspin.jpeg
https://webkul.github.io/csspin/

CSSPINは、CSSベースのスピナー・ローダーです。
くるくると回るスピナーやローダーはアニメーションが可愛らしいです。
class部分に「cp-spinner」とスピナー・ローダーの種類を選ぶだけで、簡単に実装することができます。

4. Blueprint

5_blueprint.jpeg
http://blueprintjs.com

BlueprintはWebページで頻繁に使われるReactのUIコンポーネントのコレクションライブラリです。
フォームやボラン、ラベルなど豊富なパーツが揃っているので、Webアプリケーションを構築したいときなどに大活躍します。
SassやLessを使ってカスタマイズを行うこともできます。

5. Milligram

7_milligram.jpeg
https://milligram.github.io

Milligramは、わずか2KBという超軽量なCSSライブラリです。

Bootstrapなどのほかのライブラリとは異なり、Milligram自体にはボタンなどのコンポーネントは含まれていませんが、タイポグラフィやグリッドレイアウトなどの必要なスタイルが収録されているので、ブログサイトなどに活躍しそうです。

6. Eg.js

8_egjs.jpeg
https://naver.github.io/egjs/

Eg.jsは、ユーザーインタラクションに特化したコンポーネントを集めた、jQueryベースのJavaScriptライブラリです。

スマートフォンでもよく使うフリック操作をデスクトップでも操作できるようにしたり、無限スクロールを実装できたり、面白い機能を簡単に組み込むことができます。

7. docsify

9_docsift.jpeg
https://docsify.js.org/

docsifyは簡単にドキュメンテーションサイトを実装することができるNode.jsベースのJavaScriptライブラリです。
標準で2つのテーマが用意さえており、いくつかの設定をすることでユニークなドキュメンテーションサイトが構築できます。

8. Flexdatalist

10_flexdatalist.jpeg
http://projects.sergiodinislopes.pt/flexdatalist/

Flexdatalistはテキストボックスの自動予測を実装可能にするjQueryプラグインです。
複数の項目を入力することができるトグルバリューにも対応しています。