JavaScript

lodashでは、バージョン4以降からpluck()メソッドが削除されました。その理由は、pluck()がmap()とまったく同じ機能を持っていたためです。重複する機能として不要と判断され、廃止されることになりました。そのため、以前pluck()を使っていた処理は、代わりにmap()関数で置き換えることができます。map()にオブジェクトの配列とプロパティ名（文字列）を渡すことで、各オブジェクトから指定したプロパティの値だけを抽出した配列を取得できます。使用例以下のように、map()関数を使って実装します。import _ from lodash const objects = [{ a: 1

JavaScriptファイルをサーバーから配信する際、Content-Typeヘッダーにはどの値を指定すべきか迷ったことはありませんか？「application/x-javascript」「text/javascript」「application/javascript」など、似たようなMIMEタイプが複数存在し、混乱しやすい領域です。この記事では、それぞれの違いと歴史的背景を解説します。 text/javascript：HTML初期に使われたレガシーなタイプ text/javascriptは、HTMLの黎明期から使用されてきたコンテンツタイプです。しかし、古い標準仕様においては廃止（obsol

結論から言うと、W3Cの仕様上、window.locationとdocument.locationはまったく同じものです。どちらも現在のページのURL情報を持つLocationオブジェクトを参照しており、hrefやreload()など、同じプロパティ・メソッドにアクセスできます。 window.locationが推奨される理由 仕様上は同一ですが、実務ではwindow.locationを使うことが強く推奨されます。その主な理由は以下の通りです。 歴史的な互換性の問題：古いブラウザの中には、document.locationを読み取り専用として扱うものがありました。環境による動作の差異を避け

イベントとは？イベント（event）とは、「何かが起こった」ことを伝えるためのシグナル（合図）です。ユーザーが要素をクリックしたり、キーボードを操作したり、ページの読み込みが完了したりすると、ブラウザは対応するイベントを発火させます。DOMに組み込まれた主なイベントDOMには数多くの組み込みイベントが用意されています。代表的なものを以下に紹介します。click － 要素の上でポインティングデバイスのボタン（任意のボタン。将来的には主ボタンのみになる予定）が押されて離されたときに発生します。mouseover － ポインティングデバイスが、リスナーが登録された要素またはその子要素の上へ移動したと

結論から言うと、JavaScriptでforEach()を実行しながら配列の値を変更することは可能です。forEach()のコールバック関数には「要素の値」「インデックス（添字）」「元の配列」の3つの引数が渡されます。このうちインデックスを利用することで、反復処理中に元の配列の要素を直接書き換えられます。実際にサンプルコードで確認してみましょう。サンプルコード以下の例では、配列の各要素を2乗した値で上書きしています。 arr[index] = val * val); console.log(arr);実行結果このコードを実行すると、コンソールには次のように出力されます。[ 1, 4, 9, 1

```html 「throw new Error」と「throw someObject」の基本的な違い JavaScriptには、エラーを投げる方法として「throw new Error()」と「throw someObject」の2つがあります。この2つの主な違いは、エラーの扱われ方（形式）にあります。 throw new Error の場合 new Error() を使用すると、コンストラクタに渡した値は次のような形式のErrorオブジェクトにラップされます。 { name: Error, message: コンストラクタに渡した値 } つまり、name プロパティには「E

モダンブラウザでは、DOM要素を削除すると、その要素に紐づけられたイベントリスナーもJavaScriptのメモリから解放されます。ただし条件付き：参照がなくなった場合のみ注意すべきなのは、この動作が起こるのは要素への参照が一切なくなった場合のみだという点です。言い換えると、その要素がどこからも参照されておらず、ガベージコレクション（GC）による回収対象になれる状態であることが前提となります。つまり、DOMから要素を削除したとしても、JavaScriptの変数や配列、オブジェクトなどがその要素への参照を保持し続けている間は、要素自体もイベントリスナーもメモリ上に残り続けます。具体例const b

配列の比較には2つのパターンがあるJasmineで配列同士を比較する場合、その意味合いとして大きく分けて2つのパターンが存在します。両者がメモリ上の同一の配列オブジェクトを参照している。それぞれ異なるオブジェクトを参照しているが、その内容（要素）がすべて等しい。この2つのパターンに対応するため、JasmineにはtoBeとtoEqualという2つのマッチャーが用意されています。それぞれの違いを具体例とともに見ていきましょう。例1：toBeによる参照の一致チェックケース1のように、変数が同じオブジェクトを参照しているかどうかを確認したい場合は、toBeメソッドを使用します。このメソッドは参照（同

parseInt関数とはバニラJavaScriptで文字列を数値に変換する最も基本的な方法が、グローバル関数のparseIntです。この関数は、文字列として渡された値を指定した基数（進数）に基づいて解釈し、整数を返します。構文parseInt(string, radix);各引数の意味は以下の通りです。string ― 解析対象となる値です。引数が文字列以外の場合は、ToStringメソッドによって自動的に文字列へ変換されます。また、先頭の空白文字は無視されます。radix ― 文字列の基数（数学的な記数法における底）を表す、2から36までの整数です。基数を指定してさまざまな進数を整数に変換で

結論：技術的な障害は存在しないRubyやPythonがJavaScriptのV8エンジンのような速度を実現できない理由――その答えはシンプルです。「何もない」のです。GoogleがV8プロジェクトにおいてJavaScriptのために投じたのと同様の最適化への投資が、RubyやPythonの言語エンジンにも行われれば、これらの言語もV8と同等の実行速度に到達できます。鍵を握るのは「投資」と「推進力」この問題は、言語そのものの構造的な限界というよりも、各言語を支援するスポンサー組織が、開発と最適化の取り組みにどれほどの推進力を与えているかという問題に帰着します。実際、JavaScriptはGoog

JavaScriptでは、オブジェクトの一部のプロパティだけを取り出して、新しいオブジェクトを作成したい場面がよくあります。そんなときに便利なのが、分割代入（destructuring）とプロパティのショートハンド記法を組み合わせる方法です。 基本的な例 例えば、次のようなオブジェクトがあるとします。 const person = {     name: John,     age: 40,     city: LA,     scho

オブジェクトから必要なプロパティだけを取り出し、それらを使って新しいオブジェクトを作成したい場合は、オブジェクトの分割代入（destructuring）とプロパティのショートハンド記法を組み合わせると、簡潔かつ読みやすく実装できます。例えば、次のようなオブジェクトがあったとします。例const person = { name: John, age: 40, city: LA, school: High School }この中から「name」と「age」だけが必要な場合は、分割代入で値を取り出し、ショートハンド記法を使って新しいオブジェクトを生成します。const

divの高さを取得できる2つのプロパティ バニラJavaScript(ライブラリやフレームワークに依存しない素のJavaScript)では、clientHeightとoffsetHeightという2つのプロパティを使って、div要素の高さを簡単に取得できます。 どちらもピクセル単位の整数値を返しますが、計算に含まれる要素が異なるため、用途に応じて適切に使い分けることが大切です。 clientHeight:要素の高さにパディングを含みます。ボーダーやスクロールバーは含まれません。 offsetHeight:要素の高さにパディング・スクロールバー・ボーダーをすべて含みます。 違いの比較表

JavaScriptで要素（divなど）の高さを取得したい場合、clientHeight と offsetHeight の2つのプロパティを利用できます。どちらも要素の高さを返しますが、計算に含まれる要素が異なるため、用途に応じて使い分ける必要があります。 clientHeightとは clientHeight は、要素の「表示領域」の高さを返すプロパティです。パディング（padding）は含まれますが、ボーダー（border）やスクロールバーは含まれません。 含まれるもの・除外されるもの 含まれる：コンテンツ領域、パディング 除外される：ボーダー、マージン、スクロールバー offsetH

JavaScriptフレームワークとは？JavaScriptフレームワーク（JSフレームワーク）とは、定型的なプログラミング処理やタスクに利用できる「あらかじめ書かれたコード」をまとめたJavaScriptのコードライブラリのことです。文字どおり、WebサイトやWebアプリケーションを構築する際の「土台」として機能します。素のJavaScriptとの違いたとえば、フレームワークを使わずに素のJavaScriptだけで開発する場合、スタイルの設定やコンテンツの更新などを行うたびに、DOM APIを通じて手動でDOMを操作しなければなりません。一方、JSフレームワークには双方向データバインディング

HTMLページ上のタグで表示されている画像を、JavaScriptを使ってデータURI（Data URL）に変換するには、まず要素を作成し、その幅と高さを画像のサイズに合わせます。次にキャンバス上に画像を描画し、最後にtoDataURL()メソッドを呼び出します。このメソッドは、画像をBase64エンコードしたデータURIを文字列として返します。取得したデータURIは、そのままタグのsrc属性に指定したり、CSSのbackground-imageとして利用したり、サーバーへ送信したりすることが可能です。例えば、idが「my-image」の画像を変換する場合は、以下のように実装します。コード例f

window.locationとは Window.locationは読み取り専用のプロパティで、現在表示しているドキュメントのURL情報を保持するLocationオブジェクトを返します。 Locationインターフェースは、そのオブジェクトがリンクされている場所（URL）を表します。locationオブジェクトには、以下のような便利なプロパティが用意されています。 locationオブジェクトの主なプロパティ一覧 location.href URL全体を含む文字列（DOMString）です。この値を変更すると、関連付けられたドキュメントが新しいページへ遷移します。また、関連ドキュメントとは

HTMLページ上の画像タグをJavaScriptでデータURI（Data URI）に変換するには、まずcanvas要素を作成し、その幅と高さを対象の画像と同じサイズに設定します。続いてcanvas上に画像を描画し、最後にtoDataURL()メソッドを呼び出すことで、base64エンコードされたデータURIを取得できます。 変換の基本手順 document.createElement()でcanvas要素を作成する 画像と同じ幅・高さをcanvasに設定する drawImage()メソッドでcanvasに画像を描画する toDataURL()を呼び出してデータURIを取得する この処理によ

console.log と console.dir の基本的な違い JavaScript のデバッグで頻繁に使われる console.log() と console.dir() は、似たような目的で使用されますが、オブジェクトを出力する際の挙動に明確な違いがあります。 console.log() の特徴 console.log() は、引数として渡されたオブジェクトの toString 表現を表示します。文字列や数値などのプリミティブ値をそのまま出力するのに適しており、複数の値をカンマ区切りで同時に渡すことも可能です。 const user = { name: 太郎, age: 30 };

JavaScriptのforEach()メソッドは、breakやcontinueによるループの中断・脱出に対応していません。例外（Exception）をスローする以外に、ループの途中で処理を終了させる手段が用意されていないのが特徴です。 そのため、条件を満たした時点でループを抜けたい場合は、別の手法を使うのが一般的です。ここでは代表的な3つの方法を紹介します。 1. lodashの_.findを使う ユーティリティライブラリ「Lodash」の_.findを使うと、条件に合致する要素が見つかった時点で自動的にループを終了します。 _.find([1, 2, 3, 4], (element) =&