-
JavaScriptで現在のWebページのプロトコルとパス名を取得する方法
JavaScriptには、現在表示しているWebページに関する情報を取得するためのlocationオブジェクトが用意されています。このlocationオブジェクトでは、window.location.protocolで現在のページのプロトコルを、window.location.pathnameでパス名(pathname)をそれぞれ取得できます。ここでは、これら2つのプロパティについて詳しく解説します。 パス名(pathname)の取得 すべてのWebサイトにはパス名が存在します。JavaScriptのlocationオブジェクトが提供するwindow.location.pathnameを使用す
-
JavaScriptでオブジェクトの列挙可能なプロパティ値を配列として取得する方法
JavaScriptでは、Object.keys() や for...in ループなどを使ってオブジェクトからキーや値を取り出すことができますが、これらの方法だけでは値を配列として直接取得することはできません。配列形式のデータは、フィルタリングやマップ処理など、さまざまな場面で非常に便利です。そこで活躍するのが Object.values() メソッドです。このメソッドを使うと、オブジェクトが持つ列挙可能なプロパティの値を要素とする配列を受け取ることができます。構文Object.values(obj);Object.values() は引数としてオブジェクトを受け取り、そのオブジェクトのプロパ
-
JavaScriptのMap(マップ)からすべての要素を削除する方法【clear()メソッドの使い方】
Mapとは、各要素をキー(Key)と値(Value)のペアとして格納するコレクションです。キーにも値にも、オブジェクトとプリミティブ値のどちらでも格納できます。また、Mapオブジェクトを反復処理すると、挿入した順序どおりにキーと値のペアが返されるという特徴があります。 Mapには、内部の値をまとめて削除するためのメソッドとしてmap.clear()が用意されています。このメソッドを実行すると、マップ内のすべてのキー/バリューペアが削除され、マップは完全に空になります。 構文 map.clear(); clear()メソッドは引数を取りません。呼び出すだけで、マップに格納されているすべての要素が
-
JavaScriptで画面の色深度とピクセル深度を取得する方法
JavaScriptのwindowオブジェクトには、ブラウザに関するさまざまな情報を取得するためのメソッドやプロパティが多数用意されています。その中でも、screen.colorDepthとscreen.pixelDepthを使用すると、ブラウザ画面の色深度(カラーデプス)とピクセル深度をそれぞれ取得できます。ここでは、それぞれの使い方について詳しく解説していきます。 色深度(Color Depth)とは windowオブジェクトが提供するscreen.colorDepthプロパティは、画面の色深度を返します。色深度とは、1つの色を表示するために使用されるビット数のことを指します。現在のコンピ
-
JavaScriptでブラウザウィンドウの内側の高さと幅を取得する方法
JavaScriptのwindowオブジェクトは、ブラウザウィンドウそのものを表すオブジェクトです。この機能はすべての主要なブラウザでサポートされており、追加のライブラリなしですぐに利用できます。ブラウザウィンドウの内側の高さ(innerHeight)と内側の幅(innerWidth)を取得するには、windowオブジェクトが提供する以下のプロパティを使用します。window.innerWidth … ウィンドウの内側の幅を取得window.innerHeight … ウィンドウの内側の高さを取得これらのプロパティを使えば、ブラウザウィンドウのサイズを簡単に取得できます。ここでは、それぞれの使
-
JavaScriptのDate.parse()メソッドとは?日付をミリ秒に変換する方法を解説
JavaScriptで日付を解析(パース)すると、その日付をミリ秒単位の時刻値として取得できます。この処理に使われるのが Date.parse() メソッドです。 Date.parse() は、指定した日付と1970年1月1日0時0分0秒(UTC・いわゆるエポックタイム)との間の経過時間をミリ秒数で返します。開発者がこの仕様で設計したのは、日付同士の比較や差分の計算を数値として簡単に行えるようにするためです。 Date.parse() の基本構文 Date.parse(dateString) 引数には「July 14, 2019」のような日付文字列を渡します。戻り値は数値型のミリ秒です。 サン
-
JavaScriptで日付を比較する方法|サンプルコード付きでわかりやすく解説
JavaScriptでは、Dateオブジェクトを使うことで日付を簡単に比較できます。比較対象となる日付は、過去・現在・未来のいずれであっても問題ありません。たとえば、過去の日付と未来の日付を比べたり、未来の日付と今日の日付を比べたりすることも可能です。日付比較の仕組みDateオブジェクト同士を「>」や「<」といった比較演算子で比べると、それぞれの日付は自動的に「1970年1月1日00:00:00 UTCからの経過ミリ秒」に変換され、数値として比較されます。そのため、開発者が特別な変換処理を書く必要はありません。なお、「==」や「===」による等価比較の場合は注意が必要です。Date
-
JavaScriptで数値が安全な整数かどうかを判定する方法【Number.isSafeIntegerの使い方】
JavaScriptにおける安全な整数とは? JavaScriptには数値に関するいくつかの制約があります。すべての数値は標準化された形式(IEEE 754倍精度浮動小数点数)に従う必要があり、この規則に違反する整数は「安全な整数」として扱うことができません。 「安全な整数」とは、-(2^53 - 1) から (2^53 - 1) までのすべての整数(±9,007,199,254,740,991)を指します。これは Number.MIN_SAFE_INTEGER から Number.MAX_SAFE_INTEGER の範囲に相当し、この範囲内の整数であれば演算結果の正確性が保証されます。 ある
-
JavaScriptで画面の幅と高さを取得する方法をわかりやすく解説
JavaScriptには、ユーザーの画面に関する情報を保持するwindow.screenオブジェクトが用意されています。このオブジェクトには、画面の高さや幅だけでなく、色の深度や利用可能な領域など、さまざまな情報が含まれています。画面の高さと幅を取得するには、それぞれscreen.heightプロパティとscreen.widthプロパティを使用します。画面の高さを取得する構文screen.height;画面の幅を取得する構文screen.width;どちらのプロパティも、戻り値はピクセル(px)単位の整数です。例1:画面の幅を表示する次の例では、screen.widthプロパティを使って画面の
-
JavaScriptでオブジェクト内の配列をループ処理する方法を解説
オブジェクトの中に格納された配列をループ処理する方法は、オブジェクト自体をループ処理する場合と基本的に同じです。オブジェクト内の配列を走査するには、for...in ループを使用します。for...in ループとは「for...in」ループは、オブジェクトのプロパティや配列のインデックスを順番に取り出して繰り返し処理を行うための構文です。ネストされた構造(オブジェクトの中に配列、さらにその中にオブジェクトや配列があるようなデータ)に対しては、for...in ループを入れ子にすることで、すべての要素にアクセスできます。サンプルコード次の例では、「obj」というオブジェクトを定義しています。この
-
JavaScriptでJSONオブジェクト内の配列の値を変更する方法をわかりやすく解説
オブジェクトの中に配列が含まれている場合でも、その配列の値を変更する方法は、通常のオブジェクトのプロパティを変更する場合と基本的に同じです。ここでは一般的な原則がそのまま適用されるため、特別なテクニックは必要ありません。 サンプルコード 次の例では、companies 配列の最初の要素は初期状態では「Tesla」になっています。しかし、値を書き換えた後は最初の要素が「SolarCity」に変更され、その結果が出力として表示されます。 <html> <body> <script> var res1 = ""; var res
-
【JavaScript】padEnd()メソッドで文字列の末尾に別の文字列を連結する方法
padEnd()メソッドとは JavaScriptには文字列を連結するためのstring.concat()メソッドが用意されています。しかし、このメソッドには「連結後の文字列の長さを揃えたい」「特定の長さまで文字を埋めたい」といった細かい制御ができません。 そこで役立つのがstring.padEnd()メソッドです。このメソッドを使うと、元の文字列の末尾に別の文字列を繰り返し追加し、指定した長さにぴったり合わせた新しい文字列を作成できます。なお、元の文字列自体は変更されず、結果は新しい文字列として返される点にも注意してください。 構文 string.padEnd(length, string
-
JavaScriptのpadStart()メソッドとは?文字列の先頭にパディングを追加する方法を解説
padStart()メソッドとはJavaScriptでは、concat()メソッドを使うことで2つの文字列を連結できます。しかし、元の文字列の先頭に特定の文字列を追加したい場合、最も簡単な方法がstring.padStart()メソッドです。このメソッドは、単に文字列を先頭に追加するだけでなく、追加後の合計文字数も管理してくれます。引数は2つあり、1つ目は目標となる長さ(length)、2つ目は追加する文字列です。指定された長さに達するまで、2つ目の文字列が元の文字列の先頭に繰り返し追加されます。構文string.padStart(length, string);length:結果として得られ
-
JavaScriptでNaNがNaNであるかどうかを確認する方法
NaN(Not a Number)は、JavaScriptにおいて唯一「自分自身と等しくない」という特殊な性質を持つ値です。他の値であれば自分自身と比較すると等しくなりますが、NaNだけは例外で、NaNとNaNを比較しても等しいと判定されません。例1:== 演算子ではNaNを判定できない<html> <body> <script> var val = 54/the; document.write(val); document.write(</br>); if(val == NaN) { docume
-
JavaScriptの分割代入(デストラクチャリング)で変数を入れ替える方法
分割代入(デストラクチャリング)を使うことで、変数の入れ替え(スワップ)は非常に簡単になりました。従来のJavaScriptでは、別の一時変数を用意して入れ替え処理を行うのが一般的でした。動作自体に問題はありませんが、コードが長くなりやすいという課題がありました。一方、モダンJavaScriptでは第3の変数を用意する必要すらありません。本記事では、その方法を詳しく解説します。 例1:一時変数を使った従来の方法 次の例では、「tmp」という一時変数を使って変数aとbを入れ替えています。余分な変数が必要になるため、どうしてもコードが長くなってしまいます。 <html> <bo
-
JavaScriptで配列をランダムにシャッフルする方法!_.shuffle()とFisher-Yatesアルゴリズムを解説
JavaScriptで配列をシャッフルする基本:_.shuffle()JavaScriptで配列の要素の順番をランダムに入れ替えたい場合、Underscore.jsやLodashといった定番のユーティリティライブラリが提供する_.shuffle()関数を使うのが手軽です。この関数は内部でFisher-Yates(フィッシャー–イェーツ)シャッフルと呼ばれるアルゴリズムを採用しており、すべての並び順が等しい確率で現れる、偏りのないシャッフルを実現できます。構文_.shuffle(array);引数にはシャッフルしたい配列を渡します。戻り値として、要素がランダムに並べ替えられた新しい配列が返されま
-
【JavaScript】_.where()メソッドで特定の条件に一致するすべての要素を取得する方法
JavaScriptには数多くのフレームワークやユーティリティライブラリが存在しますが、その中でもunderscore.jsは軽量かつ高機能なライブラリとして広く使われています。underscore.jsが提供する便利な関数のひとつが_.where()で、これを使うと配列の中から特定の条件に一致する要素を簡単に見つけ出すことができます。 _.where()は、指定された条件を配列内の各要素が満たしているかどうかを順番に判定し、条件を満たした要素だけを新しい配列として返すメソッドです。たとえば「配列の中から給与が15000と等しい人をすべて探したい」という場合、_.where()は全要素を精査し
-
JavaScriptで配列の先頭のn個の要素を取得する方法|_.first()の使い方を解説
JavaScriptで配列の先頭からn個の要素を取得したい場合、自前でロジックを書くこともできますが、JavaScriptライブラリであるunderscore.jsには、この用途に特化した便利な関数_.first()が用意されています。配列操作の際に広く使われる定番メソッドです。基本構文_.first(array, n);第1引数には対象となる配列、第2引数には取得したい要素数(n)を渡します。第2引数の数値を指定すると、配列の先頭からその個数分の要素が出力として返されます。なお、nを省略した場合は先頭の1要素のみが返ります。例1:引数に配列のみを渡した場合次の例では、引数として配列だけを渡し
-
JavaScriptでオブジェクトのキーと値を反転する方法!_.invert()メソッドの使い方を解説
JavaScriptでオブジェクトのキーと値(key/value)を入れ替える作業は、かつてはかなり手間のかかる処理でした。しかし、JavaScriptフレームワークであるunderscore.js(およびその派生ライブラリであるlodash)の登場により、この作業は驚くほど簡単になりました。これらのライブラリには便利な関数が多数用意されており、その中のひとつが_.invert()メソッドです。このメソッドを使うと、オブジェクトのキーと値を一瞬で反転できます。例えば、name: Kiran というキーと値のペアを持つオブジェクトに _.invert() を適用すると、Kiran: name の
-
JavaScriptでオブジェクトを浅くコピー(シャローコピー)する方法をわかりやすく解説
JavaScriptでオブジェクトを浅いコピー(シャローコピー)したい場合、ライブラリUnderscore.jsが提供する_.extend()メソッドを利用できます。このメソッドは、1つ以上のソースオブジェクトが持つすべてのプロパティを宛先(destination)オブジェクトへコピーし、その宛先オブジェクトを返します。ここで重要なのは、コピーが参照(reference)ベースで行われるという点です。つまり、ネストされたオブジェクトや配列の中身そのものは複製されず、元データへの参照が引き継がれます。これこそが「浅いコピー」と呼ばれる所以です。構文_.extend(object*);_.exte