JavaScript

 Computer >> コンピューター >  >> プログラミング >> JavaScript
  1. 【JavaScript入門】ネストされた配列の値にアクセスして取得する方法

    JavaScriptでは、配列の中にさらに別の配列を格納する「ネスト（入れ子）構造」を作ることができます。本記事では、ネストされた配列の中の値にアクセスして取得する方法を、具体的なコード例とともにわかりやすく解説します。 ネストされた配列の基本 例として、次のようなネストされた配列を用意しました。 var numbers = [100, 1345, 80, 75, 1000,[35, 55, 67,43,51,78]]; この配列を見ると、インデックス「5」の要素が内側の配列 [35, 55, 67, 43, 51, 78] になっています。ネストされた配列の値を取得するには、まず外側の配列か

  2. 【JavaScript】ドット記法で配列のデータを新しい独立変数に取り出す方法

    配列の中にあるオブジェクトのデータを、新しい独立した変数（個別の変数）に取り出したい場合は、ドット（.）記法を使用します。まず配列名にインデックス番号を付けて対象のオブジェクトを指定し、その後にプロパティ名をドットでつなぐことで、目的の値にアクセスできます。 サンプルコード 以下は、従業員情報が格納された配列から、2番目のオブジェクト（David）のデータを取り出して個別の変数に代入する例です。 const employeeDetails = [    {       employeeName: "Chris",  

  3. JavaScriptでToDoリスト（やることリスト）を作成する方法

    JavaScriptを使えば、テキストボックスに入力したタスクを順番にリストへ追加していく、シンプルなToDoリスト（やることリスト）を簡単に作成できます。この記事では、HTML・CSS・JavaScript（jQuery）を組み合わせた基本的な実装例を、コードと実行手順とあわせて紹介します。 実装例 以下は、ToDoリストを作成するためのコードです。 <!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8"> &n

  4. JavaScriptで2つの配列を1つの新しい配列に結合する方法

    はじめにJavaScriptでは、複数の配列をひとつにまとめて新しい配列を作りたい場面がよくあります。そんなときに便利なのがconcat()メソッドです。この記事では、2つの配列を新しい配列に結合する具体的な手順を、サンプルコードと実行結果付きで解説します。結合する2つの配列を用意するまず、以下のような最初の配列があるとします。var firstArray=[John,David,Bob,Mike];続いて、2番目の配列は次のとおりです。var secondArray=[Chris,Adam,James,Carol];この2つの配列を新しい配列に追加（結合）するには、concat()を使用しま

  5. JavaScriptで文字列のスペースをアンダースコアに置き換える方法

    JavaScriptでは、文字列に含まれるスペースを別の文字に置き換えたいケースはよくあります。例えば、URLやファイル名として扱うために、スペースをアンダースコア（_）に変換したい場合などです。 本記事では、split()とjoin()を組み合わせる方法を中心に、実際のコード例と実行結果を交えてわかりやすく解説します。 まず、次のような文字列があるとします。 var sentence = My Name is David Miller I live in AUS; この文字列内のスペースをすべてアンダースコアに置き換えるには、split()メソッドで文字列を分割し、join()メソッド

  6. JavaScriptでテキストボックスの入力値を取得して表示する方法

    JavaScriptでは、valueプロパティを使ってテキストボックスに入力された値を取得し、innerHTMLを使うことでその値を段落（<p>要素）に表示することができます。この仕組みは、フォームの入力内容をリアルタイムに画面へ反映させたい場合などによく使われる基本的なテクニックです。 コード例 以下が実際のサンプルコードです。 <!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8">  

  7. 【JavaScript】文字列キー(name)をもとに2つの配列を比較する方法

    はじめに JavaScriptでは、オブジェクトが格納された2つの配列を、特定のキー(プロパティ)の値に基づいて比較したい場面がよくあります。オブジェクトは参照先が異なるため直接比較できない点に注意が必要です。本記事では、map()メソッドとincludes()メソッドを組み合わせて、「name」という文字列キーを持つ2つの配列から共通する要素を抽出する方法を解説します。 サンプルデータ まず、比較対象となる1つ目の配列は以下のとおりです。 const firstArray = [ { name: John Doe }, { name: John Smith }, {

  8. JavaScriptでJSON配列を反復処理する方法

    JavaScriptでJSON配列を反復処理するには、JSON.parse()メソッドを使用します。特に、APIから取得した文字列形式のJSONデータを配列として扱う場合、各要素を実際のオブジェクトへ変換してから操作するのが一般的なアプローチです。サンプルコード以下は、文字列形式のJSONデータが格納された配列に対してmap()メソッドと組み合わせてJSON.parse()を使い、各要素をJSONオブジェクトへ変換するコード例です。var apiValues =    [       {name: John, scores: [78, 89]}

  9. JavaScriptでオブジェクト配列を値に基づいて並べ替える方法

    はじめにJavaScriptでは、sort()メソッドを使うことで、キーと値のペアを持つオブジェクトの配列を、特定のプロパティの値に基づいて簡単に並べ替えることができます。文字列を比較する場合には、localeCompare()を組み合わせることで、アルファベット順に正確にソートできます。例として、次のような学生情報のオブジェクト配列を用意します。var details = [ { studentId: 100, name: John }, { studentId: 110, name: Adam }, { studentId: 120, name: Carol },

  10. JavaScriptでPINコードの検証（バリデーション）を実装する方法

    PIN（暗証番号）の検証は、「文字列型であること」「桁数が適切であること」などの条件に基づいて行うことができます。本記事では、JavaScriptを使ってPINの妥当性をチェックするシンプルな関数の実装例を紹介します。検証の条件このサンプルでは、以下の条件をすべて満たす場合のみ「有効なPIN」として判定します。値が文字列型（string）であること小数点（.）を含まないこと数値に変換できること（NaNでないこと）桁数が2桁または4桁であること実装例以下は、PINを検証する関数のサンプルコードです。function simpleValidationForPin(pinValues) { &nbs

  11. JavaScriptで整数を2進数に変換する方法

    JavaScriptで整数を2進数に変換する基本の考え方JavaScriptで整数を2進数に変換するには、対象の整数を2で割り、その都度発生する余りを順番に記録していく方法が使われます。余りは必ず0か1になるため、計算が終わった後にこれらを逆順に並べると、元の整数の2進数表現が完成します。なお、実際の開発では toString(2) メソッドを使えば1行で変換できますが、ここでは変換の仕組み（アルゴリズム）を理解できるよう、剰余演算を用いた実装例を紹介します。サンプルコードfunction convertDecimalToBinary(value) {  var binar

  12. JavaScriptでDOMノードのすべての子要素を一括削除する方法

    JavaScriptでDOMノードからすべての子要素を削除したい場合は、親要素のinnerHTMLに空文字列（''）を設定するのが最もシンプルで手軽な方法です。これにより、その要素の中身が丸ごとクリアされます。 サンプルコード 実際に動作するコードを見てみましょう。ボタンをクリックすると、赤い枠のボックス内の子要素がすべて削除される仕組みです。 <!DOCTYPE html> <html lang="ja"> <head>     <meta charset="U

  13. JavaScriptで矢印キーの押下を検出する方法

    JavaScriptで矢印キーの押下を検出するには、onkeydownイベントを使用します。各キーには固有のキーコードが割り当てられており、矢印キーの場合は次の通りです。左矢印キーは「37」、上矢印キーは「38」、右矢印キーは「39」、下矢印キーは「40」です。押されたキーのkeyCodeをswitch文などで判定することで、どの矢印キーが押されたかを識別できます。サンプルコード以下に具体的な実装例を示します。<!DOCTYPE html> <html lang=ja> <head>    <meta charset=UTF-8&g

  14. jQuery・JavaScriptで通貨文字列を数値に変換する方法を解説

    「€55,600.35」や「$645,345.50」のような通貨文字列を、計算に使える数値へ変換したい場面はよくあります。JavaScriptでは、replace()メソッドと正規表現（REGEX）を組み合わせることで、通貨記号やカンマを簡単に取り除き、数値へ変換できます。変換の基本的な考え方ポイントは、正規表現 /[^0-9.-]+/g を使って「数字・ドット（.）・マイナス（-）」以外の文字をすべて空文字に置き換えることです。これにより、通貨記号（€ や $）や桁区切りのカンマ（,）が一括で除去されます。その後、Number() を使うことで文字列を数値型へ変換できます。コード例以下が実際

  15. JavaScriptで「:（コロン）」と「=（イコール）」の使い分けを理解する方法

    JavaScriptでは、コロン（:）はオブジェクトにプロパティを定義する際に使用し、イコール（=）は変数に値を代入する際に使用します。この2つの記号は似たような場面で目にしますが、役割がまったく異なるため、正しく使い分けることが重要です。コロン（:）を使う場面コロンは主にオブジェクトリテラル内でプロパティ名とその値を結びつけるときに使います。「プロパティ名: 値」という形式で記述し、オブジェクトの構造を定義できます。イコール（=）を使う場面イコールは代入演算子と呼ばれ、宣言した変数や既存の変数・プロパティに値を代入するときに使用します。右辺の値が左辺の変数に格納されます。サンプルコード以下の

  16. 【JavaScript】動的に生成した複数のボタンのうち、クリックされた要素を特定する方法

    JavaScriptで複数の要素を動的に生成している際、「どの要素がクリックされたのか」を判定したいケースはよくあります。これを実現するには、addEventListener()を使用します。ポイントは、イベントリスナーのコールバック関数が受け取るイベントオブジェクトです。evnt.targetで実際にクリックされた要素そのものを取得でき、さらにdatasetプロパティを組み合わせれば、あらかじめ各要素に設定しておいたdata-*カスタム属性の値も簡単に読み取れます。実装例以下がサンプルコードです。ループで3つのボタン（Javascript・MySQL・Java）を生成し、それぞれにdata-

  17. JavaScriptで文字列に2文字ごとにスペースを挿入する方法

    JavaScriptで文字列に対して2文字ごとにスペースを挿入したい場合は、replace()メソッドを正規表現と組み合わせて使用します。正規表現を使うことで、ループ処理を書かずとも簡潔に目的の書式変換を実現できます。正規表現パターンの仕組みここで使うパターンは /.{1,2}(?=(.{2})+$)/g です。この正規表現は「先読みアサーション (?=...)」を利用し、残りの文字数が偶数になる位置にある1〜2文字にマッチさせます。これにより、文字列の末尾から2文字ずつ区切った境界にスペースを挿入できる仕組みになっています。実装例以下がサンプルコードです。var values = JavaS

  18. JavaScriptでelement.classListをクリアする方法｜remove()の使い方を解説

    JavaScriptで要素のクラスをクリア（削除）するには、classList.remove()メソッドを使用します。このメソッドを使えば、指定したクラス名だけを簡単に取り除くことができます。 classList.remove()の基本 classList.remove()は、削除したいクラス名を引数として渡すだけで動作します。カンマ区切りで複数のクラス名を指定すれば、同時に複数のクラスを削除することも可能です。 サンプルコード 以下は、ボタンをクリックすると要素からクラスを削除する実装例です。 <!DOCTYPE html> <html lang="en"

  19. JavaScriptで関数に引数が渡されているかどうかを判定する方法

    関数に引数（パラメーター）が渡されているかどうかを判定するには、if 条件文を使い、値が undefined かどうかをチェックします。引数が省略された場合、その仮引数には undefined が自動的に代入されるため、この性質を利用したシンプルな判定方法です。コード例以下のコードを見てみましょう。function checkingParameter(parameter) { if (parameter !== undefined) { console.log(Parameter is provided.); } else { console.l

  20. 【JavaScript】関数の引数がundefinedの場合にデフォルト値を設定する方法

    JavaScriptでは、関数に引数を渡す際、値がundefinedになるケースに遭遇することがあります。このような場合に備えてあらかじめデフォルト値を設定しておくことで、意図しない動作やエラーを防ぐことができます。 ここでは、以下のような2つの値を関数に渡すケースを想定します。 300 undefined デフォルト値を設定するサンプルコード それでは、引数がundefinedの場合にデフォルト値を代入するコードを見てみましょう。 function showValue(value) {    if (value===undefined) {     &

Total 5937 -コンピューター  FirstPage PreviousPage NextPage LastPage CurrentPage:65/297  20-コンピューター/Page Goto:1 59 60 61 62 63 64 65 66 67 68 69 70 71