ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

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

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

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

悩み

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

目次
  1. おすすめJavaScriptプラグイン
    1. slick
    2. swiper.js
    3. wow.js
    4. fancybox
    5. ajaxzip3
    6. YubinBango
    7. lazysizes
    8. deSVG
    9. lightgallery.js
  2. まとめ

おすすめ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対応)【jQuery不要】

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が必要です。

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

モーダル・ポップアップを簡単設置! fancyboxの使い方 デモあり【jQuery】

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

公式サイト
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

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】

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

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は不要です。

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

Webサイトを高速化!lazysizes.jsの使い方【遅延読み込み】

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

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...

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

deSVG

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

jQueryは不要です。

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

【deSVG】imgタグのSVGファイルをCSSで色変更する方法【JavaScript】

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

GitHub

benhowdle89/deSVG

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

sachinchoolur/lightgallery.js

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
    

まとめ

おすすめJavaScriptプラグイン、ライブラリを紹介しました。

コーポレートサイトは、よっぽど予算があったり、力をいれているクライアントでなければ、基本パターンが同じになってくるので、一度、使用方法を覚えてしまえば、その後は微修正で使いまわしていけます。

ただ、Webの世界は常に新しい技術がでてくるので、そういったものを見つけたときは積極的に切り替えていかないといけないとは思います。

CSS3アニメーションがだいぶ使えるようになってきたので、できるだけjQueryは使わない、できるだけjavascriptは使わないの方向性でWeb制作していくことがおすすめです。