JavaScriptのメソッドチェーンの使い方を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptのメソッドチェーンの使い方について解説しています。メソッドチェーンとはメソッドが鎖のように続けて書くことが出来る形のことを言います。自作する場合はオブジェクトをreturnするようにして作成します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptのメソッドチェーンの使い方について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

メソッドチェーンの使い方について詳しく説明していくね!

大石ゆかり

お願いします!

 

メソッドチェーンとは

メソッドチェーンとは、「戻り値が存在する関数(メソッド)をドット(.)で連結し順を追って処理していく書き方」のことを指します。

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

要素や変数に対して、戻り値がある関数を連結していきます。

var str = "met/hod"

str = str.split("/").reverse().join()

console.log(str)

//"hod,met"

上記のようにstrの文字列に対してsplit(分割、配列化)した戻り値を、reverse(反転)した戻り値を、join(結合)してstr変数に代入という書き方をします。

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

配列にフィルターをかけて先頭から3個を表示する

var arr = [0,1,2,3,4,5]

arr = arr.filter(n => n > 1).slice(0,2)

console.log(arr)

// [2,3,4]

 

変数内で関数を作成し、連結させる

var methodChain = {
First: function(){
console.log("1つ目実行");
return this;
},
Second: function(){
console.log("二つ目実行");
return this;
}
}

methodChain .First().Second();

//1つ目実行
//2つ目実行

 

カンマ区切りの文字列から一部分を抽出する

var str = "a,b,c,d,e";

var First = str.split(',').shift();
console.log(First); // a
// 先頭一文字を取得

var Last = str.split(',').pop();
console.log(Last); // e
// 末尾一文字を取得

 

このように、様々な関数をつなぎ合わせて一括で処理をすることで冗長な記述を回避し、行数の削減や可読性向上に役に立ちます。

一般的に多用する手法で、とても便利な書き方なので、ぜひ覚えておきましょう。

筆者プロフィール

この記事を監修してくれた方

水野大輝(みずのたいき)

2014年より、某物流会社のシステム開発担当として入社

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。
現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。