JavaScriptを使用する上では必須学習項目のconsole.logに関する内容をまとめてみました。
console.logの機能概要
Javascriptでコーディングしている際に、どのタイミングで変数にどんな文字列や数値が入力されているか確認したいと思ったことはないでしょうか?
JavaScriptは数値入力しても文字列認識をして数値計算が想定通り行かないことがよくあります。
そんなときにconsole.logは役に立ちます。
例えば、以下のコード、、、
console.logの使い方
JavaScriptタブ内で出力結果を確認したいところにconsole.logを入れると出力結果を確認することができることがわかりました。
では、実際にどのように確認するのかを説明していきます。
先ほどご紹介したサンプルコード内のconsole.logを、今回はChromeに出力させてみます(Firefox,Edge,Safariでも可能)。
まず、Wordpressの投稿ページあるいは固定ページ内で『カスタムHTML』ブロックを作成し、console.logを含むjsコードを入力してください。
その後、プレビューあるいは更新ボタンを押して投稿ページに遷移してください。
ここから使用している環境によってやり方が変わります。
- WindowsPC: F12開発者ツール
- Android: こちらで詳細説明
WindowsPC
WindowsPCの場合、F12キーを押してコンソールを表示させます。コンソールはF12キーを押すと表示される部位のことです。
その後、Console(コンソール)と書かれたタブをクリックして見てください。
サンプルコード内で、イベントなしのところに記載したconsole.logは出力結果が表示されています。
イベントを発火させると、発火させた際に出力されるconsole.logの出力結果が表示されます(条件付き表示のconsole.logもあるというだけです)。
この一連の動作確認によって、JavaScriptのコーディングが非常に簡単になります。
スマホ版(Android)
jQueryで簡易実装
投稿ページあるいは固定ページのカスタムHTMLに以下のコードを挿入し、console.logで出力結果を調べてみましょう。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
// 上記、jQueryを使えるように読みこむ（他で読み込んでいれば不要です）
<script>
//console.logイベントが発火した時に処理を実行
window.console.log = text => {
// 初回は表示用の要素を作成
if (!$('#console').length) {
// 画面下部に固定表示する
$('<div id="console"></div>')
.appendTo($('body'))
.css({
position: 'fixed',
bottom: 0,
left: 0,
width: '100%',
height: '100px',
padding: '8px',
background: 'rgba(0,0,0,0.7)',
fontSize: '10px',
color: '#fff',
zIndex: 1000000
});
}
//consoleに本来出力される内容を表示していく
$('#console').prepend(`${text}<br>`);
};
</script>アプリ
ちなみに、テキストエディタ(VS Code)を用いても確認することはできます。
コメント