2020年に試してみるべき10の素晴らしいJavaScriptライブラリ

JavaScriptは、Web上で最も人気のある言語の1つです。当初はWebページ専用に開発されましたが、過去20年間で指数関数的に成長しています。

現在、JavaScriptはほとんどすべてのことを実行でき、IoTを含むいくつかのプラットフォームとデバイスで機能します。そして最近のSpaceXDragonの発売により、JavaScriptは宇宙にも存在します。

その人気の理由の1つは、多数のフレームワークとライブラリが利用できることです。従来のVanillaJS開発と比較して、開発がはるかに簡単になります。

ほぼすべてのライブラリがあり、ほぼ毎日、さらに多くのライブラリが出ています。しかし、選択できるライブラリが非常に多いため、各ライブラリを追跡し、ニーズに合わせてどのように調整するかを追跡することが困難になります。

この記事では、次のプロジェクトの構築に使用できる最も人気のある10のJSライブラリについて説明します。

リーフレット

Leafletは、モバイル対応のインタラクティブマップをアプリケーションに追加するための最良のオープンソースライブラリだと思います。

サイズが小さい(39kB)ため、他のマップライブラリよりも検討するのに最適です。クロスプラットフォームの効率性と十分に文書化されたAPIにより、恋に落ちるために必要なすべてが揃っています。

リーフレットマップを作成するサンプルコードは次のとおりです。

var map = new L.Map("map", { center: new L.LatLng(40.7401, -73.9891), zoom: 12, layers: new L.TileLayer("//tile.openstreetmap.org/{z}/{x}/{y}.png") });

Leafletでは、デフォルトではタイルレイヤーがないため、タイルレイヤーを提供する必要があります。しかし、それはまた、無料とプレミアムの両方の幅広いレイヤーから選択できることを意味します。ここでは、さまざまな無料のタイルレイヤーを探索できます。

詳細については、ドキュメントを読むか、チュートリアルに従ってください。

fullPage.js

このオープンソースライブラリは、上記のGIFに示されているように、フルスクリーンのスクロールWebサイトを作成するのに役立ちます。使い方は簡単で、カスタマイズできるオプションもたくさんあるので、何千人もの開発者が使用し、GitHubに3万を超えるスターが付いているのも当然です。

これがあなたが遊ぶことができるCodepenデモです:

次のような一般的なフレームワークで使用することもできます。

  • 反応フルページ
  • vue-fullpage
  • 角度フルページ

私は約1年前にこの図書館に出会い、それ以来、私のお気に入りの1つになりました。これは、ほぼすべてのプロジェクトで使用できる数少ないライブラリの1つです。まだ使い始めていない場合は、試してみてください。失望することはありません。

Anime.js

そこにある最高のアニメーションライブラリの1つであるAnime.jsは、柔軟性があり、使いやすいです。これは、プロジェクトに本当にクールなアニメーションを追加するのに役立つ完璧なツールです。

Anime.jsは、CSSプロパティ、SVG、DOM属性、JavaScriptオブジェクトとうまく連携し、アプリケーションに簡単に統合できます。

開発者として、優れたポートフォリオを持つことが重要です。人々があなたのポートフォリオに対して抱く第一印象は、彼らがあなたを雇うかどうかを決めるのに役立ちます。そして、ポートフォリオに命を吹き込むために、このライブラリよりも優れたツールはありません。それはあなたのウェブサイトを強化するだけでなく、実際のスキルを披露するのに役立ちます。

詳細については、このCodepenを確認してください。

Codepenの他のすべてのクールなプロジェクトを確認するか、ここでドキュメントを読むこともできます。

Screenfull.js

プロジェクトにフルスクリーン機能を実装する方法を探しているときに、このライブラリに出くわしました。

If you also want to have a full-screen feature, I would recommend using this library instead of Fullscreen API because of its cross-browser efficiency (although it is built on top of that).

It is so small that you won't even notice it – just about 0.7kB gzipped.

Try the Demo or read the Docs to learn more.

Moment.js

Working with date and time can be a huge pain, especially with API calls, different Time Zones, local languages, and so on. Moment.js can help you solve all those issues whether it is manipulating, validating, parsing, or formatting dates or time.

There are so many cool methods that are really useful for your projects. For example, I used the .fromNow() method in one of my blog projects to show the time the article was published.

const moment = require('moment'); relativeTimeOfPost = moment([2019, 07, 13]).fromNow(); // a year ago 

Although I don't use it very often, I am a fan of its support for internationalization. For example, we can customize the above result using the .locale() method.

// French moment.locale('fr'); relativeTimeOfPostInFrench = moment([2019, 07, 13]).fromNow(); //il y a un an // Spanish moment.locale('es'); relativeTimeOfPostInSpanish = moment([2019, 07, 13]).fromNow(); //hace un año

Read the Docs here.

Update September 2020: Moment.js has entered maintenance mode. Read more about it here. You may want to explore alternatives such as Day.js or date-fns.

Hammer.js

Hammer.js is a lightweight JavaScript library that lets you add multi-touch gestures to your Web Apps.

I would recommend this library to add some fun to your components. Here is an example to play with. Just run the pen and tap or click on the grey div.

It can recognize gestures made by touch, mouse and pointerEvents. For jQuery users I would recommend using the jQuery plugin.

$(element).hammer(options).bind("pan", myPanHandler);

Read the Docs here.

Masonry

Masonry is a JavaScript grid layout library. It is super awesome and I use it for many of my projects. It can take your simple grid elements and place them based on the available vertical space, sort of like how contractors fit stones or blocks into a wall.

You can use this library to show your projects in a different light. Use it with cards, images, modals, and so on.

Here is a simple example to show you the magic in action. Well, not magic exactly, but how the layout changes when you zoom in onthe web page.

And here is the code for the above:

var elem = document.querySelector('.grid'); var msnry = new Masonry( elem, { itemSelector: '.grid-item', columnWidth: 400 }); var msnry = new Masonry( '.grid'); 

Here is a cool demo on Codepen:

Check out these Projects

  • //halcyon-theme.tumblr.com/
  • //tympanus.net/Development/GridLoadingEffects/index.html
  • //www.erikjo.com/work

D3.js

If you are a data-obsessed developer then this library is for you. I have yet to find a library that manipulates data as efficiently and beautifully as D3. With over 92k stars on GitHub, D3 is the favorite data visualization library of many developers.

I recently used D3 to visualize COVID-19 data with React and the Johns Hopkins CSSE Data Repository on GitHub. It I was a really interesting project, and if you are thinking of doing something similar, I would suggest giving D3.js a try.

Read more about it here.

slick

Slick is fully responsive, swipe-enabled, infinite looping, and more. As mentioned on the homepage it truly is the last carousel you'll ever need.

I have been using this library for quite a while, and it has saved me so much time. With just a few lines of code, you can add so many features to your carousel.

$('.autoplay').slick({ slidesToShow: 3, slidesToScroll: 1, autoplay: true, autoplaySpeed: 2000, });

Check out the demos here.

Popper.js

Popper.js is a lightweight ~3 kB JavaScript library with zero dependencies that provides a reliable and extensible positioning engine you can use to ensure all your popper elements are positioned in the right place.

It may not seem important to spend time configuring popper elements, but these little things are what make you stand out as a developer. And with such small size it doesn't take up much space.

Read the Docs here.

Conclusion

As a developer, having and using the right JavaScript libraries is important. It will make you more productive and will make development much easier and faster. In the end, it is up to you which library to prefer based on your needs.

These are 10 JavaScript libraries that you can try and start using in your projects today. What other cool JavaScript libraries you use? Would you like another article like this? Tweet and let me know.