#はじめに
この記事はGizumoエンジニア Advent Calendar 2015の６日目の記事です。
株式会社Gizumoで、フロントエンドエンジニアの栗原です。
前職は、寿司屋の副店長という全く職種の違うところから３年前にこの世界に飛び込みました。
３社でエンジニアを経験し、半年前まではjQuery、JavaScriptは恐怖でしかなかったのですが、今の会社で師匠（自分が思っているだけw）とも呼べれる人に教えてもらえたことにより、とても楽しくなりました！
そこで、半年前の自分と同じような境遇にいる方に、JSに興味を持ってもらおうと思い、この記事を書いております。
#タイトルの意味
なぜ、タイトルのように、「JSは料理と一緒」と書いているかというと、自分は前職の経験から料理が好きで、よく料理をするのですが、JSもそれに似ているなと思ったからです。
###まず料理は、
（例として「チャーハン」を作る）
１ ー 準備をする
作りたいと思った料理のレシピを見たり、考えたりして、必要な調理器具・食材を選ぶ。
２ ー 下ごしらえ
包丁を使い、人参やお肉を１口大に切ったり、箸でたまごをまぜたり、炊飯器でご飯を準備する。
３ ー 実際に調理する
用意した食材を適切な順番（ここ大事！最初に火が通りにくいもの）で火を通したり、ご飯とたまごをまぜたり、調味料で味を整る。
こんな感じだと思います。（チャーハン作ったことのない方ごめんなさい。。。）
チャーハンの作り方はこちら
###続いてJSは、
１ ー 準備をする
イベントを発火する部分や、データを制御する部分を決めたり、必要な値を記述する。
２ ー 必要な部品を作る
関数を作るための、変数を用意したり、様々なメソッドを使い、使いやすいデータや値にする。
３ ー 実際に実装する
各データを実際に、各関数で動かしていき、最終的にできたものをアウトプットする。
こんな感じだと思います。（JS未熟な僕がこんなこと言ってごめんなさい。。。）
##つまり
料理もJSも、必要なものや行程が似ていると感じています。
食材 ー 変数、値
包丁や調理器具 ー メソッド
調理 ー 関数
みたいな！！！（語彙力がなく申し訳ない。。。）
ですが、半年前の僕は調理にも入ることができていませんでした。。。。
###なぜなら料理は
１ ー 料理を見る
写真や、料理を見てその味を想像します。
２ ー 味を知る
食べて見て、初めてその料理の味を知る。
３ ー 料理をする
作りたいと思ったもののレシピを見たり、考えたりして、必要な調理器具・食材を選び始める。
こんな感じ！
###では、JSは？
１ ー 実装されたUIや機能を見る
モーダルやアコーディオンを見て、「ふ〜ん」って思う。
２ ー どう動いているかを知る
実装がどうなっているか、ソースを読んだりデバッグをして見てみる。
３ ー 実装をする
実装をしたいと思ったものに必要なデータやメソッドを調べ、全体の設計をする
こんな感じなんです！
半年前の自分はJSがどう動いているかを知りませんでした。
つまり、それは料理の味を知らないのと一緒。。。
###だから、半年前の自分とそれに似た状態でJSを怖がっている人に、まずJSの味（デバッグのやり方）を知ってほしいのです！
ここまでで、どんだけ文章使ってるんだ。。。（僕のことを嫌いになってもいいですが、JSと料理のことは嫌いにならないでください。。。）
#いざ！本題！！！
では、実際にデバッグをしてみましょう！
まずは、簡単なページを用意してますので、こちらをChromeで開いてください。
###デバッグツールの表示
まず、ページの何も書いていないところで右クリックを押して、「検証」または「要素の検証」というのを押してください。
すると、画面の右側か下側にソースが表示されます。（以下、デバッグツールと呼ぶ）
これから説明する際、右側にデバッグツールがあるものとして説明しますので、もし下側にある方は、右上の点が３つ並んだものをクリックし、右側が黒くなっている画面のボタンをクリックしてください。
###JSファイルを探す
デバッグツールの上の方に、[Elements],[Console],[Sources],[Network],[Timeline].....などがあると思いますので、[Sources]を押してください。
表示が変わったと思います。
左側に、[css],[js]と書かれたフォルダがあると思います。こちらは、このページで読まれているファイルの一覧になります。
その中から[js]をクリックしてください。
すると、中に[common.js]と[jquery-2.1.4.js]というのがあると思います。
そちらの[common.js]をクリックしてください。
そうすると、[common.js]というタブの中にJSのソースが表示されていると思います。
###チェックボックスを押してみよう
ここで、左側または上に表示されているページ（以下、サイトと呼ぶ）のチェックボックスをどれでもいいので押してください。
そうするとalertで、「○番目のinputがclickされました」と表示されると思います。
そして、[OK]を押すと、今度はデバッグツールの下の方の[Console]という部分に「○番目のinputがclickされました」というのが、表示されていると思います。
このエリアで、表示されているのが「コンソール」と呼ばれ、JS側で呼ぶか、もしエラーなどがあればこちらに表示されます。
###処理を止めてみよう
また上の[common.js]のソースを見てください。
ここには、左側に数字と右側にソースが記述してあると思います。
ここでの数字は行になるのですが、ここの12行目の数字をクリックしてください。（ソースとしては、下記の部分）
this.$target = this.$base.find('.jsc-check-number-count-target');
すると、12の数字にラベルがつきます。
そうしましたら、一度ページをリロードしてください。
すると、さきほど選択した行がハイライトされていると思います。
これは、リロードした時に、JSが処理をしているのですが、選択した行を通った際に、処理を一時停止してくれている状態です。
ここでは、「BLOG.CheckNuber」という処理の中で、[this.$target]を定義しています。
（ここで難しい人も、気にせず先に進んでも大丈夫です。）
###中身を見ていきましょう
ハイライトされている12行目の[this]の上にカーソルを当てて止めてください、（またはドッラグで選択）
そうするとツールチップが出てきました。こちらは、[this]の中身が何かというものになり、上に表示されている[BLOG.CheckNuber]は、thisが指しているもの。その下は、その[BLOG.CheckNuber]に入っている中身になります。
[BLOG.CheckNuber]は、8行目に書いているものになり、
[＄base],[＄input],[＄trigger]が[BLOG.CheckNuber]の中身になります。
あれ、[＄target]は？
ラベルが付いている箇所で、処理が止まるので、[＄target]はこれから動く処理になるため、まだ[BLOG.CheckNuber]の中には入っていないんですね！
###処理を進めてみよう
では、[＄target]の処理を進めましょう。
そのためには、デバッグツールの左下で、水色になっている再生ボタンみたいなものがあると思います。
この右にある飛び越える矢印みたいなボタンを押してみましょう。（以下、Nextと呼ぶ）
すると、ハイライトしている行が一段下がりましたね。
[＄target]の処理が行われたので、もう一度[＄target]の前にある[this]にカーソルを当ててみましょう。すると、先ほどまでなかった[＄target]が増えています！
つまり[＄target]の処理が完了し、[BLOG.CheckNuber]の中に[＄target]が追加されたということになります。
###ジャンプ
さきほど、ラベルをつけると選択の処理で一時停止とお伝えしましたが、ほかの箇所でも止めてみましょう。
続いては、16行目の数字をクリックしてください。（ソースとしては、下記の部分）
this.bindEvents();
16行目にラベルがついたら、今度は、水色になっている再生ボタンみたいなものを押してみましょう。（以下、ジャンプと呼ぶ）
すると、今度は、16行目がハイライトされましたね。
これは、今いる行から次のラベルがついている部分までジャンプするというものになります。
※今回は、わかりやすく下の行にジャンプしましたが、JSのしょりによってはジャンプするのが下とは限りません。
###潜り込む
今、[this.bindEvents();]の行にハイライトされていると思います。
この行は、[this]（BLOG.CheckNuber）の[bindEvents()]という関数を処理しています。
[bindEvents()]という関数は、18行目から処理を記述しいます。
それでは、この[bindEvents()]に潜ってみましょう。
さきほどのNextボタンの右側に下向きの矢印と点がありますので、こちらを押してみましょう。（以下、Intoと呼ぶ）
すると、19行目にハイライトされたと思います。（ソースとしては、下記の部分）
var _this = this;
こちらで、さきほどの[bindEvents()]の関数に入り、最初の処理で止まっている状態となります。
これにより、jsで定義している関数がどんな動きをしているかを見ることができます。
###潜り込む（JQuery）
現在19行目がハイライトしていると思いますが、Nextボタンを押して21行目に進めてください。（ソースとしては、下記の部分）
this.$input.click( function () {
こちらは、[this.＄input]（ページのcheckbox）を[click]した時に動く処理となっています。
ですが、思い出して欲しいのですが、今回はページをリロードしたのみで動いた処理を確認しています。
なので、この処理は実行されないはずです。
今回は試しに、Intoボタンを押してください。
すると、違うファイルに飛びました。
びっくりせずによく見てみると、開いているファイルが[common.js]ではなく、[jquery-2.1.4.js]が開いています。
これは、さきほどの処理の[this]の処理のために、[jquery-2.1.4.js]が動いているということです。
this.$input.click( function () {
もちろん、ここで[jquery-2.1.4.js]を解説するのも、悪くはないのですが、長くなってしまいますので、割愛させていただきます。
###抜け出す
それでは、[this]の処理から抜け出しましょう。
その場合は、さきほどのIntoボタンの横にある、上矢印と点のボタンを押してみましょう。（以下、Outと呼ぶ）
すると、もとの[common.js]に戻ったと思います。
※この際、Outボタンの前に他のNextやIntoボタンなどを押すと、[jquery-2.1.4.js]の中で処理を進めることとなりますので、気をつけましょう。
こちらは、今入っている関数や処理を終わらせているため、もとの[common.js]の[＄this]が終わったところにいます。
###処理が動いているか確認する
[this]から抜け出したので、後続の[＄input.click]というのが呼ばれるのですが、ここで本当にこの[click]のあとの処理に入っていないか、試しにNextボタンかIntoボタンを押してみましょう。
すると関数の中に入らないため、[bindEvents()]の閉じタグにあたる37行目がハイライトされたと思います。
つまり、21行目と27行目の[click]が処理されなかったということになります。
this.$input.click( function () {
this.$trigger.click( function () {
###処理が終わる
ここで、[bindEvents()]の処理が終わったので、もう一度NextボタンかIntoボタンを押すと、17行目に戻ります。
ここまでで、[BLOG.CheckNuber]で最初に呼ばれるものが終わりますので、次はジャンプボタンを押してください。
すると、最初にラベルをつけた部分にもう通らないため、処理が終わります。
###止めたい場所にラベルをつける
最後に、自分が見たい処理にラベルをつけてデバッグをしてみましょう。
例えば、22行目にラベルをつけてください。
var value = $(this).val()
こちらは、上の行に書いてある、[input]を[click]した時に処理が発火します。
this.$input.click( function () {
なので、ラベルをつけたあとに[input]にあたるチェックボタンを押してください。（checkboxはすべて[input]になります）
すると、22行目で見事処理が止まります。
ここで、先ほどまでラベルをつけた9行目と16行目に止まらなかったことに気付きましたか？
なぜかというと、9行目と16行目は最初のリロードのみしか読みこまないためです。
このように、処理を止めたい部分にラベルをつけ、もし止まらなければそこの処理は、発火していないことがわかります。
#まとめ
以上が、デバッグに関する説明とさせていただきます。
本当は、もっと深いものもありますが、今はここまでのデバッグで処理の流れを追ってください。
デバッグで大事なことは以下となります。
１ ー 処理を確認したい行にラベルをつける（行をクリック）
２ ー 変数やオブジェクトには何が入っているのか確認する（カーソルを当てる、またはドラッグ）
３ ー その処理が行われているのか確認する（Nextボタン、Intoボタン）
よかったら、こちらのページで以下の項目や、その他色々と試してみてください。
・consoleとalertで何番目か取得してきている箇所が違う
・30行目と31行目にラベルをつけて[botton]を押すと、それぞれ何回止まるか
※チェックされている数を調べているので、チェックボックスにチェックを入れてから行ってください。
・24行目の[_this]と[＄(this)]は、それぞれ何を指しているのか
_this.lengthConsole($(this));
#さいごに
最後までお読みいただきありがとうございます。
途中、誤字や適切でない文言が使われているかもしれませんが、申し訳ありません。
こちらの記事を読んで、JSに恐怖心をもっている半年前の自分と同じような状況の方がJSに興味を持っていただければと思います。
JSはhtmlやcssと違い、ただ書いてもエラーやイベントが発火しなかったりと、壁は沢山ありますが、実装が完成した時の達成感は、自分を褒めたくなるくらい気持ちいいです。
タイトルの説明にも戻りますが、自分はもともと料理が好きで、JSが料理みたいだなと思えた時に、「JSって楽しいぞ」「もっと知りたい」という気持ちが芽生えました。
JSが苦手な人は、ただ苦手意識を持つだけでなく、自分にあった勉強方法や、別の角度からJSを見てみるのもいいかもしれません。