Zenn
😹

Javascriptのメソッドチェーンの思うこと

2021/01/03に公開
JavaScript
#
初学者
#
メソッドチェーン
#
ﾁｮｯﾄｼｶﾃﾞｷﾅｲ
idea

なんやねんこれわかりづらい！！！！！！！！

ので、ざっっっっっっっっっっっくり まとめる
ﾁｮｯﾄｼｶﾃﾞｷﾅｲタイプ のスキルなので、ﾁｮｯﾄﾃﾞｷﾙ ようになったら更新する予定

前提

  • 使用言語はJavaScriptであること
  • クラス、オブジェクト、プロパティ、メソッド が存在したりしなかったりするらしい
  • 「わかりづらい!!!」が、唐突に現れる(感覚になる)ので、そのときのためのメモ的ドキュメント
  • 2021年1月現在の私のスキル感は1年未満です

存在するオブジェクトやら

公式リファレンス
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference

それと、こちらの本を参考にしています
JavaScriptの絵本
https://www.shoeisha.co.jp/book/detail/9784798151632

いつ使うのか

抽象的なざっくりステップ

  • 変数を定義
  • 走らせる関数を作る
  • htmlとかに連携(サーバーとかにも連携)

メソッドチェーン自体はは、これの、主にどこでも使う（える）。
ただ、適材適所で使用しなきゃいけないので、適したタイミングで適したオブジェクトの適したメソッドを充てがう必要がある(頭痛が痛い)

例えば、「コンソール」で「何かテキスト」を「表示させたいとき」は

console.log("😸 ちゅーる！");

と記述し、ブラウザにリクエストを送れば、開発ツールなどのコンソールに「😸 ちゅーる！」の文字列が表示される。

適した〇〇とはなんぞや

前述した

😸.js
console.log("😸 ちゅーる！");

これなら、「😸 ちゅーる！」を表示させる限定的な場面なので、これ以外に適したタイミングはないと言えるが、

例えば、変数の表示をさせたいとき

neko.js
var Cat = 12345;
console.log(Cat);

など、前提としてCatを変数定義する必要がある。
これもまだ、数値としてでしか定義されていないので、極々単純な記述になる。

だがJavaScriptの柔軟性を長所として活かすにはこういった場面の記述が不可欠になってくる

oyatsu.js
var Tyuru = /* 動的な処理が必要な変数 */ ;
console.log(Tyuru);

ここで頭痛が痛くなってくるし文法的にも危険が危なくなってくる
なぜなら、Tyuruに、適材適所のものを充てがう必要が発生するためだ。

有識者にとっては「目的から逆算すればええやん」となるが、諸学者にとっては逆算できる公約数を持ってないため、逆算しようがない。
足し算を繰り返して、目的地まで着いたら「あ〜〜〜〜これ引き算したり割れるやん」と初めて試行錯誤ができてくる訳である。

話がとても逸れてしまった

○○の場面なら、○○が適してる

「コンソール」に何かを表示させたいときは、「Consoleオブジェクト」で「log」に作用する記述をすれば良い

hotdog.js
console.log("いぬ");

上記の記述では、

  • consoleオブジェクト
  • log()メソッド

のふたつが連動してメソッドチェーンとなっています。
思考停止のように

error_log.js
console.log(/* エラーの炙り出し */);

を積み重ねても良いのですが、冒頭の前提にも書いたように、JavaScriptにはクラス、オブジェクト、プロパティ、メソッド などの概念が存在し、ここで使用した物はこの4つのうちの オブジェクト と メソッド の2つとなります。

「「consoleに何かをする」ために必要なオブジェクト」はconsoleで間違いないことがわかりましたが、「必要な場面で使用する〇〇」を見つける必要があります。

順番としては

  1. コンソールログに表示させたい(方向性を定める)
  2. consoleが作用するメソッドで表示させる的な物はあるか(そもそも要件を満たすことはできるのか)
  3. log()メソッドというものがあるらしい(初見のメソッドはめっちゃ探す or 逆引き本で見つける)
    となるわけだが、例えば仮に私が、「コンソールログに表示させる」という業界的常識のような記述がわからない者だったとしたら、リファレンスにアクセスしたりネットを見るわけだ。

だが考えて欲しい

ざっと数えるだけでもconsoleオブジェクトに付随するメソッドの数は 23個 ある

23個 だ

メソッド 内容
console.assert() 第 1 引数が false であれば、メッセージとスタックトレースをコンソールに出力します。
console.clear() コンソールをクリアします。
console.count() 指定されたラベルでこの行が呼び出された回数をログ出力します。
console.countReset() 指定されたラベルのカウンターの値をリセットします。
console.debug() ログレベルが debug のコンソールへメッセージを出力します。
console.dir() 指定した JavaScript オブジェクトのプロパティの、対話型リストを表示します。このリスト内の三角印をクリックすると、子オブジェクトの内容を調査して表示させることができます。
console.dirxml() 指定したオブジェクトを XML/HTML 要素で表現したものを表示します。表現できない場合は、JavaScript オブジェクトビューを表示します。
console.error() エラーメッセージを出力します。このメソッドでは、文字列置換および追加の引数を使用することができます。
console.exception() error() の別名です。
console.group() 以降の出力を別のレベルにインデントする、新たなインライングループを作成します。レベルを戻すには、groupEnd() を呼び出します。
console.groupCollapsed() 以降の出力を別のレベルにインデントする、新たなインライングループを作成します。group() との違いは、グループが折りたたまれた状態で作られ、それを開くには展開ボタンを操作する必要があることです。レベルを戻すには、groupEnd() を呼び出します。
console.groupEnd() 現在のインライングループから抜けます。
console.info() メッセージタイプのログ情報を出力します。このメソッドでは、文字列置換および追加の引数を使用することができます。
console.log() 一般タイプのログ情報を出力します。このメソッドでは、文字列置換および追加の引数を使用することができます。
console.profile() ブラウザー内蔵のプロファイラー (例えば Firefox のパフォーマンスツール) を開始します。プロファイルの名称を指定することができます。
console.profileEnd() プロファイラーを停止します。結果のプロファイルは、ブラウザーのパフォーマンスツール (例えば Firefox のパフォーマンスツール) で確認できます。
console.table() 表形式のデータを、表を使用して表示します。
console.time() 入力引数で指定された名前のタイマーを開始します。ページあたり最大 10,000 個のタイマーを同時に動かすことができます。
console.timeEnd() 指定されたタイマーを停止して、そのタイマーを開始してからの時間を秒単位でログに出力します。
console.timeLog() 指定されたタイマーの値をコンソールへ出力します。
console.timeStamp() ブラウザのー Timeline やタイムラインツールにマーカーを追加します。
console.trace() スタックトレースを出力します。
console.warn() 警告メッセージを出力します。このメソッドでは、文字列置換および追加の引数を使用することができます。

引用元
https://developer.mozilla.org/ja/docs/Web/API/Console

今回はconsoleオブジェクトのメソッドを例にしてはいるが、Windowオブジェクトなどになると、「扱える場面」が膨大になる。
なぜなら、メソッドの他に「プロパティ」があるからだ。

何が言いたいかというと、

オブジェクト.メソッド(なんやかんやの処理).プロパティ

などのような掛け合わせがいっぱい出来上がるわけだ。
単純な計算でも

1オブジェクト * 10メソッド * 10プロパティ = 100場面 みたいなよくわからない数字になる（よくわからん）

目的地を決める

風呂敷を広げはしたけど、JavaScriptを使うことでのメリットは実際の現場でサービスを運用してる人にとっては計り知れないものだと思う。
ただ、未経験の人にとってはその見えている「ガワ」のイメージが強すぎて二の足を踏むこともある（私がそうである）

まぁ、ただただ教本を写経するのはつらいので、目標を１つや２つや３つや4つやいっぱい決めておいて、やりやすいことからやっていくことが、憶えていく上では重要な気がしてきた（これを書いていて）。

えーと、まとまらない！
おわり！！！

Discussion