ポンチ絵で理解するプログラミングの最重要概念 〜オブジェクト、変数、デバッガ〜
プログラム自学案内の12回目です。今回は、オブジェクトと変数の関係を簡単に説明したあと、デバッガの使い方を紹介します。過去の記事はこちらです。
モノとオブジェクトと変数
オブジェクトと変数は、前回の記事でとりあげた「関数」と同様、プログラミングでは独特の意味を持つ言葉です。
オブジェクト（Object） とはデータと機能が組み合わさったものです。 そして、変数（Variable）はオブジェクトを名指すものです。オブジェクトがコンピュータの記憶領域のなかにある一方、変数はプログラムのコード上にあります。そして、オブジェクトは現実のモノを擬えていることが多いです。関係をポンチ絵にしてみましたので、まずはイメージを掴んでください。
なお、正確を期すと、上の絵の「document」は本当は変数名ではなく「Windowオブジェクトのプロパティ名」なのですが、絵では正確さを犠牲にして変数扱いしています。
プロパティ、メソッド、引数、戻り値
オブジェクトとはデータと機能が組み合わさったものですが、組み合わされたデータと機能をどのように使えばよいのでしょうか。
プロパティ（property, 属性）が、オブジェクトがもつデータや機能です。これらのプロパティには、コード上は ピリオド(.)＋プロパティ名 でアクセスします。そして、プロパティ名でアクセスできたデータや機能は、これまたオブジェクトだったり関数だったりするのです。
メソッド(method) とは、オブジェクトのプロパティが関数だったとき、その関数のことを言います。
ついでに一気に、関数についての関連用語も説明してしまいましょう。
関数を呼び出す(call) とは関数を使うことを言います。コード上では、カッコを開いて閉じると関数を呼び出すことができます。
引数(ひきすう、argument) とは、関数を呼び出すときに関数に渡すモノのことを言います。コード上では引数はカッコの中に入れます。
戻り値(もどりち、return value) とは、関数が呼び出し元に渡す実行結果で、これもまたオブジェクトのことが多いです。コード上では、関数を呼び出すコードが、そのまま戻り値になります。
たくさん言葉が出てきてしまいました。実例と共に見てみましょう。
document.querySelector('body').appendChild(button);このコードは何をしているか、ということを「オブジェクト」「関数呼び出し」の観点から、先ほどの言葉を使い、分析的に紐解いてみましょう。このコードは、「document」を起点に、芋づるでオブジェクトや機能を手繰り寄せ、使っているのです。
はじめは、抽象的で難解に感じるかもしれませんが、自分でコードを書くのを数こなすうち、じきにこの感覚は身についてしまいます。
変数を自分で定義する
上の例では与えられた名前である「document」からたどる例を説明しましたが、変数を自分で作って、そこからたどることできます。前々回のコードではこの箇所がそれにあたります。
const button = document.createElement('button');つまり、変数の作りかた（オブジェクトの名指しかた）はこうですね。
const 変数名 = (名指し対象のオブジェクト);
なんと、変数名には自分の好きなように名づけて良いのです。ですが、そのコードを他人（未来の自分自身を含む）が読んだとき、分かりやすくなるようにつけるべきです。名づけにはセンスやマナー、モラルが問われます。（この連載記事ではそのコツについて深入りしませんが、プログラミングスキルには、名づけのセンスという文芸的な側面もあるという人もいるのです）
JavaScriptでの最低限のマナーとしては、変数名の最初の文字は、アルファベットの小文字で始める必要があります。これだけは守ってください。 他のマナーについては、「Javascript 変数 命名規約」「命名規則」という言葉で調べてみて下さい。
オブジェクト : 変数 = 1 : N
変数は1つのオブジェクトを指しますが、オブジェクトはいくつの変数から名指しされても構いません。
たとえばこのコード。
function addButton(name) {
const button = document.createElement('button');
button.textContent = name;
document.querySelector('body').appendChild(button);
console.log('ボタンを追加しました');
}
こう書いても同じ動きをします。なぜなら、下のコードでbottonとbotton2は同じオブジェクトを指しているからです。
function addButton(name) {
const button = document.createElement('button');
const button2 = button;
button2.textContent = name;
document.querySelector('body').appendChild(button);
console.log('ボタンを追加しました');
}ふざけようとすれば、いくらでもふざけることが出来ます。
function addButton(name) {
const pumpkin = document;
const ghost = console;
const witch = pumpkin.createElement('button');
const skeleton = pumpkin.querySelector('body');
witch.textContent = name;
skeleton.appendChild(witch);
const candy = 'ボタンを追加しました';
ghost.log(candy);
}結果として同じことをしているコードですが、ふざけた名前の変数を沢山作ったため、内容がとても読み取りづらくなりました。良い子のみんなはマネてはいけない、ふざけたコードを紹介しました。
デバッガ：変数が指すオブジェクトを覗いてみる
デバッガ(debugger)は、プログラムが動いている途中で、変数が指しているオブジェクトが何なのか、確認することが出来る道具です。使ってみない手はないですね。
F12などでDevTools(Chromeの場合)を表示させます。ChromeのDevToolsの場合は、こんな感じで赤い矢印のところをクリックして行きます。
画像では、script.jsの4行目に青い色がつきました。このようにして、「プログラムをここで一時停止させたい！」という場所に色をつけます。一時停止させる場所をブレークポイント(breakpoint) と言います。上の画像では右側に、script.jsの4行目がブレークポイントに設定されたことが表示されています。
ブレークポイントが設定できたところで、「ボタンを増やすためにクリック！」をクリックします。狙い通り、ブレイクポイントでプログラムが止まったはずです。
デバッガの画面は見どころが多いです。
赤い囲みのなかは、ステップ実行、すなわち「今止まっているところから、プログラムをちょっと進める」ためのボタンが並びます。ボタンにマウスをかざすと、Resume... , Step over... , Step into... , Step out... , Step と言う説明がポップアップで表示されます。意味は、それぞれのボタンを押してみて確かめてみることをおすすめします。
ピンクの囲みのところでは、変数にマウスをかざしたらどうなるかを示しています。変数が指しているオブジェクトの中身がポップアップで表示されます。
黄色い囲みのところでは、変数の一覧と、それぞれの変数が指しているオブジェクトが表示されています。
水色の囲みのところでは、コールスタックが表示されています。コールスタック(Call Stack)とは、関数同士の呼び出し-呼び出され関係の積み重なりのことです。プログラム実行中は、関数の中で別の関数が呼び出され、呼び出された関数の中でさらに別の関数が呼び出され、というふうに呼び出しが積み重なってゆくもの。その積み重なりを見ることができるのです。
以上、デバッガには是非親しんで、困ったときに使いこなせるようになってください。
まとめと次回予告
今回は、オブジェクト、変数、デバッガを紹介しました。全ては切っても切れない関係にあるので、一つの記事で一息に紹介してしまいましたが、けっこう盛りだくさんでしたね。
次回は、JavaScriptのバージョンについて触れてみようと思います。