JavaScript

 Computer >> コンピューター >  >> プログラミング >> JavaScript
  1. JavaScriptのArray.prototype.flatMap()メソッドとは？ネストした配列をフラット化する方法

    JavaScriptのArray.prototype.flatMap()メソッドは、ネストされた（入れ子構造の）配列を、新しいフラットな（平坦な）配列へと変換するメソッドです。 flatMap()は、各要素に対してmap()のコールバック関数を実行した後、その結果を深さ1でフラット化します。つまり、「map()してからflat()を呼ぶ」処理を、1つのメソッドで簡潔に記述できるのが大きな特徴です。 flatMap()の基本的な動作 flatMap()の構文は以下の通りです。 arr.flatMap(callbackFn) コールバック関数が配列を返す場合、その返り値の配列が自動的に展開され、結

  2. JavaScriptのencodeURI()・decodeURI()関数の使い方を徹底解説

    JavaScriptには、URL（URI）を安全に扱うための組み込み関数として encodeURI() と decodeURI() が用意されています。この記事では、それぞれの役割と実際の使い方をサンプルコード付きで解説します。 encodeURI()関数とは encodeURI()関数は、URI全体をエンコードするための関数です。日本語やスペースなど、URLにそのまま含めることができない文字をパーセントエンコーディング（%エンコード）に変換します。 ただし、URIの構造上特別な意味を持つ予約文字である以下の文字はエンコードされず、そのまま残ります。 , / ? : @ & = + $

  3. JavaScriptのパラメータ（仮引数）と引数（実引数）の違いをわかりやすく解説

    パラメータと引数とは？JavaScriptにおいて、パラメータ（仮引数）とは、関数を定義するときに関数名の後ろの括弧内に記述される変数名のことです。一方、引数（実引数）とは、関数を呼び出すときに実際に渡される値であり、関数側で受け取られるものです。イメージとしては、パラメータは値を受け取るための「受け皿」のような名前で、引数はその受け皿に渡される「実際の値」です。この2つの違いを正しく理解することは、関数を使いこなすうえで非常に重要です。サンプルコード以下は、JavaScriptにおけるパラメータと引数の動作を確認できるコード例です。ボタンをクリックすると、配列の要素が引数として関数に渡され、

  4. JavaScriptで関数を「関数」として呼び出す方法と「メソッド」として呼び出す方法の違い

    JavaScriptでは、同じ関数でも呼び出し方によって「関数としての呼び出し」と「メソッドとしての呼び出し」という2つの使い方ができます。この2つの大きな違いは、関数内でthisが何を参照するかという点にあります。 2つの呼び出し方の違い 関数としての呼び出し：関数名を直接記述して呼び出します（例：add(2, 3)）。この場合、thisはグローバルオブジェクト（ブラウザ環境ではwindow）を参照します。 メソッドとしての呼び出し：オブジェクトのプロパティ経由で呼び出します（例：obj.welcome()）。この場合、thisはそのオブジェクト自身を参照するため、オブジェクトが持つプロパ

  5. JavaScriptのcall()メソッドで引数を渡す方法をわかりやすく解説

    JavaScript call()メソッドとは？JavaScriptのcall()メソッドを使うと、あるオブジェクト向けに定義した関数を、別のオブジェクトのコンテキストで実行できます。thisの参照先を差し替えることで、同じメソッドを複数のオブジェクト間で再利用できるのが最大のメリットです。call()の特徴は、第1引数にthisとして渡したいオブジェクトを指定し、第2引数以降に関数へ渡す値をカンマ区切りで個別に指定する点です。引数を配列としてまとめて渡すapply()メソッドとの違いは、この部分にあります。サンプルコード以下は、call()メソッドに引数を渡して呼び出す具体例です。<!

  6. JavaScriptのブロックスコープとは？letとconstによる変数のスコープをわかりやすく解説

    ブロックスコープとは、2つの波括弧 { } で囲まれた領域のことを指します。この領域は、ループ処理、if文、switch文などの内部に存在します。 ES2015（ES6）で導入された let と const を使うことで、そのブロック内でのみアクセスできる「ブロックスコープ変数」を作成できます。従来の var は関数スコープであり、ブロックの外からでもアクセスできてしまうため、意図しないバグの原因になることがありました。let や const を使えば、変数の有効範囲を明確に制限できます。 ブロックスコープの特徴 ブロック外からのアクセス不可： ブロック内で宣言した変数は、ブロックの外から参

  7. JavaScriptのエラーオブジェクトとは？name・messageプロパティと使い方を解説

    エラーオブジェクトは、スクリプトの実行中にエラーが発生した際に、JavaScriptインタプリタによって自動的にスローされるオブジェクトです。また、throw文と組み合わせることで、開発者が独自に定義した例外（ユーザー定義例外）をスローする用途にも活用できます。 エラーオブジェクトの主なプロパティ JavaScriptのエラーオブジェクトには、以下の2つの重要なプロパティがあります。 プロパティ説明 nameエラーの名前を設定または取得します（例：ReferenceError、TypeErrorなど）。 messageエラーの内容を文字列として設定または取得します。 主なエラーの種

  8. JavaScriptにおける配列の分割代入（Destructuring）の基本と使い方

    分割代入（Destructuring）とは、配列から値を取り出して個別の変数に展開するための構文です。ES2015（ES6）で導入されたこの機能を使うと、配列の各要素を簡潔かつ読みやすく変数に割り当てることができます。 配列の分割代入のサンプルコード 以下は、JavaScriptで配列の分割代入を行うコード例です。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport&quo

  9. 【初心者向け】JavaScriptのfor...ofループの使い方を実例つきで解説

    JavaScriptのfor...ofループは、配列、文字列、配列風オブジェクト（Array-like objects）、NodeListなど、反復可能（イテラブル）なオブジェクトの要素を先頭から順番に1つずつ取り出して処理するための構文です。 インデックスの管理が不要なため、従来のforループやforEachメソッドと比べてコードが簡潔になり、可読性や保守性が向上するというメリットがあります。 for...ofループの基本構文 for (変数 of 反復可能オブジェクト) {   // 各要素に対して実行したい処理 } サンプルコード 次の例では、for...ofループを使って文

  10. JavaScriptのArray.prototype.find()メソッドとは？使い方をサンプルコードで解説

    Array.prototype.find() メソッドは、配列の中から指定した条件（テスト関数）を満たす最初の要素の値を返します。 条件に一致する要素が見つかった時点で検索を終了するため、大きな配列でも効率的に動作します。また、どの要素も条件を満たさなかった場合は undefined を返すという点も重要な特徴です。 find()メソッドの基本構文 arr.find(callback(element[, index[, array]])[, thisArg]) callback：各要素に対して実行されるテスト関数。true を返した要素が結果となります。 thisArg（省略可）：callb

  11. JavaScriptのsplice()メソッドで配列から要素を削除する方法【コード例付き】

    JavaScriptのsplice()メソッドを使うと、配列から指定した位置の要素を簡単に削除できます。このメソッドは元の配列を直接変更する点が特徴です。 splice()メソッドの基本構文 arr.splice(start, deleteCount) start: 削除を開始するインデックス位置（0から始まります） deleteCount: 削除する要素の数。省略すると、開始位置から配列の末尾までがすべて削除されます 以下は、splice()メソッドを使用して配列の1番目から5番目の間の要素（インデックス1〜4）を削除するサンプルコードです。 コード例 <!DOCTYPE html

  12. JavaScriptのコンストラクターにプロパティやメソッドを追加する方法

    JavaScriptでは、コンストラクター関数に対してprototype（プロトタイプ）を利用することで、後からプロパティやメソッドを追加することができます。この方法で追加したプロパティやメソッドは、そのコンストラクターから生成されたすべてのインスタンスで共有されるため、メモリの面でも効率的です。 サンプルコード 以下は、JavaScriptのコンストラクターにプロパティとメソッドを追加するコード例です。 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta n

  13. new演算子を使ってJavaScriptコンストラクタを作成する方法

    JavaScriptでは、通常の関数を「new」演算子と組み合わせて呼び出すことで、コンストラクタとして機能させることができます。これにより、同じ構造を持つ複数のオブジェクトを効率的に生成できます。以下に、new演算子を使用してJavaScriptのコンストラクタを作成するコード例を紹介します。 サンプルコード <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial

  14. JavaScriptのコンストラクターから値を返す方法

    JavaScriptのコンストラクターから値を返すには？JavaScriptでは、コンストラクター関数内で明示的にオブジェクトをreturnすると、new演算子によって生成されるインスタンス（this）の代わりに、そのオブジェクトが結果として返されます。この仕組みを利用すると、コンストラクターの戻り値を柔軟に制御できます。以下は、JavaScriptのコンストラクターから値を返すコード例です。サンプルコード<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-

  15. 【初心者向け】JavaScriptのfinallyステートメントをサンプルコード付きでわかりやすく解説

    finallyステートメントは、エラーが発生したかどうかにかかわらず、tryブロックとcatchブロックの処理が完了した後に必ず実行されるブロックです。ファイルのクローズやデータベース接続の切断など、処理の成功・失敗に関係なく必ず実行したい後処理（クリーンアップ処理）を記述する際に非常に便利です。finallyの基本構文try { // エラーが発生する可能性のある処理 } catch (err) { // エラー発生時に実行される処理 } finally { // エラーの有無にかかわらず必ず実行される処理 }サンプルコード以下は、JavaScriptにおけるfinallyステー

  16. JavaScriptの自己呼び出し関数とは？IIFE（即時実行関数式）の基本と使い方を解説

    JavaScriptにおける自己呼び出し関数は、「即時実行関数式（IIFE：Immediately Invoked Function Expression）」として知られています。IIFEとは、定義された直後に自動的に実行されるJavaScriptの関数であり、通常の関数のように後から手動で呼び出す必要がないのが大きな特徴です。 IIFEの基本的な構文 即時実行関数は、関数全体を丸括弧 () で囲み、その直後に続ける () によって即座に呼び出します。 (function () {   // ここに処理を記述する })(); また、ES6以降ではアロー関数を使えば、より簡

  17. JavaScriptの型強制（Type Coercion）とは？仕組みを初心者向けにわかりやすく解説

    型強制（Type Coercion）とは、あるデータ型が自動的・暗黙的に別のデータ型へと変換される仕組みのことです。JavaScriptは動的型付け言語であり、開発者が明示的に型を指定しなくても、状況に応じて値の型が自動的に変換されます。特に注意が必要なのが「+」演算子です。片方が文字列の場合、数値は文字列に変換されて文字列の連結として処理されます。一方、「-」「*」「/」などの算術演算子では、文字列は数値へ変換されるため、挙動の違いを理解しておくことが重要です。以下に、JavaScriptにおける型強制の動作を確認できるサンプルコードを示します。サンプルコード<!DOCTYPE htm

  18. JavaScriptの型キャスト(型変換)とは?String・Number・Booleanの使い方を解説

    型キャスト(型変換)とは?型キャストとは、あるデータ型を別のデータ型へ明示的に変換することを指します。JavaScriptでは、以下の3つの関数を使った変換が最も一般的です。String() … 文字列型へ変換Boolean() … 真偽値型へ変換Number() … 数値型へ変換それぞれの関数に値を渡すだけで、簡単に目的の型へ変換できるのが特徴です。JavaScriptで型キャストを行うコード例以下は、JavaScriptで型キャストを行うサンプルコードです。ボタンをクリックすると、値「44」が文字列・数値・真偽値へそれぞれ変換され、結果が画面に表示されます。<!DOCTYPE htm

  19. JavaScriptのwindow.innerWidth・innerHeightプロパティとは？使い方をわかりやすく解説

    JavaScriptのwindow.innerWidthプロパティはブラウザウィンドウのコンテンツ領域（ビューポート）の幅を、window.innerHeightプロパティはコンテンツ領域の高さをそれぞれピクセル単位で取得します。スクロールバーやツールバーなど、ブラウザUIの一部は含まれず、あくまでページが表示されている領域のサイズが返される点に注意しましょう。 これらのプロパティは、レスポンシブ対応の処理や要素の動的な配置計算など、ウィンドウサイズに応じた挙動を実装したい場合に非常に便利です。 window.innerWidthとinnerHeightのサンプルコード 以下は、ボタンをクリッ

  20. JavaScriptでページ読み込み時にテキストを自動的に強調表示する方法

    はじめに ページが読み込まれるたびに特定のテキストを自動的に強調表示したい場合、forループと<span class=yourColorName>の仕組みを組み合わせることで簡単に実現できます。この手法では、あらかじめ指定したキーワードをJavaScriptが検出し、対応するCSSクラスを適用して文字色を変更します。 処理の流れ document.getElementById() で対象となるHTML要素を取得します。 innerHTML.split( ) を使って、テキストを半角スペースで区切って配列化します。 for ループで各単語を順番にチェックし、「blue」や「yel

Total 5937 -コンピューター  FirstPage PreviousPage NextPage LastPage CurrentPage:140/297  20-コンピューター/Page Goto:1 134 135 136 137 138 139 140 141 142 143 144 145 146