フロントエンドエンジニアなら押さえておきたい！最近登場した注目のJavaScript＆CSSライブラリ10選
- 2017年2月10日
- 725
ライター・コラムニスト。デザインやテクノロジー、マーケティングやライフハック系の記事が得意。2016年からferretでも記事の執筆を開始。Twitterでも面白いWebサービスなどを紹介しています。よろしければそちらもチェックしてみてください。
>> 著者詳細はこちら
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. CSSPIN
https://webkul.github.io/csspin/
CSSPINは、CSSベースのスピナー・ローダーです。
くるくると回るスピナーやローダーはアニメーションが可愛らしいです。
class部分に「cp-spinner」とスピナー・ローダーの種類を選ぶだけで、簡単に実装することができます。
5. Blueprint
BlueprintはWebページで頻繁に使われるReactのUIコンポーネントのコレクションライブラリです。
フォームやボラン、ラベルなど豊富なパーツが揃っているので、Webアプリケーションを構築したいときなどに大活躍します。
SassやLessを使ってカスタマイズを行うこともできます。
6. Card
https://jessepollak.github.io/card/
Cardは、vanilla JSをベースとした、インタラクティブなクレジットカード情報入力フォームを実装するJavaScriptライブラリです。
簡単にインストールすることができ、ユーザーにとっても使いやすいマイクロインタラクションで分かりやすい入力フォームを再現することができます。
7. Milligram
Milligramは、わずか2KBという超軽量なCSSライブラリです。
Bootstrapなどのほかのライブラリとは異なり、Milligram自体にはボタンなどのコンポーネントは含まれていませんが、タイポグラフィやグリッドレイアウトなどの必要なスタイルが収録されているので、ブログサイトなどに活躍しそうです。
8. Eg.js
Eg.jsは、ユーザーインタラクションに特化したコンポーネントを集めた、jQueryベースのJavaScriptライブラリです。
スマートフォンでもよく使うフリック操作をデスクトップでも操作できるようにしたり、無限スクロールを実装できたり、面白い機能を簡単に組み込むことができます。
9. docsify
docsifyは簡単にドキュメンテーションサイトを実装することができるNode.jsベースのJavaScriptライブラリです。
標準で2つのテーマが用意さえており、いくつかの設定をすることでユニークなドキュメンテーションサイトが構築できます。
10. Flexdatalist
http://projects.sergiodinislopes.pt/flexdatalist/
Flexdatalistはテキストボックスの自動予測を実装可能にするjQueryプラグインです。
複数の項目を入力することができるトグルバリューにも対応しています。
まとめ
以上、最近登場した注目のJavaScriptとCSSのライブラリを紹介していきました。
今回紹介したJavaScript・CSSライブラリは、どれも簡単に実装することができます。
ライブラリをうまく活用することで、短い時間で便利な機能を組み込むことができるので、業務を効率化することができます。
今後も便利なフレームワークやライブラリを紹介していきますので、お見逃しなく！