JavaScript

TypeScriptとJavaScriptとは TypeScriptとJavaScriptは、どちらもWeb開発で広く使われているスクリプト言語です。クライアントサイドでサーバーへのリクエストを処理したり、UIにデータを描画したりするために利用されます。両者はスクリプト言語という点で共通していますが、TypeScriptはJavaScriptに型システムなどの追加機能を加えたスーパーセット（上位互換）として位置づけられています。 本記事では、TypeScriptとJavaScriptの重要な違いを比較表とコード例を交えてわかりやすく解説します。 TypeScriptとJavaScriptの主な

JavaScriptで変数を宣言する方法は主に2つあります。「var」を使う方法と「let」を使う方法です。では、どのような場面でvarを使い、どのような場面でletを使えばよいのでしょうか。この記事では、両者の主な違いについてわかりやすく解説します。 スコープ(有効範囲)の違い letとvarの最も大きな違いは「スコープ」にあります。letで宣言された変数のスコープは、その変数が宣言されたブロック内に限定されます。一方、varで宣言された変数はグローバルスコープを持ちます。つまり、varはブロックスコープに関係なく、変数をより広い範囲で定義するキーワードだと言えます。 windowオブジ

ディープコピー（深いコピー）とは、コピー対象のオブジェクト内に存在するすべてのネストされたオブジェクトを再帰的に複製することを指します。元のオブジェクトとコピーの間で何も参照を共有しないため、完全に独立した複製が作られます。JSONを使った最も手軽な方法最もシンプルなのは、JSON.stringify()でオブジェクトをJSON文字列に変換し、JSON.parse()で再びJavaScriptオブジェクトへ戻す方法です。ただしこの方法には、メソッド（関数）やundefined、Symbolなどをコピーできないという重要な制限がある点に注意が必要です。コード例let obj = { fo

JavaScriptには、他の多くのプログラミング言語に存在するようなネイティブのsleep（スリープ）関数が用意されていません。しかし、いくつかのテクニックを使えば、この制限を簡単に回避することが可能です。最も手軽な方法のひとつが、setTimeoutとasync/awaitを組み合わせて、独自のsleep関数を作成することです。実装例const sleep = milliseconds => new Promise(resolve => setTimeout(resolve, milliseconds)) // コールバックを使う場合 sleep(1000).then(()

JavaScriptには、JavaやTypeScriptのような列挙型（Enum）がネイティブ機能として用意されていません。しかし、Object.freeze()メソッドを活用することで、列挙型と同等の動作を実現できます。具体的な手順は以下の通りです。すべての列挙値（プロパティ）を持つオブジェクトを作成するObject.freeze()でそのオブジェクトを凍結し、新しいプロパティの追加や既存プロパティの変更・削除を防ぐコード例const Color = { RED: 1, BLUE: 2, GREEN: 3, YELLOW: 4 }; Object.freeze

セット（Set）とは、特定の値を「順序を持たず」「重複なく」格納できる抽象データ型です。数学における「有限集合」の概念をコンピュータ上で実装したものといえます。他のコレクション型と大きく異なるのは、特定の要素を取り出すというよりも、ある値がその集合に含まれているかどうか（メンバーシップ）を確認する目的で使われることが多いという点です。 セットを使うべき場面は、主に次のようなケースです。 順序が重要でないコンテナに、一意な要素だけを格納したい場合 さまざまなオブジェクトの「所属しているかどうか」の判定を主に行いたい場合 数学的な集合と同じように、和集合・積集合・差集合などの演算を行いたい場合

セット（Set）とは？ セットとは、特定の値を重複なく格納できる抽象データ型です。要素には順序の概念がなく、数学における「有限集合」の概念をコンピュータ上で実装したものといえます。 他のコレクション型と異なる点として、セットでは特定の要素を取り出すというより、ある値がセットに含まれているかどうか（メンバーシップの判定）を行う用途で使われるのが一般的です。 JavaScriptでセットを作成する主な方法は、以下の2つです。 1. 空のSetコンストラクタを使う方法 new Set()で空のセットを作成し、add()メソッドで要素を追加していきます。重複する値は自動的に無視される点に注目してくだ

JavaScriptのSetクラスには、セットオブジェクトからすべての要素を一括で削除できるclear()メソッドが用意されています。このメソッドは以下のように使用します。例let mySet = new Set(); mySet.add(1); mySet.add(2); mySet.add(1); mySet.add(3); mySet.add("a"); console.log(mySet) mySet.clear(); console.log(mySet)出力Set { 1, 2, 3, a } Set { }clear()メソッドを実行すると、セット内のすべての要

JavaScriptのSetオブジェクトには、指定した値がセット内に存在するかどうかを調べるためのhas()メソッドが用意されています。このメソッドは、値が見つかればtrue、見つからなければfalseを返します。 基本的な使い方 has()メソッドは、引数として調べたい値を1つ受け取り、その値がSet内に存在するかをブール値（true / false）で返します。以下のコード例を見てみましょう。 コード例 let mySet = new Set(); mySet.add(1); mySet.add(2); mySet.add(1); // 重複しているため追加されない mySet.add(3

Setのhasメソッドによる要素の検索JavaScriptのSetクラスには、セット内に指定した要素が存在するかどうかを調べるためのhasメソッドが用意されています。数値や文字列などのプリミティブ値は値そのもので比較されますが、オブジェクトを検索する場合は注意が必要です。同じ内容を持つオブジェクトでも、メモリ上の参照（アドレス）が異なれば別のオブジェクトとして扱われます。つまり、hasメソッドでオブジェクトを検索するには、セットに追加したときと同じオブジェクトへの参照を渡す必要があります。サンプルコードlet mySet = new Set(); let myObj = {name: John

Set（セット）を使ってコードを高速化するには、まず「どのような場面で配列ではなくSetを使うべきか」を理解することが重要です。Setと配列（Array）は似たコレクション構造に見えますが、それぞれ得意な処理が異なり、適切に使い分けることでパフォーマンスに大きな差が生まれます。 Setを使うべきシーン 1. 重複データを避けたい場合 Setには一意な値のみが格納されるという特性があります。そのため、「同じデータを二重に保存したくない」という要件が事前に分かっている場合は、重複チェックのコードを書く手間が省け、Setを選ぶだけで自然とデータの一意性が保証されます。 2. 集合演算（和集合・積集合

JavaScriptの正規表現における \s メタ文字は、空白文字（whitespace）を検索するために使用されます。文字列の中に空白が含まれているかどうかを簡単に判定したい場合に便利です。\s がマッチする空白文字の種類\s にマッチする空白文字は以下のとおりです。スペース（半角空白）タブ文字（\t）キャリッジリターン（\r）改行文字（\n）垂直タブ文字（\v）フォームフィード文字（\f）使用例次のコードでは、test() メソッドを使って、各文字列に空白文字が含まれているかどうかを判定しています。// 空白を含まない文字列の場合： console.log(/\s/.test(1)); c

\Wメタ文字とは正規表現における \W メタ文字は、非単語文字（単語文字以外の文字）を検索するために使用されます。ここでいう「単語文字」とは、以下の文字を指します。半角英字（a〜z、A〜Z）半角数字（0〜9）アンダースコア（_）これら以外の文字、たとえばスペースや記号（.、!、@、# など）は、すべて非単語文字として扱われます。なお、\W は単語文字にマッチする \w の否定にあたるメタ文字です。サンプルコード以下の例では、test() メソッドを使って、文字列に非単語文字が含まれているかどうかを判定しています。// 非単語文字を含む場合： console.log(/\W/.test(&quo

JavaScriptは、クラスの多重継承をサポートしていません。しかし、実際の開発では、複数のクラスが持つ機能を1つのオブジェクトに組み合わせたい場面に出くわすことがあります。そんなときに役立つのが「ミックスイン(Mixin)」という手法です。ミックスインとは、継承を一切使わずに、オブジェクトへプロパティやメソッドを追加するための仕組みです。共通の振る舞いを独立したオブジェクトとして定義しておき、必要なクラスに後から「混ぜ込む」ことで、柔軟かつ再利用性の高いコードを実現できます。ミックスインの基本例例として、Person(人)クラスを考えてみましょう。このクラスのインスタンスに「挨拶をする」機

ES6（ECMAScript 2015）で導入されたJavaScriptのクラスは、プロトタイプベースの継承に対する「構文糖衣（シンタックスシュガー）」と呼ばれています。実体は「特別な関数」であり、classキーワードを使うことで、より直感的で読みやすいコードとしてオブジェクト指向プログラミングを実現できます。 classキーワードによる基本的なクラス定義 classキーワードを使用したクラス定義の基本構文は以下の通りです。 class Person { // このクラスのコンストラクタ constructor(name) { this.name = name;

クロージャ（Closure）とは、関数と、その関数が宣言された際のレキシカル環境（語彙的スコープ）を組み合わせた概念です。内部関数は、自分が定義された外側の関数の変数にアクセスでき、外側の関数の実行が終了した後でもその変数を参照し続けることができます。クロージャの基本的な仕組みまず、シンプルな例を見てみましょう。function outerFunc() {     var name = TutorialsPoint; // outerFunc内で作成されたローカル変数     return function inn

ガベージコレクション(GC)を備えた言語において、メモリリークの主な原因は「不要になったのに残ってしまう参照」です。メモリリークを正しく理解し防ぐために、まずメモリ解放の仕組みがどのように働いているのかを見ていきましょう。マーク・アンド・スイープ(Mark-and-Sweep)アルゴリズムこのアルゴリズムでは、「オブジェクトがもう不要である」という概念を「オブジェクトが到達不可能である」という定義に置き換えます。アルゴリズムは「ルート(root)」と呼ばれる一連のオブジェクトを起点としており、JavaScriptではこのルートがグローバルオブジェクトに該当します。GCは定期的にこれらのルートか

循環参照とは? 循環参照(サイクリックリファレンス)とは、2つの独立したオブジェクトが互いに相手への参照を持ち合う状態を指します。 メモリリーク問題は過去のものに 古いブラウザでは、この循環参照がメモリリークの原因となることがありました。しかし、現代のガベージコレクション(GC)アルゴリズムはマーク&スイープ方式などを採用しており、循環する依存関係でも正しく検出して解放できるようになったため、現在ではこれは問題ではなくなっています。 設計の観点から見た循環参照 ただし、純粋なソフトウェア設計の観点から言えば、循環参照は依然として避けるべき「コードの不吉な臭い(code smell)」です。

メソッドチェーンとは メソッドチェーン（Method Chaining）は「カスケーディング（Cascading）」とも呼ばれ、1つの連続したコードの中で、同じオブジェクトのメソッドを次々と呼び出していく手法です。この仕組みを活用すると、同じオブジェクト名を何度も書く冗長なコードを避けられます。ここでは、車（Car）クラスを例に、メソッドチェーンがどのようにコードの重複をなくすのかを見ていきましょう。 通常の実装例 まずは、ごく一般的なCarクラスの実装です。 class Car { constructor() { this.wheels = 4; this.doors

多重継承とは 多重継承（たじゅうけいしょう）とは、1つのオブジェクトが、互いに関係のない複数の親オブジェクトからプロパティや値を引き継ぐ仕組みです。C++ や Python など、一部のオブジェクト指向プログラミング言語では多重継承がサポートされていますが、JavaScript は標準では多重継承に対応していません。 JavaScriptが多重継承をサポートしない理由 JavaScript におけるプロパティ値の継承は、実行時に行われます。具体的には、オブジェクト自身から出発し、プロトタイプチェーン（prototype chain）と呼ばれる連と呼ばれる連鎖を順に辿りながら、目的の値を探索する