【JavaScript】newオペレーターとは？オブジェクト生成や活用方法を初心者向けに解説

フロントエンド開発•2025/2/15

JavaScript

はじめに

JavaScriptでプログラミングを始めたばかりの皆さんは、newオペレーターという言葉を聞いたことがあるでしょうか。

あるいはクラスを使ってオブジェクトを生成するときに、前に付けるものとして見かけたかもしれませんね。

このnewオペレーターは、オブジェクト指向的な書き方をするうえで重要な存在です。

オブジェクトを生成する仕組みを理解しておくと、コードの読みやすさや保守性にも大きく関わってきます。

ここでは、初心者の皆さんでもわかりやすいように、newオペレーターの基本的な仕組みや具体的な使い方、そして実務での活用シーンまでを詳しく解説します。

この記事を読むとわかること

newオペレーターが具体的に何をしているか
コンストラクターやクラスを使ったオブジェクトの生成方法
プロトタイプとの関係やクラス構文での継承方法
newオペレーターを使う際に気を付けるべきポイント
ほかのJavaScriptの新しい機能との関連や活用シーン

それでは、ステップを追って解説を進めていきましょう。

newオペレーターとは？

JavaScriptのnewオペレーターは、コンストラクター関数やクラスを呼び出すときに利用される演算子です。

簡単に言うと、newはオブジェクトを生成して初期化するために使います。

具体的には、newオペレーターを使うと下記のような流れで動作します。

空のオブジェクトを作る
そのオブジェクトの内部プロパティ（proto）をコンストラクター関数やクラスのprototypeとつなぐ
コンストラクター関数やクラスの処理（初期化処理）を実行してプロパティを設定
最終的に新しく生成したオブジェクトを返す

こうした一連のステップが自動的に行われるため、初心者の皆さんでも手軽にオブジェクトを用意できます。

newオペレーターの仕組み

newオペレーターが担当している重要なポイントは、オブジェクトの「入れ物」を用意することと、 その「入れ物」を指定した設計図 (プロトタイプ) につなげることです。

JavaScriptはプロトタイプベースの言語です。

オブジェクト同士を「このオブジェクトはあのオブジェクトを継承する」という形でリンクさせる特徴があります。

newオペレーターは、まさにそのリンクを正しく行うための手助けをしているイメージです。

使い方はとてもシンプルで、以下のようになります。


function User(name) {
  this.name = name;
}

const userA = new User("Alice");

このように書くと、userA という変数に新しいオブジェクトが割り当てられ、そのオブジェクトの name プロパティに "Alice" という文字列が設定されます。

newオペレーターの具体的なコード例

もう少し分解したサンプルを見てみましょう。


function Car(brand, color) {
  // ここでthisはCarによって生成される新しいオブジェクトを指す
  this.brand = brand;
  this.color = color;

  // 任意のメソッドを追加
  this.run = function() {
    console.log(this.brand + "が走っています。色は" + this.color + "です。");
  };
}

// newを使ってオブジェクトを生成
const carA = new Car("Toyota", "white");
const carB = new Car("Honda", "black");

carA.run(); // "Toyotaが走っています。色はwhiteです。"
carB.run(); // "Hondaが走っています。色はblackです。"

ここでは、Car というコンストラクター関数を定義しています。

Car を呼び出すときに new を使うことで、brand と color が設定されたオブジェクトが自動的に生成されるのです。

これがnewオペレーターの基本的な動作イメージになります。

コンストラクターとプロトタイプ

newオペレーターの動きを理解するうえで外せないのが、コンストラクターという関数とプロトタイプの仕組みです。

JavaScriptでは、newオペレーターで呼び出される関数のことをコンストラクター関数と呼びます。

先ほど紹介した function Car() {} のような関数がそれにあたります。

コンストラクター関数の実例

コンストラクター関数の中では、this キーワードを使って新しく生成されるオブジェクトにプロパティやメソッドを付与できます。

例えば以下のサンプルは、ユーザーアカウント管理の基礎をイメージしたものです。


function Account(username, email) {
  this.username = username;
  this.email = email;

  this.showInfo = function() {
    console.log("ユーザー名: " + this.username + " / メールアドレス: " + this.email);
  };
}

const accountA = new Account("userA", "userA@example.com");
accountA.showInfo(); 
// "ユーザー名: userA / メールアドレス: userA@example.com"

こうすることで、同じパターンのオブジェクトを手早く生成できます。

たとえばWebアプリケーションで多数のユーザーが登録される場合でも、コンストラクター関数を使えば同一フォーマットのオブジェクトを簡単に生成可能です。

プロトタイプの活用方法

一方、コンストラクターを使ったオブジェクトはプロトタイプという仕組みによって、共通のメソッドやプロパティを持つことができます。

コンストラクター関数には FunctionName.prototype という特別なオブジェクトが存在し、ここにメソッドを定義すると、newオペレーターで生成されたオブジェクトから共有してアクセスできるようになります。


function Book(title) {
  this.title = title;
}

// prototypeにメソッドを定義
Book.prototype.getTitle = function() {
  return this.title;
};

const bookA = new Book("JavaScript入門");
const bookB = new Book("JavaScript応用");

console.log(bookA.getTitle()); // "JavaScript入門"
console.log(bookB.getTitle()); // "JavaScript応用"

Book.prototype にメソッドを定義しておくと、bookA や bookB のようにnewで生成されたオブジェクトから .getTitle() を利用できます。

この方法は、メモリの無駄を減らしつつ一括でメソッドを定義できるので、実務でもよく使われます。

クラス構文とnew

近年のJavaScriptでは、よりオブジェクト指向言語らしい記述ができるようにクラス構文が追加されました。

クラス構文を使うと、コンストラクター関数と同じようにnewオペレーターが使用できます。

クラスでオブジェクトを生成する

クラス構文を使うと次のように書けます。


class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log("こんにちは、" + this.name + "です。年齢は" + this.age + "です。");
  }
}

const personA = new Person("佐藤", 25);
personA.greet(); 
// "こんにちは、佐藤です。年齢は25です。"

constructor メソッドは、コンストラクター関数でいうところの本体に相当します。

このクラスも結局はプロトタイプベースで動いているのですが、見た目が他のオブジェクト指向言語に近いため、多くの初心者の方には馴染みやすいかもしれません。

メソッド定義と継承

クラス構文では、constructor の外にメソッドを定義すると、それらのメソッドは自動的にクラスのプロトタイプに登録されます。


class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(this.name + "が何かを話しています。");
  }
}

class Dog extends Animal {
  // 親クラスを継承する
  constructor(name, breed) {
    super(name); 
    // 親クラスのconstructorを呼び出し
    this.breed = breed;
  }

  speak() {
    console.log(this.name + "は" + this.breed + "です。ワンワンと吠えます。");
  }
}

const dogA = new Dog("ポチ", "柴犬");
dogA.speak(); 
// "ポチは柴犬です。ワンワンと吠えます。"

extends を使うとクラスの継承ができ、super() で親クラスのコンストラクターを呼び出せます。

継承によってコードの再利用がしやすくなるため、規模の大きなプロジェクトでも読みやすい構造を作ることが可能です。

実務でUIコンポーネントやユーザー管理機能を拡張するときにも、こうしたクラスの継承パターンが応用されるケースがあります。

実務での活用シーン

ここまででnewオペレーターの基本的な働きと、コンストラクター関数やクラス構文の使い方が見えてきました。

では、実際の開発の場ではどのように活用しているのかを、もう少し深掘りしましょう。

Webアプリケーション開発での使いみち

一般的なWebアプリケーション開発では、データのモデル化を行うときにnewオペレーターが大活躍します。

たとえば、ユーザー情報や商品情報など、何らかの属性を持つオブジェクトを多数生成する場合に、クラスまたはコンストラクター関数とセットで利用します。


class Product {
  constructor(id, name, price) {
    this.id = id;
    this.name = name;
    this.price = price;
  }

  describe() {
    console.log("商品ID: " + this.id + " / 商品名: " + this.name + " / 価格: " + this.price + "円");
  }
}

const productA = new Product(1, "パソコン", 120000);
productA.describe();
// "商品ID: 1 / 商品名: パソコン / 価格: 120000円"

商品マスタをデータベースから大量に取得して、JavaScript側でオブジェクトに変換するといった処理は、特にフロントエンド側でよく見かけます。

ライブラリやフレームワークでの利用例

ReactやVue.jsのようなフレームワークやライブラリを使う場合でも、内部ではJavaScriptのオブジェクト生成処理を活用しています。

実際のところ、これらのフレームワークはクラスベースの書き方や関数ベースの書き方など、さまざまなスタイルをサポートしています。

しかし、どちらにせよ裏側ではオブジェクトの生成が行われており、JavaScriptの基礎であるnewオペレーターやプロトタイプの仕組みが役立っています。

もしライブラリやフレームワークを深く追いかけていくなら、内部実装でnewオペレーターがどう活用されているかを学ぶと理解がいっそう深まります。

newを使う際の注意点

newオペレーターは便利ですが、いくつか注意すべきポイントもあります。

正しく理解していないと、思わぬバグを招くこともあるので気を付けましょう。

無理な使用例・よくあるトラブル

特にありがちなのは、コンストラクター関数なのにnewを付けずに呼び出してしまうケースです。


function Human(name) {
  this.name = name;
}

const humanA = Human("田中"); // newをつけ忘れた！
console.log(humanA); // undefined になってしまう

newを付け忘れると、this がグローバルオブジェクトを指してしまったり、undefined が返ってきたりします。

これによって思わぬバグが起こることがあるので、コンストラクター関数を呼び出すときは必ずnewを付けるように意識してください。

シンプルなコード設計のコツ

クラス構文やコンストラクター関数を使いすぎると、コード全体が複雑になりがちです。

初心者の皆さんは、まずは小さなクラスを1つか2つ定義してみて、そこにnewを使う方法に慣れていくのが良いかもしれません。

また、クラスの継承を多段階に重ねたり、意味のないコンストラクターをたくさん用意するのは混乱の元になります。

まずは必要最低限の設計でシンプルにまとめ、必要に応じてコードを拡張していくスタイルが望ましいでしょう。

newオペレーターを使いすぎると、オブジェクトがどこで生成されてどこで使われるのか把握しにくくなることがあります。小さな単位のクラスやコンストラクターでこまめにテストしながら組み立てていくと、事故を減らせます。

JavaScriptの新しい機能にも注目

newオペレーターに限らず、JavaScriptには便利な機能が数多く存在します。

特に最近の書き方では、letやconst、アロー関数、Promise や async/await などが広く活用され、コードがより読みやすく整理しやすくなりました。

ここでは、初心者の方が理解しておくと便利な新しめの機能を簡単に見ていきましょう。

letやconstなどの宣言

変数を宣言するときに、昔からの var ではなく let や const を使うやり方が一般的になっています。


let x = 10;
x = 20; // letは再代入できる

const y = 30;
// y = 40; // constは再代入不可なのでエラーになる

再代入が必要な場合にはletを、そうでなければconstを使うことで、バグを減らす書き方がしやすくなります。

アロー関数

アロー関数は、従来のfunctionキーワードの代わりに使える書き方です。


// 従来の書き方
function add(a, b) {
  return a + b;
}

// アロー関数
const addArrow = (a, b) => {
  return a + b;
};

本体が1行で済むような関数なら、 {} を省略して書くこともできます。

アロー関数はthisの扱いが少し違うので、クラスのメソッドとして定義するときには注意が必要です。

しかし、引数や内部処理がシンプルな関数をサッと書くにはとても便利です。

Promiseとasync/await

JavaScriptで非同期処理を行う際には、Promise が登場します。

そしてPromiseをさらに扱いやすくしたのが async/await です。


function mockApiCall() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("データ取得完了");
    }, 1000);
  });
}

async function fetchData() {
  console.log("データ取得開始");
  const result = await mockApiCall();
  console.log(result); 
  // 1秒後に "データ取得完了" と表示
}

fetchData();

newオペレーターとは直接関係しないものの、実務でJavaScriptを使うなら欠かせない書き方です。

ここを理解していると、ウェブブラウザ上で外部サービスとの通信をする場面や、バックエンドとの連携をスムーズに行えます。

その他の便利な構文

JavaScriptには、他にも便利な構文がたくさん存在します。

分割代入 (Destructuring): 配列やオブジェクトの要素を簡単に取り出せる
スプレッド構文: 配列やオブジェクトを展開して別の配列やオブジェクトにまとめやすい
テンプレートリテラル: （バッククォート）で囲んで文字列を複数行に書けるうえ、変数を${変数名}で埋め込める

こうした構文に慣れておくと、新しい機能と組み合わせて柔軟かつ効率的にJavaScriptのコードを書けるようになります。

特にオブジェクトを生成して何か処理をするときには、こうした文法も合わせて覚えておくといいでしょう。

まとめ

JavaScriptのnewオペレーターを使うことで、オブジェクトの生成プロセスを簡潔に表現できます。

コンストラクター関数やクラス構文と組み合わせることによって、再利用可能なコードを作りやすくなり、柔軟なオブジェクト指向スタイルで開発を進めることができます。

ただし、newオペレーターの仕組みを十分に理解せずに使うと、thisの参照が意図しない場所を指したり、バグの原因になりかねません。

まずは小さなクラスやコンストラクターでnewを練習し、コードをシンプルに保つことを意識しながら取り組んでみてください。

そして、JavaScriptには他にもさまざまな便利機能が備わっているので、必要に応じて徐々に身に付けていくといいでしょう。

以上が、newオペレーターの基礎から活用例までの解説となります。

newオペレーターやクラスの使い方がイメージしやすくなれば幸いです。