JavaScript

 Computer >> コンピューター >  >> プログラミング >> JavaScript
  1. JavaScriptのmap関数で現在時刻が特定の時間帯に含まれるか判定する方法

    例えば、学習予定の時刻を含む科目データが次のようにあるとします。 const scheduleDetails = [ { subjectName: JavaScript, studyTime: 5 PM - 11 PM }, { subjectName: MySQL, studyTime: 12 AM - 4PM } ] ここでmap()メソッドを活用すれば、現在時刻がどの科目の学習時間帯に該当するのかを判定できます。以下にその実装例を示します。 サンプルコード const scheduleDetails = [ { subjectName: JavaScript, s

  2. JavaScriptで複数の変数に同じ値を一括代入する方法

    JavaScriptでは、連鎖的な代入（チェーン代入）を使うことで、複数の変数に同じ値を一度に代入できます。コードがすっきりし、初期化処理も簡潔に書けるのがメリットです。基本構文まず宣言、その後に代入という2段階で行います。構文は以下の通りです。var 変数名1, 変数名2, 変数名3 ……N;変数名1 = 変数名2 = 变数名3 = ……N = 値;記述例例として、5つの変数 first、second、third、fourth、fifth を宣言し、すべてに同じ値「100」を代入してみましょう。var first, second, third, fourth, fifth;first = s

  3. 【初心者向け】ボタンクリックでJavaScript配列の要素を逆順に1つずつ表示する方法

    JavaScriptの配列を逆順に1つずつ表示するには？ 本記事では、ボタンをクリックするたびに、JavaScriptの配列要素を後ろから順に（逆順で）1つずつ表示する方法を解説します。 まず、次のような配列を例として用意しました。 var listOfNames = [    John,    David,    Bob ]; そして、クリックすると配列の値を逆順に取得できるボタンは以下のとおりです。 <button id="reverse" onclick="rev

  4. JavaScriptで連想配列を作成する方法をわかりやすく解説

    JavaScriptで連想配列を作成するには、「キーと値のペア」を持つオブジェクトを要素とした配列を使用します。連想配列とは、数値のインデックス（添字）の代わりに、開発者が自由に定義したキーを使ってデータへアクセスできるデータ構造のことです。厳密に言えば、JavaScriptには他の言語のような専用の連想配列型は存在せず、その役割はオブジェクトが担っています。つまり、JavaScriptにおける連想配列とは「文字列のキーを持つオブジェクト」のことを指します。連想配列の作成例以下の例では、顧客情報を連想配列（オブジェクトの配列）として定義し、forループを使って各顧客の名前を出力しています。va

  5. push()を使ってJavaScriptで連想配列（オブジェクト）を作成する方法

    JavaScriptで連想配列（オブジェクト）を作成するには、forEach()ループとpush()メソッドを組み合わせるのが便利です。この記事では、配列内のデータをキーごとにグループ化して、新しいオブジェクトへ格納する方法を解説します。 基本的な考え方 元データとなる配列をforEach()で順番に処理し、各要素のキー（ここでは学生ID）に対応する値を、あらかじめ用意した空のオブジェクトにpush()で追加していきます。同じキーが現れた場合は、既存の配列に値を追記することで、自動的にグループ化されます。 サンプルコード 以下は、学生IDごとに学生名をまとめる例です。 var student

  6. HTMLフォームのaction属性とJavaScriptのonsubmitイベントで入力バリデーションを実装する方法

    Webフォームを送信する際、JavaScriptのonsubmitイベントを活用すると、サーバーにデータを送る前に入力内容を検証（バリデーション）できます。フォームタグにonsubmit=return 関数名()を指定し、検証関数がfalseを返すと送信処理がキャンセルされ、trueを返すとaction属性で指定したURLへデータが送信される仕組みです。 実装例：onsubmitによるテキスト入力の検証 以下は、テキストボックスの入力値が「gmail」であるかどうかを、フォーム送信時にチェックするサンプルコードです。 <!DOCTYPE html> <html lang=ja

  7. JavaScriptでJSONオブジェクト内に値が存在するかどうかを確認する方法

    JavaScriptでJSONオブジェクト（配列）の中に、特定の値が存在するかどうかを確認したいケースはよくあります。本記事では、forループを使ってオブジェクト配列から目的の値を検索する基本的な方法を解説します。サンプルデータの準備まず、以下のようなJSONオブジェクト（オブジェクトの配列）を用意します。var apiJSONObject = [ {subjectName:MySQL}, {subjectName:Java}, {subjectName:JavaScript}, {subjectName:MongoDB} ]値が存在するかどうかをチェックするこ

  8. JavaScriptでオブジェクトの値が空の場合にキー名を取得する方法

    JavaScriptでオブジェクトを扱っていると、「値が空文字列やnullになっているプロパティのキー名を知りたい」という場面に出会うことがあります。例えば、フォーム入力のバリデーションやデータの整合性チェックなどがその典型例です。このような場合は、Object.keys()メソッドとfind()メソッドを組み合わせることで、簡潔にキー名を取得できます。対象となるオブジェクトの例まず、次のようなオブジェクトを用意します。var details = { firstName: John, lastName: , countryName: US }このオブジェクトでは、las

  9. JavaScriptのmap()メソッドを使ってネストされたオブジェクトにアクセスする方法

    まず、次のような「ネストされたオブジェクト」（オブジェクトの中にさらに別のオブジェクトが含まれている構造）が配列として存在すると仮定しましょう。 var details = [    {       id:"101",       firstName:"John",       lastName:"Smith",       age:25,       countr

  10. JavaScriptでdiv内のカンマ区切りテキストを別々の行に変換する方法

    例えば、以下のようなカンマ区切りのテキストがdiv要素内に含まれているとします。 <div class="commaSeparated"> This,is,the,first,JavaScript,program </div> このカンマ区切りのテキストを別々の行に変換するには、trim()とsplit(,)を組み合わせて使用します。まずtextContentプロパティでdiv内のテキストを取得し、trim()で前後の余分な空白を取り除きます。続いて、split()をカンマ「,」を区切り文字として呼び出すことで、文字列を配列へ分割できます。最後に、

  11. JavaScriptでEnterキー押下時にテキストボックスの内容を送信する方法

    Enterキーのキーコードは「13」です。JavaScriptでは、event.keyCode を使ってEnterキーが押されたかどうかを判定できます。キーボードイベント（keydown）をリスナーで監視し、keyCodeが13であればフォーム送信などの処理を実行する仕組みです。 以下に、テキストボックスでEnterキーが押されたときに送信処理を呼び出すサンプルコードを示します。 サンプルコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8&quo

  12. HibernateとEclipseLinkの違いとは？JPA実装2大フレームワークを徹底比較

    HibernateとEclipseLinkの違いを徹底比較HibernateとEclipseLinkは、どちらも広く使われているO/Rマッピング（Object-Relational Mapping）ツールであり、Javaの永続化標準仕様であるJPA（Java Persistence API）の実装として提供されています。本記事では、両者の基本的な特徴から細かい機能面の差異まで、表形式でわかりやすく解説します。HibernateとはHibernateは、Red Hatが開発したJPAの実装で、最も人気のあるO/Rマッパーのひとつです。JPAの標準仕様に加えて、標準では提供されていない独自の拡張機

  13. JavaScriptでfind()メソッドに似たカスタム関数を作成する方法

    ここでは、studentId（学生ID）と studentName（学生名）のレコードを格納した配列を例に、特定の学生名が存在するかどうかをチェックする方法を解説します。const studentDetails = [ { studentId: 101, studentName: John }, { studentId: 102, studentName: David }, { studentId: 103, studentName: Carol }

  14. JavaScriptの正規表現マッチングに変数を使う方法

    JavaScriptでは、match()メソッドに変数名を渡すことで、文字列内のパターンを動的に検索できます。正規表現オブジェクトを作成するには、new RegExp()コンストラクタを使用します。基本的な構文console.log(対象の変数名.match(マッチング用変数名));検索したいキーワードが変数に格納されている場合は、その変数をnew RegExp()の第一引数に渡して正規表現オブジェクトを生成します。第二引数にはフラグ（例： gは全件検索）を指定できます。実装例var senetence = My Name is John; console.log(元の値=); console

  15. JavaScriptで文字列に空白（半角スペース）が含まれているか判定する方法

    JavaScriptで文字列に空白（半角スペース）が含まれているかどうかを確認したい場合は、indexOf( ) の考え方を利用すると簡単に実装できます。indexOf() メソッドは、指定した文字が文字列内のどの位置にあるかを返し、見つからない場合は -1 を返します。この性質を利用して、戻り値が 0 以上であれば空白が存在すると判断できます。サンプルコード以下は、文字列に空白が含まれているかを判定する関数の実装例です。= 0; } var whiteSpace = stringHasTheWhiteSpaceOrNot(MyNameis John); if (whiteSpace == t

  16. JavaScriptで指定した数値の範囲からランダムな値を取得する方法

    JavaScriptで特定の範囲内のランダムな値を取得したい場合は、Math.random()とMath.floor()を組み合わせることで実現できます。ここでは、開始値「400」〜終了値「480」の間からランダムな整数を取得する関数の作成方法を紹介します。まず、開始値と終了値を引数として渡し、関数を呼び出してみましょう。console.log(getRandomValueBetweenTwoValues(400, 480))このコードでは、開始値に400、終了値に480を指定しています。それでは、JavaScriptのMath.random()を使ってランダムな値を取得する処理を見ていきまし

  17. JavaScriptの再帰関数で配列の要素数を数える方法【サンプルコード付き】

    再帰関数とは、特定の基本条件（ベースケース）を満たすまで自分自身を呼び出し続ける関数のことです。配列の要素数を数える場合も、この再帰の考え方を利用できます。 ここでは、以下のような点数のリストを格納した配列を例に説明します。 var listOfMarks=[56,78,90,94,91,82,77]; 再帰関数で要素数をカウントする仕組み 再帰的に要素を数える考え方はシンプルです。まず配列の先頭要素を「1」としてカウントし、slice(1) で先頭を除いた残りの配列に対して同じ関数を再度呼び出します。そして、配列が空になった時点で 0 を返すことで再帰が終了し、各呼び出しで返された値が積み上

  18. JavaScriptの三項演算子を使って現在時刻に応じてオフィスが「営業中」か「閉店中」かを表示する方法

    ここでは、現在の日時と営業時間を照合するケースを考えてみましょう。現在の時刻に基づいて、オフィスが今「営業中（Open）」なのか「閉店中（Closed）」なのかを画面に表示したい場面はよくあります。 このような処理は、Dateオブジェクトから現在の「時」を取得し、三項演算子（条件演算子）を使って判定することで、非常にシンプルに実装できます。以下がそのサンプルコードです。 コード例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &

  19. JavaScriptで元の配列の値に影響を与えずに新しい配列を作成する方法

    JavaScriptでは、元の配列に影響を与えることなく、既存の配列の値をコピーした新しい配列を作成したい場面がよくあります。この記事では、その具体的な実現方法をわかりやすく解説します。元となる配列まず、次のような配列があると仮定しましょう。var listOfNames = [John, Mike, Sam, Carol];JSON.parse(JSON.stringify())を使った方法JSON.parse(JSON.stringify()) を使うと、配列を一度文字列に変換してから再度パースすることで、完全に独立した新しい配列を作成できます。この方法なら、元の配列の値には一切影響を与え

  20. 【JavaScript】map()とjoin()で配列データを改行付き・表形式のテキストに整形する方法

    配列の中身を見やすい表形式のテキストとして整形したい場合、map()とjoin(\n)を組み合わせるのが効果的です。\nは改行文字を意味しており、これによって各行を新しい行に出力できます。以下がその具体的なコード例です。 サンプルコード studentDetails = [    [101, John, JavaScript],    [102, Bob, MySQL] ]; var studentFormat = ||Id||Name||subjName||\n; var seperate = ; seperate = sepera

Total 5937 -コンピューター  FirstPage PreviousPage NextPage LastPage CurrentPage:105/297  20-コンピューター/Page Goto:1 99 100 101 102 103 104 105 106 107 108 109 110 111