JavaScriptの console.group, groupEnd, groupCollapsed, time, timeEnd, timeLog の使い方

consoleGroup

SHARE

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、JavaScriptの console.group, groupEnd, groupCollapsed, time, timeEnd, timeLog の使い方について解説していきます。

console.group() と console.groupEnd()、console.groupCollapsed() の使い方

console.group()は、console オブジェクトのメソッドの1つで、console.group()実行以降の console出力をグループ化する機能を持っています。

そして、この console出力のグループ化は、console.groupEnd()が実行されるまで続きます。

ちなみに、console.groupCollapsed()も実行以降の console出力をグループ化する機能を持っています。

console.group()とconsole.groupCollapsed()の違いは、

次のように、console 内の Log 出力が次のように、最初からOpenになっているか、Closeされているかの違いだけです。

上記の Cosole上の出力は、次の SampleCodeを実行したものです。

/**
 * console.group(), groupEnd(), console.groupCollapsed() の使い方
 */

const dataSetList = [
  { order: 1, val: "Robotama" },
  { order: 2, val: "Saitama" },
  { order: 3, val: "Tama" },
  { order: 4, val: "Hakutou" },
  { order: 5, val: "Momo" },
];

const targetVal = "Saitama";

const updateData = { order: 2, val: "Gunmar" };

// 1. console.group() で、Console出力のグループを定義・開始する
// => 最初から、Openされている
console.group("console.group Test");

console.log("group 内の Log");

const updateTargetIndex = dataSetList.findIndex(
  (dataSet) => dataSet.val === targetVal
);
console.log("updateTargetIndex", updateTargetIndex);

if (updateTargetIndex !== -1) {
  dataSetList.splice(updateTargetIndex, 1, updateData);

  console.log("dataSetList", dataSetList);
}

// 2. console.groupEnd() で、Console出力のグループ出力を終了させる。
console.groupEnd();

// 3. console グループ外の Log
console.log("group 外の Log");

// 4. console.groupCollapsed() で、Console出力のグループを定義・開始する
// => 最初は、Closeされている
console.groupCollapsed("console.groupCollapsed Test");

console.log("Open しないと 見れない Log_1");
console.log("Open しないと 見れない Log_2");
console.groupEnd();

console.groupCollapsed()のグループの Logは、console.groupCollapsed()の部分の出力行をクリックすれば、展開してグループ内の Logを確認することができます。

画像に alt 属性が指定されていません。ファイル名: console_grouping2.png

console.group()とconsole.groupCollapsed()どちらを採用するかは、その人の好みによるかと思います。

console.time() と console.timeEnd()、console.timeLog() の使い方

console.time()は、console オブジェクトのメソッドの1つで、console.time()実行から、console.timeEnd()を実行するまでの処理時間を測定 & 出力する機能を持っています。

関数などの処理群の時間を測定するに向いている機能です。

また、console.timeLog()を使用することで、次のように処理途中での経過時間を出力することもできます。

上記の Cosole上の出力は、次の SampleCodeを実行したものです。

/**
 * console.time(), timeEnd(), timeLog() の使い方
 */

const cardList = [
  { id: 1, participant: "ロボたま", affiliation: "ロボ玉開発部" },
  { id: 2, participant: "まりたま", affiliation: "エンジニア" },
  { id: 3, participant: "白桃", affiliation: "エンジニア" },
  { id: 4, participant: "ももちゃん", affiliation: "人事部" },
  { id: 5, participant: "まさぴょん", affiliation: "営業部" },
  { id: 6, participant: "まりぴょん", affiliation: "デザイナー" },
  { id: 7, participant: "ハム太郎", affiliation: "エンジニア" },
  { id: 8, participant: "ロボ太郎", affiliation: "ロボ玉開発部" },
  { id: 9, participant: "まり太郎", affiliation: "デザイナー" },
  { id: 10, participant: "ぷる玉", affiliation: "エンジニア" },
  { id: 11, participant: "ロボ玉試作1号機", affiliation: "営業部" },
];

/** 指定した数値ごとに配列を区分け・分割する Function */
function ArrayGrouping(list, groupingNum) {
  console.group("ArrayGrouping_処理時間測定");

  // 1. timeEnd('test_timer') するまでの処理時間の測定を開始する
  console.time("test_timer");
  let len = list.length;
  let curentNum = 0;
  const separateList = [];
  let tmpList = [];

  console.log("途中の時間は、console.timeLog() で確認できる");

  // 2. test_timer の処理途中での経過時間を出力する
  console.timeLog("test_timer");

  list.forEach((item, index) => {
    curentNum = index + 1;
    tmpList.push(item);
    if (curentNum % groupingNum === 0) {
      separateList.push(tmpList);
      tmpList = [];
    }
    if (len === curentNum) {
      if (!tmpList.length) return;
      else separateList.push(tmpList);
    }
  });
  console.log("ArrayGrouping_処理完了");
  // 3. test_timer の処理時間の測定を終了する
  console.timeEnd("test_timer");
  console.groupEnd();
  return separateList;
}

console.log(ArrayGrouping(cardList, 2));

console.group() によるグループ化のメリットは、logの可読性の向上

console.group()によるグループ化のメリットは、Debugなどで log出力をする際に、log に所属グループを持たせることによる logの可読性の向上です。

次のように、logがグルーピングされていると、すべての logが並列に出力されているよりも可読性が向上します。

上記の Cosole上の出力は、次の SampleCodeを実行したものです。

/**
 * console.group(), groupEnd(), console.groupCollapsed() の使い方
 */
const dataSetList = [
  { order: 1, val: "Robotama" },
  { order: 2, val: "Saitama" },
  { order: 3, val: "Tama" },
  { order: 4, val: "Hakutou" },
  { order: 5, val: "Momo" },
];

const targetVal = "Saitama";

const updateData = { order: 2, val: "Gunmar" };

// 1. console.group() で、Console出力のグループを定義・開始する
// => 最初から、Openされている
console.group("console.group Test");

console.log("group 内の Log");

const updateTargetIndex = dataSetList.findIndex(
  (dataSet) => dataSet.val === targetVal
);
console.log("updateTargetIndex", updateTargetIndex);

if (updateTargetIndex !== -1) {
  dataSetList.splice(updateTargetIndex, 1, updateData);

  console.log("dataSetList", dataSetList);
}

// 2. console.groupEnd() で、Console出力のグループ出力を終了させる。
console.groupEnd();

// 3. console グループ外の Log
console.log("group 外の Log");

// 4. console.groupCollapsed() で、Console出力のグループを定義・開始する
// => 最初は、Closeされている
console.groupCollapsed("console.groupCollapsed Test");

console.log("Open しないと 見れない Log_1");
console.log("Open しないと 見れない Log_2");
console.groupEnd();

/**
 * console.time(), timeEnd(), timeLog() の使い方
 */

const cardList = [
  { id: 1, participant: "ロボたま", affiliation: "ロボ玉開発部" },
  { id: 2, participant: "まりたま", affiliation: "エンジニア" },
  { id: 3, participant: "白桃", affiliation: "エンジニア" },
  { id: 4, participant: "ももちゃん", affiliation: "人事部" },
  { id: 5, participant: "まさぴょん", affiliation: "営業部" },
  { id: 6, participant: "まりぴょん", affiliation: "デザイナー" },
  { id: 7, participant: "ハム太郎", affiliation: "エンジニア" },
  { id: 8, participant: "ロボ太郎", affiliation: "ロボ玉開発部" },
  { id: 9, participant: "まり太郎", affiliation: "デザイナー" },
  { id: 10, participant: "ぷる玉", affiliation: "エンジニア" },
  { id: 11, participant: "ロボ玉試作1号機", affiliation: "営業部" },
];

/** 指定した数値ごとに配列を区分け・分割する Function */
function ArrayGrouping(list, groupingNum) {
  console.group("ArrayGrouping_処理時間測定");

  // 1. timeEnd('test_timer') するまでの処理時間の測定を開始する
  console.time("test_timer");
  let len = list.length;
  let curentNum = 0;
  const separateList = [];
  let tmpList = [];

  console.log("途中の時間は、console.timeLog() で確認できる");

  // 2. test_timer の処理途中での経過時間を出力する
  console.timeLog("test_timer");

  list.forEach((item, index) => {
    curentNum = index + 1;
    tmpList.push(item);
    if (curentNum % groupingNum === 0) {
      separateList.push(tmpList);
      tmpList = [];
    }
    if (len === curentNum) {
      if (!tmpList.length) return;
      else separateList.push(tmpList);
    }
  });
  console.log("ArrayGrouping_処理完了");
  // 3. test_timer の処理時間の測定を終了する
  console.timeEnd("test_timer");
  console.groupEnd();
  return separateList;
}

console.log(ArrayGrouping(cardList, 2));

/**
 * 配列内の特定の値を、設定した値で、置き換える Function
 */
function ArrayTargetReplace(array, targetVal, replaceVal) {
  console.groupCollapsed("ArrayTargetReplace_Call");

  console.log("array", array);
  console.log("targetVal", targetVal);
  console.log("replaceVal", replaceVal);
  let objectFlag = false;
  // 配列ではなく、Objectの場合
  if (!Array.isArray(targetVal) && typeof targetVal === "object") {
    objectFlag = true;
  }
  console.log("objectFlag", objectFlag);

  let updateTargetIndex = -1;
  if (objectFlag) {
    updateTargetIndex = array.findIndex((dataSet) =>
      Object.is(dataSet, targetVal)
    );
  } else {
    // 3. findIndex()で条件に、Matchするvalueのindex番号を取得する。
    updateTargetIndex = array.findIndex((dataSet) => dataSet === targetVal);
  }
  console.log("updateTargetIndex", updateTargetIndex);

  let copyArray = JSON.parse(JSON.stringify(array));

  if (updateTargetIndex !== -1) {
    // 5. Array.splice() で、oldValue を削除して、newValueで、置き換える
    copyArray.splice(updateTargetIndex, 1, replaceVal);
  }
  console.log("copyArray", copyArray);
  console.groupEnd();
  return copyArray;
}

const targetVal2 = { order: 3, val: "Tama" };

const updateData2 = { order: 3, val: "Maritama" };

const result = ArrayTargetReplace(dataSetList, targetVal2, updateData2);

console.log("ArrayTargetReplace_result", result);

関連記事

以前の記事では、console.log, dir, tableの違い・デバッグ方法とログレベルの使い分けを紹介しているので、ぜひこちらも参照してみてください。

JavaScriptのconsole.log, dir, tableの違い・デバッグ方法とログレベルの使い分け

JavaScript書籍 Ver. 中級-上級者向け

JavaScript書籍 Ver. 初級者向け

Twitterやってます！Follow Me！

神聖グンマー帝国の逆襲🔥

神聖グンマー帝国の科学は、世界一ぃぃぃぃぃぃ！！！！！

最近の投稿

【SQL】1回のINSERTで、複数行のレコードを一括挿入・一括追加する方法 JS_uuid JavaScriptでランダムなuuidを作成する方法(randomUUIDの使い方) py_csv_to_json PythonでCSVをJSONに変換する方法 py_csv_cut PythonでCSV・Dataframeを指定の行数まで切り取る方法 js_for_of JavaScript(TypeScirpt)のfor-of文でindexの値も取得する方法と、Type IterableIteratorエラーの解決方法 Python_VSCode VSCode上のPython import文の「インポート “XXXXX” をソースから解決できませんでした」エラーの解決方法

前の記事

array_replace
JavaScriptで配列から特定の値を削除して、別の値で置き…

次の記事

JavaScriptで、ObjectとObjectが同じ値かど…
Object_is