JavaScript withで驚くほど簡単!初心者も安心の7つの使い方

JavaScript withを使った初心者向けの使い方とサンプルコードJS
この記事は約7分で読めます。

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、JavaScript withを使った驚くほど簡単な使い方を7つ紹介します。

初心者でも安心して取り組めるよう、サンプルコードを交えて徹底解説していきます。

●JavaScript withとは

JavaScriptのwith文は、オブジェクトのプロパティやメソッドにアクセスする際にコードを簡略化するための構文です。

with文を使うことで、オブジェクトのプロパティへのアクセスを短く書くことができます。

○with文の基本

基本的なwith文の使い方は次のようになります。

with (オブジェクト) {
  // オブジェクトのプロパティやメソッドにアクセスするコード
}

●JavaScript withの使い方

それでは、JavaScript withを使った具体的な使い方をサンプルコードと共に見ていきましょう。

○サンプルコード1:オブジェクトのプロパティ操作

このコードでは、with文を使ってオブジェクトのプロパティにアクセスしています。

この例では、personオブジェクトのプロパティを操作しています。

const person = {
  firstName: "太郎",
  lastName: "山田",
  age: 25,
};

with (person) {
  console.log(firstName + " " + lastName + " (" + age + "歳)");
}

○サンプルコード2:DOM操作の簡略化

このコードでは、with文を使ってDOM操作を簡略化しています。

この例では、HTML要素にアクセスしてスタイルを変更しています。

<div id="box">こんにちは!</div>

<script>
const box = document.getElementById("box");

with (box.style) {
  backgroundColor = "red";
  color = "white";
  fontSize = "24px";
  padding = "10px";
}
</script>

○サンプルコード3:グローバルオブジェクトへのアクセス

このコードでは、with文を使ってグローバルオブジェクトにアクセスしています。

この例では、windowオブジェクトのプロパティにアクセスしています。

with (window) {
  console.log("画面の幅: " + innerWidth);
  console.log("画面の高さ: " + innerHeight);
}

●注意点と対処法

○変数のスコープに注意

with文を使用する際には、変数のスコープに注意が必要です。

with文内で変数を定義すると、そのスコープがオブジェクトのプロパティに影響を与えることがあります。

対処法として、with文の外で変数を定義し、with文内ではその変数を使用するようにしましょう。

○strictモードでの使用制限

strictモードでは、with文は使用できません。

strictモードでwith文を使用しようとすると、エラーが発生します。

対処法として、strictモードではwith文を使用せず、代わりにオブジェクトのプロパティに直接アクセスしましょう。

●カスタマイズ方法

○with文を活用した関数作成

このコードでは、with文を使って関数を作成しています。

この例では、personオブジェクトのプロパティを変更する関数を作成しています。

function updatePerson(person, data) {
  with (person) {
    firstName = data.firstName || firstName;
    lastName = data.lastName || lastName;
    age = data.age || age;
  }
}

const person = {
  firstName: "太郎",
  lastName: "山田",
  age: 25,
};

updatePerson(person, {firstName: "次郎", age: 26});
console.log(person);

○カスタムオブジェクトの作成

このコードでは、カスタムオブジェクトを作成し、with文を使ってプロパティにアクセスしています。

この例では、独自のMathオブジェクトを作成しています。

const myMath = {
  pi: 3.14,
  square: function(x) {
    return x * x;
  },
  cube: function(x) {
    return x * x * x;
  },
};

with (myMath) {
  console.log("円周率: " + pi);
  console.log("2の平方: " + square(2));
  console.log("3の立方: " + cube(3));
}

●応用例とサンプルコード

○サンプルコード4:Canvasを使った図形描画

このコードでは、with文を使ってCanvasの描画コンテキストのプロパティを操作して図形を描画しています。

この例では、矩形と円を描画しています。

<canvas id="canvas" width="300" height="200"></canvas>

<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

with (ctx) {
  fillStyle = "blue";
  fillRect(10, 10, 100, 50);

  beginPath();
  arc(200, 60, 40, 0, 2 * Math.PI);
  fillStyle = "red";
  fill();
}
</script>

○サンプルコード5:設定オブジェクトを使った関数呼び出し

このコードでは、with文を使って設定オブジェクトのプロパティにアクセスし、関数を呼び出しています。

この例では、グラフを描画する関数を作成しています。

function drawGraph(options) {
  with (options) {
    console.log("グラフタイトル: " + title);
    console.log("横軸タイトル: " + xAxisTitle);
    console.log("縦軸タイトル: " + yAxisTitle);
    console.log("データ: " + data);
  }
}

const graphOptions = {
  title: "売上グラフ",
  xAxisTitle: "月",
  yAxisTitle: "売上",
  data: [100, 200, 300, 400, 500],
};

drawGraph(graphOptions);

○サンプルコード6:ループ内でのwith文の使用

このコードでは、with文を使ってループ内でオブジェクトのプロパティにアクセスしています。

この例では、複数の人物データの配列を処理しています。

const people = [
  { firstName: "太郎", lastName: "山田", age: 25 },
  { firstName: "花子", lastName: "鈴木", age: 30 },
  { firstName: "次郎", lastName: "佐藤", age: 35 },
];

for (const person of people) {
  with (person) {
    console.log(firstName + " " + lastName + " (" + age + "歳)");
  }
}

○サンプルコード7:エラーハンドリングの簡略化

このコードでは、with文を使ってエラーハンドリングを簡略化しています。

この例では、カスタムエラーオブジェクトを作成し、with文を使ってエラーメッセージを表示しています。

function customError(message, code) {
  return {
    message: message,
    code: code,
    log: function() {
      with (this) {
        console.log("エラーコード: " + code + ", メッセージ: " + message);
      }
    },
  };
}

const error = customError("不正な入力です。", 400);
error.log();

まとめ

以上のサンプルコードでは、JavaScriptのwith文の使い方とカスタマイズ方法を紹介しました。

with文はオブジェクトのプロパティ操作を簡単に行うことができますが、変数のスコープに注意する必要があります。

また、strictモードでは使用が制限されていることも覚えておくと良いでしょう。