JavaScript

 Computer >> コンピューター >  >> プログラミング >> JavaScript
  1. JavaScriptで元の配列を変更せずにオブジェクトのキー名を変更する方法

    JavaScriptで配列内のオブジェクトのキー名（プロパティ名）を変更したい場合、deleteで直接削除してしまうと元のオブジェクトまで書き換わってしまいます。そこで役立つのが、map()メソッドとスプレッド構文（...）、分割代入を組み合わせたイミュータブル（非破壊的）な手法です。この記事では、オブジェクトのキー「name」を「fullName」に変更しながら、元の配列を一切変更しない方法をサンプルコード付きで解説します。サンプルコード<!DOCTYPE html> <html lang="ja"> <head> <meta c

  2. JavaScriptモジュール入門：ES2015のexportとimportを使いこなそう

    JavaScriptモジュールとは モジュールはES 2015（ES6）で導入された機能です。大規模化しがちなコードを、再利用しやすい小さな単位に分割することを目的としています。モジュールにはクラスや関数などを格納でき、exportキーワードで変数・関数・オブジェクトを外部に公開し、別のファイルからimportキーワードで読み込んで使用します。 注意：この記事のサンプルを実行するには、ローカルホストサーバーが必要です。HTMLファイルを直接開いた場合、CORSポリシーによりモジュールの読み込みがブロックされることがあります。 モジュールのメリット コードの分割により保守性が向上する 関数やク

  3. JavaScriptの分割代入（デストラクチャリング）でオブジェクトに新しいプロパティを割り当てる方法

    JavaScriptでは、分割代入（デストラクチャリング）の構文を活用することで、あるオブジェクトから値を取り出しながら、別のオブジェクトへ新しいプロパティとして割り当てることができます。本記事では、その具体的な実装方法をサンプルコードとともに解説します。 ポイント：代入先を指定した分割代入 通常、分割代入は宣言した変数へ値を展開するために使われますが、({ a: obj.a } = obj1) のように代入先のプロパティを明示的に指定することで、既存オブジェクトのプロパティへ直接値を代入できます。これにより、一時的な変数を介さずにオブジェクト間でデータをコピーできます。 コード例 &l

  4. JavaScriptのクロージャでプライバシー（変数の隠蔽）を実現する方法

    はじめに：クロージャとは何かJavaScriptにはクラスベース言語のような「private」修飾子が存在しないため、変数を外部から直接アクセスできないようにしたい場合、クロージャ（Closure）を活用するのが定番のテクニックです。クロージャとは、「関数が定義されたときのスコープ（外側の変数）への参照を保持し続ける仕組み」のことです。この性質を利用すると、関数の内部に閉じ込めた変数は外部から直接参照・書き換えできなくなり、いわばプライベートな状態として扱うことができます。以下に、クロージャを使ってプライバシー（変数の隠蔽）を実現するサンプルコードを示します。サンプルコード<!DOCTY

  5. JavaScriptのObject.keys().map()とArray.map()の違いを徹底解説

    JavaScriptにおいて、Array.map()は配列の各要素に関数を適用し、その結果を新しい配列として返すメソッドです。一方、オブジェクトには直接map()メソッドが用意されていないため、Object.keys().map()という形で、まずObject.keys()を使ってオブジェクトのキーを配列として取得し、そこにmap()を適用するのが一般的なテクニックとなります。 この記事では、両者の使い方の違いを、実際に動作するサンプルコードと実行結果をもとにわかりやすく解説します。 サンプルコード 以下は、Object.keys().map()とArray.map()の動作を比較できるJa

  6. JavaScriptでインスタンス間のプライベートメンバーを共有・操作する方法をわかりやすく解説

    JavaScriptでは、コンストラクタ関数内でletやconstを使って変数を宣言すると、その変数は外部から直接アクセスできない「プライベートメンバー」となります。このプライベートな値には、関数内で定義された特権メソッド（クロージャ）を通じてのみアクセスできます。 以下は、Personコンストラクタでプライベートメンバーを持つ複数のインスタンスを作成し、それぞれの値を取得するサンプルコードです。 サンプルコード <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <m

  7. JavaScriptで配列の要素を同じ配列内に複製する方法

    JavaScriptでは、concat()メソッドとsort()メソッドを組み合わせることで、既存の配列の要素を同じ配列内に複製することができます。ここでは、実際に動作するサンプルコードを使って、その手順をわかりやすく解説します。 コード例 以下は、配列の要素を同じ配列内に複製するためのコード例です。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" cont

  8. 【JavaScript】複数のチェックボックスの条件に応じて配列をフィルタリングする方法

    Webアプリケーション開発では、ユーザーが選択したチェックボックスの条件に応じて、配列のデータを動的に絞り込みたい場面がよくあります。本記事では、JavaScriptのfilter()メソッドを使って、複数のチェックボックス条件で配列をフィルタリングする方法を、実際に動作するサンプルコードとともに解説します。 実装のポイント querySelectorAll()でページ内のすべてのチェックボックス要素を取得する 各チェックボックスのcheckedプロパティとインデックスを確認し、対応する条件でfilter()を実行する チェックボックスのonclickイベントからフィルタリング関数を呼び出す

  9. JavaScriptで辞書（連想配列）をオブジェクトのリストに変換する方法

    JavaScriptでは、キーと値のペアを持つ「辞書」のようなオブジェクトを、Object.values()メソッドを使うことで簡単にオブジェクトの配列（リスト）へ変換できます。以下に具体的なサンプルコードを示します。 サンプルコード <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /> <title>Document&

  10. JavaScriptのオブジェクト配列に配列メソッドを適用する方法

    JavaScriptでは、オブジェクトが格納された配列に対しても、通常の配列と同じようにpop()、push()、splice()などの標準的な配列メソッドをそのまま使用できます。オブジェクト配列はあくまで「配列」であるため、要素としてオブジェクトが入っていても配列操作のAPIは共通で動作します。 コード例 以下は、JavaScriptオブジェクトの配列に対して配列メソッドを使用するサンプルコードです。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

  11. 【初心者向け】JavaScriptでオブジェクトのディープクローンを作成する方法を実例付きで解説

    はじめにJavaScriptでは、単純な代入（=）やObject.assign()などによるコピーはシャローコピー（浅いコピー）となり、元のオブジェクトとプロパティへの参照が共有されてしまいます。そのため、一方を変更するともう一方にも影響が及びます。これを防ぐには、参照関係まで完全に切り離したディープクローン（深いコピー）を作成する必要があります。本記事では、JSON.parse(JSON.stringify()) を使ったシンプルな方法で、オブジェクトのディープクローンを作成する例を紹介します。ディープクローンのサンプルコード以下のコードでは、ボタンをクリックすると元のオブジェクト obj

  12. JavaScriptのnew演算子とは？オブジェクト生成の基本をサンプルコードで解説

    new演算子の基本的な役割 JavaScriptにおけるnew演算子は、ユーザーが定義したオブジェクト型や、コンストラクタ関数を持つ組み込みオブジェクト型のインスタンスを新しく生成するために使用されます。 new演算子を使うことで、同じ構造を持つ複数のオブジェクトを効率よく作成でき、コードの再利用性や保守性が大きく向上します。 new演算子の使用例 以下は、JavaScriptでnew演算子を使用した実際のコード例です。 <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> &l

  13. JavaScriptはブロックスコープ（block scope）に対応している？let・const・varの違いを実例付きで解説

    JavaScriptとブロックスコープの関係 JavaScriptでは、let または const キーワードを使って宣言された変数に対してのみ、ブロックスコープが適用されます。 一方で、var キーワードで宣言された変数は関数スコープには従いますが、ブロックスコープには従いません。つまり、波括弧 { } で囲まれたブロックの中で var を使って変数を宣言しても、その変数はブロックの外側からでもアクセスできてしまいます。 let・const と var のスコープの違い let / const： ブロック単位でスコープが生成されるため、ブロックの外部からは参照できません。 var： 関数

  14. JavaScriptのmapとforEachを使って、オブジェクト内にネストされたオブジェクト配列を解析する方法

    本記事では、JavaScriptのmapメソッドとforEachメソッドを組み合わせて、あるオブジェクトの中にネストされた（入れ子になった）オブジェクトの配列を解析する方法を解説します。APIレスポンスなどでよく見られる「オブジェクトの中に配列があり、その配列の中にさらにオブジェクトがある」という構造のJSONデータは、外側の配列にmapを、内側の配列の走査にforEachを使うことで、各要素の値に簡単にアクセスできます。コード例<!DOCTYPE html> <html lang="en"> <head> <meta charse

  15. JavaScriptで数値を丸める・切り捨てる方法｜Math.round()とMath.trunc()の違いと使い方

    JavaScriptには、小数を整数へ変換するためのメソッドとして、Math.round() と Math.trunc() の2つが標準で用意されています。Math.round()：小数点以下を四捨五入し、最も近い整数に丸めます。例えば「3.5」は「4」に、「3.4」は「3」になります。Math.trunc()：小数点以下を単純に取り除き、整数部分だけを残します。「3.9」も「3.1」もどちらも「3」になります。それぞれの特徴を踏まえながら、実際のコード例を見ていきましょう。Math.round() と Math.trunc() の違いメソッド動作例（3.999）Math.round()四捨五

  16. JavaScriptで配列の最後の要素を取得・表示する方法

    配列の最後の要素を取得して画面に表示するには、pop()メソッドを利用するのが手軽です。以下に、ボタンをクリックすると配列の最後の要素を表示するサンプルコードを示します。 コード例 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> &

  17. JavaScriptの短絡評価（ショートサーキット評価）とは？&& と || の動作を解説

    短絡評価（ショートサーキット評価）は、主に論理演算子 &&（AND）と ||（OR）を使って行われます。式は左から右へ順番に評価され、結果が確定した時点で残りの式の評価はスキップされます。 && 演算子の場合 &&（AND）演算子による短絡評価では、最初の式が false と評価された時点で、式全体の結果も false に確定します。そのため、残りの式は一切評価されません。 || 演算子の場合 ||（OR）演算子による短絡評価では、最初の式が true と評価された時点で、式全体の結果も true に確定します。こちらも同様に、残りの式は評価され

  18. JavaScriptでオブジェクトを新しい配列に変換する方法

    JavaScriptでは、オブジェクトのプロパティやネストされたデータを取り出し、扱いやすい形で新しい配列にフォーマットできます。本記事では、学校（school）オブジェクトに含まれる生徒情報を、文字列形式の配列へ変換する実践的なコード例を紹介します。 ポイントとなるテクニック このサンプルでは、以下の2つのJavaScript機能を活用しています。 分割代入（Destructuring assignment）：オブジェクトから特定のプロパティを簡潔に取り出す構文です。 for...of ループ：配列内の各要素を順番に処理するために使用します。 コード例 <!DOCTYPE html

  19. JavaScriptの短絡代入（ショートサーキット代入）の仕組みと使い方を解説

    JavaScriptの短絡代入とは？ 短絡代入（ショートサーキット代入）とは、論理演算子 || や && による式の評価が途中で確定した時点で、残りの式を評価せずに処理を終えるという性質を利用した代入テクニックです。 || 演算子は左から順に評価を行い、最初に真値（truthy）となった値を返します。一方、&& 演算子は最初に偽値（falsy）となった値を返します。この動作を活かすことで、条件に応じた値の代入を簡潔に記述できます。 代表的な偽値（falsy）の値 false 0（数値のゼロ） （空文字列） null undefined NaN なお、Jav

  20. JavaScript入門：ブール値の短絡評価（ショートサーキット評価）の仕組みと使い方

    JavaScriptでは、論理演算子 &&（論理AND）や ||（論理OR）を使う際に、「短絡評価（ショートサーキット評価）」と呼ばれる特殊な動作が発生します。これは、左側のオペランドだけで式全体の結果が確定できる場合、右側のオペランドを評価せずにスキップする仕組みです。 短絡評価の基本ルール &&（論理AND）：左辺が false の場合、式全体が必ず false になるため、右辺は評価されません。 ||（論理OR）：左辺が true の場合、式全体が必ず true になるため、右辺は評価されません。 この性質を利用すると、不要な関数呼び出しを避けたり、条

Total 5937 -コンピューター  FirstPage PreviousPage NextPage LastPage CurrentPage:131/297  20-コンピューター/Page Goto:1 125 126 127 128 129 130 131 132 133 134 135 136 137