JavaScript

JavaScriptでは、オブジェクトに格納された文字列値から最初の単語だけを取り出したいケースがあります。例えば、「JavaScript HTML」のように複数の値がスペース区切りで記録されているデータから、先頭の技術名のみを抽出したい場合などです。 このような場合には、split()メソッドを使ってスペースを基準に文字列を分割すると、シンプルかつ効率的に実現できます。 対象となるオブジェクト まず、次のような従業員情報を持つオブジェクトの配列を用意します。各従業員のemployeeTechnologyには、2つの技術がスペースで区切られて格納されています。 const employeeDe

JavaScriptでは、「details1.details2.details3」のようなドット表記で書かれたキーの文字列を、実際にネストされた（入れ子構造の）オブジェクトへ変換したいケースがあります。本記事では、split()とmap()を組み合わせて、この変換をシンプルに実現する方法を解説します。 変換元のデータ 例として、次のようなドット表記の文字列があるとします。 const keys = details1.details2.details3.details4.details5 そして、最も深い階層に設定したい値は次のとおりです。 const firsName = David; 変換の

JavaScriptでオブジェクトの配列を扱う際、重複した値を含むレコードを整理したいケースはよくあります。ここでは、Set()を使って配列から重複レコードを効率的に削除・フィルタリングする方法を解説します。重複値を含むサンプルデータまず、以下のように重複した値を含むレコードがあるとします。var objectOfNationality = [ { nationality: Indian }, { nationality: American }, { nationality: Emirati }, { nationality: India

JavaScriptの Math.ceil() は、Mathオブジェクトに含まれる組み込みメソッドの一つで、小数点以下を切り上げて最も近い整数を返します。たとえば、値が 4.5 でも 4.3 でも、どちらも結果は 5 になります。サンプルデータここでは、以下の2つの値を使って動作を確認してみましょう。var result1 = 98;var result2 = 5;Math.ceil() を使ったコード例次のコードは、Math.ceil() を使った場合と使わない場合（そのままの除算結果）の違いを表示するものです。var result1 = 98;var result2 = 5;console

JavaScriptでは、独自のカスタム関数を作成することで、ある数値が素数かどうかを簡単に判定できます。素数とは、1とその数自身以外に約数を持たない、1より大きい自然数のことです（例：2、3、5、7、11、13など）。この記事では、実際に動作するサンプルコードを通じて、素数判定関数の作り方を解説します。サンプルコード以下が、素数判定を行うカスタム関数のコード例です。function checkNumberIsPrime(number) { var flag = false; for (start = 2; start < number / 2; start++) {

JavaScriptで配列からn番目ごとの要素を取得し、表示する値の個数を固定したい場合は、forループとif条件を組み合わせることで簡単に実現できます。 まず、次のような配列を用意してみましょう。 var numbers = [1, 2, 34, 56, 78, 90, 100, 110, 40, 70, 67, 77, 34, 68, 89, 91, 94]; 表示する値の個数をカウンターで指定する 結果として表示する値の個数は、カウンター変数を使って制御します。 var counter = 6; 上記のように設定すると、最終的に6個の値が表示されることになります。 サンプルコード

隣接する要素同士を比較し、小さい方の値を入れ替える（スワップする）という考え方は、代表的なソートアルゴリズムであるバブルソート（Bubble Sort）の基本的な仕組みです。比較の結果、条件を満たしていれば2つの値を交換し、これを繰り返すことで配列全体が昇順に並び替えられていきます。 本記事では、JavaScriptで隣接要素の比較とスワップを行うバブルソートを実装する方法を、サンプルコード・実行手順・出力結果とあわせてわかりやすく解説します。 バブルソートのコード例 以下は、隣接する要素を比較しながら値を入れ替えることで、配列を昇順にソートするJavaScriptのコードです。 var

JavaScriptでは、配列から重複した要素を取り除き、一意（ユニーク）な値だけを含む新しい配列を作りたい場面がよくあります。本記事では、filter()メソッドを使った基本的な手法を中心に、実装手順と実行結果をわかりやすく解説します。 重複要素を含む配列の例 まず、次のように重複した数値を含む配列があると仮定しましょう。 var duplicateNumbers = [10, 20, 100, 40, 20, 10, 100, 1000]; この配列から重複を取り除いた結果として、以下の出力を得たいと思います。 [10, 20, 100, 40, 1000] filter()メソッドで一意

JavaScriptでカンマ区切りの文字列を配列に分割し、さらに各要素の前後にある余分な空白を取り除きたい場面はよくあります。この記事では、split()メソッドとtrim()メソッドを組み合わせた実装方法を、サンプルコードと実行結果つきでわかりやすく解説します。 処理の流れ 文字列をカンマで分割するには split() を使用し、前後の空白を削除するには trim() を使用します。まずは、カンマと空白が混在した次のような文字列を例に考えてみましょう。 var sentences =  John ,    David ,      

個人情報やカード番号などを扱う際、文字列の一部を隠して表示したいケースはよくあります。例えば、以下のような値があったとします。'6778922''76633 56 1443''8888 4532 3232 9999'この値に対して、先頭部分の文字を4つのアスタリスク（****）で置き換え、末尾の3文字だけを表示したい場合、期待する出力は次のようになります。**** 922**** 443**** 999このような処理を実現するには、replace()メソッドに正規表現を組み合わせて使用します。実装例以下がそのコードです。const hideDat

Webフォームを作成していると、「ページを開いた時点で特定のチェックボックスにチェックを入れた状態にしたい」というケースがあります。JavaScriptでは、checkedプロパティを使うことで、これをとても簡単に実現できます。本記事では、具体的なコード例とともにその使い方をわかりやすく解説します。 サンプルで使うチェックボックス 今回は、以下のような2つのチェックボックスを例に説明します。 <label>John</label> <input id="checkedValue1" type="checkbox">

オブジェクトの配列内の各要素に新しいプロパティを追加したい場合、map()メソッドを使うのが最もシンプルで効果的な方法です。この記事では、名前の配列と照合しながら、学生データのオブジェクト配列に「存在確認」のプロパティを追加する具体例を紹介します。 サンプルデータの準備 まず、比較元となる名前の配列を用意します。 const firstname = [John, David, Bob]; 続いて、プロパティを追加していく対象となるオブジェクトの配列です。 const studentDetails = [ { firstname: Carol, marks

クラス内の配列に格納されたオブジェクトの値を編集するには、「this」キーワードを使用します。メソッドをオブジェクト経由で呼び出すと、そのメソッド内の「this」は呼び出し元のオブジェクト自身を参照するため、配列内の特定のオブジェクトのプロパティを直接変更できます。 コード例 以下がその実装例です。 class Employee {     constructor() {         this.tempObject = [             {   &nb

JavaScriptでは、オブジェクトのプロパティにアクセスしたときに自動的に処理を実行したい場合、get キーワードを使ってgetter（ゲッター）関数を定義できます。getterはメソッドのように見えますが、呼び出し時に括弧 () を付けず、通常のプロパティと同じようにアクセスできるのが特徴です。getter関数とはgetterを定義すると、そのプロパティが参照された瞬間に関数内の処理が実行されます。値の取得時にログを出力したり、計算結果を返したりといった用途に活用できます。コード例以下に、getキーワードを使ったgetter関数の実装例を示します。const studentDetails

JavaScriptの配列から偶数番目の要素だけを取り出したい場合は、配列のインデックスを利用し、剰余演算子（%）を使って条件判定を行うのが最もシンプルな方法です。基本的な考え方インデックスが偶数かどうかは、その値を2で割った余りが0になるかどうかで判断できます。以下のような条件式を使用します。if(index % 2 == 0) { // 偶数番目の要素に対する処理 }この条件に一致した場合のみ処理を実行することで、配列内の偶数番目（0番目、2番目、4番目…）の値だけを表示・取得できます。サンプルコード以下は、科目名が格納された配列から偶数番目の要素をコンソールに出力する例です。var

JavaScriptでは、配列の length プロパティを 0 に設定すると、配列のすべての要素が削除され、メモリ上の内容がクリアされます。さらに、length プロパティに任意の数値を代入することで、指定したサイズ分の領域を再び割り当てることができます。length を使ったメモリのクリアと再割り当てまず、次のような配列オブジェクトがあるとします。var arrayObject = [ John, David, Mike ];length プロパティを使って、配列を空にし（メモリをクリアし）、その後あらためて領域を割り当てます。構文は以下

オブジェクトの配列から特定の値を取得するには？JavaScriptでは、オブジェクトの配列の中から条件に一致する特定の値を持つ要素を取り出したい場面がよくあります。この記事では、forループとif文を使って、「employeeFirstName」が「John」である要素だけを抽出する方法を解説します。サンプルデータまず、次のような従業員情報を格納したオブジェクトの配列を用意します。const details = [ { employeeFirstName: John, employeeLastName: Doe },

JavaScriptでオブジェクト同士を比較する際、「中身が同じなのに等しくない判定になる」という問題に直面したことはありませんか？これは、比較演算子（== や ===）がオブジェクトの「値」ではなく「参照（メモリ上のアドレス）」を比較するために起こる現象です。 本記事では、以下のような2つのオブジェクトを例に、比較演算子を使った場合と JSON.stringify() を使った場合の違いを具体的に見ていきます。 var object1 = { firstName: David }; var object2 = { firstName: David }; なぜ比較演算子では正しい結果が得られな

JavaScriptでは、constキーワードを使って定義された変数は、再代入することができません。つまり、一度値を代入した後は、同じ変数に別の値を割り当てることはできません。 ただし、オブジェクトをconstで定義した場合でも、そのオブジェクトのコピーを作成して変更を加えれば、元のオブジェクトは影響を受けず、初期値のまま保たれます。 以下は、constで定義した変数の例です。 const details1 = { firstName: David, subjectDetails: { subjectName: JavaScript } } コード例 次のコードでは、スプレッド

配列の中から特定の単語を見つけたい場合は、includes()メソッドを使うのが最も手軽です。まず、次のような文章を要素として持つ配列を用意します。var sentence = [My Name is John Smith. My Favourite Subject is JavaScript. I live in US. I like Hockey];続いて、上記の「sentence」配列の中から検索したいキーワードをまとめた配列を定義します。var keywords = [John, AUS, JavaScript, Hockey];サンプルコード以下が実際のコードです。外側のループで文（