2020.04.14 2020.07.22

Web制作を効率化したい！よく使うおすすめJavaScript、jQueryプラグイン、ライブラリ 9選

この記事は、最初の投稿から4年以上が経過しています。

最終更新から1583日が経過しています。

Web制作を効率化したい！よく使うおすすめJavaScript、jQueryプラグイン、ライブラリ 9選

「Web制作で動きや機能を簡単にカスタマイズしたい」
「便利なJavaScript､jQueryプラグインを知りたい」

こういった悩みにお答えします｡

目次

おすすめJavaScriptプラグイン
まとめ

おすすめJavaScriptプラグイン

slick

ホームページのトップページのメインスライダーやカルーセルで使用します｡
オプションも多いのでほとんどのコーポレートサイトでこのプラグインを使用しています｡

jQueryが必要です｡

公式サイト: slick

CDN

cdnjs slick-carousel

    //js
    https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js

    //css
    https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css
    https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css

swiper.js

slickと同様､メインスライダー等で使用します｡
jQueryが使えないとか､うまく動かないというシステムでswiper.jsが役に立ちます｡
個人的にはslickに慣れているのであまり使用していませんが､jQueryが不要な分､swiperのほうが動きがなめらかな感じがします｡

jQueryは不要です｡

使い方などの詳細は以下の記事で紹介しています｡

Swiper.jsの使い方、動かないときの対処法(v6.3.2,v5.4.5 + IE11)

Swiperの使い方、動かないときの対処法を知りたいですか？この記事では、jQuery不要のJavaScriptスライダープラグインSwiper.jsの使い方、うまく動かないときの対処法を解説しています。ぜひご覧ください。

公式サイト: Swiper - The Most Modern Mobile Touch Slider

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

CDN

cdnjs swiper

    //js
    https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.3.7/js/swiper.min.js

    //css
    https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.3.7/css/swiper.min.css

wow.js

スクロールと連動したアニメーションをするためのjsプラグイン｡
基本的にanimate.cssとセットで使用します｡
アニメーションのパターンも豊富でanimate.cssで動きを確認しながらオプション設定していけます｡

jQueryは不要です｡

もう少しweb制作の知識がある人であれば､今後は､Intersection Observer APIがおすすめです｡

スクロールアニメーションを実現！Intersection Observer APIの使い方デモあり

Webサイトにスクロールエフェクトを表現するのにどうすればいいか悩んでいますか？この記事ではIntersection Observer APIの使い方を解説します。さまざまなスクロールエフェクトのデモも用意しています。ぜひご覧ください。

公式サイト: wow.js — Reveal Animations When Scrolling

wow.js is a JavaScript plugin that reveals animations when you scroll. Very Animate.css Friend.

公式サイト　(animate.css): Redirecting to Animate.css

CDN

cdnjs wow

cdnjs animate.css

    //js
    https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js

    //css
    https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css

fancybox

写真等を拡大表示させるポップアップ､モーダルウィンドウのためのプラグイン｡
「fancyBox3」にバージョンアップしてから､デザインもよくなり､オプションも増えて､よくなりました｡

jQueryが必要です｡

使い方などの詳細は以下の記事で紹介しています｡

fancybox3の使い方、カスタマイズ例(v3.5) ポップアップ簡単設置【jQuery】

モーダルウインドウ・ポップアップウインドウを簡単に設置したいですか？この記事では、jQueryプラグインfancyboxの使い方を紹介しています。ぜひご覧ください。

公式サイト: Fancybox | Fancyapps UI - Robust JavaScript UI Component Library

Robust JavaScript UI Component Library

CDN

cdnjs fancybox

    //js
    https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js

    //css
    https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css

ajaxzip3

メールフォームで郵便番号から住所を自動入力してくれるプラグインというかライブラリです｡

jQueryは不要です｡

次に紹介するYubinBangoのほうがおすすめです｡

GitHub: GitHub - ajaxzip3/ajaxzip3.github.io

Contribute to ajaxzip3/ajaxzip3.github.io development by creating an account on GitHub.

使い方: ajaxzip3

CDN

    //js
    https://ajaxzip3.github.io/ajaxzip3.js

YubinBango

メールフォームで郵便番号から住所を自動入力してくれるプラグインというかライブラリです｡

「ajaxzip3」を進化させたライブラリで､設定も簡単です｡

jQueryは不要です｡

詳細は以下の記事で紹介しています｡

簡単！郵便番号で住所自動入力！YubinBango.jsの使い方

JavaScriptで郵便番号自動入力できるライブラリをさがしていますか？この記事では「AjaxZip3」よりも簡単に使える「YubinBango」の設定方法を解説します。WordPressプラグイン「 MW WP Form 」「Contact Form 7」のデモも作成しました。ぜひご覧ください。

GitHub: GitHub - yubinbango/yubinbango

Contribute to yubinbango/yubinbango development by creating an account on GitHub.

CDN

    //js
    https://yubinbango.github.io/yubinbango/yubinbango.js

lazysizes

画面に表示されていない画像を遅延読み込みさせるプラグイン｡

jQueryは不要です｡

詳細は以下の記事で紹介しています｡

画像を遅延読み込み！lazysizes.jsの使い方【プラグイン】

画像遅延読み込みプラグイン「lazysizes」の使い方を知りたいですか？この記事では、「lazysizes」の使い方を解説しています。ぜひご覧ください。

GitHub: GitHub - aFarkas/lazysizes: High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.

High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without...

CDN

    //js
    https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js

deSVG

imgタグに指定したSVGファイルをインラインSVGに変換するプラグイン｡

jQueryは不要です｡

詳細は以下の記事で紹介しています｡

SVGをCSSで色変更する！deSVGでインラインSVGに変換！

imgタグのSVGファイルをCSSで色変更したいですか？この記事では、SVGファイルを使うメリット、imgタグのSVGファイルをインラインSVGに変換できるJavaScriptライブラリ「deSVG」の使い方を解説しています。ぜひご覧ください。

GitHub: GitHub - benhowdle89/deSVG: Remove inline SVG bloat from your HTML document

Remove inline SVG bloat from your HTML document. Contribute to benhowdle89/deSVG development by creating an account on GitHub.

CDN

    //js
    https://cdn.jsdelivr.net/npm/desvg@1.0.2/desvg.min.js

lightgallery.js

写真等を拡大表示させるポップアップ､モーダルウィンドウのためのプラグイン｡

jQueryは不要です｡

同じ作者､同じ名前で「lightgallery」のプラグインがあるので､間違えないように注意してください｡
こちらはjQueryが必要です｡

使い方などの詳細は以下の記事で紹介しています｡

lightgallery.jsの使い方！モーダル・ポップアップを簡単設置！【jQuery不要】

モーダルウインドウ・ポップアップウインドウを簡単に設置したいですか？この記事では、JavaScriptプラグインlightgallery.jsのメリット、デメリット、使い方を紹介しています。ぜひご覧ください。

GitHub: GitHub - sachinchoolur/lightgallery.js: Full featured JavaScript image & video gallery. No dependencies

Full featured JavaScript image & video gallery. No dependencies - sachinchoolur/lightgallery.js

デモ: lightgallery.js

A customizable, modular, responsive, lightbox gallery. No dependencies. With tons of features such as thumbnails, youtube, vimeo and html5 videos, touch and drag suppot.. etc

CDN

    // js
    https://cdnjs.cloudflare.com/ajax/libs/lightgallery-js/1.2.0/js/lightgallery.min.js

    // css
    https://cdnjs.cloudflare.com/ajax/libs/lightgallery-js/1.2.0/css/lightgallery.min.css