Web制作を効率化したい!よく使うおすすめJavaScript、jQueryプラグイン、ライブラリ 9選
この記事は、最初の投稿から4年以上が経過しています。
最終更新から1577日が経過しています。
「Web制作で動きや機能を簡単にカスタマイズしたい」
「便利なJavaScript、jQueryプラグインを知りたい」
こういった悩みにお答えします。
おすすめ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)
- 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
-
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
-
Full featured JavaScript image & video gallery. No dependencies - sachinchoolur/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
まとめ
おすすめJavaScriptプラグイン、ライブラリを紹介しました。
コーポレートサイトは、よっぽど予算があったり、力をいれているクライアントでなければ、基本パターンが同じになってくるので、一度、使用方法を覚えてしまえば、その後は微修正で使いまわしていけます。
ただ、Webの世界は常に新しい技術がでてくるので、そういったものを見つけたときは積極的に切り替えていかないといけないとは思います。
CSS3アニメーションがだいぶ使えるようになってきたので、できるだけjQueryは使わない、できるだけjavascriptは使わないの方向性でWeb制作していくことがおすすめです。