JavaScript

JavaScriptでオブジェクトの配列を扱う際、特定の値が何回出現するかを集計したい場面はよくあります。本記事では、配列内に繰り返し現れる名前の出現回数を、reduce()メソッドを使って効率的にカウントする方法を解説します。 サンプルデータの準備 まず、次のような学生情報の配列を例に考えてみましょう。 var details = [     {         studentName: John,       &

JavaScriptでUnicode番号（文字コード）から対応する文字を取得するには、String.fromCharCode()メソッドを使用します。このメソッドは、指定されたUnicodeの数値を文字に変換して返します。構文String.fromCharCode(整数値)ここで指定する整数値が、変換対象となるUnicode番号です。サンプルコード以下は実際に動作を確認できるコード例です。var letters = ABCDEFGH; for (var i = 0; i < letters.length; i++) { console.log(letters[i] + = + lett

window.open()を使ってポップアップウィンドウを開くリンクをクリックしたときに新しいポップアップウィンドウを表示したい場合は、JavaScriptのwindow.open()メソッドを使用します。<a>タグにtarget=popup属性を指定し、onclickイベントでwindow.open()を呼び出すことで、指定したサイズのポップアップウィンドウを簡単に開くことができます。ポイントwindow.open(URL, ウィンドウ名, オプション): 第1引数にURL、第2引数にウィンドウ名、第3引数に幅や高さなどのオプションを指定します。return false;: リン

Web開発では、渡された文字列が絶対URL（スキームから始まる完全なアドレス）なのか、相対URL（パスのみのアドレス）なのかを判別したい場面があります。 この判定を行う最もシンプルで確実な方法は、正規表現（RegExp）を使うことです。URLが https:// または https:// で始まっているかどうかをチェックすることで、絶対URLかどうかを判断できます。 使用する正規表現 以下の正規表現パターンを使用します。 /^https?:\/\//i このパターンの意味は次のとおりです。 ^：文字列の先頭にマッチさせる https?：http または https にマッチ（s? は「sがあ

スプレッド演算子（Spread Operator）を使うと、式を複数の引数、要素、変数などへ展開することができます。JavaScriptオブジェクトを文字列に変換するには、JSON.stringify()メソッドが便利です。ここでは、details1とdetails2という2つのオブジェクトに対してスプレッド演算子を適用した結果（マージされたオブジェクト）を、JSON形式の文字列としてコンソールに出力します。コード例以下がそのサンプルコードです。var details1 = { name: John, age: 21 }; var details2 = { countryName: US, s

JavaScriptでは、filter()メソッドを使うことで、ある配列から別の配列に含まれる要素をすべて除外できます。本記事では、具体的なサンプルコードとともにその手順をわかりやすく解説します。フィルタリングの例まず、1つ目の配列に以下の要素が格納されているとします。[100, 110, 150, 180, 190, 175]続いて、2つ目の配列には以下の要素が入っています。[100, 150, 175]この2つ目の配列に含まれる要素を、1つ目の配列からすべて取り除きたいケースを考えてみましょう。このような場合、filter()メソッドが便利です。filter()は第2引数にオブジェクトを渡

JavaScriptでランダムな文字列を生成する基本の考え方JavaScriptでランダムな文字列や文字を生成するには、Math.random() メソッドを使うのが一般的です。Math.random()は0以上1未満のランダムな数値を返すため、これを文字セットのインデックスに変換することで、任意の文字をランダムに取り出せます。今回は、以下の文字セットから6文字のランダムな文字列を生成する例を紹介します。ABCDEFGHIJKLMNOabcdefghijklmnopqrstuvwxyzPQRSTUVWXYZ;サンプルコード指定した文字数分だけランダムな文字列を生成する関数のコード例は次のとおり

はじめにJavaScriptで文字列を処理していると、「<」などの特殊文字が連続して含まれているケースに遭遇することがあります。本記事では、否定先読み（ネガティブ・ルックアヘッド）を使った正規表現と replace() メソッドを組み合わせて、特殊文字の直後に別の文字が続く場合のみスペースを挿入する方法を解説します。まず、例として次のように特殊文字「<」が連続した文字列を用意します。var sentence = <My<Name<is<John<Doe;replace() と正規表現による置換処理この問題を解決するには、replace() メソッドと正

文字列内の単語をすべて大文字に変換しつつ、スペースをアンダースコア（_）に置き換えたい場合は、trim()メソッドとreplace()メソッド、さらにtoLocaleUpperCase()メソッドを組み合わせて使用します。各メソッドの役割trim()：文字列の先頭と末尾にある余分な空白を取り除きます。replace(/ /g, _)：正規表現を使い、文字列中のすべての半角スペースをアンダースコアに置き換えます。「g」フラグを付けることで、最初の一箇所だけでなく文字列全体が置換対象になります。toLocaleUpperCase()：ロケール（言語・地域の設定）に従って、文字列全体を大文字に変換し

JavaScriptでは、文字列の中から特定の文字（区切り文字）に囲まれた部分だけを抜き出したい場面がよくあります。本記事では、split() メソッドを使って、2つのコロン（:）の間にある部分文字列を取得する方法を解説します。課題となる文字列たとえば、次のように複数のコロンを含む文字列があるとします。var values=This is:the first program in JavaScript:After that I will do Data Structure program;この文字列から、1つ目と2つ目のコロンの間にある部分、つまり以下の出力結果を取得することを目標とします。t

JavaScriptで文字列を繰り返し連結する基本 JavaScriptで同じ文字列を複数回連結したい場合、join()メソッドを利用するのが定番のテクニックです。配列の要素数を工夫することで、文字列を「要素数 − 1」回だけ繰り返して連結できます。 join()の仕組み join()は、配列の各要素を区切り文字（セパレーター）でつなげて1つの文字列に変換するメソッドです。空の配列に対して区切り文字として目的の文字列を指定すると、隣り合う要素同士の間にその文字列が挿入されます。この性質を利用すると、次のような結果が得られます。 new Array(count + 1).join(John)

テンプレート文字列内の {{placeholder}} 形式のプレースホルダーを、実際のデータで動的に置き換えたいケースはよくあります。JavaScriptでは、replace() メソッドに正規表現とコールバック関数を組み合わせることで、この処理をシンプルに実装できます。実装例以下のコードでは、正規表現 /\{\{(.+?)\}\}/g を使って文字列中のすべての {{...}} を検索し、対応するオブジェクトの値に置き換えています。var temp = `My name is {{fullName}} I live in {{countryName}}`; var details = {

JavaScriptで新しいCSSルールを挿入するには？ JavaScriptから動的にスタイルを追加したい場合、sheetオブジェクトのinsertRule()メソッドを使用すると簡単に実現できます。 基本的な流れは以下の2ステップです。 document.createElement(style)でスタイル要素を作成し、document.head.appendChild()を使ってドキュメントのheadに追加します。 作成したスタイル要素のsheetプロパティに対してinsertRule()を呼び出し、新しいCSSルールを挿入します。 サンプルコード 以下が実際のコード例です。 <

JavaScriptでは、オブジェクトの配列に含まれる特定のプロパティだけを、条件に応じて書き換えたいケースがよくあります。例えば、金額が一定の値を超えている要素だけを2倍にする、といった処理です。次のようなオブジェクトの配列があるとします。var employee = [ { name: John, amount: 800 }, { name: David, amount: 500 }, { name: Bob, amount: 450 } ]この配列に対して、「amount」の値が500より大きい場合にのみ、その値を2倍にします。つ

たとえば、次のようなURLがあったとします。https://www.tutorialspoint.com/advanced_microsoft_word_2013_tutorial/index.aspこのURLから、最後の値（ファイル名）だけを取得し、それ以外の部分はすべて削除したいケースはよくあります。期待する出力結果は次のとおりです。index.aspこのような処理を実現するには、replace()メソッドと正規表現を組み合わせて使うのが便利です。コード例以下が実際のコードです。var url = https://www.tutorialspoint.com/advanced_micros

Web開発では、アンカータグ(<a>)に設定されたリンク先URL、つまりhref属性の値を取得したい場面がよくあります。この記事では、jQueryのattr()メソッドを使って、簡単にhrefの値を取得する方法を解説します。対象となるHTMLの例たとえば、以下のようなアンカータグがあったとします。<a class=demo title=get the url href=./mainPage.jsp/1245>href value at console</a>ここで必要なのは、テキスト部分ではなく、URLそのもの、すなわちhref属性の値「./mainPage

JavaScriptで特定のURL（ここではTutorialspointのURL）が正しい形式かどうかを検証したい場合、正規表現を使うのが最も手軽な方法です。この記事では、指定したドメインのURLかどうかを判定するサンプルコードとその実行方法を解説します。 URL検証の基本的な考え方 正規表現パターン /^https?:\/\/(tutorialspoint\.com)\/(.*)$/ を使用することで、対象のURLが「https://」または「https://」から始まり、ドメインが tutorialspoint.com であるかどうかを一括してチェックできます。さらに、match() メソ

JavaScriptでプログラムを作っていると、Set（セット）の中身をオブジェクトとして扱いたい場面に出くわすことがあります。本記事では、Object.assign()メソッドを使って、Setをオブジェクトに変換する方法を、具体的なコード例とともにわかりやすく解説します。 変換前のSetを用意する まずは、例として使用するSetを用意しましょう。 var name = new Set(['John', 'David', 'Bob', 'Mike']); Setからオブジェクトへの変換方法 Setをオブジェクトに変換するには、

JavaScriptである数値が特定の範囲（この場合は0〜255）に含まれているかどうかを判定し、その範囲の数値のみを受け入れるには、if else 条件文を使うのが最もシンプルで分かりやすい方法です。 基本的な考え方 チェックしたい数値が 0未満、または 255より大きい 場合は範囲外として false を返し、それ以外の場合は範囲内として true を返す関数を作成します。論理OR演算子（||）を使うことで、2つの条件を1つのif文でまとめて評価できます。 サンプルコード 以下は、0〜255の範囲にある数値のみを受け入れる関数の実装例です。 function checkRangeDemo(

JavaScriptのsort()メソッドでは、比較用のコールバック関数（カスタムソート関数）を渡すことで、独自の並び替えルールを実現できます。カスタムソート関数の基本ルールカスタムソート関数を定義するには、配列内の1番目の値と2番目の値を比較します。戻り値によって並び順が決まります。1番目の値が2番目の値より大きい場合 → -1 を返す1番目の値が2番目の値より小さい場合 → 1 を返すどちらでもない場合（等しい場合）→ 0 を返すこのルールに従うと、データは降順（大きい順）にソートされます。もし昇順（小さい順）で並べたい場合は、上記の処理を逆向きにして、大きい場合に 1 を、小さい場合に