JavaScript整形の完全ガイド！5つの使い方・応用例とサンプルコード

はじめに

この記事を読めば、JavaScript整形を習得し、コードが読みやすく、保守しやすいプログラムを書くことができるようになります。

初心者の方でも安心して読み進められる内容となっております。

JavaScript整形の基本

JavaScriptの整形とは、コードの見た目を整えることで、他の人が読みやすく、保守しやすいコードを書くことが目的です。

まずは、コメントの書き方から解説していきます。

○コメントの書き方

コメントは、コードの説明を記述するために使用されます。一行コメントは、行の先頭に「//」を記述します。

複数行コメントは、先頭に「/」、最後に「/」を記述します。

使い方：5つのサンプルコード

下記に、JavaScriptの整形における基本的な使い方を示すサンプルコードをご紹介します。

○サンプルコード1：変数宣言

// 変数宣言の例
let name = "John Doe"; // 名前を格納する変数
const age = 30;        // 年齢を格納する定数

変数宣言時に、適切なコメントを付けることで、変数の目的が分かりやすくなります。

○サンプルコード2：関数定義

// 関数定義の例
/**
 * 二つの数値を加算する関数
 * @param {number} a - 数値1
 * @param {number} b - 数値2
 * @returns {number} - 二つの数値の和
 */
function add(a, b) {
  return a + b;
}

関数定義時に、コメントでパラメータや戻り値の説明を記載することで、関数の使い方が分かりやすくなります。

○サンプルコード3：条件分岐

// 条件分岐の例
if (age >= 18) {
  console.log("成人です。");
} else {
  console.log("未成年です。");
}

条件分岐時に、適切なインデントを使用し、コードの見た目を整えます。

○サンプルコード4：ループ処理

// ループ処理の例
for (let i = 0; i < 10; i++) {
  console.log(`ループ${i}回目`);
}

ループ処理時に、適切なインデントとコメントを使用し、コードの見た目を整えます。

○サンプルコード5：オブジェクトリテラル

// オブジェクトリテラルの例
const person = {
  name: "John Doe",
  age: 30,
  greet: function() {
    console.log("Hello, I am " + this.name);
  }
};

オブジェクトリテラル時に、適切なインデントとコメントを使用し、コードの見た目を整えます。

応用例：5つのサンプルコード

下記に、JavaScriptの整形における応用例を示すサンプルコードをご紹介します。

○サンプルコード6：非同期処理

// 非同期処理の例
async function fetchData(url) {
  try {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("エラーが発生しました：", error);
  }
}

非同期処理時に、適切なインデントとコメントを使用し、コードの見た目を整えます。

○サンプルコード7：DOM操作

// DOM操作の例
document.getElementById("button").addEventListener("click", () => {
  const inputText = document.getElementById("input").value;
  document.getElementById("output").innerText = `Hello, ${inputText}!`;
});

DOM操作時に、適切なインデントとコメントを使用し、コードの見た目を整えます。

○サンプルコード8：イベントハンドラ

// イベントハンドラの例
function handleButtonClick() {
  console.log("ボタンがクリックされました。");
}

document.getElementById("button").addEventListener("click", handleButtonClick);

イベントハンドラ時に、適切なインデントとコメントを使用し、コードの見た目を整えます。

○サンプルコード9：API通信

// API通信の例
fetch("https://api.example.com/data")
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error("エラーが発生しました：", error));

API通信時に、適切なインデントとコメントを使用し、コードの見た目を整えます。

○サンプルコード10：エラーハンドリング

// エラーハンドリングの例
try {
  const result = someFunctionThatMightThrowError();
  console.log("結果：", result);
} catch (error) {
  console.error("エラーが発生しました：", error);
}

エラーハンドリング時に、適切なインデントとコメントを使用し、コードの見た目を整えます。