JavaScript

 Computer >> コンピューター >  >> プログラミング >> JavaScript
  1. 正規表現を使って引用符で囲まれたテキストを抽出するJavaScriptコード

    この記事では、正規表現（RegExp）を使用して、文字列から引用符「" "」で囲まれたテキストを抽出する方法を、実際に動作するサンプルコードとともに解説します。ポイントは、/"(.*?)"/g というパターンです。.*? による最短一致と g フラグ（グローバル検索）を組み合わせることで、文中の引用符で挟まれた部分を取得できます。 サンプルコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /&

  2. JavaScriptで非同期ループを実装する方法をわかりやすく解説

    JavaScriptでは、async/awaitとPromiseを組み合わせることで、各処理の完了を待ちながら繰り返しを実行する「非同期ループ」を実装できます。通常のループ内で時間のかかる処理(API通信やタイマー処理など)を順番に実行したい場合に非常に便利です。以下は、JavaScriptで非同期ループを実装するコード例です。コード例<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="vi

  3. JavaScriptで配列を空にする4つの方法【サンプルコード付きで解説】

    JavaScriptで配列を空にする方法は、主に4つあります。それぞれ動作の仕組みや特徴が異なるため、目的に応じて適切な方法を選ぶことが大切です。配列を空にする4つの方法新しい空の配列を代入する：配列変数に、新しく作成した空の配列を代入します。最もシンプルな方法ですが、元の配列を参照している他の変数が残る点には注意が必要です。lengthプロパティを使う：配列のlengthプロパティに0を設定するだけで、すべての要素を削除できます。高速で、元の配列への参照も維持されるため、実務で最もよく使われる方法のひとつです。popメソッドを使う：配列の要素数が0になるまで、popメソッドで末尾の要素を繰り

  4. JavaScriptでコールバック関数にパラメータを渡す方法をわかりやすく解説

    はじめにJavaScriptでは、コールバック関数に対して直接引数を指定することができません。そこで一般的に使われるのが、「コールバック関数を別の関数（高階関数）の引数として受け取り、その内部で必要なパラメータとともに呼び出す」という手法です。本記事では、実際のコード例をもとに、コールバック関数へパラメータを渡す具体的な方法を解説します。サンプルコード<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name=

  5. JavaScriptのアロー関数（太い矢印関数）とは？基本構文と使い方をわかりやすく解説

    アロー関数（太い矢印関数）とは 」という矢印のような記号を使うことから、「太い矢印関数（Fat Arrow Function）」とも呼ばれています。 従来のfunctionキーワードを使った定義と比べて記述が大幅に簡潔になるほか、thisの扱いがレキシカル（語彙的）になるという特徴があり、現代のJavaScript開発では広く使われています。 基本構文 アロー関数の基本構文は以下のとおりです。 { } 」を記述するだけです。また、処理が1行で済む場合は、波括弧（{ }）とreturn文を省略して、さらに短く書くこともできます。 a + b; サンプルコード 次のコードは、JavaScr

  6. JavaScriptの簡潔なアロー関数の書き方と実装例

    簡潔なアロー関数とは JavaScriptにおける簡潔な（コンサイス）アロー関数の構文は、次のようになります。 (param1, param2) => param1 + param2 この形式には function キーワードがなく、波括弧 {} で囲まれた関数本体もありません。パラメータと関数本体の間に => を置くだけで成立します。 さらに、パラメータが1つだけの場合は、丸括弧を省略して次のように書くこともできます。 param1 => param1 * 2 主な特徴 functionキーワード不要： 通常の関数宣言よりも短く記述できます。 暗黙のリターン： =>

  7. JavaScript入門：ファットアロー関数と簡潔なアロー関数の違いと書き方

    簡潔なアロー関数（コンサイスアロー関数）とは、1行で完結する関数のために、太い矢印関数（ファットアロー関数）をより洗練させた記述形式のことです。関数の本体が1行のコードだけであれば、簡潔なアロー関数は暗黙的なreturnを備えているため、波括弧 {} で囲む必要がありません。さらに、引数が1つだけの場合は丸括弧 () も省略して書けますが、引数が存在しない場合には丸括弧が必須となります。構文ファットアロー関数：let add = (a,b) =>{return a+b;}簡潔なアロー関数：let add = (a,b)=>a+b;引数が1つだけの場合：let add = a=>

  8. JavaScriptで擬似必須パラメータを実装する2つの方法

    JavaScriptには、他の言語のような厳密な「必須引数」の構文はありません。しかし、引数にデフォルト値を設定しておくことで、値が渡されなくてもエラーにならない擬似的な必須パラメータを実装できます。この記事では、代表的な2つの手法をサンプルコードとともに解説します。 擬似必須パラメータとは 関数の引数が省略されると、その値は undefined になります。そのまま計算に使うと NaN が返るなど、予期しない動作の原因となります。そこで、引数が渡されなかった場合に初期値へフォールバックさせる処理を加え、関数を安全に動作させます。 実装例 次のコードでは、add() 関数に ES6 のデフォ

  9. JavaScriptでオブジェクトに特定のプロパティが存在するか確認する方法

    JavaScriptでオブジェクトのプロパティ存在を確認する方法 JavaScriptでは、オブジェクトに特定のプロパティが存在するかどうかを確認したい場面がよくあります。最も基本的な方法は、すべてのオブジェクトが持つhasOwnProperty()メソッドを使用することです。このメソッドは、指定したプロパティがオブジェクト自身に直接定義されている場合にtrueを返し、存在しない場合にはfalseを返します。 hasOwnProperty()メソッドの構文 object.hasOwnProperty(propertyName) propertyName： 存在を確認したいプロパティ名（文字列

  10. 【JavaScript】NodeList（ノードリスト）を配列に変換する方法をわかりやすく解説

    JavaScriptでdocument.querySelectorAll()などのDOM操作メソッドを使うと、戻り値として「NodeList（ノードリスト）」と呼ばれるノードのコレクションが返されます。NodeListは配列に似ていますが、map()やfilter()などArrayオブジェクトが持つ便利なメソッドの多くを使用できません。そこで実践では、NodeListを本物の配列に変換してから操作するのが一般的です。 NodeListを配列に変換する主な方法 1. Array.from() を使う 最もシンプルで広く使われている方法です。NodeListを渡すと、それをもとにした新しい配列を生

  11. JavaScriptのTypeError：「'undefined' is not an object」エラーの原因と対処法

    「TypeError: undefined is not an object」というエラーは、値が undefined（未定義）のオブジェクトに対して、プロパティへのアクセスやメソッドの呼び出しを行った場合に発生します。 このエラーメッセージが表示されるのは Safari ブラウザのみという点に注意が必要です。Chrome や Firefox などのブラウザでは、同じ状況でも「Cannot read properties of undefined (reading xxx)」のような、少し異なる文言でエラーが出力されます。そのため、Safari でのみ発生するバグとして報告されることも多くあり

  12. JavaScriptのswitchステートメント内でreturnを使う方法｜サンプルコード付きで解説

    switchステートメント内でreturnステートメントは使えるのか？結論から言うと、switchステートメントが関数の中にある場合は、returnステートメントを含めることができます。returnが実行されると、その時点で関数の処理が終了し、switchステートメントで指定された値が呼び出し元へ返されます。そのため、switchステートメントより後ろに記述したコードは実行されません。さらに、returnは関数自体を抜ける働きを持つため、各caseの末尾にbreakステートメントを記述する必要がない点も見逃せません。breakの書き忘れによる意図しないフォールスルー（次のcaseへの処理の漏れ

  13. 【JavaScript】キーボードの上下キーで変数をカウントアップ・カウントダウンする方法

    JavaScriptでは、keydownイベントを利用することで、キーボードの上矢印キー・下矢印キーが押されたタイミングを検出し、変数の値を自由に増減させることができます。本記事では、上矢印キー(↑)で値をカウントアップし、下矢印キー(↓)でカウントダウンするサンプルコードを紹介します。 実装のポイント キー入力の判定には、イベントオブジェクトのkeyCodeプロパティを使用します。 38:上矢印キー(↑) 40:下矢印キー(↓) それぞれのキーが押されたときに、インクリメント演算子(++a)やデクリメント演算子(--a)で変数の値を更新し、画面に表示します。 サンプルコード <!D

  14. JavaScriptで名前付き引数を実現する方法｜分割代入を使ったサンプルコード付き

    JavaScriptには、Pythonなどの言語に存在するような「名前付き引数（キーワード引数）」の専用構文は用意されていません。しかし、オブジェクトの分割代入（Destructuring）とデフォルト値を組み合わせることで、名前付き引数とまったく同じ挙動を簡単に実現できます。 名前付き引数とは？ 通常のJavaScript関数は、引数を「位置（順番）」で受け取ります。この方式では、引数の数が多い場合に順番を間違えやすく、コードの可読性も低下します。 そこで、オブジェクトを1つだけ引数として渡し、そのプロパティ名で値を指定する方法がよく使われます。こうすることで、引数の順番に依存しない、意図が

  15. 【サンプルコード付き】JavaScriptファイルを動的に読み込む方法を解説

    JavaScriptファイルを動的に読み込むことで、ページの初期表示を高速化したり、必要なタイミングで必要なスクリプトだけを取得したりできます。ここでは、ボタンをクリックしたときに外部のJavaScriptファイルを読み込むサンプルコードを紹介します。サンプルコード<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /> <tit

  16. JavaScriptでHTMLの子ノードを削除する方法をわかりやすく解説

    Web開発において、DOM操作は欠かせないスキルのひとつです。その中でも「子ノード（子要素）を削除する」処理は、リスト項目の動的な追加・削除など、さまざまな場面で活用されます。 JavaScriptでは removeChild() メソッドを使うことで、親要素から指定した子ノードを取り除くことができます。以下に、実際に動作するコード例を示します。 コード例 <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=widt

  17. JavaScriptで小数を検証するには？正規表現を使った実装例を解説

    JavaScriptで小数を検証する方法 JavaScriptで、ユーザーが入力した値が正しい小数（小数点を含む数値）かどうかを判定したい場面はよくあります。そんなときに便利なのが正規表現です。本記事では、match()メソッドと正規表現を組み合わせて、入力値が小数かどうかを検証する方法を、具体的なコード例とともにわかりやすく解説します。 使用する正規表現パターン 今回の検証では、以下の正規表現を使用します。 /^[-+]?[0-9]+\.[0-9]+$/ このパターンの各要素の意味は次のとおりです。 ^[-+]?：文字列の先頭に符号（+ または -）が付いていても、付いていなくてもマッチ

  18. 【JavaScript】正規表現で名前が半角英数字・アンダースコアのみかどうかを判定する方法

    本記事では、JavaScriptの正規表現を使って、入力された名前（テキスト）が「数字・英字・アンダースコア」のみで構成されているかどうかをチェックする方法を解説します。 使用する正規表現 今回使用する正規表現は以下の通りです。 /^\w+$/ 各要素の意味は次の通りです。 ^ … 文字列の先頭を表します \w+ … 半角英字（a〜z、A〜Z）、数字（0〜9）、アンダースコア（_）のいずれかに1文字以上連続でマッチします $ … 文字列の末尾を表します つまり、文字列全体が英数字とアンダースコアだけで構成されている場合にのみマッチし、空白や他の記号が含まれるとマッチしなくなります。 サ

  19. JavaScriptでハッシュのキーを取得するには？Object.keys()メソッドの使い方

    JavaScriptでは、ハッシュは一般的にオブジェクトとして表現されます。オブジェクトが持つすべてのキー（プロパティ名）を取得したい場合、最も簡単で推奨される方法がObject.keys()メソッドです。このメソッドは、指定したオブジェクトの列挙可能なプロパティ名を文字列の配列として返します。 基本構文 Object.keys(オブジェクト名) 戻り値はキー名の配列になるため、そのまま配列操作メソッド（forEachやmapなど）と組み合わせて使えるのも大きな利点です。 サンプルコード 以下は、ボタンをクリックするとハッシュ（オブジェクト）のキーを画面に表示する例です。 <!DOCTY

  20. 【JavaScript入門】日付を1日前に戻す(デクリメントする)方法をわかりやすく解説

    JavaScriptでは、Dateオブジェクトが持つgetDate()メソッドとsetDate()メソッドを組み合わせることで、現在の日付から簡単に1日(あるいは任意の日数)を減算することができます。 この記事では、ボタンをクリックすると表示中の日付が1日前に戻るサンプルプログラムを紹介します。 実装例 以下のコードは、日付を1日デクリメント(前日に戻す)するシンプルなHTML+JavaScriptのプログラムです。 <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <

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