JavaScript

JavaScriptで文字列をエンコードするには encodeURIComponent() または encodeURI() を使用し、デコードするには decodeURIComponent() または decodeURI() を使用します。 かつては escape() 関数がエンコードによく使われていましたが、現在では非推奨（deprecated）となっているため、代わりに encodeURI() を使うのが標準的な方法です。 構文 エンコード encodeURIComponent(string); デコード decodeURIComponent(string); encodeURI()

JavaScriptにはゲッター（getter）という仕組みがあり、オブジェクト内の処理を、あたかもプロパティであるかのようにアクセスできます。この動作を実現するのが「get」キーワードです。本記事では、その基本的な使い方をサンプルコードとともにわかりやすく解説します。 ゲッターの基本構文 ゲッターは、オブジェクトリテラルの中で get プロパティ名() { ... } という形式で定義します。通常のメソッドとの大きな違いは、呼び出し側で括弧 () を付けずに、普通のプロパティを読み取るように記述できる点です。これにより、計算結果や加工済みのデータをシンプルに取得でき、コードの可読性が向上し

JavaScriptオブジェクトへのメソッド追加方法JavaScriptオブジェクトにメソッドを追加するのは、オブジェクトコンストラクター自体にメソッドを定義するよりもはるかに簡単です。すでに生成済みのオブジェクトに対して、新しいプロパティとして関数を代入するだけで、その関数をメソッドとして利用できるようになります。基本的な仕組みオブジェクトをインスタンス化した後でも、「オブジェクト名.メソッド名 = function() { ... }」という形式でメソッドを後から追加できます。このとき、関数内部ではthisキーワードを使用することで、そのオブジェクト自身のプロパティへアクセスできます。コー

オブジェクトコンストラクターにプロパティを追加する方法は、通常のオブジェクトの場合とは異なります。通常のオブジェクトであれば、コードのどこからでも自由にプロパティを追加できますが、オブジェクトコンストラクターの場合は、コンストラクターの外側ではなくコンストラクター内部にプロパティを定義する必要があります。例1：コンストラクターの外側にプロパティを追加した場合以下の例では、通常のオブジェクトと同じように、コンストラクターの外側にプロパティを追加しています。ここではオブジェクトコンストラクターを使用しているため、プロパティはコンストラクター内に定義しなければならず、その結果として出力には unde

JavaScriptでは、通常のオブジェクトにメソッドを追加する場合と、オブジェクトコンストラクターにメソッドを追加する場合とでは、扱い方が大きく異なります。通常のオブジェクトであれば、生成後にドット記法などを使って自由にメソッドを追加できますが、コンストラクターから生成したインスタンスに対しては、そのような単純な方法でメソッドを追加することはできません。オブジェクトコンストラクターにメソッドを持たせたい場合は、コンストラクター関数の内部でメソッドを定義する必要があります。これは、new演算子によってインスタンスが生成される際にコンストラクター内部の処理が実行され、そのタイミングでプロパティや

JavaScriptのオブジェクト分割代入（Object Destructuring）とはオブジェクト分割代入（Object Destructuring）とは、オブジェクトの中からプロパティを取り出し、個別の変数として扱えるようにするための便利な構文です。通常、オブジェクトのプロパティにアクセスするには「オブジェクト名.プロパティ名」という形式を使いますが、分割代入を使えば、より簡潔で読みやすい記述が可能になります。ここでは、その基本的な考え方と具体的な使い方を詳しく見ていきましょう。基本構文分割代入では、波括弧 { } の中に取り出したいプロパティ名を列挙し、代入演算子（=）で対象のオブジェ

JavaScriptにおけるクラス（class）は、オブジェクトを生成するための設計図となる仕組みです。本質的には関数の一種ですが、通常の関数とは異なり、宣言時に function キーワードではなく class キーワードを使用します。 クラスの基本的な特徴 クラスのプロパティ（メンバー変数）は、constructor() メソッドの中で初期化して割り当てるのが一般的です。constructor() メソッドは、クラスからオブジェクトが生成されるたびに自動的に呼び出される特別なメソッドです。 class キーワードを使ってクラスを定義する constructor() メソッド内でプロパティ

constructor() メソッドは特別な役割を持つメソッドです。クラスのプロパティを初期化するための場所であり、クラスがインスタンス化されたタイミングで自動的に呼び出されます。 実際には、constructor() を明示的に定義しなかった場合でも、JavaScript が自動的に「空で目に見えない constructor()」を内部に追加してくれます。そのため、クラスは必ず何らかのコンストラクターを持つことになります。 さらに重要なポイントとして、クラスには constructor() 以外にも、開発者が自由に独自のメソッドを定義することができます。独自メソッドを作成する際の構文は、通常

JavaScriptのクラスには、インスタンス（オブジェクト）ではなくクラスそのものに紐づく「静的メソッド（staticメソッド）」を定義できます。静的メソッドは、クラスから直接呼び出すことができる一方、生成したオブジェクト（インスタンス）からは呼び出せないという特徴があります。 静的メソッド（staticメソッド）の基本 staticキーワードを付けて定義されたメソッドは、クラスに属するメソッドとなります。そのため、以下のような特徴を持ちます。 クラスからは呼び出せるが、オブジェクト（インスタンス）からは呼び出せない インスタンスのプロパティ（this.nameなど）には直接アクセスできな

実は、静的（static）メソッドの中でオブジェクトを直接扱おうとしても、期待した結果は得られません。しかし、オブジェクトをパラメータ（引数）として渡せば、静的メソッド内からでもそのオブジェクトにアクセスすることが可能です。以下、具体例を挙げながら詳しく見ていきましょう。ポイント：静的メソッドはクラスから呼び出す静的メソッドはクラスそのものに属するメソッドであり、Company.comp()のようにクラス名を使って呼び出します。myComp.comp()のようにインスタンスから呼び出すことはできないため、エラーになってしまう点に注意してください。静的メソッド内でオブジェクトのデータを利用したい

extendsキーワードによるクラス継承 extendsキーワードは、JavaScriptにおいてクラス継承（class inheritance）を実現するために使用されます。継承によって作成された子クラスは、別のクラスが持つすべてのメソッドを受け継ぐことができます。ここでは、その基本的な使い方を簡潔に解説します。 サンプルコード 次の例では、extendsキーワードを使用して、「Company」クラスのプロパティを「Model」クラスへ継承しています。 super()メソッドは親クラスへの参照を表します。コンストラクター内でsuper()を呼び出すことは、親クラスのコンストラクターを呼び出

JavaScriptのクラスでは、ゲッター（getter）とセッター（setter）を利用できます。プロパティの値を返す前や設定する前に、何らかの特別な処理を行いたい場合には、ゲッターとセッターを使うのが賢明な設計です。クラスにこれらを追加するには、getキーワードとsetキーワードを使用します。 getキーワードとは getは、プロパティの値を取得する際に実行されるメソッドを定義します。通常の関数として呼び出すのではなく、普通のプロパティのようにアクセスできる点が大きな特徴です。 setキーワードとは setは、プロパティに値を代入する際に自動的に呼び出されるメソッドを定義します。値を保存す

setTimeout()メソッドとはsetTimeout()は、JavaScriptが標準で備えているタイマー系イベント処理の一つです。JavaScriptではwindowオブジェクトを使うことで、指定した時間間隔でコードを実行できます。その中でもsetTimeout()は、「一定時間が経過した後に特定の関数を実行する」ためのメソッドとして広く使われています。setTimeout()には2つの引数を渡します。1つ目は実行したい関数、2つ目は関数を実行するまでの待ち時間をミリ秒単位で指定する時間です。たとえば「2000」と指定すれば2秒後、「3000」と指定すれば3秒後に関数が実行されます。基本

setInterval()メソッドとはsetInterval()は、JavaScriptが提供するタイミングイベントの一つです。windowオブジェクトのメソッドとして用意されており、指定した時間間隔ごとにコード（関数）を繰り返し実行することができます。このメソッドには主に2つの引数を渡します。1つ目は繰り返し実行したい関数、2つ目はその関数を実行する間隔を示す時間（ミリ秒）です。構文window.setInterval(function, milliseconds, param1, param2, ...);第3引数以降に任意のパラメータを指定することも可能で、これらの値は実行される関数へ引

曜日（Weekday）とは 1週間は月曜日から日曜日までの7日間で構成されており、それぞれの日には1から7までの番号が順番に割り当てられています。JavaScriptのDateオブジェクトには、この曜日を取得するためのgetDay()メソッドが用意されています。ここでは、その基本的な使い方を簡潔に解説します。 構文 var d = getDay(); getDay()メソッドは引数を受け取らず、呼び出し時点の曜日に対応する数値をそのまま返します。たとえば月曜日であれば「1」、火曜日であれば「2」というように、曜日に応じた数値が得られます。 例1：当日の曜日を数値で表示する 次の例では、Dat

JavaScriptで値を文字列（string型）に変換する方法は、主に5つあります。それぞれ動作の仕組みや挙動が異なるため、用途に応じて使い分けることが大切です。空文字列との連結テンプレート文字列JSON.stringify()toString()メソッドString()関数各変換方法のポイント1. 空文字列との連結値に対して空文字列 を加算すると、JavaScriptの暗黙的な型変換によって文字列になります。手軽な一方で、意図しない演算結果につながる可能性もあるため注意が必要です。2. テンプレート文字列バッククォート `${value}` を使う方法です。可読性が高く、複数の値を組み合

Symbol.isConcatSpreadableとはSymbol.isConcatSpreadableは、ES6（ECMAScript 2015）で導入されたウェルノウンシンボルの一つで、Array.prototype.concat()メソッドを使用する際に、対象のオブジェクトをその配列要素として展開（フラット化）するかどうかを制御するために使われます。このプロパティがfalseに設定されている場合、配列の展開は一切行われません。デフォルト値はtrueであるため、明示的に指定しない限り、配列は常に展開されて連結されるという点に注意が必要です。Symbolを使用しない場合（デフォルトの動作）サ

date.toJSON()メソッドとはdate.toJSON()は、JavaScriptに組み込まれている関数の一つで、指定した日付オブジェクトの内容を文字列に変換するために使用されます。日付オブジェクトはDate()コンストラクターによって生成されます。このメソッドが返す文字列は、ISO 8601形式（UTC基準）で表現されるため、JSONデータとして扱う際に非常に便利です。構文dateObj.toJSON();このメソッドは引数（パラメーター）を一切受け取りません。生成済みの日付オブジェクトに対して呼び出すだけで、Date()コンストラクターの内容が変換された文字列が返されます。例1：単一

JavaScriptのMathオブジェクトと立方根JavaScriptでは、Mathオブジェクトを使用することで、さまざまな数学的な操作を実行できます。その中でもMath.cbrt()は、数値の立方根（三乗根）を求めるために特化したメソッドです。引数として数値を1つ受け取り、その立方根の値を戻り値として返します。平方根を求めるMath.sqrt()とは異なり、負の数に対しても有効な結果を返せる点が大きな特徴です。数学的に、負の数の立方根も実数として定義されるためです。構文Math.cbrt(64);引数に数値を渡すと、その立方根の値が戻り値として返されます。例1：正の値の立方根を求める次の例で

Math.imul()関数とは JavaScriptのMath.imul()関数は、通常の掛け算とは異なり、2つの引数に対してC言語と同様の32ビット乗算を実行し、その結果を返すメソッドです。一般的な乗算演算子（*）では正確に扱えない大きな数値や、ビットレベルの演算が必要な場面で活躍します。 この関数は、特にEmscriptenのようなプロジェクトにおいて重要な役割を果たしています。EmscriptenはC/C++のコードをJavaScriptに変換するツールであり、変換後のコードでC言語と同じ32ビット整数の挙動を再現するために、Math.imul()が頻繁に利用されます。 構文 var