JavaScript

 Computer >> コンピューター >  >> プログラミング >> JavaScript
  1. JavaScriptのObject.entries()とmap()を使ってオブジェクトをキーと値のペアに変換する方法

    概要JavaScriptオブジェクトを「キー」と「値」のペアを持つ配列形式に変換するには、Object.entries()メソッドとmap()メソッドを組み合わせて使用します。Object.entries()はオブジェクト内の各キーと値のペアを [キー, 値] の形で取得できるため、それをmap()で加工することで、任意の構造を持つ新しい配列を簡単に作成できます。以下に具体的なコード例を示します。コード例var studentObject={   101: John,   102: David,   103: Bob}var stud

  2. JavaScriptでオブジェクトの配列を更新する方法

    JavaScriptでオブジェクトの配列を更新する方法まず、次のようなオブジェクトの配列があると仮定しましょう。var studentDetails = [    { firstName: John, listOfSubject: [MySQL, MongoDB]},    {firstName: David, listOfSubject: [Java, C]} ]この既存の配列に対して、次のオブジェクトを追加・更新したいと考えます。{firstName: Bob, listOfSubject: [JavaScript]};ここでのポ

  3. JavaScriptの正規表現で数値の先頭ゼロを削除する方法

    正規表現を使った先頭ゼロの削除文字列から先頭のゼロ（先行ゼロ）を削除したい場合は、replace()メソッドと正規表現を組み合わせるのが効果的です。基本的な構文は以下の通りです。yourStringValue.replace(/\D|^0+/g, )この正規表現の意味を簡単に解説します。\D：数字以外の文字をすべて削除します^0+：文字列の先頭にある1つ以上の「0」を削除しますgフラグ：文字列全体に対してグローバルにマッチングを行いますサンプルコードそれでは、数値を含む変数を用意して、実際に先頭ゼロを削除してみましょう。var theValue1 = 5001000; var theValue

  4. JavaScriptでHTMLのdiv要素内のテキストを一括置換する方法

    Webページ上の複数の要素に対して、特定のテキストをまとめて差し替えたいケースはよくあります。たとえば、見出し（h2タグなど）に入っている文字列を、ページ内のすべてのspan要素に反映させたい場合などが該当します。 このような処理を実現するには、document.querySelectorAll() を使用します。あわせて getElementsByClassName() を組み合わせることで、クラス名を指定して対象のテキストを取得できます。 実装のポイント document.querySelectorAll(.my-main-div-class span) で、親要素（div）の中にあるす

  5. JavaScriptで2つの要素の間にあるすべての要素を削除する方法｜remove()メソッドの使い方

    はじめに Web開発では、特定の2つの要素の間に挟まれた不要な要素を一括で削除したい場面があります。本記事では、JavaScriptの remove() メソッドと nextElementSibling プロパティを組み合わせて、開始地点から終了地点までの要素を効率的に取り除く方法を解説します。 対象となるHTML構造 例として、以下のような要素が存在するケースを考えてみましょう。 <p>My Name is John</p> <p>My Name is David</p> <p>My Name is Bob</p> &

  6. JavaScriptのObject.assign()メソッドでオブジェクトをコピーする方法

    JavaScriptの Object.assign() メソッドは、1つ以上のソースオブジェクトをターゲットオブジェクトにコピーするために使用されます。このメソッドは、ソース側では「get」、ターゲット側では「set」が使われるため、ゲッターとセッターも適切に呼び出されます。基本構文Object.assign(target, ...sourceObjects);第1引数にはコピー先のターゲットオブジェクトを指定し、第2引数以降にはコピー元となるソースオブジェクトを1つ以上渡すことができます。戻り値として、コピー結果のターゲットオブジェクトが返されます。オブジェクトをコピーするサンプルコード以下

  7. JavaScriptで引用符を削除してJSONオブジェクトに変換する方法

    JavaScriptでは、余分な引用符（ダブルクォート）が付いたJSON形式の文字列を、正しいJSONオブジェクトに変換したいケースがあります。このような場合は、replace()メソッドとJSON.parse()メソッドを組み合わせることで簡単に解決できます。 基本的な処理の手順 substring()で文字列の先頭と末尾にある余分な引用符を削除する replace()で二重になった引用符（）を通常の引用符（）に置き換える JSON.parse()で整形した文字列をJSONオブジェクトに変換する サンプルコード var studentDetails = `"{"&qu

  8. JavaScriptで現在の年だけを表示する方法【getFullYear()の使い方】

    Webサイトのコピーライト表記などで「現在の年」だけを動的に表示したいケースはよくあります。JavaScriptでは、DateオブジェクトのgetFullYear()メソッドを使うことで、現在の年（西暦4桁）を簡単に取得できます。 getFullYear()メソッドとは getFullYear()は、日時から「年」の部分だけを4桁の数値として返すメソッドです。getYear()という類似のメソッドもありますが、こちらは1900年からの経過年数を返す古い仕様のため、現在では非推奨となっています。必ずgetFullYear()を使用しましょう。 サンプルコード 以下は、現在の年を画面に表示する完全

  9. JavaScriptで空白を削除し、任意の文字列をキャメルケースに変換する方法

    キャメルケースとは文字列をキャメルケース(camelCase)に変換するには、最初の単語の一文字目を小文字にし、それ以降の各単語の一文字目を大文字にする必要があります。また、単語間の空白は削除されます。例えば、「Add two variables」という文字列は「addTwoVariables」に変換されます。以下は、任意の文字列をキャメルケースに変換するコードです。コード例function convertStringToCamelCase(sentence) {    return sentence.replace(/(?:^\w|[A-Z]|\b\w

  10. 【JavaScript入門】HTMLのinput要素にテキストを追加するボタンの作り方

    まず、例として次のようなHTMLボタンを用意します。 <button id="clickButton">クリックすると下のテキストボックスに文字が追加されます</button> ボタンをクリックしたタイミングで <input> 要素にテキストを追加するには、document.getElementById() で対象の要素を取得し、value プロパティに文字列を代入します。以下が実際のコードです。 サンプルコード <!DOCTYPE html> <html lang="ja"> <hea

  11. JavaScriptのreturnステートメントでネストされたループを抜ける方法

    JavaScriptのreturnステートメントは、関数全体を即座に終了させる働きがあります。そのため、ネストされた（入れ子になった）ループの中でreturnを実行すると、内側のループだけでなく外側のループも含めてすべての処理が中断され、呼び出し元へ値が返されます。サンプルコード以下は、外側のループと内側のループを組み合わせた例です。変数outerが3になった時点でreturnステートメントが実行され、関数が終了します。let demoForLoop = ()=>{ for(var outer=1;outer<100;outer++){ for(var in

  12. JavaScriptで文字列の余分なスペース（空白）を削除する方法

    JavaScriptで文字列の余分なスペースを削除するには？文字列から余分なスペース（空白文字）を削除するには、trim()メソッドと正規表現を組み合わせて使います。trim()だけでは文字列の先頭と末尾のスペースしか取り除けないため、文字列内の不要な空白をまとめて処理したい場合は、replace()メソッドとの併用が効果的です。まず、スペースを含む元の文字列を見てみましょう。var sentence = "My name is John Smith ";この文字列から余分なスペースをすべて削除するコードが以下の通りです。サンプルコードvar sentence = &quo

  13. JavaScriptで複数の変数から最も高い値を持つものを特定する方法

    はじめに複数の変数（オブジェクトのプロパティ）の中から、最も高い値を持つものを取得したい場合は、JavaScriptのMath.max()メソッドとObject.values()メソッドを組み合わせると簡単に実現できます。Math.max()は引数に渡した数値の中から最大値を返しますが、オブジェクトの値はそのまま渡すことができません。そこでObject.values()を使ってオブジェクト内のすべての値を配列として取り出し、スプレッド構文（...）でMath.max()に展開して渡します。サンプルコードconst studentMarksDetails = { marks1: 78,

  14. JavaScriptでmap()を使ってオブジェクト配列のネストを解除（フラット化）する方法

    JavaScriptでネストされたオブジェクト配列をフラット化（ネスト解除）するには、map()メソッドを使うのが最もシンプルで効果的な方法です。map()は配列の各要素に対して処理を行い、新しい配列を返すため、入れ子になったプロパティを取り出して平坦な構造に変換するのに適しています。ここでは、以下のようなネストされたオブジェクト配列を例に考えてみましょう。各学生データの中に、科目情報がsubjectDetailsとして入れ子になっています。const studentDetails = [ { studentId: 101, studentName: J

  15. 【JavaScript】別の文字列に含まれる文字を削除する方法｜replace()とreduce()を活用

    JavaScriptでは、ある文字列から別の文字列に含まれる文字をすべて取り除きたいケースがあります。例えば、次のような2つの文字列を用意したとしましょう。 var originalName = JOHNDOE; var removalName = JOHN; この場合、originalName（JOHNDOE）からremovalName（JOHN）に含まれる各文字（J・O・H・N）を削除し、最終的に「DOE」だけを残すのが目標です。 replace()とreduce()を組み合わせた解決策 この処理には、split()・reduce()・replace()の3つのメソッドを組み合わせるのが効

  16. JavaScriptのreduce()メソッドで渡された複数の配列から最大値を取得して返す方法

    JavaScriptで渡された複数の配列からそれぞれの最大値を取り出したい場合は、reduce()メソッドとMath.max()関数を組み合わせると簡単に実現できます。以下に具体的なコード例を示します。 const getBiggestNumberFromArraysPassed = allArrays => allArrays.reduce( (result, currentArray) => { result.push(Math.max(...currentArray)); return result; }, [] ); console.log(ge

  17. JavaScriptでアクション間に遅延（スリープ）を入れる方法：setTimeout()の使い方

    JavaScriptでスリープ（遅延処理）を実装するには、setTimeout() を使います。この関数は待機時間をミリ秒単位で指定します。1000ミリ秒 = 1秒 2000ミリ秒 = 2秒（以下同様）サンプルコードそれでは、5秒間（5000ミリ秒）の遅延を挟んで2つの値を足し合わせる例を見てみましょう。コードは次のとおりです。var firstValue=10; var secondValue=20; var result=firstValue+secondValue; setTimeout(function() { }, (5 * 1000)); console.log(計算結果=+res

  18. JavaScriptでネストされたオブジェクトからキーを抽出する方法

    はじめにJavaScriptでは、入れ子（ネスト）構造を持つオブジェクトから特定の値に対応するキー名を取得したい場面があります。この記事では、二重ループ（for...in文）を使って、ネストされたオブジェクトの中から目的の値を含むキーを効率的に抽出する方法を解説します。ネストされたオブジェクトの作成まず、サンプルとして使用するネストされたオブジェクトを作成しましょう。var details = { teacherDetails: { teacherName: [John, David] }, subjectDetails: {

  19. 【JavaScript】Object.freeze()でオブジェクトの変更を禁止する方法を解説

    JavaScriptでは、Object.freeze()メソッドを使用することで、オブジェクトに対する新規プロパティの追加や既存プロパティの変更・削除などを禁止できます。freeze()によって凍結されたオブジェクトは「イミュータブル（不変）」な状態になり、後から値を書き換えることができません。 Object.freeze()の基本動作 以下のコードでは、freeze()で凍結した後にプロパティの値を変更しようとしていますが、プロパティを変更できないため、元の値がそのまま保持されます。 コード例 const canNotChangeTheFieldValueAfterFreeze = { va

  20. JavaScriptでループ処理なしに条件に一致する配列の要素へ新しい値を割り当てる方法

    配列内の特定の条件に一致する要素に対して、forループなどの繰り返し処理を使わずに新しい値を割り当てたい場合は、filter()メソッドとmap()メソッドを組み合わせると簡単に実現できます。基本的な考え方まずfilter()で条件に一致するオブジェクトだけを抽出し、その結果に対してmap()で目的のプロパティを書き換えます。filter()は元のオブジェクトへの参照を返すため、map()内での変更が元の配列にも反映されるのがポイントです。対象となる配列の例const studentDetails = [ {Name: John}, {Name: David}, {Na

Total 5937 -コンピューター  FirstPage PreviousPage NextPage LastPage CurrentPage:106/297  20-コンピューター/Page Goto:1 100 101 102 103 104 105 106 107 108 109 110 111 112