jQuery入門 2020 #08:jQueryのプラグインを npmで使おう

jQueryを利用するメリットの1つが、豊富なプラグインを利用できる点にあります。ここでは、プラグインの見つけ方と、npm(Node Package Manager)を利用したインストール方法を紹介しましょう。

jQueryのプラグインには、フォームの開発を手助けするものや画像周り、アニメーションなど様々なものが開発されています。公式サイトでも、次のようなページが準備されてはいるのですが、現在は運用が停止されています。

これは、プラグインの管理を npm(Node Package Manager)に移行しているためで、新しいプラグインはnpm上で公開されているので、次のように「jquery-plugin」というキーワードで検索をすると良いでしょう。

npmってなに?

npmは、「パッケージ管理ツール」と呼ばれるサービスです。

従来、それぞれの公式サイトなどからダウンロードしてインストールしたり、依存ライブラリーをインストールするなど、手間がかかっていましたが、パッケージ管理ツールを導入することで、コマンドラインツールから手軽にインストールをしたり、依存ライブラリーをまとめてダウンロードすることができます。

Node.jsをインストールしよう

npmを利用するには、JavaScriptツールのNode.jsをインストールする必要があります。次のサイトからダウンロードして、セットアップしておきましょう。

インストールが終わったら、PowerShellまたはターミナルを起動するか、Visual Studio Codeの「ターミナル」機能を利用するとよいでしょう。次のようなコマンドを打ち込みます。

npm -v

これでたとえば「6.12.0」などと画面に表示されていれば、インストールは完了です。「コマンドが見つかりません」といったエラーメッセージが表示される場合は、インストール作業をやり直してみましょう。

npmでプラグインを利用してみよう

それでは、試しに以下の「jquery Mas Plugin」というプラグインを使ってみましょう。フォームのテキストフィールドで、日付の形式だけを入力できるようにするなどの「マスク」を設定できます。

ページの真ん中あたりに「Install it via Package Managers」というエリアがあり、ここにコマンドの例が表示されています。npmの他、Bower, Meteor, Composer等を利用することができます。

それでは、コマンドラインを起動して開発したいディレクトリーに移動して、インストールします。

cd /path/to/
npm i jquery-mask-plugin

インストールされると、「node_modules」ディレクトリーが自動的にできあがり、その中に各ファイルが展開されます。ライブラリーの本体は以下のディレクトリーにインストールされます。

/node_modules/jquery-mask-plugin/dist/jquery.mask.min.js

そしたら、HTMLファイルを準備して、jQueryとこのライブラリーを取り込みましょう。

<script src="jquery.min.js"></script>
<script src="node_modules/jquery-mask-plugin/dist/jquery.mask.min.js"></script>

そして、フォームとテキストフィールドを準備します。

<form action="">
    <input type="text" name="date" class="date">
</form>

そして、次のようなプログラムを作成しましょう。

<script>
$(document).ready(function () {
  $('.date').mask('0000年00月00日');
})
</script>

$(.date)という記述で、「date」というクラス名の要素を取得し、「mask」という新しいメソッドが利用できるようになりました。あとは、パラメーターで書式を指定すると、次のように数字以外が入力できなくなり、自動的にフォーマットが整うようになります。

詳しい使い方は、ドキュメントを参照しましょう。コードの全文は次のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Mask Plugin</title>
</head>
<body>
    <form action="">
        <input type="text" name="date" class="date">
    </form>

    <script src="jquery.min.js"></script>
    <script src="node_modules/jquery-mask-plugin/dist/jquery.mask.min.js"></script>
    <script>
        $(document).ready(function () {
          $('.date').mask('0000年00月00日');
        })
    </script>
</body>
</html>