JavaScript

 Computer >> コンピューター >  >> プログラミング >> JavaScript
  1. JavaScriptのタッチイベントとは？基本の4種類と実装例をわかりやすく解説

    JavaScriptのタッチイベントとはタッチイベントは、ユーザーがタッチスクリーン対応デバイス（スマートフォンやタブレットなど）を操作した際に発生するイベントです。指で画面に触れる動作を検知できるため、モバイル向けWebアプリやインタラクティブなUIを実装するうえで非常に重要な仕組みとなっています。代表的なタッチイベントには以下の4種類があります。イベント説明touchstartタッチポイントが画面（タッチ面）に接触したときに発生します。touchmoveタッチポイントが画面上で移動したときに発生します。touchendタッチポイントが画面から離れたときに発生します。touchcancel電

  2. JavaScriptのArray.prototype.flat()メソッドとは？配列を指定した深さで平坦化する方法

    Array.prototype.flat()メソッドとはJavaScriptのArray.prototype.flat()メソッドは、ネストされた配列を指定した深さまで再帰的に平坦化（フラット化）するためのメソッドです。元の配列を変更することはなく、平坦化された新しい配列を作成して返します。引数には平坦化の深さ（depth）を数値で指定します。省略した場合はデフォルトで「1」が適用され、「Infinity」を指定すればすべての階層のネストを完全に展開することも可能です。コード例以下は、Array.prototype.flat()メソッドを使用したサンプルコードです。<!DOCTYPE h

  3. JavaScriptのArray.prototype.sort()メソッドの使い方をサンプルコードで解説

    Array.prototype.sort()は、JavaScriptで配列の要素を並べ替えるための組み込みメソッドです。アルファベット順・数値順といった並び方に加えて、昇順・降順も自由に指定でき、配列操作の中でも特に使用頻度の高いメソッドの一つです。 ただし重要なポイントとして、sort()メソッドはデフォルトではすべての要素を文字列に変換してから比較します。そのため、数値の配列を意図したとおりに並べ替えたい場合は、比較関数を引数として渡す必要があります。 以下は、Array.prototype.sort()メソッドの基本的な使い方を示すサンプルコードです。 サンプルコード <!DOC

  4. JavaScriptの分割代入（Destructuring Assignment）とは？オブジェクトと配列から値を取り出す方法

    分割代入（Destructuring Assignment）とは分割代入（Destructuring Assignment）は、ES6（ECMAScript 2015）で導入されたJavaScriptの特殊な構文です。オブジェクトのプロパティや配列の要素を分解し、それぞれを個別の変数に代入することができます。従来の方法では、オブジェクトや配列から値を取り出す際に、プロパティ名やインデックスを一つずつ指定する必要がありました。分割代入を使えば、こうした操作をより簡潔で読みやすいコードで記述できます。分割代入の主なメリットコードの簡潔化： 複数の変数への代入を1行でまとめて記述できます可読性の向上

  5. JavaScriptにおけるオブジェクトの分割代入（Destructuring）の使い方

    JavaScriptでは、分割代入（Destructuring）と呼ばれる構文を使うことで、オブジェクトから特定のプロパティを簡単に取り出し、個別の変数に代入することができます。従来の方法では、obj.firstName のようにプロパティへ一つずつアクセスする必要がありましたが、分割代入を使えば1行で簡潔に記述できます。オブジェクトの分割代入の基本構文基本的な書き方は以下の通りです。let { プロパティ名1, プロパティ名2, プロパティ名3 } = オブジェクト;波括弧 {} の中に取り出したいプロパティ名を列挙するだけで、同名の変数にそれぞれの値が代入されます。実装例以下は、オブジェク

  6. JavaScriptのネストした分割代入（デストラクチャリング）の使い方

    JavaScriptの分割代入（デストラクチャリング）は、オブジェクトや配列から値を取り出して個別の変数に代入できる便利な構文です。オブジェクトや配列が入れ子（ネスト）になっている場合でも、データ構造に合わせたパターンを記述することで、深い階層にある値まで一度に展開できます。 以下は、ネストしたオブジェクトと配列を分割代入するJavaScriptのサンプルコードです。 サンプルコード <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewpor

  7. JavaScriptでテキストボックスに値を出力する方法をわかりやすく解説

    JavaScriptでテキストボックスに値を出力したい場合は、input要素が持つvalueプロパティを利用します。ユーザーが入力した値を取得し、処理結果を別のテキストボックスのvalueに代入することで、画面への出力が可能になります。 ここでは、2つの数値を入力してその合計を表示するシンプルなサンプルを紹介します。 サンプルコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewp

  8. JavaScriptで文字列からグローバル変数を動的に取得する方法

    JavaScriptでは、windowオブジェクトのプロパティとしてグローバル変数にアクセスできるため、変数名を表す文字列を組み合わせることで、グローバル変数を動的に取得することが可能です。取得した値は alert() を使って画面に表示できます。 基本構文 alert(window[変数名の一部 + 変数名の残り + otherVariableName]); このように、window[...] の括弧内に文字列連結や変数を使った式を記述することで、実行時に変数名が決まるケースにも柔軟に対応できます。 サンプルコード <!DOCTYPE html> <html lang=&q

  9. JavaScriptでHTMLの検索ボックスにデフォルトの検索テキストを追加する方法

    HTMLの検索ボックスにデフォルトのテキスト（初期値）を表示したい場合、「placeholder」という概念を利用するのが一般的です。さらにJavaScriptを組み合わせることで、ユーザーが入力欄をクリック（フォーカス）したときにデフォルトテキストを自動的に消すこともできます。実装のポイントplaceholder属性： 入力欄に薄いグレーでヒントテキストを表示します。入力を始めると自動的に消えます。valueプロパティ： JavaScriptから初期値として実際のテキストを設定できます。onfocusイベント： フォーカスされたときの動きを制御し、条件に応じて値をクリアします。以下が具体的な

  10. JavaScriptの正規表現を使ってABC-1234形式の文字列を作成する方法

    JavaScriptの正規表現を利用すると、「ABC1234」のような英数字の文字列を「ABC-1234」のようにハイフンで区切った読みやすい形式へ変換できます。以下に、実際に動作するサンプルコードを示します。 コード例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale

  11. 【解決】JavaScriptのカラータイプ入力でonchangeイベントが機能しないときの対処法

    onchangeイベントは、要素の値が変更されたタイミングで発生するイベントです。カラータイプの入力欄（<input type=color>）でも正しく記述すれば問題なく動作し、ユーザーが選択した色の値をリアルタイムに取得できます。実装の際のポイントは、以下の構文のように関数へ「this」を引数として渡すことです。 onchange="yourFunctionName(this);" 「this」を渡すことで、イベントが発生した要素そのもの（ここではカラーピッカー）を関数内で参照でき、「c.value」のような形で選択された色の値を簡単に取り出せます。 サンプ

  12. JavaScriptでブロックスコープ変数を宣言するには？letとconstの使い方を解説

    ブロックスコープ変数とはJavaScriptでブロックスコープ変数を宣言するには、ES2015（ES6）で導入された let および const キーワードを使用します。これらのキーワードで宣言された変数は、{ }（波括弧）で囲まれたブロックの中でのみ有効となり、ブロックの外からアクセスしようとするとエラーが発生します。let と const の違いlet は値の再代入が可能な変数を宣言するキーワードで、const は再代入ができない定数を宣言するキーワードです。どちらもブロックスコープを持つため、従来の var（関数スコープ）と異なり、意図しない変数の上書きや漏れを防ぐことができます。特別な

  13. JavaScriptオブジェクトにメソッドを追加・アクセスする方法をわかりやすく解説

    JavaScriptでは、オブジェクトのプロパティとして関数（メソッド）を後から動的に追加することができます。ここでは、ドット記法を使ってオブジェクトにメソッドを追加し、それを呼び出してアクセスする方法を紹介します。基本的な考え方JavaScriptのオブジェクトは「プロパティ」と「メソッド」で構成されます。プロパティが値を保持するのに対し、メソッドは関数として定義され、オブジェクトの操作や処理を行います。既存のオブジェクトに新しいメソッドを追加するには、次のようにドット記法で関数を代入します。obj.メソッド名 = function() { ... };メソッド内では this キーワードを

  14. JavaScriptのconstとletの違いを徹底解説！ブロックスコープ変数の基本と使い方

    JavaScriptにおけるconstとletの基本const と let は、ES2015（ES6）で導入された変数宣言用のキーワードです。どちらもブロックスコープ（波括弧 { } で囲まれた範囲）に対応しているのが特徴で、関数スコープしか持たなかった従来の var とは異なる挙動を示します。両者の大きな違いは再代入の可否です。letで宣言した変数は後から何度でも値を再代入できますが、constで宣言した変数は再代入しようとするとエラー（TypeError）が発生します。letとconstの主な違い項目letconst再代入可能不可（エラー発生）スコープブロックスコープブロックスコープ宣言時

  15. JavaScriptのArray.prototype.includes()メソッドとは？配列内に特定の要素が含まれるか判定する方法

    Array.prototype.includes()メソッドとは JavaScriptのArray.prototype.includes()メソッドは、配列の中に特定の要素が含まれているかどうかを判定するためのメソッドです。要素が見つかった場合はtrue、見つからなかった場合はfalseを返します。 基本構文 arr.includes(searchElement[, fromIndex]) searchElement：検索対象となる要素を指定します。 fromIndex（省略可能）：検索を開始するインデックス位置です。省略した場合は先頭（0）から検索されます。 サンプルコード 以下は、in

  16. JavaScriptのArray.flat()メソッドとは？使い方をわかりやすく解説

    Array.flat()メソッドの基本JavaScriptのArray.flat()メソッドは、ネストされた（入れ子になった）配列を、指定した深さまで再帰的に平坦化（フラット化）するためのメソッドです。元の配列は変更されず、新しい平坦化された配列が生成される点が特徴です。引数には平坦化の深さ（depth）を数値で指定します。深さを指定しない場合のデフォルト値は「1」です。また、「Infinity」を指定すると、どれほど深くネストされた配列でも完全に平坦化できます。構文arr.flat(depth)depth（省略可能）：ネストされた配列を展開する深さ。デフォルトは1。サンプルコード以下は、Ar

  17. JavaScriptのArray.flatMap()メソッドでネストした配列をフラット化する方法

    JavaScriptのArray.flatMap()メソッドは、ネスト（入れ子）された配列に対して各要素に関数を適用した結果を、新しいフラット（平坦化）な配列として返します。map()による変換と、深さ1の配列の平滑化を一度に行える便利なメソッドです。 以下は、Array.flatMap()メソッドの動作を確認できるサンプルコードです。 サンプルコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name

  18. JavaScriptのObject.fromEntries()メソッドとは？配列やMapをオブジェクトに変換する方法

    JavaScriptのObject.fromEntries()メソッドは、「キー」と「値」のペアを持つ配列やMapなどのイテラブル（反復可能なオブジェクト）を、ひとつのオブジェクトに変換するためのメソッドです。 ES2019で追加されたこのメソッドは、オブジェクトを [key, value] 形式の配列に変換する Object.entries() と対になる存在であり、両者を組み合わせることで、オブジェクトのフィルタリングやデータ形式の変換を簡潔に記述できます。 基本構文 Object.fromEntries(iterable) 引数には、[キー, 値] のペアを要素として持つ配列やMapな

  19. JavaScriptのString.trimStart()とString.trimEnd()メソッドの使い方を解説

    JavaScriptには、文字列に含まれる不要な空白を取り除くための便利なメソッドが用意されています。String.trimStart()は文字列の先頭にある空白を削除し、String.trimEnd()は文字列の末尾にある空白を削除します。どちらのメソッドも元の文字列自体は変更せず、空白を取り除いた新しい文字列を返す点に注意してください。また、先頭と末尾の両方の空白を一度に削除したい場合は、従来から提供されているtrim()メソッドを使用します。サンプルコード以下は、String.trimStart()とString.trimEnd()メソッドの動作を確認できるコード例です。<!DOC

  20. 【JavaScript】省略可能なcatchバインディング（Optional Catch Binding）の使い方を解説

    省略可能なcatchバインディング（Optional Catch Binding）とはES2019（ECMAScript 2019）で導入された「省略可能なcatchバインディング」により、catch句の後ろに続く括弧と変数を省略できるようになりました。従来の構文では、catch (e) のようにエラーオブジェクトを受け取る変数を必ず宣言する必要がありましたが、この機能を使えば、エラー情報が不要なケースでシンプルにエラー処理を記述できます。特に、発生しうるエラーの内容を事前に把握している場合や、エラーの詳細を確認せずに一律の処理（フォールバック処理など）を実行したい場合に有効です。コードがすっ

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