home
twitter
ページトップへ
目次
  • ウェブコンソールとは?
  • JavaScriptでウェブコンソールにログを残す具体的な方法
  • どのような場面で使う?
  • 変数の中身が知りたい時
  • 何かを出力して、結果が知りたい時
  • まとめ
about
categories
page
archive
皇帝ペンギンブログ

2022/08/11 (更新日:2024/07/11)

【JavaScript】ログを残す方法【console.log】

Categories > JavaScriptの基本編
JavaScriptで、ログを残す方法が知りたい。

この記事では、JavaScriptでログを残す方法について解説します。

JavaScriptを使うと、ウェブコンソールと呼ばれる場所に、ログを残すことが可能です。

では、内容へ。

目次
非表示
  • ウェブコンソールとは?
  • JavaScriptでウェブコンソールにログを残す具体的な方法
  • どのような場面で使う?
  • 変数の中身が知りたい時
  • 何かを出力して、結果が知りたい時
  • まとめ

ウェブコンソールとは?

ウェブコンソールとは、デベロッパーツールを開いて、その中の「console」という欄を開くと出てくる画面のことを指します。

単に「コンソール」と呼ばれることも多いです。

画像でお見せします。

consoleを開いた画像

この様に、タブを「Console」に切り替えると出てきますね。

デベロッパーツールって何??とう方は、下の記事をお読みください。

【JavaScript】エラー解決のヒントを発見する方法【デベロッパーツール】

関連記事

JavaScriptでウェブコンソールにログを残す具体的な方法

では、JavaScriptでウェブコンソールにログを残す具体的な方法に入っていきますね。

window.console.log( "Hello" );

この様に、「window」オブジェクトの中の「console」オブジェクトの「log」というメソッドを使うことで、ウェブコンソールにログが残せます。

「window」オブジェクトと「console」オブジェクトは、JavaScriptの組み込みオブジェクトです。

引数に、与えたものが評価されて、ウェブコンソールに表示されます。

コンソールにHelloと表示した。

「Hello」という文字列がしっかり表示されているのが分かります。

評価される、とは?

引数に、与えたものが「評価されて」、ウェブコンソールに表示される、のですが、この評価という意味は何でしょうか?

評価される、とは「計算される、解釈される」のような意味です。

なので変数を引数に与えた時には、その変数の中身がわかりますし、数式を与えた時には、四則演算された後の結果がコンソールに出力されます。

windowは省略可能です。
console.log( "Hello" );

windowオブジェクトは省略可能なので、この様に、単に「console.lgo()」でOKです。

どのような場面で使う?

「console.log()」の使い方がわかったところで、次に気になるのは「それどんな場面で使うの?」という、ところではないでしょうか?

「console.log()」は上手く使うと便利でので、その用途について解説します。

変数の中身が知りたい時

let userState = createUser();

console.log( userState );

関数によって作られたり変更されたりした変数の中身を確認する時に使えます。

何かを出力して、結果が知りたい時

console.log( 23 * 23 );

何かを出力して、その結果が知りたい時などに、さくっと使えるので便利です。

まとめ

JavaScriptでウェブコンソールにログが残す方法の一つは、「console.log()」を使う方法である。

引数に渡したものが、評価されて、コンソールに出力される。

単純な計算結果や、変数の中身が知りたい時に役立つ。

ウェブコンソールとは、デベロッパーツールを開いて、「Console」のタブに切り替えた時に表示される画面である。

初歩的な内容ですが、よく使うし便利なので、使ってみてください!

最後まで読んでくれてありがとうございました!

自分のロゴ!

皇帝ペンギン

全力で、書きます。
少しでもお役に立てたら幸いです。
楽しんで読んで下さい 。-_- 。
よろしくお願いします!

x(旧twitter) youtube
Categories
  • トップへ
  • ITパスポート (1)
  • programming (168)
    • CSSのアニメーション編 (26)
    • CSSのグリッドレイアウト編 (1)
    • CSSのセレクター編 (58)
    • CSSのフレックスボックス編 (1)
    • CSSのメディアクエリー編 (7)
    • CSSの基本編 (34)
    • HTMLのformタグ編 (1)
    • HTMLの基本編 (3)
    • JavaScriptの入門編 (30)
    • JavaScriptの基本編 (5)
    • Web制作をする環境を整えよう! (1)
  • Uncategorized (23)
  • VScode (1)
  • おすすめ商品! (1)
  • クラロワ (2)
  • マーケティング (17)
  • 大学生活 (7)
  • 心理学 (9)
  • 映画 (1)
  • 法学 (4)
  • 経済学 (4)
  • 読書 (7)
Pages
  • プライバシーポリシー
  • 免責事項
  • プロフィール
Archive
  • 2025年3月 (1)
  • 2025年1月 (9)
  • 2024年12月 (13)
  • 2024年11月 (5)
  • 2024年10月 (10)
  • 2024年9月 (15)
  • 2024年8月 (5)
  • 2024年7月 (6)
  • 2024年6月 (5)
  • 2024年5月 (10)
  • 2024年4月 (24)
  • 2024年3月 (11)
  • 2024年2月 (6)
  • 2024年1月 (10)
  • 2023年12月 (4)
  • 2023年11月 (3)
  • 2023年10月 (2)
  • 2023年9月 (3)
  • 2023年8月 (6)
  • 2023年7月 (3)
  • 2023年6月 (8)
  • 2023年5月 (2)
  • 2023年3月 (1)
  • 2023年2月 (1)
  • 2022年10月 (2)
  • 2022年9月 (2)
  • 2022年8月 (8)
  • 2022年7月 (2)
  • 2022年6月 (6)
  • 2022年5月 (9)
  • 2022年4月 (2)
  • 2022年2月 (4)
  • 2021年12月 (1)
  • 2021年11月 (4)
  • 2021年10月 (8)
  • 2021年9月 (14)
  • 2021年8月 (6)
  • 2021年6月 (1)
  • 2021年5月 (2)
  • 2021年4月 (1)
  • 2021年3月 (1)
  • 2021年2月 (2)
  • 2020年10月 (1)
  • 2020年7月 (1)
  • 2020年4月 (1)
  • 2020年1月 (1)
  • 2019年12月 (2)
© Copyright Syuta Chiba, 2019 All Rights Reserved.