フロントエンドエンジニアなら押さえておきたい！最近登場した注目のJavaScript＆CSSライブラリ10選

酒井涼

2017年2月10日

13,890

ライター・コラムニスト。デザインやテクノロジー、マーケティングやライフハック系の記事が得意。2016年からferretでも記事の執筆を開始。
　　
>> 執筆記事一覧はこちら

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

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

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

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

1. Deck.GL

https://uber.github.io/deck.gl/

Deck.GLは、ラージスケールの2D・3Dをできるだけ簡単に表示することのできる、注目のデータビジュアライゼーションライブラリです。
制作元はシェアリングエコノミーでお馴染みのUberで、タクシーをハイヤーするための地図の表示技術にも活用されています。

WebGLとReactをレンダリングエンジンとして活用しており、できるだけCPUの処理速度を抑えながらも美しいグラフィックの描画ができるようになりました。

2. AOS

https://michalsnik.github.io/aos/

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

3. PulltoReflesh.js

https://www.boxfactura.com/pulltorefresh.js/

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

4. CSS PIN

https://webkul.github.io/csspin/

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

5. Blueprint

http://blueprintjs.com

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

6. Card

https://jessepollak.github.io/card/

Cardは、vanilla JSをベースとした、インタラクティブなクレジットカード情報入力フォームを実装する JavaScript ライブラリです。
簡単にインストールすることができ、ユーザーにとっても使いやすいマイクロインタラクションで分かりやすい入力フォームを再現することができます。

7. Milligram

https://milligram.github.io

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