デザイン・プログラミングなど

jQuery – まとめて指定「メソッドチェーン」の書き方のアドバイス。分かりやすいデモサンプル付き

【jQuery】まとめて指定「メソッドチェーン」の書き方のアドバイス【分かりやすいデモサンプル付き】
こがねさん
こがねさん
jQueryのメソッドチェーンて、何…?

・jQueryのメソッドチェーンの書き方
・そもそもjQueryの基本的な書き方
・jQureyのコードをシンプルで綺麗に洗練した書き方

そんな事について知りたいヨ。

AIソルトくん
AIソルトくん

わかりました。
jQueryで複数の命令をまとめて記述する「メソッドチェーン」について、サンプル付きで分かりやすく解説するよ!

複数の命令をまとめて記述できる便利な「メソッドチェーン」。

本記事では、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タグに対して、前後に「おはよう!」、「こんばんは!」と追加する2つのjqueryの命令が書かれています。

【1. 命令をそのまま書いた例】、【2. メソッドチェーンを使ってまとめて書いた例】どちらも実行すると同じ結果が得られます。

この様に命令をつなげてまとめて記述する事を「メソッドチェーン」といいます。

 

jQuryのメソッドチェーンの書き方は?

jQueryのメソッドチェーンは、命令と命令を「.(ドット)」でつなげて書きます。

 

メソッドチェーンを使うメリット

「同じ結果になるんだったら、使っても使わなくてもどっちでもいいじゃん…。」

となるかもしれませんが、メソッドチェーンを使う事は次の様なメリットがあります。

  • 入力の手間を減らせる。
  • 短くシンプルな分かりやすいコードにできる。
  • 処理速度が上がる。

特に、重くなりがちなjQueryを使ったページの処理速度が上がるという事は重要です。

ページの表示速度が上がれば、ページが重い事での無駄に見ている方が離脱するのを防ぐ事もでき、SEO、検索順位の改善も期待できます。

 

メソッドチェーンを使ったコードサンプル

メソッドチェーンを使ってない書き方

メソッドチェーンを使った書き方

メソッドチェーンを使ってない書き方と、メソッドチェーンを使った書き方のサンプルです。

どちらも同じ出力結果を得る事ができます。

 

「こんにちは!」

と表示されるhtmlのWebページに、スクリプトで前後に

「おはよう!」
「こんばんは!」

が表示される追加をしています。

最終的には、

「おはよう!」
「こんにちは!」
「こんばんは!」

と表示されるページになります。

 

実行用サンプル

See the Pen
jqyery_methodchain_sample
by koganesan (@koganesan)
on CodePen.

(※スマホでご覧の方は、デモ右上のロゴマークをクリックしたリンク先より確認していただく事ができます。)

実行用サンプルは、上記コードサンプルを元に、ボタンを押す事で各スクリプトが事項される様にカスタマイズしたものです。

ボタン1(通常記述)、ボタン2(メソッドチェーン版)、どちらも同じ実行結果が得られる事を確認してみてください。

 

まとめ

jQueryのまとめて指定する「メソッドチェーン」の書き方を、なるべく分かりやすい様に実行サンプル付きでまとめてみました。

jQueryのまとめて指定する「メソッドチェーン」の書き方を、なるべく分かりやすい様に実行サンプル付きでまとめてみました。

jQueryの書き方の確認用、現在勉強中の方や、どんな事ができるか知りたい方の参考としてご活用いただけれれば幸いです。

 

jQuery入門 - どうやって導入するの?初心者でもできる使い方と準備方法。
jQuery入門 - どうやって導入するの?初心者でもできる使い方と準備方法。jQueryってどうやって使うの?Webサイトをスタイリッシュに動かすJavaScriptライブラリ「jQuery」。初期設定の方法をどんな方でも分かる備忘録としてまとめています。jqueryの初期設定の方法を知りたい。忘れたので確認したい。Webサイトに動きを付けたい。そんな方は是非参考にご覧ください。...
【簡単スッキリ】jQueryでCSSを追加や変更の操作をする方法【jQueryの基本的な書き方が分かります】
簡単スッキリ!jQueryでCSSを変更・追加操作をする方法【jQueryの基本的な書き方】なんか小難しくて、jQueryの書き方がスッキリ分からない…。そんな方へ向けて、jQueryの基本的な書き方として、CSSの指定の仕方を例に簡単、分かりやすく解説しています。jQueryプラグインの設置やカスタマイズでお困りの方は是非参考にご覧ください。...
jQueryのHTML・CSSを操作する命令一覧と使い方【サンプル付きで瞬時にわかる!】
jQueryのHTML・CSSを操作する命令一覧と使い方【サンプル付きで瞬時にわかる!】jQueryのHTML・CSSを操作する命令一覧や、基本的な使い方が分かる記事をお探しですか?本記事ではわかりやすい実行サンプル付きで、jQueryの命令一覧と基本的な使い方を解説しています。書き方の確認や使い方の勉強用としてご覧ください。...
【無料】プログラミングなんて自分にできるの?一番簡単に最短でスキルを身に着ける方法。
こがねさん
こがねさん

「Webデザインやプログラミングに興味はあるんだけど、本を読んでてもちんぷんかんぷんでできる気がしないゾ…。」

AIソルトくん
AIソルトくん
最初はプログラミングスクールの力を借りるのも1つの選択肢だよ。

無料体験コース開催中!オンラインプログラミングスクール「TechAcademy」

僕もそうでしたが、Webデザインやプログラミングは、最初の基礎を身につけるまでが本当に一番大変です

ただ、キチンとした基礎を身につける事ができれば、あとは独学でも様々な言語に手を広げていく事ができます

今の時代、YoutubeやWebに無料の有益な情報もたくさんあるので、しっかりとした目標を見定めて勉強すれば独学も不可能ではないです。
ただ、ネットは有益な情報もあれば微妙な情報も混在しているので、どうしても回り道になったり独特なやり方が身についてしまったり、といったデメリットもあります。

僕も最初は独学でプログラミングスキルを身につけようとして何度も挫折してきました。

もし独学で苦戦しているなら、最初はスクールの力を借りるのも1つの選択肢です。

「最短でプログラミングスキルを身に付けたい。」
「間違いのない、しっかりとしたプログラミングの基礎を勉強したい。」
「一緒に切磋琢磨できるプログラミング仲間が欲しい。」
「スキルを活かした場所や時間にとらわれない新しい時代の生き方をしたい。」

そういった方は、実績のあるオンラインスクールを一度無料体験してみることをオススメします。

プログラミングのオンラインスクールも探せば色々選択肢があります。

その中でも圧倒的な知名度を誇るTechAcademyは、日本e-Learning大賞プログラミング教育特別部門賞の受賞実績があり、今なら無料体験コースがあります。

無料コースを試してみてやめるもよしですし、手応えを感じれば、まずはその勢いで基礎を固める事を目指してみるのもアリです。
まずは1つの言語の基礎をしっかり身に着ける事ができれば、様々なプログラミング言語の習得の難易度も一気に下がります。

スキルは奪われないし裏切りません。
その中でもプログラミングスキルは将来に希望もあり、単純にできる様になるととっても楽しい上に、人生の助けにもなります。

登録は5分もあれば十分できます。独学で行きづまったり、モチベーションが保てず挫折した経験のある方は、とりあえずTechAcademyの無料で学習できるチャンスを活用してみることをオススメします。

無料体験コース開催中!オンラインプログラミングスクール「TechAcademy」

 

関連記事