今回は、「Java Scriptの基礎②」デベロッパーツールでプログラムの実行をログで確認する紹介します。今回紹介するのはJava Scriptでプログラムを書いていくのに必ず覚えなくてはいけない必須なメソッドです。Java Script初心者の方は、初めの方に覚えておくと良いでしょう。
| 難易度（MAX10） | ★★☆☆☆☆☆☆☆☆ |
今回も初心者さんに向けて書いているつもりなので、なるべく端的に理解しやすく書いています。そのため現状は、覚えなくて良い部分などは省略させていただきます。
「Java Scriptの基礎①」プログラムの基本的な書き方と読み込み方は下記から。
プログラムの実行途中の値をログで確認する
プログラムの実行途中の値をログで確認するには、「console.log()」のメソッドを使って、ブラウザのデベロッパーツールのコンソールパネルに打ち込みます。するとブラウザがそのプログラムに添って実行結果を出力して返してくれます。
デベロッパーツールのコンソールパネルは下記の部分にあります。（Chrome）
例えば、下記のJava Scriptファイルを用意しindex.htmlから読み込みます。
const mynameF = 'KT';
const mynameS = 'LIFE';
let number1 = 10;
let number2 = 30;
let number3 = 15;
let sum = number1 + number2;
const fullmyname = mynameF + mynameS;
「console.log(sum)」「console.log(fullmyname)」とデベロッパーツールのコンソールパネルに打ち込みます。
この時に「sum」の答えである「number1 + number2」は「10 + 30」という事です。そしてその答えは「40」なので、そのように出力されたら成功です。「fullmyname」の答えは「KTLIFE」なので、そのように出力されます。
上記を見て頂けたら分かるように、実際の結果に「40」「KTLIFE」と表示されたので成功です。
真ん中のエラーの理由は「console.log(fullname)」と存在しない定数名を指定してしまったためです。（打ち間違えです…）
では試しに、当サイトのファイル内全体を指す「document」を「console.log()」で呼び出してみます。
はい。この様にdocument全体がコンソールに表示されました。＝正常に動作している事がわかります。
このようにして、「console.log()」を使用してプログラムが正常に動作しているかを確かめる事が出来ます。
以上が「【JS必須知識】プログラムの実行中の値をログで確認する方法」でした。
今日はここまでにします。console.logは勉強開始初期から、最後まで一生付き合っていく必須なメソッドです。初めのうちから積極的に使って慣れていきましょう。
