JavaScript

JavaScriptでは、あるオブジェクトのプロパティを別のオブジェクトにコピーしたい場面がよくあります。しかし、単純に代入してしまうと、すでに存在するプロパティの値が上書きされてしまいます。そこで役立つのが hasOwnProperty() メソッドです。これを使えば、元のオブジェクトの値を保持したまま、存在しないプロパティだけを安全に追加できます。サンプルオブジェクトまず、次の2つのオブジェクトを用意します。var first = {key1: 100, key2: 40, key3: 70} var second = {key2: 80, key3: 70, key4: 1000}この例

はい、JavaScriptには「null合体（null coalescing）」に相当する仕組みがあります。モダンなJavaScript（ES2020以降）では、専用のnull合体演算子（??）が利用できます。さらに、以前から使われている論理OR（||）でも同様の処理を実現可能です。論理OR（||）を使ったnull値の扱い方変数がnullやundefinedのときにデフォルト値を代入したい場合、次のような構文が使えます。var anyVariableName = null; var anyVariableName = yourVariableName || yourActualValue;この

JSONデータから新しい配列を作成するには、JavaScriptのmap()メソッドを活用するのが最もシンプルで効率的な方法です。map()は、元の配列の各要素に対して指定した処理を実行し、その結果から新しい配列を生成してくれます。 サンプルデータの準備 ここでは、学生情報を格納した以下のJSONデータ（オブジェクトの配列）を例に説明します。 const studentDetails = [ { name: John }, { name: David }, { name: Bob } ]; このデ

map()メソッドと三項演算子（?:）を組み合わせることで、オブジェクトの配列を特定のプロパティに基づいてフィルタリングできます。まず、今回扱う2つのオブジェクト配列を見てみましょう。 let firstCustomerDetails = [     {firstName: John, amount: 100},     {firstName: David, amount: 50},     {firstName: Bob, amount: 80} ]; let second

はじめに：連結せずに2つの配列から値が大きいオブジェクトを取得する2つの配列から特定のプロパティの値が大きい方のオブジェクトを取得したい場合、配列をconcat()などで連結する必要はありません。reduce()メソッドをそれぞれの配列に対して個別に適用すれば、目的の結果を得られます。ここでは、「生徒名」と「点数」を持つオブジェクトの配列を例に説明します。var sectionAStudentDetails = [     {studentName: John, studentMarks: 78},     {st

文字列の中で、コロン（:）の直後に続く最初の1文字だけを大文字にしたい場合は、正規表現とtoUpperCase()メソッドを組み合わせて使用します。toUpperCase()は文字列全体を大文字に変換してしまうため、正規表現を使って「コロンの直後の最初の文字」だけをピンポイントで置き換える必要があります。例として、次のような文字列を想定します。var objectValues = fullName: john Smith;サンプルコード以下が、コロンの直後の最初の文字だけを大文字に変換する完全なコードです。var objectValues = fullName: john Smith; fu

JavaScriptで配列内のすべての数値を1つの変数に合計したい場合、forループを使うのが基本的なアプローチです。手順としては、まず合計値を格納するための変数（total）を0で初期化し、その後、配列の全要素を順番に取り出しながら、total変数に加算していきます。サンプルデータの準備今回は、次のような数値が入った配列を例に説明します。var listOfValues = [10,3,4,90,34,56,23,100,200];forループで合計を求めるコード例以下のコードでは、インデックスを0から配列の長さ未満まで繰り返し処理し、各要素をtotal変数に足し合わせています。var li

JavaScriptでは、forループを使うことで、開始値から終了値までの範囲にあるすべての数値を簡単に取得して表示できます。本記事では、具体的なコード例と実行手順をわかりやすく解説します。開始値と終了値を定義するまず、範囲の基準となる開始値を次のように定義します。var startValue = 10;続いて、終了値を定義します。var endValue = 20;forループで範囲内の数値を取得する開始値と終了値の間にあるすべての数値を取得するには、forループを使用します。ループ変数が開始値から始まり、終了値に達するまで1ずつ増加しながら処理を繰り返す仕組みです。コード例var star

JavaScriptで要素を正しく反復処理（ループ処理）するには、document.getElementsByClassName() を使用します。getElementsByClassName() はDocumentインターフェースのメソッドの一つで、指定したクラス名を持つすべての要素をHTMLCollectionとして返します。getElementsByClassName()の基本的な使い方戻り値は配列に似たコレクション（HTMLCollection）であるため、通常のfor文を使って各要素に順番にアクセスできます。以下は、同じクラス名を持つ複数のdiv要素を反復処理して、それぞれの内容をコ

JavaScriptの配列から「0」「false」「undefined」「null」そして空文字列（）といったfalsyな値を削除したい場合、splice()メソッドを使うのが基本的なアプローチです。ここでは、forループとsplice()を組み合わせて不要な値を取り除く方法を解説します。対象となる配列例として、次のような配列があったとしましょう。var allValues = [10, false, 100, 150, , undefined, 450, null];forループとsplice()を使った実装例以下が、forループとsplice()を使った完全なコードです。コードvar al

JavaScriptでオブジェクトのキー値（キー名）を変更するには、正規表現とObject.fromEntries()メソッドを組み合わせて使用します。正規表現によってアンダースコア（_）に続く文字を大文字に置き換えることで、スネークケースのキーをキャメルケースへと変換できます。サンプルコードvar underscoreSpecifyFormat = str => str.replace(/(_)(.)/g, (_, __, v) => v.toUpperCase()), JsonObject = { first_Name_Field: John, last_Name_Field:

JavaScriptで配列要素のfalse値をチェックする方法 JavaScriptで配列の要素にfalse値が含まれているかどうかを確認したい場合は、Object.values()メソッドを使用します。このメソッドはオブジェクトが持つすべての値を配列として取得できるため、some()メソッドと組み合わせることで、ネストされたデータ構造の中からfalse値を効率的に検出できます。 今回の例では、顧客情報（customerDetails）の中にある「isMarried」プロパティがfalseになっている項目が1つでも存在するかどうかを判定します。some()は、配列内の少なくとも1つの要素が条件

入力された値が数字か文字（数値以外）かを判定するには、JavaScriptのisNaN()関数を使用します。この関数は、値がNaN（Not a Number：非数）である場合にtrueを返します。この特性を利用することで、ユーザーが入力した値が数値かどうかを簡単にチェックできます。 isNaN()関数とは isNaN()は「is Not a Number」の略称です。引数として渡された値が数値として解釈できない場合にtrueを、数値として解釈できる場合はfalseを返します。これにより、「入力内容が数字かどうか」をシンプルに判定できるのが特徴です。 サンプルコード 以下のコードでは、フォームの

同じ関数を使う2つ以上のリンクでonclickが機能しない場合は、JavaScriptのdocument.querySelectorAll()を使用しましょう。以下に具体的なコード例を示します。 解決策：querySelectorAll()ですべての要素を取得する document.getElementById()やdocument.querySelector()は、一致する要素のうち最初の1件しか取得できません。そのため、複数のリンクや要素に同じイベントを設定しようとしても、一部しか動作しないことがあります。 document.querySelectorAll()は、指定したセレクターに一

JavaScriptでフォーム送信時にinput要素の値を変更したい場合は、documentオブジェクトを利用します。フォーム名とテキスト名を指定して、valueプロパティに新しい値を代入するだけで簡単に実現できます。基本構文入力値を変更するための基本構文は以下の通りです。document.yourFormName.yourTextName.value=anyValue;この構文では、「yourFormName」にフォームのname属性の値、「yourTextName」にinput要素のname属性の値を指定し、「anyValue」に設定したい新しい値を代入します。フォームの例ここでは、「Su

配列から先頭のゼロ（先行ゼロ）だけを取り除きたい場合、JavaScriptの filter() メソッドを使うとスマートに実装できます。この記事では、クロージャ（関数を返す関数）と組み合わせたテクニックを使って、配列の先頭に連続する0のみを削除し、途中や末尾にある0はそのまま残す方法を解説します。 処理の対象となる入力データ 以下のような配列が入力として与えられたとき、先頭に並んでいる0だけを削除することを目標とします。 [10, 0, 12, 0, 0] [0, 0, 0, 0, 0, 0, 10, 12, 0] [12, 0, 0, 1, 0, 0] 期待される結果は次のとおりです。 [

JavaScriptでオブジェクトのプロパティを条件に応じて変更したい場合は、論理AND演算子（&&）を活用するのが効果的です。論理AND演算子は、両方のオペランドが真（truthy）である場合にのみ条件がtrueと評価されるため、スプレッド構文（...）と組み合わせることで、条件が満たされたときだけプロパティを上書きできます。基本的な考え方以下のように、オブジェクトのスプレッド構文と論理AND演算子を組み合わせます。条件がfalseの場合：isBacklog === true && { Mark1: 93 } は false を返すため、元のプロパティはそのま

JavaScriptでは、Map()オブジェクトの概念を利用して、複数のマップ値を1つの文字列に結合できます。Mapはキーと値（key-value）のペアでデータを管理し、キーは必ず一意である必要があります。さらに、配列の要素を連結するための join() メソッドも併用します。以下に具体的なコード例を示します。コード例let queryStringAppendWithURL = new Map(); queryStringAppendWithURL.set(firstParamter, [name=John, age=23, countryName=US]); queryStringAppe

Webアプリケーションでは、リスト項目を動的に削除できるようにしたいケースはよくあります。この記事では、各要素（li）に配置した「削除」ボタンをクリックすることで、該当する要素をJavaScriptだけで削除する方法を解説します。 前提：対象となる順序なしリスト（ul） 例として、次のような順序なしリスト（ul）を想定します。 <ul> <li class="subjectName">JavaScript <button>Remove</button></li> <br> <

コンストラクタ関数で定義した変数（プロパティ）に外部からアクセス・更新したい場合は、「prototype（プロトタイプ）」を活用するのが効果的です。JavaScriptのオブジェクトは、プロトタイプからプロパティやメソッドを継承する仕組みを持っています。また、変数へアクセスする際には「this」キーワードを使用します。thisは、メソッドが呼び出されたオブジェクト自身を参照するため、インスタンスごとの値を正しく操作できます。実装例以下のコードでは、Customerコンストラクタ関数を定義し、prototypeを使ってfullNameプロパティを更新するメソッドsetFullNameを追加してい