JavaScript

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

    はじめに JavaScriptでは、配列の中に配列が入ったデータ(二次元配列)を、キーを持つオブジェクトの配列へ変換したいケースがあります。 例えば、以下のような配列を考えてみましょう。この配列を、英アルファベット(a、b、c、d...)をキーとするオブジェクトの配列に変換します。 const data = [[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12]]; この変換は、外側の配列に対してmap()を実行し、各サブ配列をreduce()でオブジェクトへ畳み込むことで実現できます。以下の例をご覧ください。 コード例 const data = [[1, 2

  2. JavaScriptで線形探索（リニアサーチ）を実装する方法

    線形探索（リニアサーチ）とは線形探索は、配列の先頭から順に要素を一つずつ調べ、目的の値と一致する要素を見つけ出す最も基本的な検索アルゴリズムです。事前にデータをソートしておく必要がなく、実装も非常にシンプルなため、小規模なデータ検索やプログラミング学習の入門としてよく利用されます。以下は、JavaScriptで線形探索を実装したサンプルコードです。サンプルコード<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta

  3. JavaScriptでfalsy値（偽と評価される値）を見分ける方法

    JavaScriptにおけるfalsy値とはJavaScriptでは、値をBoolean型として評価したときに「false」とみなされる値がいくつか存在します。これらは「falsy値（偽の値）」と呼ばれます。条件分岐や論理演算において、意図しない動作を防ぐために、どの値がfalseと評価されるかを正しく理解しておくことが重要です。JavaScriptでfalseと評価される主な値は以下の通りです。false — Boolean型のfalseそのもの0 — 数値のゼロ空文字列：、、または ``（テンプレートリテラル）null — 値が存在しないことを示す特殊な値undefined — 値が未定義

  4. JavaScriptのファーストクラス関数とは？特徴と使い方を実例で解説

    ファーストクラス関数（第一級関数）とは？ JavaScriptでは、関数もオブジェクトの一種として扱われます。そのため、関数を別の関数の引数（パラメータ）として渡したり、関数の中で別の関数を戻り値として返したりすることが可能です。 このような性質を持つことから、JavaScriptの関数はファーストクラス関数（第一級関数）と呼ばれています。つまり、関数は変数・オブジェクト・配列などに自由に格納できる「値」だということです。 さらに、関数を引数として受け取る、関数を戻り値として返す、あるいはその両方を行う関数は高階関数（Higher Order Function）と呼ばれます。 ファーストクラ

  5. JavaScriptで24時間表記を12時間表記(午前・午後)に変換する方法

    JavaScriptで24時間表記を12時間表記(午前・午後)に変換する方法 Webアプリケーションを開発していると、24時間表記の時刻を「午前・午後」が付いた12時間表記に変換して表示したい場面があります。この記事では、JavaScriptとHTMLを組み合わせて、ユーザーが入力した時刻を12時間表記に変換し、その結果を画面に表示するシンプルなプログラムを紹介します。 コード例 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" />

  6. JavaScriptを使ってキャンバス（Canvas）に画像を描画する方法

    HTML5の<canvas>要素に画像を描画するには、Canvas APIが提供するdrawImage()メソッドを使用します。このメソッドを利用することで、ページ上の<img>要素やJavaScriptで生成したImageオブジェクトを、キャンバス上の任意の位置に自由に配置できます。 サンプルコード 以下は、JavaScriptを使ってキャンバスに画像を描画するコード例です。ボタンをクリックすると、あらかじめ用意された画像がキャンバス内に描画されます。 <!DOCTYPE html> <html lang="ja"> <

  7. JavaScriptにおけるカリー化と部分適用の違いを実例でわかりやすく解説

    はじめに 関数型プログラミングでよく登場するカリー化（Currying）と部分適用（Partial Application）は、どちらも関数の引数の扱いを工夫するテクニックですが、その仕組みと目的は異なります。本記事では、それぞれの概念の違いと、JavaScriptでの具体的な実装方法をわかりやすく解説します。 カリー化（Currying）とは カリー化とは、複数の引数を取る関数を、「1つの引数だけを受け取る関数」の連鎖へと変換するテクニックです。関数は引数を1つ受け取ると、次の引数を受け取るための新しい関数を返します。このようにして返された関数は、f(a)(b)(c) のようにチェーン（連

  8. JavaScriptで既存のオブジェクトにプロパティとメソッドを追加する方法

    JavaScriptのオブジェクトは動的な性質を持っており、一度作成した後でも、いつでも新しいプロパティやメソッドを追加できます。最もシンプルな方法は、ドット記法（オブジェクト名.プロパティ名）を使って値を代入することです。プロパティに関数を代入すれば、それがそのままメソッドとして機能します。 基本的な書き方 object.newProperty = value; object.newMethod = function() {   // 処理 }; サンプルコード 以下は、既存の student オブジェクトにプロパティとメソッドを追加し、その内容を画面に表示する完全な例で

  9. JavaScriptの非同期関数とNode.jsイベントループをわかりやすく解説

    JavaScriptにおける非同期関数とは非同期関数（Asynchronous Functions）では、処理が完了するのを待たずにプログラムは実行を続けます。つまり「待機しない」ということです。この仕組みにより、ユーザーが待たされる時間を大幅に削減できます。実は、JavaScriptというプログラミング言語そのものが非同期で動作するように設計されています。例えば、コード内で完了まで多くの時間を要する重いリクエストを実行した場合を考えてみましょう。もし同期的な処理だった場合、その待ち時間の間、ユーザーは何も操作できなくなってしまいます。このような理由から、時間のかかる重い処理を行う際には、一般

  10. JavaScriptでオブジェクトの配列を1つのオブジェクトにフラット化する方法

    JavaScriptでオブジェクトの配列を1つのオブジェクトへフラット化したい場合、オブジェクトの配列を唯一の引数として受け取る関数を作成します。この関数は、元のプロパティ名の末尾にインデックス番号を付加したキーを持つ、フラットな（階層構造のない）オブジェクトを返します。計算量は O(mn) です。ここで、n は配列の要素数、m は各オブジェクトが持つプロパティの数を表します。一方、空間計算量は O(n) となり、これは実際の配列のサイズに依存します。実装例以下のコードでは、ノート情報を格納したオブジェクトの配列を用意し、それを1つのフラットなオブジェクトへ変換しています。// オブジェクトの

  11. JavaScriptのsplit()メソッドでインデックス1（任意の位置）から分割を開始する方法

    公式の String.prototype.split() メソッドには、文字列をインデックス1、あるいは任意のインデックスnから分割を開始する組み込みの仕組みは存在しません。しかし、split() の使い方をひと工夫するだけで、この機能を実現することが可能です。 実現のアプローチ 今回採用するのは、次のような考え方です。まず、元の文字列をもとに2つの配列を作成します。 ACTUAL： インデックス0から末尾までを分割した配列 LEFTOVER： インデックス0から開始位置（STARTPOSITION）までを分割した配列 ポイントは split() の第2引数です。第2引数には「返される要素

  12. JavaScriptでパラメータのオブジェクトを関数に渡すエレガントな方法とは？

    JavaScriptでは、複数の値を個別の引数として渡す代わりに、1つのオブジェクトにまとめて関数へ渡すことができます。さらに分割代入（destructuring）を組み合わせれば、コードをより簡潔で読みやすくできます。基本的な考え方関数の仮引数を { a, b, c, d } のように波括弧で定義すると、渡されたオブジェクトから対応するプロパティが自動的に取り出されます。これにより、引数の順序を気にせず、名前ベースで明確に値を渡せるのが大きなメリットです。サンプルコード以下は、4つのプロパティを持つオブジェクトを関数に渡し、その合計値を表示する例です。<!DOCTYPE html>

  13. JavaScriptで既に宣言済みの変数へ分割代入（デストラクチャリング）することはできる？

    結論から言うと、既に宣言されている変数に対しても分割代入（デストラクチャリング）は可能です。ただし、その場合は代入式全体を丸括弧 () で囲む必要があります。 丸括弧が必要な理由は、行頭に { } が現れるとJavaScriptがそれをブロック文として解釈してしまうためです。丸括弧で囲むことで、式として正しく評価されるようになります。 基本的な書き方 let name, age; // 既に宣言済みの変数への分割代入 ({ name, age } = personObj); let { name, age } = personObj; のように宣言と同時に代入する場合とは異なり、宣言済みの変

  14. JavaScriptの高階関数とは？基本概念とサンプルコードをわかりやすく解説

    高階関数とは？JavaScriptでは、関数はオブジェクトとして扱われます。そのため、関数を別の関数に引数として渡したり、関数の戻り値として別の関数を返したりすることが可能です。JavaScriptの関数は「第一級関数（ファーストクラス関数）」と呼ばれ、変数・オブジェクト・配列などに自由に格納できるという特徴を持っています。そして、関数を引数として受け取る、戻り値として返す、あるいはその両方を行う関数のことを「高階関数（Higher Order Function）」と呼びます。代表的な高階関数には、map()、filter()、reduce()、forEach()などがあります。これらを活用す

  15. JavaScriptのmap()メソッドで配列を変換する方法を解説

    JavaScriptで配列の各要素を別の値に変換したい場合、map()メソッドを使うのが最も一般的で効率的な方法です。map()は、元の配列の各要素に対して指定したコールバック関数を実行し、その戻り値から新しい配列を生成します。元の配列は変更されないため、安全に処理を行えるのが大きな特徴です。 以下は、map()メソッドを使って配列の各要素を2乗に変換するサンプルコードです。 コード例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /&

  16. JavaScriptでのメソッド借用：call()・apply()・bind()の使い方を解説

    JavaScriptでは、call()、apply()、bind()という3つのメソッドを使うことで、あるオブジェクトが持つメソッドを別のオブジェクトが「借用」できます。これは、本来そのメソッドを持たないオブジェクトに対して、thisの参照先を差し替えてメソッドを実行できる便利なテクニックです。 3つのメソッドの違い call()：引数をカンマ区切りで個別に渡し、即座に関数を実行します。 apply()：引数を配列（または配列風オブジェクト）として渡し、即座に関数を実行します。 bind()：thisを固定した新しい関数を返すだけで、即座には実行されません。返された関数は後から好きなタイミン

  17. JavaScriptのタグ付きテンプレートリテラルとは？使い方を実例で解説

    テンプレートリテラルには、タグ付きテンプレートリテラル（tagged template literal）と呼ばれる応用形があります。タグ付きリテラルは関数定義に似た仕組みで、テンプレートリテラルを自由に解析・加工できるのが大きな特徴です。 通常の関数呼び出しとは異なり、タグ付きリテラルでは括弧 () を使用しません。テンプレートリテラルの直前にタグ関数名を置くだけで呼び出しが行われ、タグ関数の第1引数には文字列リテラルの配列が渡されます。その後、テンプレート内の ${} で埋め込まれた式の評価結果が、残りの引数として順番に渡されていきます。 タグ関数に渡される引数の構成 第1引数：テンプレー

  18. JavaScriptでテンプレート文字列をネストする方法

    JavaScriptのES6で導入されたテンプレート文字列（テンプレートリテラル）は、バッククォート（`）で囲むことで文字列の中に変数や式を埋め込める便利な機能です。実は、この${}（プレースホルダー）の中に、さらに別のテンプレート文字列を入れ子（ネスト）として記述することもできます。テンプレート文字列のネストとは${}の中には任意のJavaScript式を書けるため、その中で再度バッククォートを使ったテンプレート文字列を評価することが可能です。これにより、関数呼び出しの引数として動的に生成した文字列を渡すなど、柔軟な文字列組み立てが行えます。コード例以下は、ボタンをクリックすると、ネストされ

  19. JavaScriptで動的インポート（dynamic import）をawaitする方法

    この記事では、JavaScriptの動的インポート（dynamic import）をawaitを使って読み込む方法について解説します。 注意： このサンプルコードは、モジュールを読み込むためローカルサーバー（localhost）環境が必要です。HTMLファイルを直接開くのではなく、Live Serverなどの開発用サーバー経由で実行してください。 動的インポートとは？ 通常のimport文はファイルの先頭で静的に宣言しますが、import()関数を使うと、必要なタイミング（例：ボタンクリック時）でモジュールを遅延読み込みできます。戻り値はPromiseであるため、awaitと組み合わせることで

  20. JavaScriptのBigIntとは？使い方をサンプルコード付きで解説

    BigIntは、253 − 1 より大きい整数値を表現するために用意された組み込みオブジェクトです。 通常のNumber型で安全に扱える整数の上限は「Number.MAX_SAFE_INTEGER」（9007199254740991 = 253 − 1）までです。これを超える数値をNumber型で扱うと、計算誤差や精度の低下が発生してしまいます。そこで活躍するのがBigIntです。数値リテラルの末尾に「n」を付けるか、BigInt()関数を使用することで、どれほど巨大な整数でも正確に表現・演算できます。 以下は、JavaScriptでBigIntを使用する具体的なサンプルコードです。 サンプル

Total 5937 -コンピューター  FirstPage PreviousPage NextPage LastPage CurrentPage:127/297  20-コンピューター/Page Goto:1 121 122 123 124 125 126 127 128 129 130 131 132 133