初心者がjQueryをホームページに導入するときの学習サンプルまとめマサト2019/7/232019/10/8jQueryってどうやってホームページに組み込んだらいいの?jQueryを使いこなすコツを知りたいHTMLをjQueryで制御できるようになりたいjQueryを使うとホームページのさまざまなHTMLを自在に制御できるようになるわけですが、一体どこから勉強を始めたら良いのか迷う人も少なくありません。出来ることがたくさんあり過ぎて、逆に何をしたら良いのか分からなくなってしまうわけです。ほんの少しだけコツを掴めば初心者でも簡単に使いこなすことができます。そこで、この記事では初心者でも今日からjQueryをホームページに導入して活用できる方法について分かりやすく解説していきますので、ぜひ最後まで読んで理解を深めて頂ければ幸いです。一人でも多くの方がjQueryの不安を解消できれば幸いです。まとめjQueryの導入この章では、jQueryをホームページに組み込むための基礎知識について見ていきましょう。導入方法とプラグインについて学んでいきます。WebページにjQueryを組み込んでみようjQueryの中身はごく普通のJavaScriptプログラムなので、特別なソフトウェアなどは不要ですぐにブラウザで利用することができます。そのため、HTML内にscriptタグを利用してjQueryのファイルを指定する方法が一般的です。jQueryのファイルは公式サイトから無料でダウンロードできますが、以下のURLを利用することでもホームページに組み込むことができます。CDNhttps://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js上記いずれかのURLをscriptタグで読み込めば良いわけです。ちなみに、【jQuery.js】と【jQuery.min.js】の違いですが、minが付与されているファイルは圧縮版という意味で、改行やコメントなどがすべて削除されたソースコードになります。逆にminが付与されていないファイルは非圧縮版になり、開発中のプロジェクトでよく使われています。理由として、非圧縮版は何らかのエラーが発生した時にjQueryのどの箇所が原因なのかを発見しやすいからです。プラグインを導入するには?jQueryの大きな特徴として、プラグインによる拡張が挙げられます。jQueryでは提供されていない機能でもプラグインを自作することで、機能を強化することができるわけです。プラグインはすでに膨大な種類が提供されており、いずれもホームページを魅力的でダイナミックなものに変えてくれる便利なものばかりです。このようなプラグインを組み込みたい場合ですが、基本的にはjQueryを組み込む場合とほぼ同じです。スライダー機能を強化してくれるSlickというjQueryプラグインを導入する場合を見てみましょう。//jQueryの本体ファイル//jQueryプラグインのファイル注意が必要なのは、最初にjQueryの本体ファイルを読み込まなければいけないという点です。当然ですが、プラグインはjQueryをベースに作られているので先に読み込んでおかないとエラーになってしまいます。プラグインによってはJSファイルだけでなく、CSSファイルも読み込んでおく場合もあるので必ず公式サイトのドキュメントを読むようにしておきましょう。jQueryの必須知識この章では、jQueryを使いこなすためのコツを見ていきましょう。重要なポイントであるセレクタとイベント処理について学んでいきます。セレクタでDOMを制御するセレクタはjQueryの特徴とも言える概念ですが、これはCSSのセレクタとほとんど同じように扱うことが可能です。jQueryの記述方法として以下のパターンがあります。基本的にjQueryは上記のように【セレクタ】と【関数】という組み合わせで構成されており、ほとんどの処理をこの2つで実行できるように設計されています。セレクタの役割としては、どのHTML要素を対象にするか?ということを明確にします。h1要素のテキストを動的に変更したい場合は次のように記述します。$('h1').text('こんにちは');この例では、セレクタとしてh1要素を指定していますね。CSSのセレクタ指定のようにIDやClass属性値なども利用することができます。このセレクタを活用することで、jQueryではHTMLのさまざまな箇所を制御することができるわけです。2019年5月9日イベント処理とは?ホームページを訪問してきたユーザーが、何らかのアクションを行った時に任意の処理を実行することができます。ボタンをクリックした時や画面をスクロールした時など、さまざまなアクションが考えられますが、これらを監視して実行できるのがイベント処理になります。何らかのJavaScriptエラーが発生した時に発動そして、これらのイベント処理を行うのに必須とも言えるメソッドがon()になります。ボタンがクリックされた時に任意の処理を実行するには次のように記述します。})この例では、on()メソッドの第1引数に【click】というイベント名を指定しています。これは、先ほど紹介した表の中にあったイベント名になります。第2引数には実行する処理をまとめた関数を指定します。この例では、コンソールログに指定した文字列を出力するという単純なものです。このようなイベント処理を活用することで、jQueryではリッチなコンテンツを開発してホームページを魅力あるものに変えているわけです。2019年7月11日フォームの制御この章では、ホームページには欠かせないフォーム処理について見ていきましょう。jQueryによるフォームの制御とバリデーションについて学んでいきます。基本的なフォームのコントロールフォーム自体はHTMLのformタグを利用して作成しますが、jQueryではユーザーが入力した値などを取得するのが一般的な使い方でしょう。jQueryで取得した値は、サーバーへ送信したり入力に誤りがないかをチェックするなどさまざまな用途に利用することが可能で、自在にフォームを制御するための重要なポイントになります。ユーザーが入力ボックスにどんな文字列を入れたのかを取得したい場合は次のようになります。$('input[type="text"]').val();この例では、入力ボックスのinput要素に対してval()メソッドを利用することで、入力された文字列を変数resultに格納しています。対象となるinput要素は、もちろんID属性やname属性などで指定しても問題ありません。チェックボックスのような複数選択可能なフォーム部品の値を取得するには、each()メソッドを次のように利用することができます。console.log($(this).val());});この例では、セレクタに【input:checked】を指定していますが、これによりチェックされた要素を自動的にすべて対象要素にすることができます。each()メソッドで繰り返し処理することで、選択された値を取得できるというわけです。簡単なバリデーションの作り方バリデーションは、フォームの入力が意図した通りに行われたかどうかをチェック(検証)することを意味しています。これはjQueryでゼロからプログラムを組んでも良いのですが、便利なプラグインが提供されているのでこちらを利用するのが簡単です。基本的な使い方として、例えば次のようなフォーム要素があるとします。文字列の入力ボックスを必須項目とし、さらにメールアドレスしか入力できないというルールにしてみましょう。基本的な記述方法は次のようになります。//バリデーションのルールを記述する})validate()の引数にオブジェクト形式でルールの設定を記述するだけで利用できます。今回の場合であれば、入力ボックスを必須項目としてメールアドレスのみの入力にします。}});rulesプロパティの中にname属性(mytext)を指定して、そこに【required】【email】プロパティをtrueにするだけです。これで、このフォームのルールが設定されたので、メールアドレス以外の文字列を入力するとエラーが表示されるようになります。2019年6月6日まとめ今回は、jQueryをホームページに組み込んで活用するためのポイントについて学習しました!最後に、もう一度ポイントをおさらいしておきましょう!jQueryはscriptタグでファイルかCDN経由で読み込んで使うセレクタとイベント処理を活用することでHTMLを制御できるフォーム要素の値を取得したりバリデーションを実装できる上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。無料体験レッスンを予約する書いた人マサトフリーランスのIT系ライターを8年従事。侍ブログ編集部としては、これまで270記事以上の記事を執筆。Linuxを3年学習。個人プロダクトのWebメディア・アプリ作成経験あり。