JavaScript

 Computer >> コンピューター >  >> プログラミング >> JavaScript
  1. JavaScriptでJSON配列をキーごとにグループ化して解析する方法

    この記事では、特定のキーの値に基づいてJSON配列のデータをグループ化し、新しい構造のJSONとして出力する方法を解説します。 課題の概要 例えば、次のようなJSON配列があるとします。 const arr = [{ data: [ { W: 1, A1: 123 }, { W: 1, A1: 456 }, { W: 2, A1: 4578 }, { W: 2, A1: 2423 }, { W: 2, A1: 2432 }, { W: 2, A1: 24324 } ] }]; ここで求められているのは、キー「W」の値ごとにオブジェク

  2. JavaScriptでオブジェクトのすべてのキーを小文字に変換する最も効率的な方法

    JavaScriptでは、オブジェクトのキー名が大文字になっているケースに遭遇することがあります。APIのレスポンスやレガシーシステムとの連携などでは、キー名の大文字・小文字を統一したい場面は少なくありません。ここでは、オブジェクトのすべてのキーを小文字に変換する効率的な方法を解説します。変換前のオブジェクトまず、次のようなオブジェクトがあるとします。var details = { STUDENTNAME: John, STUDENTAGE: 21, STUDENTCOUNTRYNAME: US }ご覧のとおり、このオブジェクトのキーはすべて大文字です。これらのキーをす

  3. JavaScriptでユーザーが入力したHTMLの値を取得・解析して表示する方法

    HTMLの入力フィールドから取得できる値は、常に文字列（string）として扱われます。そのため、取得した値を数値として計算などに利用したい場合は、parseInt()を使って文字列を整数に変換する必要があります。さらに、入力された値が数値として有効かどうかをisNaN()で判定することで、不正な入力へのエラー処理も行えます。実装例以下は、テキストボックスに入力された値を取得し、整数として解析してコンソールに表示するサンプルコードです。<!DOCTYPE html> <html lang="ja"> <head>    

  4. JavaScriptで特定の文字（#）で囲まれた複数のテキストを一括置換する方法

    JavaScriptでは、正規表現とreplace()メソッドを組み合わせることで、特定の記号で囲まれた複数のテキストを一度に別の値へ置き換えることができます。本記事では、特殊文字「#（ハッシュ）」で囲まれたプレースホルダーを、実際の値にまとめて置き換える方法を解説します。対象となる文字列たとえば、以下のように一部のテキストが「#」で囲まれた文字列があるとします。var values = My Name is #yourName# and I got #marks# in JavaScript subject;このままでは「#yourName#」「#marks#」はプレースホルダー（仮の値）で

  5. JavaScriptで配列内の奇数回出現する1つの要素を見つける方法

    整数の配列が与えられたとき、その中で奇数回だけ出現する要素を1つ見つける関数をJavaScriptで作成します。この問題では、奇数回出現する整数は必ず1つだけ存在することが保証されています。解き方のアプローチここでは「配列をソートしてから走査する」というシンプルな手法を採用します。配列を昇順に並べ替えると、同じ値の要素が必ず隣り合う状態になるため、各値が何回連続して現れるかを数えやすくなります。あとは配列を先頭から順にループ処理し、出現回数が奇数になっている要素を特定すればよいわけです。コード例以下が実際のコードです。const arr = [20, 1, -1, 2, -2, 3, 3, 5

  6. JavaScriptで指定した複数の区切り文字に基づいて文字列を分割し、配列を返す方法

    問題の概要 文字列と、区切り文字として指定された任意の個数の文字を受け取り、指定されたすべての区切り文字に基づいて文字列を分割した配列を返すJavaScript関数を作成する必要があります。 入力例 たとえば、次のような文字列があるとします。 const str = rttt.trt/trfd/trtr,tr; 区切り文字は以下のとおりです。 const sep = [/, ., ,]; この場合、期待される出力は次のようになります。 const output = [ rttt, trt, trfd, trtr ]; 実装コード 以下が実際の実装例です。 { const res =

  7. JavaScriptで数値の2次元配列（行列）同士の乗算結果を返す関数の実装方法

    はじめに本記事では、2つの数値の2次元配列（行列）を受け取り、その行列の乗算結果を返すJavaScript関数の実装方法を解説します。前提となる行列の定義ここでは、次の2つの行列を例として扱います。1つ目は5行4列の行列a、2つ目は4行6列の行列bです。// 5 x 4 の行列 let a = [     [1, 2, 3, 1],     [4, 5, 6, 1],     [7, 8, 9, 1],     [1, 1, 1, 1]

  8. JavaScriptのクラスで使う「get」キーワードとは？ゲッターの基本をわかりやすく解説

    JavaScriptの「get」キーワードは、クラス内でゲッター（getter）関数を定義するために使われる構文です。C#やJavaなど、他のプログラミング言語でもおなじみの概念ですが、JavaScriptでも同様にプロパティのように値を取得できる便利な機能として提供されています。getキーワードの基本的な使い方クラス内でgetを使うと、メソッドでありながら、あたかもプロパティのようにアクセスできる関数を定義できます。以下のように記述します。class Employee {    constructor(name) {    this.name = na

  9. JavaScriptで2桁の年の日付値から正しい世紀を取得する方法

    2桁の年（例：19、85など）を含む日付文字列から、正しい世紀（1900年代か2000年代か）を自動的に判定したいケースはよくあります。このような場合、条件分岐を一行で書ける三項演算子を使うと、シンプルかつ効率的に実装できます。 実装の考え方 ここでは基準値として yearRangeValue = 18 を設定します。2桁の年を数値化して基準値と比較し、18より大きければ「2000年代（20xx年）」、そうでなければ「1800年代（18xx年）」として扱うロジックです。実際の開発では、この基準値はプロジェクトの要件に合わせて調整してください。 サンプルコード 以下が実装例です。 year

  10. 【JavaScript】配列内の特定の要素を結合（マージ）する方法

    JavaScriptでは、join()・split()・map() を組み合わせることで、配列内の特定の要素をまとめて結合することができます。本記事では、区切り文字で分かれた数値を1つの要素にマージする方法を解説します。サンプルデータまず、次のような配列を例として考えてみましょう。var values = [7, 5, 3, 8, 9, /, 9, 5, 8, 2, /, 3, 4, 8];この配列には、区切り文字として「/」が含まれています。ここでの目標は、「/」で区切られた各グループの数値を連結し、次のような結果を得ることです。[75389, /, 9582, /, 348]結合の手順特定

  11. JavaScriptで文字列型のオブジェクトプロパティを配列でラップする方法

    この記事では、JavaScriptのオブジェクトに含まれる文字列型のプロパティ値を配列としてラップ（包み込み）する方法を解説します。 実現方法 文字列型のプロパティを配列でラップするには、Object.keys()とreduce()を組み合わせて使用します。さらに、結果を表示する際にはconcat()も活用します。 Object.keys()はオブジェクトのすべてのキーを配列として取得し、reduce()を使って各キーの値を処理していきます。[].concat(値)とすることで、すでに配列である値はそのまま維持され、文字列などの単一の値は自動的に配列の中に格納されます。 サンプルコード 以下が

  12. JavaScriptで配列インデックスをキーとして連想配列を生成する方法

    JavaScriptで配列の各要素をキー、そのインデックスを値とする連想配列（オブジェクト）を生成したい場合、forEach()メソッドと算出プロパティ名（[]）を組み合わせるのが簡単で効果的です。仕組みのポイントforEach()のコールバック関数は、第1引数に現在の要素、第2引数にそのインデックスを受け取ります。算出プロパティ名{ [nameObject]: counter }を使うことで、配列の値を動的にキーとして設定できます。最後にObject.assign()で結果オブジェクトへ順次マージしていきます。サンプルコード以下がそのコード例です。 { var generatedVa

  13. JavaScriptでDateオブジェクト（文字列データ）に時間を追加する方法

    JavaScriptで日付・時刻のデータを扱う際、「現在の時刻から2時間後」のように指定した時間を加算したいケースはよくあります。本記事では、文字列から作成したDateオブジェクトに対して、setHours()とgetHours()を組み合わせて時間を追加する方法を解説します。 1. 新しいDateオブジェクトを作成する まずは、日時を表す文字列をもとに、新しいDateオブジェクトを作成しましょう。 var dateValue = new Date(2021-01-12 10:10:20); 2. setHours()とgetHours()で時間を追加する getHours()メソッドで現在の

  14. 【JavaScript】マウスをクリックした瞬間（mousedown）にイベントを即座に発火させる方法

    マウスボタンを押した瞬間にイベントを発生させたい場合、通常の click イベントでは対応できません。なぜなら click イベントは、マウスボタンを押してから離した後にようやく発火するためです。 このようなケースでは、addEventListener() メソッドに mousedown イベントを指定することで解決できます。mousedown は、マウスボタンが押された直後に即座に発火するイベントです。 実装例 以下がサンプルコードです。 <!DOCTYPE html> <html lang="ja"> <head>   &n

  15. 【JavaScript】配列内の重複するプロパティ値を削除する方法（mapとSetを活用）

    はじめにJavaScriptでオブジェクトの配列を扱っていると、プロパティの中に同じ値が重複して含まれることがあります。たとえば、学生の点数リストに同一の数値が2回入っているようなケースです。本記事では、map()とSetを組み合わせて、こうした重複値を効率的に取り除く方法を解説します。 対象となる配列まず、以下のような「学生名」と「点数」を持つオブジェクトの配列を想定します。var details = [     {         studentName: "J

  16. JavaScriptでサブ配列の最初の要素を基準に配列を並べ替える方法

    JavaScriptでは、ネストされた配列（配列の中に配列が入った構造）を、各サブ配列の最初の要素を基準にして並べ替えることができます。この操作には、標準メソッドである sort() を使用します。サンプルデータの準備例として、学生の点数と名前を持つ次のような2次元配列を考えてみましょう。var studentDetails = [ [89, John], [78, John], [94, John], [47, John], [33, John] ];この配列を、各サブ配列の最初の要素（点数：89、78、94など）を基準にして並べ替えます。sort()

  17. 【JavaScript】localStorageに値を設定・取得する方法をわかりやすく解説

    JavaScriptのWeb Storage APIのひとつであるlocalStorageを使うと、ブラウザにデータを永続的に保存できます。ページを再読み込みしても値が消えないため、ユーザー設定や入力内容の一時保存などに便利です。 値を保存するには localStorage.setItem(キー名, 保存する値) を使用し、保存した値を取り出すには localStorage.getItem(キー名) を使用します。 サンプルコード 以下は、テキストボックスに入力された値が変更されるたびに、その値をlocalStorageへ自動的に保存するコード例です。 <!DOCTYPE html>

  18. JavaScriptで各反復ごとに1つのキーをnullに設定するオブジェクト処理を自動化する方法

    JavaScriptでオブジェクトを扱う際、「各反復（イテレーション）ごとに1つのキーだけを null に設定したオブジェクトを作りたい」というケースがあります。これを実現するには、Object.keys() メソッドと for...of ループ、そしてスプレッド構文（...）を組み合わせます。処理のポイントObject.keys()：オブジェクトが持つすべてのキーを配列として取得しますfor...of ループ：取得したキーを先頭から順に1つずつ取り出して処理しますスプレッド構文：{ ...objectValues } のように記述することで元のオブジェクトを複製し、そのうえで [tempKe

  19. 【JavaScript】連続する文字を数字に置き換えて文字列サイズを圧縮する方法

    たとえば、同じ文字が繰り返し含まれる次のような元の文字列があるとします。var values = DDAAVIDMMMILLERRRRR;この文字列から重複する文字を取り除き、各文字の前に出現回数（数字）を付けて、より短い文字列へと圧縮することを目指します。この処理を実現するには、replace() メソッドと正規表現を組み合わせて使用します。正規表現 /(.)\1+/g を使うことで、「同じ文字が1回以上連続している部分」を検出し、その部分を「連続回数＋該当文字」の形式に一括で置き換えることができます。サンプルコード以下が実際のコードです。var values = DDAAVIDMMMILL

  20. 【JavaScript】ネストされたオブジェクトにES6デフォルトパラメータを設定する方法

    ネストされたオブジェクトにもデフォルトパラメータは使える？ はい、ES6ではネストされた（入れ子になった）オブジェクトに対してもデフォルトパラメータを設定することが可能です。デフォルト引数と分割代入（デストラクチャリング）を組み合わせることで、オブジェクトの深い階層にあるプロパティにも初期値を簡単に指定できます。 以下に具体的なコード例を示します。 コード例 function callBackFunctionDemo({ cl: { callFunctionName = callBackFunction, values = 100 } = {} } = {}) {    

Total 5937 -コンピューター  FirstPage PreviousPage NextPage LastPage CurrentPage:62/297  20-コンピューター/Page Goto:1 56 57 58 59 60 61 62 63 64 65 66 67 68