・jQueryのメソッドチェーンの書き方
・そもそもjQueryの基本的な書き方
・jQureyのコードをシンプルで綺麗に洗練した書き方
そんな事について知りたいヨ。
わかりました。
jQueryで複数の命令をまとめて記述する「メソッドチェーン」について、サンプル付きで分かりやすく解説するよ！
複数の命令をまとめて記述できる便利な「メソッドチェーン」。
本記事では、jQueryの「メソッドチェーン」の書き方をサンプル付きで分かりやすく解説しています。
jQueryの書き方を忘れてしまった時の備忘録として、勉強中の方はjQueryを便利で綺麗に書く為の基本的な書き方の参考としてご活用ください。
目次
jQueryのメソッドチェーン – 複数の命令をまとめて記述する
- メソッドチェーンとは複数の命令をまとめて記述する事。
- 命令と命令をドット（.）でつなげる。
- 短く記述できる＆処理速度もアップする。
メソッドチェーンとは？
メソッドチェーンとは、
「メソッド（操作を定義したもの）」を「チェーン（連鎖）」させます。
つまり、
2つ以上の複数の命令をまとめて実行する様に記述する方法です。
具体的な例をあげると、
【1. 命令をそのまま書いた例】
$(‘p#konnitiha’).before(‘<p id=”ohayou”>おはよう！</p>’);
$(‘p#konnitiha’).after(‘<p id=”konbanha”>こんばんは！</p>’);
↓
【2. メソッドチェーンを使ってまとめて書いた例】
$(‘p#konnitiha’).before(‘<p id=”ohayou”>おはよう！</p>’).after(‘<p id=”konbanha”>こんばんは！</p>’);
上記は”konitiha”というidが付けられたpタグに対して、前後に「おはよう！」、「こんばんは！」と追加する２つのjqueryの命令が書かれています。
【1. 命令をそのまま書いた例】、【2. メソッドチェーンを使ってまとめて書いた例】どちらも実行すると同じ結果が得られます。
この様に命令をつなげてまとめて記述する事を「メソッドチェーン」といいます。
jQuryのメソッドチェーンの書き方は？
jQueryのメソッドチェーンは、命令と命令を「.（ドット）」でつなげて書きます。
メソッドチェーンを使うメリット
「同じ結果になるんだったら、使っても使わなくてもどっちでもいいじゃん…。」
となるかもしれませんが、メソッドチェーンを使う事は次の様なメリットがあります。
- 入力の手間を減らせる。
- 短くシンプルな分かりやすいコードにできる。
- 処理速度が上がる。
特に、重くなりがちなjQueryを使ったページの処理速度が上がるという事は重要です。
ページの表示速度が上がれば、ページが重い事での無駄に見ている方が離脱するのを防ぐ事もでき、SEO、検索順位の改善も期待できます。
メソッドチェーンを使ったコードサンプル
メソッドチェーンを使ってない書き方
メソッドチェーンを使った書き方
メソッドチェーンを使ってない書き方と、メソッドチェーンを使った書き方のサンプルです。
どちらも同じ出力結果を得る事ができます。
「こんにちは！」
と表示されるhtmlのWebページに、スクリプトで前後に
「おはよう！」
「こんばんは！」
が表示される追加をしています。
最終的には、
「おはよう！」
「こんにちは！」
「こんばんは！」
と表示されるページになります。
実行用サンプル
See the Pen
jqyery_methodchain_sample by koganesan (@koganesan)
on CodePen.
（※スマホでご覧の方は、デモ右上のロゴマークをクリックしたリンク先より確認していただく事ができます。）
実行用サンプルは、上記コードサンプルを元に、ボタンを押す事で各スクリプトが事項される様にカスタマイズしたものです。
ボタン1（通常記述）、ボタン2（メソッドチェーン版）、どちらも同じ実行結果が得られる事を確認してみてください。
まとめ
jQueryのまとめて指定する「メソッドチェーン」の書き方を、なるべく分かりやすい様に実行サンプル付きでまとめてみました。
jQueryの書き方の確認用、現在勉強中の方や、どんな事ができるか知りたい方の参考としてご活用いただけれれば幸いです。
「Webデザインやプログラミングに興味はあるんだけど、本を読んでてもちんぷんかんぷんでできる気がしない…。」
無料体験コース開催中！オンラインプログラミングスクール「TechAcademy」
僕もそうでしたが、Webデザインやプログラミングは、最初の基礎を身につけるまでが本当に一番大変です。
ただ、キチンとした基礎を身につける事ができれば、あとは独学でも様々な言語に手を広げていく事ができます。
今の時代、YoutubeやWebに無料の有益な情報もたくさんあるので、しっかりとした目標を見定めて勉強すれば独学も不可能ではないです。
ただ、ネットは有益な情報もあれば微妙な情報も混在しているので、どうしても回り道になったり独特なやり方が身についてしまったり、といったデメリットもあります。
僕も最初は独学でプログラミングスキルを身につけようとして何度も挫折してきました。
もし独学で苦戦しているなら、最初はスクールの力を借りるのも１つの選択肢です。
「最短でプログラミングスキルを身に付けたい。」
「間違いのない、しっかりとしたプログラミングの基礎を勉強したい。」
「一緒に切磋琢磨できるプログラミング仲間が欲しい。」
「スキルを活かした場所や時間にとらわれない新しい時代の生き方をしたい。」
そういった方は、実績のあるオンラインスクールを一度無料体験してみることをオススメします。
プログラミングのオンラインスクールも探せば色々選択肢があります。
その中でも圧倒的な知名度を誇るTechAcademyは、日本e-Learning大賞プログラミング教育特別部門賞の受賞実績があり、今なら無料体験コースがあります。
無料コースを試してみてやめるもよしですし、手応えを感じれば、まずはその勢いで基礎を固める事を目指してみるのもアリです。
まずは１つの言語の基礎をしっかり身に着ける事ができれば、様々なプログラミング言語の習得の難易度も一気に下がります。
スキルは奪われないし裏切りません。
その中でもプログラミングスキルは将来に希望もあり、単純にできる様になるととっても楽しい上に、人生の助けにもなります。
登録は5分もあれば十分できます。独学で行きづまったり、モチベーションが保てず挫折した経験のある方は、とりあえずTechAcademyの無料で学習できるチャンスを活用してみることをオススメします。
無料体験コース開催中！オンラインプログラミングスクール「TechAcademy」
