JavaScript

JavaScriptには、オブジェクトのプロパティを作成・アクセスするための記法が2種類あります。ひとつはドット記法、もうひとつはブラケット記法（角括弧記法）です。変数に格納された値をプロパティ名として使いたい場合は、ドット記法では対応できないため、ブラケット記法を使用します。基本的な方法：ブラケット記法を使う例以下のように、変数名をそのまま角括弧の中に入れることで、変数の値をプロパティ名として設定できます。const obj = { a: foo }; const prop = bar; // 変数propの値「bar」をプロパティ名として設定 obj[prop] = baz; conso

Sinon.jsは、単体テスト用の「スパイ（Spies）」「スタブ（Stubs）」「モック（Mocks）」を単独で提供するJavaScriptのテストライブラリです。オブジェクトのモックを作成することで、外部APIやデータベースなどの依存要素から切り離してコードを検証できるようになります。Sinon.jsが提供する3つの主要機能スパイ（Spies）関数の呼び出しを追跡するためのフェイク関数です。「その関数が本当に呼び出されたのか」「何回呼ばれたのか」「どのような引数で呼び出されたのか」などを確認できます。既存の関数をラップして使うため、元の挙動を壊さずにテストできるのが特徴です。スタブ（Stu

Window.location は読み取り専用のプロパティで、現在のドキュメントの位置情報を保持する Location オブジェクトを返します。このオブジェクトを利用することで、URL をホスト名やパスなどに簡単に分解（解析）できます。Location インターフェースは、そのオブジェクトがリンクされている場所（URL）を表します。location オブジェクトには、以下のような便利なプロパティが用意されています。Locationオブジェクトの主なプロパティLocation.hrefURL 全体を格納する DOMString です。この値を変更すると、関連付けられたドキュメントが新しいページへ

JavaScriptのDeferred・Promise・Futureの違いを解説非同期処理を扱う際によく登場する「Deferred」「Promise」「Future」という3つの用語。名前は似ていますが、それぞれ役割が異なります。ここでは各概念の意味と、相互の関係をわかりやすく整理して解説します。Future（フューチャー）とはFutureは歴史のある用語で、その意味は現在の「Promise」とほぼ同一です。将来的に利用可能になる値を表す概念として、古くからプログラミング言語やライブラリで使われてきました。Promise（プロミス）とはPromiseは「まだ確定していない値」を表すオブジェクト

history APIのreplaceStateメソッドを使えば、ページを更新せずにハッシュを削除できるURLから#以降のハッシュ部分を取り除きたい場合、History APIのreplaceState()メソッドを使用することで、ページの再読み込みなしに実現できます。replaceState()は、現在の履歴エントリを、引数として渡されたステートオブジェクト・タイトル・URLで置き換えるメソッドです。ユーザーの操作に応じて、現在の履歴エントリの状態やURLだけを更新したい場合に特に便利です。ハッシュを削除するには、次のように記述します。history.replaceState(null, n

JavaScriptでは、オブジェクトの深い階層にあるプロパティへアクセスする際、途中のプロパティが存在しないとエラーが発生してしまうことがあります。そんなときに便利なのが、lodashライブラリの get メソッドです。このメソッドを使えば、どの階層のプロパティでも安全に取得できます。1階層目のプロパティへのアクセスはシンプルですが、ネストされたプロパティへのアクセスは少し複雑です。そのため、十分にテストされたlodashのような信頼性の高いライブラリを利用するのがおすすめです。lodashのgetメソッドを使った例深くネストされたオブジェクトには、次のようにアクセスできます。let _ =

JavaScriptでネストした（入れ子になった）オブジェクトのプロパティを設定する場合、lodash の set メソッドを使うと、どの階層のプロパティでも安全に値を書き込めます。第1階層のプロパティ設定は obj.a = value のようにシンプルに書けますが、深くネストされたプロパティへ直接アクセスしようとすると、途中の階層が存在しない場合にエラーが発生するなど扱いが難しくなります。そのため、実績のあるテスト済みライブラリである lodash を利用するのがおすすめです。lodash の set メソッドは、ドット区切りの文字列（例： a.b.foo）や配列形式のパスを受け取ることがで

オブジェクト指向プログラミング言語では、privateフィールドなどの機能を使ってデータ隠蔽(カプセル化)を行い、クラスの内部構造を外部から隠すことができます。一方、JavaScriptには、内部の処理を隠蔽・カプセル化するための組み込みサポートが従来存在しませんでした。そこで役立つのが匿名関数です。匿名関数を活用することで、JavaScriptでもカプセル化を実現できます。実際に例を見てみましょう。通常のコードの問題点const HIDDEN_CONST = 100; function fnWeWantToHide(x, y) {     return

JavaScriptを使えば、セレクトボックス（<select>要素）の選択値を簡単にプログラムから操作できます。本記事では、基本的な手順を具体的なコード例とともにわかりやすく解説します。まず、次のようなセレクトボックスがHTML内に定義されているとします。<select id=my-select>    <option value=1>選択してください</option>    <option value=2>りんご</option>   &n

JavaScriptで日付に1日（または任意の日数）を加算するには、組み込みのsetDateメソッドを使うのが最もシンプルで確実な方法です。外部ライブラリは一切不要で、標準のDateオブジェクトだけで実現できます。ここでは、Dateオブジェクトのプロトタイプに独自メソッドを追加して、どの日付オブジェクトからでも簡単に日数を加減算できるようにする実装を紹介します。実装例：addDaysメソッドを定義するDate.prototype.addDays = function(days) { let d = new Date(this.valueOf()); d.setDate(d.getDat

MEANスタックとは？「MEAN」とは、Webアプリケーション開発で使われる次の4つの技術の頭文字を取った略称です。MongoDB：ドキュメント指向のNoSQLデータベースExpress：Node.js向けの軽量WebアプリケーションフレームワークAngular：Googleが中心となって開発するフロントエンドフレームワークNode.js：サーバーサイドでJavaScriptを実行できるランタイム環境これらを組み合わせることで、フロントエンドからバックエンド、データベースまでをすべてJavaScriptで統一して開発できるのが、MEANスタック最大の魅力です。MEAN.jsとMEAN.ioは本

localStorageは自動的には消えないlocalStorageに保存されたデータは、明示的に削除しない限りブラウザ内に残り続けます。そのため、「タブやウィンドウを閉じたらデータも消したい」というケースでは、何らかの仕組みを自分で実装する必要があります。window.onunloadイベントを使う方法タブやウィンドウが閉じられるタイミングを検知するには、window.onunloadイベントを利用します。ここでは例として、グローバルなストレージオブジェクトとして「MyStorage」が存在するものとします。次のようにイベントハンドラを記述できます。window.onunload = ()

JavaScriptでは、dispatchEventメソッドを使うことで、個々の要素に対してイベントを手動で発生（ディスパッチ）させることができます。ここでは、changeイベントをプログラムから強制的に発火させる具体的な手順を解説します。 1. 対象となるHTML要素 例として、次のようなinput要素を用意し、この要素に対してchangeイベントを扱うケースを考えます。 <input id=test type=text /> 2. イベントハンドラの登録 まず、対象要素にchangeイベントのリスナーを登録します。 document.querySelector(#test)

JavaScriptでオブジェクトの配列を特定のキーごとにグループ化する最も効率的な方法は、reduce()関数を使用することです。reduce()メソッドは、配列の各要素に対して指定したリデューサー（還元）関数を実行し、最終的に単一の出力値を返します。アキュムレータ（累積値）を活用することで、forループを明示的に書くよりも簡潔にグループ化処理を実現できます。コード例 { const key = obj[property]; if (!acc[key]) { acc[key] = []; } // 指定さ

Web開発では、ページ上の画像をデータURI(Base64エンコードされた文字列)に変換したい場面があります。例えば、画像をそのままHTMLやCSSに埋め込んだり、サーバーへのリクエストを減らしたりするケースです。JavaScriptを使ってHTMLページ内の<img>タグの画像をデータURIに変換するには、以下の手順を実行します。canvas要素を作成するcanvasの幅と高さを対象の画像と同じサイズに設定するcanvas上に画像を描画するtoDataURL()メソッドを呼び出す基本的な仕組みtoDataURL()メソッドは、canvasに描画された内容をBase64エンコードさ

無名関数（匿名関数）とはJavaScriptには、関数を定義する方法として「関数宣言」と「関数式」があります。このうち関数式は、関数宣言とほぼ同じ構文で記述でき、さらに次の2種類に分けられます。名前付き関数式：関数に名前が付けられているもの（コールスタック上で名前が表示されるため、デバッグ時に便利です）無名関数（匿名関数）：関数に名前を付けずに定義するもの本記事では、後者の「無名関数」について、基本的な書き方と使い方を解説します。無名関数の基本的な書き方無名関数は、functionキーワードで関数を定義し、そのまま変数に代入する形で記述します。関数名を指定しない点が最大の特徴です。var my

MDN（Mozilla Developer Network）によると、アロー関数（矢印関数）は、通常の関数式に比べて構文が簡潔に書ける代替手段です。ただし、this、arguments、super、new.targetといったキーワードに対する独自のバインディングを持たないという特徴があります。そのため、アロー関数はメソッドとして使うには不向きであり、コンストラクタとしても利用できません。 この記事では、JavaScriptにおける通常の関数とアロー関数の、一見すると気づきにくい3つの重要な違いについて詳しく解説します。 1. 独自のthisバインディングを持たない アロー関数には自身のthi

JavaScriptでオブジェクトを扱う際、Lodashの_.assign()（または_.extend()）と_.merge()はどちらもオブジェクトを結合するためのメソッドですが、その動作には重要な違いがあります。この記事では、両者の違いを具体例とともにわかりやすく解説します。 _.assign() / _.extend() の動作：浅いコピー（シャローコピー） assignやextendは、ソースオブジェクトの各プロパティを取り出し、その値をそのままデスティネーション（コピー先）にコピーします。 ポイントは、プロパティの値がそれ自体オブジェクトだった場合でも、その中身を再帰的にたどらないと

LodashとUnderscore.jsはどちらもJavaScriptの定番ユーティリティライブラリlodashとunderscoreは、どちらもJavaScript開発を快適にするためのユーティリティライブラリです。配列・数値・オブジェクト・文字列などを簡単に操作できる豊富なヘルパー関数を提供しており、次のような用途で特に威力を発揮します。配列・オブジェクト・文字列の反復処理（イテレーション）値の操作（manipulate）や検証（test）複数の関数を組み合わせた合成関数の作成両者とも関数型プログラミングのスタイルを採用したライブラリであり、基本的な思想は共通しています。LodashはUn

JavaScriptは、Web開発において最も広く使われているプログラミング言語の一つです。フロントエンド開発の中核を担うだけでなく、Node.jsの登場によりサーバーサイド開発にも活用されるようになりました。ここでは、JavaScriptの主な長所と短所について詳しく解説します。 JavaScriptの長所(メリット) 1. 高速な処理速度 クライアントサイドで動作するJavaScriptは非常に高速です。コードがユーザーのブラウザ上で即座に実行されるため、外部リソースが必要ない限り、バックエンドサーバーへのネットワーク通信に左右されずにスムーズな動作を実現できます。 2. 学習と実装が比較