-
JavaScriptでブール値(Boolean)を文字列に変換する方法をわかりやすく解説
JavaScriptでは、true や false といったブール値(Boolean)を文字列に変換する場面がよくあります。例えば、画面への表示やログ出力、文字列との連結などがその代表例です。ここでは、代表的な変換方法をサンプルコードとともに紹介します。 String()関数を使う方法 最もシンプルで一般的な方法は、グローバル関数の String() を使うことです。引数に渡したブール値がそのまま文字列として返されます。 <!DOCTYPE html> <html> <body> <p>ブール値を文字列に変換する</
-
JavaScriptのfilter()メソッドとは?配列から条件に合う要素を抽出する方法
JavaScriptのfilter()メソッドは、配列の各要素に対して指定した関数(テスト関数)を実行し、その条件を満たす要素だけを集めた新しい配列を作成するメソッドです。元の配列は変更されないため、安全にデータの絞り込みを行えます。 filter()メソッドのパラメータ callback:配列の各要素をテストするための関数。この関数が true を返した要素のみが、新しい配列に含まれます。 thisObject:callback を実行する際に this として使用するオブジェクト(省略可能)。 以下のコード例では、10以上の値だけを新しい配列として取り出しています。実際にブラウザで実行
-
JavaScript正規表現で「p」を1つ以上含む文字列にマッチさせる方法
JavaScriptの正規表現(RegExp)を使って、「p」を1つ以上含む任意の文字列にマッチさせたい場合は、量指定子である「p+」を使用します。「+」は、直前の文字が1回以上連続して出現することを表す記号です。 サンプルコード 以下のコードを実行すると、文字列の中から「p」が1つ以上連続する部分をすべて抽出できます。ここでは「p+」が、文字「p」の出現回数(1回以上)を表しています。 <html> <head> <title>JavaScript Regular Expression&
-
JavaScriptのreduceRight()メソッドで配列の要素に右から左へ関数を適用する方法
JavaScriptで配列の2つの値に対して右から左へ順に関数を適用し、最終的に1つの値に集約したい場合は、reduceRight()メソッドを使用します。このメソッドはreduce()と似ていますが、処理の方向が逆(右から左)である点が特徴です。 reduceRight()メソッドのパラメータ callback − 配列の各要素に対して実行される関数です。引数として「累積値」「現在の要素」「現在のインデックス」「元の配列」を受け取ります。 initialValue − 最初のコールバック呼び出し時に最初の引数として使用される初期値です。省略した場合、配列の最後の要素が初期値として使われます
-
JavaScriptでNaNを数値に変換する方法を解説
JavaScriptでは、Number()関数を使うことで値を数値型に変換できます。しかし、NaN(Not-a-Number)自体を数値に変換した場合、結果もそのままNaNになります。これは、NaNが「数値ではない」という特別な状態を表すためです。 基本的な変換例 以下のコードを実行して、NaNを数値に変換する挙動を確認してみましょう。 <!DOCTYPE html> <html> <body> <p>Convert NaN to Number</p> <script>
-
JavaScriptのsetUTCHours()メソッドでUTC(協定世界時)に基づいて時刻を設定する方法
JavaScriptのsetUTCHours()メソッドは、指定した日付の時刻(時間)を、協定世界時(UTC)に基づいて設定するためのメソッドです。ローカルタイムではなく、常にUTCを基準として動作する点が特徴です。 setUTCHours()メソッドの構文 setUTCHours()メソッドの基本的な構文は以下のとおりです。 setUTCHours(hoursValue[, minutesValue[, secondsValue[, msValue]]]) パラメータの詳細 hoursValue − 時間を表す0から23までの整数値を指定します。このパラメータは必須です。 minutesV
-
JavaScriptのsetUTCFullYear()メソッドとは?協定世界時(UTC)で指定日付の年を設定する方法
setUTCFullYear()メソッドとはJavaScriptのsetUTCFullYear()メソッドは、Dateオブジェクトが保持する指定の日付に対して、協定世界時(UTC)に基づいて「年」を設定するためのメソッドです。ローカルタイムではなく、常にUTCを基準として値が更新される点が大きな特徴です。構文setUTCFullYear(yearValue[, monthValue[, dayValue]])パラメータの詳細yearValue − 設定する年を表す整数値です。例えば「2008」のように指定します。monthValue − 月を表す0〜11の整数値です。0が1月、11が12月に対
-
JavaScriptのsetUTCDate()メソッドでUTC基準の日付(月の日)を設定する方法
JavaScriptの setUTCDate() メソッドは、協定世界時(UTC)に基づいて、指定された日付オブジェクトの「月の日」(何日か)を設定するためのメソッドです。ローカルタイムゾーンではなくUTCを基準に処理されるため、国際的なアプリケーションやサーバー間での日時管理において正確な日付操作が可能になります。setUTCDate()メソッドの構文とパラメータsetUTCDate(dayValue) メソッドが受け取るパラメータは以下のとおりです。dayValue − 月の日を表す1から31までの整数値を指定します。使用例以下のコードを実行すると、指定した日付に対してUTC基準で月の日を
-
JavaScriptにおけるブラウザオブジェクトモデル(BOM)の役割とは?
ブラウザオブジェクトモデル(BOM:Browser Object Model)とは、JavaScriptがWebブラウザとやり取りするためのプロパティやメソッドをまとめた仕組みのことです。BOMの中核となるのはwindowオブジェクトで、これを通じてブラウザウィンドウの幅や高さといった情報を取得したり、新しいウィンドウを開いたりすることができます。また、window.screenオブジェクトを利用すれば、ユーザーの画面(ディスプレイ)の幅と高さの情報も取得可能です。BOMの主な構成要素window:ブラウザウィンドウそのものを表す最上位オブジェクトscreen:画面の幅・高さなどの表示に関する
-
ドラッグした要素がターゲット上にあるときにJavaScriptで発生するイベントはどれですか?
ドラッグ&ドロップ操作において、ondragoverイベントは、ドラッグ中の要素がドロップターゲット(ドロップ先)の上に重なっている間に発生します。このイベントは、ユーザーに「ここにドロップできる」という視覚的なフィードバックを与えたり、実際にドロップを許可するための準備処理を行ったりする際に重要な役割を果たします。 ondragoverイベントを使う際の注意点 ondragoverイベントハンドラ内では、必ずevent.preventDefault()を呼び出す必要があります。これは、ブラウザがデフォルトで行う「データのドロップを拒否する」動作を無効化し、その後のdropイベントが正しく発生
-
JavaScriptでNaNを文字列に変換する方法|String()関数の使い方をわかりやすく解説
NaNとは?JavaScriptにおける「NaN(Not a Number)」は、数値演算の結果が無効または未定義であることを表す特殊な値です。たとえば、0を0で割った場合や、数値に変換できない文字列をNumber型へ変換しようとした際などに発生します。このNaNを文字列として扱いたい場面は少なくありません。デバッグ時のログ出力や、Webページへの表示などがその代表例です。ここでは、最も基本的な方法であるString()関数を使った変換手順をご紹介します。String()関数を使った変換方法以下のコードを実行すると、NaNを文字列に変換する様子を確認できます。<!DOCTYPE html
-
JavaScriptのgetUTCDay()メソッドで指定した日付の曜日を取得する方法
JavaScriptの getUTCDay() メソッドは、協定世界時(UTC)に基づいて、指定した日付の曜日を返します。戻り値は曜日に対応する整数で、0が日曜日、1が月曜日、2が火曜日というように、土曜日の6まで順に対応しています。getUTCDay()の戻り値一覧0:日曜日(Sunday)1:月曜日(Monday)2:火曜日(Tuesday)3:水曜日(Wednesday)4:木曜日(Thursday)5:金曜日(Friday)6:土曜日(Saturday)サンプルコード以下のコードを実行すると、指定した日付の曜日を取得できます。<html> <
-
【JavaScript】getTimezoneOffset()で現在のロケールのタイムゾーンオフセットを分単位で取得する方法
JavaScriptのDateオブジェクトに用意されているgetTimezoneOffset()メソッドを使うと、現在のロケールにおけるタイムゾーンオフセットを分単位で取得できます。タイムゾーンオフセットとは、グリニッジ標準時(GMT)とローカル時刻との差を分数で表したものです。getTimezoneOffset()メソッドの基本このメソッドは引数を受け取らず、呼び出し元のDateオブジェクトが持つ日時に基づいてオフセット値を返します。注意したいのは、返される値の符号が直感とは逆になっている点です。たとえば日本(JST=UTC+9)で実行すると、結果は「-540」になります。これは「ローカル時
-
JavaScriptでドキュメント内の画像の数を取得する方法
Webページ(ドキュメント)に含まれる画像の数を取得したい場合、JavaScriptのimagesプロパティを利用するのが最も簡単な方法です。document.imagesは、ドキュメント内のすべての<img>要素を格納したコレクション(HTMLCollection)を返します。このコレクションに対して.lengthを使用することで、画像の総数を数値として取得できます。基本的な使い方以下のように記述するだけで、ドキュメント内の画像の数を取得できます。var val = document.images.length;サンプルコード実際に動作を確認できる完全なサンプルコードがこちらです
-
JavaScriptのDateオブジェクトの作成方法と全パラメーター徹底解説
Dateオブジェクトは、JavaScript言語に組み込まれているデータ型の一つです。Dateオブジェクトは、new Date() という構文を使って生成します。Dateオブジェクトを一度作成すれば、多数の組み込みメソッドを使ってさまざまな操作が行えます。ほとんどのメソッドは、ローカル時間またはUTC(協定世界時・GMT)のいずれかを基準として、オブジェクトが持つ年・月・日・時・分・秒・ミリ秒の各フィールドを取得・設定するためのものです。Dateオブジェクトの作成方法Date()コンストラクターを使ってDateオブジェクトを作成するには、以下の4つの構文のいずれかを使用できます。new Dat
-
JavaScriptのtoUTCString()メソッドで日付をUTC(世界協定時)形式の文字列に変換する方法
日付を世界時(UTC:協定世界時)の表記規則に従った文字列に変換したい場合は、JavaScriptの toUTCString() メソッドを使用します。このメソッドは、Dateオブジェクトが持つ日付・時刻の情報を、UTCに基づいた文字列形式に変換して返します。toUTCString()メソッドの基本toUTCString() はDateオブジェクトの標準メソッドの一つで、引数は不要です。呼び出すと、例えば「Mon, 15 Jan 2018 05:39:07 GMT」のような、RFCに準拠した形式の文字列が返されます。サーバーとの通信やCookieの有効期限設定など、タイムゾーンに依存しない日付
-
JavaScriptで正規表現を定義する方法をわかりやすく解説
正規表現とは?正規表現(Regular Expression)とは、文字列のパターンを記述するためのオブジェクトです。特定の文字の並びや形式を表現することで、テキストの中から目的のパターンに一致する部分を効率的に検索したり、置換したりすることができます。JavaScriptでは、RegExpクラスが正規表現を表します。また、StringオブジェクトとRegExpオブジェクトの両方に、正規表現を使って強力なパターンマッチングや検索・置換処理を行うためのメソッドが用意されています。正規表現の定義方法JavaScriptで正規表現を定義するには、主に2つの方法があります。1つはRegExp()コンス
-
【JavaScript】setUTCSeconds()メソッドで世界時(UTC)に基づいて秒を設定する方法
setUTCSeconds()メソッドとはJavaScriptのsetUTCSeconds()メソッドは、世界協定時(UTC)に従って、指定した日付の「秒」を設定します。ローカルタイムではなく、常にUTCを基準として値が更新される点が特徴です。パラメータsetUTCSeconds(secondsValue[, msValue])メソッドで使用できるパラメータは以下のとおりです。secondsValue − 秒を表す0〜59までの整数。msValue − ミリ秒を表す0〜999までの数値。サンプルコード以下のコードを実行すると、指定した日付に対して秒を設定できます。<html> &n
-
現在のロケールの規則に従って、日付の時刻部分を文字列として取得するには?
toLocaleTimeString()メソッドとはDateオブジェクトの「時刻」部分を、現在のロケール(言語・地域設定)の規則に従った文字列として取得したい場合は、toLocaleTimeString()メソッドを使用します。このメソッドは、日付や時刻のフォーマットにおいて、基盤となるオペレーティングシステム(OS)の設定に依存するという特徴があります。つまり、スクリプトが実行されている環境のOSで採用されている書式規則に従って、日付が文字列へと変換されます。たとえば、アメリカ合衆国では「月」が「日」より先に表示される形式(04/15/98)が使われるのに対し、ドイツでは「日」が「月」より先
-
【JavaScript】Dateオブジェクトのソースを表す文字列を返す方法(toSource()メソッド)
同等のDateオブジェクトのソースを表す文字列を取得するには、JavaScriptのtoSource()メソッドを使用します。このメソッドは、オブジェクトのソースコードを表す文字列を返します。 toSource()メソッドとは toSource()メソッドは、オブジェクトを再現できるソースコード形式の文字列を返すメソッドです。Dateオブジェクトに対して呼び出すと、その日時の値を含む文字列が得られます。 注意:toSource()はECMAScriptの標準仕様には含まれていない非標準メソッドで、主にFirefoxなどSpiderMonkey系の環境でのみ動作します。ChromeやSafari