初心者でも簡単!jQueryのWeb制作術と自作プラグイン活用法マサト2019/7/302019/7/30jQueryをどのように使いこなしたら良いのかよく分からないプラグインによる機能拡張とはどういうものなのか知りたいjQueryプラグインを自作するにはどうしたらいいんだろうjQueryを使いこなすとWeb制作の効率化にも繋がるわけですが、最初はどのように活用すればいいのか悩むケースも少なくありません。jQueryを使いこなす上で重要なポイントや、機能を拡張できるプラグインについてどこから勉強を始めるのが良いのでしょうか。そこで、この記事では初心者でも今日からjQuery活用のポイントや自作プラグインの作り方について分かりやすく解説していきますので、ぜひ最後まで読んで理解を深めて頂ければ幸いです。一人でも多くの方がjQueryの不安を解消できれば幸いです。まとめjQuery活用のポイントこの章では、jQueryを使いこなす上で重要な要素となる部分について見ていきましょう。セレクタやイベント処理について学んでいきます。セレクタについてjQueryを使いこなす上でもっとも重要となるのが【セレクタ】です。jQueryは対象となるHTML要素を指定してから、どんな処理を行うのかを記述するのが基本パターンになります。このHTML要素を指定するのがセレクタの役割であり、これによりWebページのあらゆる要素を制御できるわけです。h1タグを指定したかったら次のように記述します。)//h1タグをセレクタで指定する$('h1')基本的にはCSSのセレクタ指定とほとんど同じと考えれば理解しやすいのではないでしょうか。上記のようにHTML要素のタグ名をそのまま指定すれば良いわけです。他にも、以下のようにさまざまなバリエーションでセレクタ指定を行うことができます。2019年5月9日イベント処理の使い方イベント処理は、例えばユーザーがボタンをクリックした時や画面がスクロールした時など、何らかのアクションに応じて処理を実行できる仕組みのことです。jQueryではこのイベント処理をon()メソッドを利用することで、簡単に実現できるように設計されています。ボタンがクリックされた時の処理は次のように記述できます。})対象となる要素にon()を実行するだけなのですが、その引数にイベント名として【click】が指定されていますよね?これだけでクリックイベント処理となり、そのあとに続く関数を実行してくれるというわけです。イベント名は他にもたくさん用意されており、例えば【mousedown】を利用するとマウスのボタンが押された時に任意の関数を実行できます。console.log('マウスのボタンが押されました!');});【scroll】を指定すれば、画面のスクロールが始まった瞬間に関数が実行されます。2019年7月11日jQueryプラグインの基本この章では、jQueryの機能を大きく拡張することができるプラグインの存在について見ていきましょう。プラグインの概要や実際の使い方などについて学んでいきます。CSSの制御を簡単に行えるというのが大きな特徴になります。そのため、画面のデザインを効果的に実装するとか、スライダーの機能を効率よく実装する...みたいな何かに特化したWebコンテンツを作る機能は提供されていません。そこで、重要になるのがプラグインの存在です。jQueryはプラグインを自作することが可能で、これにより本来提供されていない機能を簡単に利用できるようになるわけです。jQuery自体はもっとも重要なコア機能だけを提供し、それ以外で必要になる専門的な機能はプラグインで代用するという方法を取っているわけですね。プラグインの組み込み方それでは、実際にjQueryプラグインを使いながらどのように導入していくのかを見ていきましょう。プラグインは何でも良いのですが、例えばフォームの入力に誤りがないかバリデーション(検証)する機能を提供してくれるプラグインを使ってみましょう。各プラグインの公式サイトには、jQueryプラグイン用のJSファイルが提供されています。このファイルをjQuery本体ファイルと一緒に読み込むだけで基本的には利用することができます。注意点としては、あくまでプラグインなのでjQuery本体ファイルのあとに読み込まないと機能しないという点です。プラグインによっては一緒にCSSファイルを読み込むものもあります。ファイルを読み込んだら準備は完了なので、あとはjQueryでプログラミングしていくだけです。この簡単な導入方法のおかげで、プラグインは現在も新しいものがどんどん誕生しているわけです。jQueryプラグインの自作この章では、自分でjQueryプラグインを開発するための基本的な知識について見ていきましょう。プラグイン自作の仕組みや実際の作り方について学んでいきます。プラグインの作り方jQueryプラグインを自分で作るのは何だか難しそう...と思うかもしれませんが、その基本的な仕組み自体は簡単です。プラグインを作るうえでポイントになるのが、標準で提供されている【$.fn】の存在です。$.fnに続けて関数名を指定することで、それがそのままjQueryプラグインになるというのが基本的な考え方です。}もう1つ、重要なポイントがあります。それは【$】がjQueryの関数であることを保証しなければいけないという点です。実は、$というのは他のライブラリでも利用されていることがあり、そうなると$は想定した通りの動きをしないかもしれません。そのため、jQueryプラグインを作るときには以下のようにjQuery関数をプラグインに渡してあげるのが基本です。//ここにプラグインの処理を記述する})(jQuery);簡単なプラグインを作ってみようそれでは、実際に簡単なプラグインを自作してみましょう。作るのは指定したHTML要素の文字サイズを、少しずつアニメーションさせながら大きくするというプラグインです。プラグインの関数名はsizeChange()として、次のように設定してみましょう。};})(jQuery);この3行で、jQueryプラグインの骨組みは完成しています。次に、プラグインの中身を書いていきましょう。言っても文字サイズをアニメーションさせながら大きくするだけなので次のような記述で良いでしょう。};})(jQuery);関数内で利用している【this】は、このプラグインを利用した時に対象となるHTML要素のことになります。このプラグインは外部ファイルとして保存して、通常のプラグインと同様にscriptタグから読み込むようにしましょう。試しに、h1要素のテキストサイズを変更してみましょう。$('h1').sizeChange();これで、アニメーションしながら文字サイズが大きく変更されるはずです。まとめ今回は、jQueryでWeb開発するうえで重要なポイントやプラグインの活用方法について学習しました。最後に、もう一度ポイントをおさらいしておきましょう!jQueryはセレクタ・イベント処理を完璧に理解しておこうプラグインを利用することで機能を大幅に拡張することができるjQueryプラグインは自分でも簡単に開発することができる上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。無料体験レッスンを予約する書いた人マサトフリーランスのIT系ライターを8年従事。侍ブログ編集部としては、これまで270記事以上の記事を執筆。Linuxを3年学習。個人プロダクトのWebメディア・アプリ作成経験あり。