JavaScriptのconsole.logで値を表示しようKotono2017/7/192019/4/20みなさんこんにちは!Kotonoです。JavaScriptのプログラム、一回で完璧に動作することって少ないですよね。そんな時、何かしらの手段でデバッグをしていると思います。そのデバッグに大活躍のconsole.logってご存知でしょうか?console.logを使用することによって、デバッグをする時などにブラウザのコンソール画面へ任意のメッセージを表示することが可能なんです!ということで今回は、console.logの使い方から、console.logを使ったデバッグ方法までバッチリ解説していきます。console.logはJavaScriptの基本!しっかり覚えて、活用できるようになっちゃいましょう。まとめconsole.logとは?みなさんはconsole.logを使った事がありますか?そもそも、console.logが何か知っていますか?JavaScriptプログラミングにおけるデバッグ方法は様々ですが、圧倒的に利用頻度の高いのが今回ご紹介するconsole.logを使用する方法です。console.logは、引数として設定した値をデバッガーのコンソールに表示する関数です。使い方が非常に簡単な為、JavaScriptプログラミングにおいては鉄板のデバッグ方法と言っても過言ではありません。Chromeでconsole.log()を使う方法それでは、まず最初に「console.log()」を利用するための手順を確認しておきましょう!と言うのも、「console.log()」は何らかの文字列を出力するためのメソッドだからです。その出力先はブラウザに搭載されている「デベロッパーツール」にある「コンソール」と呼ばれる画面なのです。「コンソール」に表示したい内容を出力することで、プログラムが正常に動作しているかなどの確認が行えます。実際にコンソール画面を表示してみましょう!今回はChromeブラウザを利用してみます。(IE、Firefox、Safariなどのブラウザにも同様の機能は搭載されています)任意のWebページを開いてから、「F12キー」または「Ctrl+Shift+I」を押してブラウザのデベロッパーツールを起動させましょう。Consoleと書かれたタブをクリックすると、以下のような「コンソール画面」が表示されます。このコンソール画面内に、変数の値やオブジェクトの中身などを表示することができるのです。今度は、「console.log()」を使って任意の文字列を出力してみましょう!まずは、先ほどご紹介したように任意のWebページを開いてブラウザの「デベロッパーツール」を起動してください。今回は、コンソール画面に「こんにちは」というメッセージを表示させてみます!次のサンプル例を見てください!console.log('こんにちは');このように「log()」の引数に出力させたい文字列を直接記述すればOKです!すると、次のような結果が表示されます!コンソール画面に「こんにちは」という文字列が出力されているのが分かりますね。このように「console.log()」を使うと、JavaScriptプログラムから任意の値や文字を出力できるようになるわけです。Objectや配列を出力する方法console.logを使用して、コンソールにメッセージを出力する方法をご紹介しました。コンソールには、文字列メッセージのみならず、配列やオブジェクトなども表示させることが可能です。以下のコードをご覧ください。"orange"]上記コードでは、簡単な配列を作成しその中身をコンソールに表示させてみました。コンソール画面上の実行結果をクリックすれば、中身の要素が展開されて各要素の「値」や「要素数」などもチェックできるので確認してみてください。次に、オブジェクトをコンソールに表示させてみましょう。以下のコードをご覧ください。"fruit"}上記コードでは、変数「object」に簡単なオブジェクトを作って代入し、それをconsole.logを使って出力できているのが分かりますね。console.logのParametersで文字や数値を挿入する方法console.logの引数は、「Hello」のような文字列や、配列・オブジェクトなどの変数でも構いません。console.logの文字列内に%sや%dなどを使うことで、好きな部分に文字列や数値を挿入することも可能なのです。以下のコードをご覧ください。</body></html>出力結果は以下の通りです。world!」を格納している変数mystringと、数値「1234」を格納している変数mynumberをconsole.logを使用して表示させています。%sとは「文字列として出力する」、%dとは「10進数で出力する」という意味です。console.logの第一引数はこれまで通り表示させたい文字列を設定するのですが、その中に%sや%dなど途中で表示させたい値を挿入します。第二引数は文字列を格納している変数mystring、第三引数には数字を格納している変数mynumberを設定します。注意が必要なのは、途中で挿入した「%s」「%d」の順番通りに、「mystring」「mynumber」の変数を引数に指定しなければいけないという点です。オブジェクトの出力には注意が必要です。以下のコードをご覧ください。</body></html>出力結果は以下の通りです。Object]このように、上記コードのように書くと文字列として出力されて中身が確認できません。その為、以下の書き方を推奨します。"fruit"}上記コードのように、第2引数に当てはめるとうまくオブジェクトが出力されます。「console」APIの一覧これまで「console.log()」について学習をしてきましたが、実は「console」オブジェクトには他にもメソッドが用意されています。オブジェクトが持つプロパティの一覧をリストで出力するこのように「log()」で値を出力するだけでなく、処理の計測や値の構造を出力するなど用途に応じて便利なメソッドがあります。デバッグをする際に必要な情報を得る最適なメソッドを知ることは作業の効率化にも繋がるのでぜひ覚えておきましょう!「console」によるデバッグ「console.count()」によるカウントアップ手法まずは、「カウントアップ」による回数を出力できる「count()」について見ていきましょう!「count()」を利用すると、余計な変数を作らなくても処理が何回実行されたのかを確認できるようになります。)】のように引数へカウントアップ用の名称を付与します。5この例では、for文の中で「count()」を実行しているのがわかりますね。実行結果を見ると分かりますが、for文が実行された回数分だけcount()も実行されています。count()は実行される度にカウントアップしていくので最後の数値を見ると回数が分かるわけです。2この例では、for文の繰り返し回数が「1」と「4」の時だけ別の「count()」を実行しています。「count('one')」と「count('two')」それぞれの回数が別々にカウントアップされているのが実行結果からも分かりますね。次に、「time()」によって処理に掛かる時間を計測することで、パフォーマンスを調べる方法について学習します!「time()」はもう1つのメソッド「timeEnd()」とペアで利用することで、処理に掛かる時間を計測できます。計測したい処理を「time()」〜「timeEnd()」の間に挿入するようなイメージに近いでしょう。】のように引数へラベル名を記述します。1.7919921875msこの例では、for文を1000回繰り返す処理に掛かる時間を計測しています。今回は「time('plusAll')」のようにラベル名として「plusAll」という名称にしています。重要なのは「timeEnd()」のラベル名も同じ名称にする必要がある点です!これにより、実行結果には自動的に計測された時間が出力されているのが確認できますね。今度は、オブジェクトが持つプロパティをリスト化して構造を確認できる「dir()」について見ていきいましょう!「dir()」を使うと、例えばJavaScriptで取得したDOM要素がどのようなプロパティを持っているのか簡単に確認できます。次のようなp要素があるとします。id="text">こんにちは</p>このp要素を普通に取得してコンソールに出力すると次のようになります。id="text">こんにちは</p>実行結果を見てみると、単純に取得したp要素をそのまま出力していますよね。Notationの頭文字4つです。JavaScriptオブジェクトを統一した方法で記述するために生まれたものです。ここでは、JSON.stringifyというメソッドを活用して、オブジェクトやJSONの中身をそのままコンソールに出力する方法を解説したいと思います。JSON.stringifyとは、引数として指定した値をJSON文字列に変換するメソッドです。先ほどご紹介したように、オブジェクトをコンソールに表示させるにはオブジェクト変数を第二引数に当てはめる必要がありました。JSON.stringifyを使用することで、一行で簡単に同じ結果が得ることができます。</body></html>出力結果は以下の通りです。{"name":"apple","color":"red","type":"fruit"}上記のサンプルコードでは簡単なオブジェクトを作成し、それをJSON.stringifyの引数として当てはめます。JSON.stringifyの戻り値は文字列となり、console.logを使用しコンソールに表示させました。HTMLのpタグにオブジェクトそのものを表示させたい場合も注意が必要です。以下のコードをご覧ください。</body></html>上記のサンプルコードでは、getElementByIdで抽出したpタグのinnerHTMLプロパティの中身を変更し、オブジェクトを表示させています。Object]となってしまいます。JSON.stringify()を使えば、中身が表示されます。以下のコードをご覧ください。</body></html>上記のサンプルコードでは、innerHTMLプロパティの値として、オブジェクトではなくJSON.stringifyの戻り値である文字列を設定しています。以下の画像をご覧ください。このように、オブジェクトの中身が正常にpタグ内に表示されました!JSONについてはこちらの記事で詳しく解説しているので、ぜひ確認してください。2019年4月23日まとめ今回は、console.logの基本について学びました。console.logはデバッグ方法の中でも鉄板メソッドです。簡単な使用方法が魅力で、使いこなせるととても便利です。プログラムを書いていると、どうしてもバグやエラーを修正する必要があるので、簡単なデバッグ方法を一度習得しておいて損はありません。プログラムのクオリティ向上のためにも、ぜひconsole.logをはじめとした、様々なデバッグ方法を習得してみてくださいね。TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。無料体験レッスンを予約する書いた人Kotonoイタリア在住15年目の22歳です。イタリアの大学で情報科学&応用数学を学んでいます。JavaScriptやPythonについての記事を書いたりしています。