✅ console.logとは

主に変数の中身を見る操作（デバッグ）で使います。

const someString = "文字列";

console.log(someString);
// 文字列

上記のコードなどのように簡単な場合にはデバッグが必要ない場合もありますが、実務やアプリ開発では、データベースから取得したデータやサーバーサイドから受け取ったデータの中身を確認しながら進めることが多いため、console.log は非常に便利です。

実際、デバッグを行わずに実装を進めるのは難しいことは多いです。

※ 実務などではデバッグができない状態で開発をしなければいけないようなシーンもたまにあります

✅ 例

数値をデバッグ

const number = 1;

console.log(number);
// 1

文字列をデバッグ

const string = "1";

console.log(string);
// "1"

配列をデバッグ

const array = [1,2,3];
console.log(array);

// [1,2,3]

✅ 練習

実際に真似しながら打ち込んでみましょう。

数値のデバッグ

const num1 = 123;
console.log(num1);
// 123;

const num2 = 2345;
console.log(2345);
// 2345

const num3 = num1 + num2;
console.log(num3);
// 2468

文字列のデバッグ

const string1 = "文字列1";
console.log(string1);
// 文字列1

const string2 = "文字列2";
console.log(string2);
// 文字列2

const string3 = "aiueo" + "kakikukeko";
console.log(string3);
// aiueokakikukeko

真偽値のデバッグ

const bool1 = true;
console.log(bool1);
// true

const bool2 = false;
console.log(bool2);
// false

const bool3 = true || false;
console.log(bool3);
// true

cconst bool4 = true && false;
console.log(false);
// false

配列のデバッグ

const array1 = [1,2,3];
console.log(array1);
// [1,2,3]

const array2 = [4,5,6];
console.log(array2);
// [4,5,6]

const array3 = [7,8,9];
console.log(array3);
// [7,8,9]

const array4 = [[1,2,3], [4,5,6]];
console.log(array4);
// [[1,2,3],[4,5,6]]

テクニック的なデバッグ

連想配列のkeyとvalueに入れることで、どの変数の値かをわざわざ文字列で出力しなくても分かるようになります。

const number = "123";

console.log({number});
// {number: 123}

console.log(number);
// 123

console.log("numberは", number);
// numberは 123

✅まとめ

• console.logは変数の中身を見るために、デバッグのために利用する

実際に

console.log()

をいろいろな値などを入れて打ち込んでみましょう。