JavaScript

 Computer >> コンピューター >  >> プログラミング >> JavaScript
  1. 【JavaScript】文字列からn番目に出現する文字を削除するremoveStr関数の実装方法

    はじめに JavaScriptでは、標準の文字列メソッドだけでも多くの操作が可能ですが、独自のメソッドをString.prototypeに追加することで、より柔軟な文字列処理を実現できます。今回は、文字列から指定した部分文字列の「n番目の出現」だけを削除するremoveStr()関数を実装してみましょう。 関数の仕様 removeStr()はString.prototypeに登録されるため、元の文字列はthisとして参照されます。引数としては次の2つを受け取ります。 subStr … 削除対象の文字または部分文字列 num … 何番目の出現を削除するかを示す数値 また、部分文字列が文字列内

  2. 【JavaScript入門】onclick()でボタンクリック時に関数を呼び出す方法

    はじめにWebページのボタンがクリックされたときに、特定の関数を実行したい場面は非常によくあります。JavaScriptでは、HTML要素のonclick属性に関数名を指定するだけで、この動作を簡単に実現できます。例えば、次のようなボタンがあるとします。<button onclick="displayingMessageOnButtonClick()">押してください</button>このボタンがクリックされた際に、指定した関数を呼び出すことが目的です。コード例以下がその完全なサンプルコードです。<!DOCTYPE html> <h

  3. JavaScriptで最初のスラッシュより前の文字列を置換する方法

    はじめに次のような、スラッシュ（/）を含む文字列があるとします。var queryStringValue = welcome/name/john/age/32この文字列の「最初のスラッシュより前の部分」だけを別の文字列に置き換えたい場合は、replace()メソッドと正規表現を組み合わせることで簡単に実現できます。使用する正規表現の意味今回使う正規表現は /^[^/]+/ です。それぞれの記号は以下のような意味を持っています。^ … 文字列の先頭位置を表す[^/]+ … 「スラッシュ以外の文字」が1文字以上続く部分にマッチするつまり、このパターンは「文字列の先頭から、最初のスラッシュの手前まで

  4. JavaScriptでRGBカラーを16進数カラーコード（HEX）に変換する方法

    RGBカラーを16進数に変換するには JavaScriptでは、RGB形式の色情報を受け取り、それを16進数カラーコード（HEXコード）に変換する関数を作成できます。この関数は、赤・緑・青それぞれの数値を含むオブジェクトを引数として受け取ります。 期待される動作 例えば、次のような入力に対して： rgbToHex(0, 128, 192) // 結果: #0080C0 実装コード const rgbColor = { red: 0, green: 51, blue: 155 }; function rgbToHex({ red: r, green: g, blue: b }) {

  5. JavaScriptで16進数カラーコードをRGB値に変換する関数の実装方法

    Web開発において、16進数（HEX）形式のカラーコードをRGB形式へ変換したいケースは頻繁に発生します。本記事では、16進数のカラーコードを引数として受け取り、赤（Red）・緑（Green）・青（Blue）それぞれの数値を含むオブジェクトを返すJavaScript関数の作成方法を解説します。関数の仕様今回実装する関数「hexToRGB」は、以下の要件を満たす必要があります。16進数のカラーコード（文字列）を引数として受け取るred・green・blue の3つのプロパティを持つオブジェクトを返す3桁表記（例：#0AC）と6桁表記（例：#0080C0）の両方に対応するたとえば、次のように呼び出

  6. JavaScriptで2次元配列の転置（行と列の入れ替え）を行う方法

    2次元配列の転置とは 2次元配列の「転置」とは、行と列を入れ替えた新しい配列を作る操作です。たとえば、3行2列の配列を転置すると、2行3列の配列になります。 本記事では、2次元配列を受け取り、その転置配列を返すJavaScript関数を、2つの異なるアプローチで実装する方法を紹介します。 方法1：Array.prototype.forEach() を使う方法 forEachメソッドを使って各行・各要素にアクセスし、行と列のインデックスを反転させながら結果の配列を組み立てていきます。 const arr = [ [0, 1], [2, 3], [4, 5] ]; con

  7. JavaScriptでオブジェクト配列からキーごとの最大値を持つ要素を取得する方法

    問題の概要 次のようなオブジェクトの配列があるとします。 const arr = [    {a:1, b:"apples"},    {a:3, b:"apples"},    {a:4, b:"apples"},    {a:1, b:"bananas"},    {a:3, b:"bananas"},    {a:5, b:"bananas"}, &n

  8. JavaScriptで目標値に最も近い合計になる数のペアを見つける方法

    この記事では、JavaScriptを使って「配列の中から2つの数を選び、その合計が指定した目標値に最も近くなるペア」を見つける関数の実装方法を解説します。 問題の概要 求められているのは、次のような仕様を持つJavaScript関数です。 第1引数として数値の配列を受け取る 第2引数として目標となる数値を受け取る 元の配列から選んだ2つの数のうち、合計が第2引数の値に最も近くなる組み合わせを配列として返す 実装コード 以下が実際のコード例です。二重ループですべてのペアを調べ、条件に合う最適なペアを記録していくシンプルな全探索アプローチを採用しています。 {   

  9. JavaScriptでハイフン区切りの文字列をキャメルケースに変換する方法

    ハイフン区切りの文字列をキャメルケースに変換する JavaScriptでは、ハイフン（-）で単語が区切られた文字列（ケバブケース）をキャメルケースに変換したい場面がよくあります。たとえば、CSSのプロパティ名を扱うときや、APIから受け取ったデータのキー名を整形するときなどです。 変換のイメージ 次のようなハイフン区切りの文字列があるとします。 const str = this-is-an-example; この文字列をキャメルケースに変換すると、期待される出力は次のようになります。 const output = thisIsAnExample; つまり、ハイフンを取り除き、2番目以降の各単

  10. 【JavaScript】配列内の重複する数値間の距離を求める方法

    課題の概要 少なくとも1組の重複する数値が含まれる数値の配列を引数として受け取り、配列内に存在するすべての重複ペア間の距離(インデックス番号の差)を求めて返すJavaScript関数を作成することを考えます。 ここでいう「距離」とは、同じ数値が出現するインデックス位置同士の差のことです。例えば、ある数値がインデックス0と3に出現していれば、その距離は3となります。同じ数値が3回以上登場する場合は、隣接する出現位置同士の差の中から最小値を採用します。 実装コード 以下が実際のコード例です。 const arr = [2, 3, 4, 2, 5, 4, 1, 3]; const findDista

  11. JavaScriptで数値を逆順の桁配列に変換する方法

    問題の概要負でない整数が与えられたとき、その各桁を独立した要素として含み、逆順に並べた配列を返す関数を作成する必要があります。例348597 => [7, 9, 5, 8, 4, 3]このように、元の数値の下の桁から順に並んだ配列が出力されれば正解です。実装コード（forループを使用）const num = 348597; const reverseArrify = num => {     const numArr = String(num).split();     const reversed =

  12. Day.jsを使って2つの時刻の差を求める方法【JavaScript】

    日付や時刻を扱う際、軽量で使いやすいJavaScriptライブラリ「Day.js」が便利です。この記事では、Day.jsを使って2つの時刻の差（時間数）を計算する方法を解説します。 時刻データの準備 まず、比較対象となる開始時刻と終了時刻をdayjs()で作成します。ここでは例として、開始時刻を10時、終了時刻を22時に設定します。 var startHour = dayjs().hour(10) var endHour = dayjs().hour(22) diff()メソッドで時刻の差を取得する 2つの時刻の差を求めるには、diff()メソッドを使用します。第1引数に比較対象のDay.js

  13. JavaScriptでオブジェクトのコレクションを集約・マージする最良の方法とは？

    はじめにJavaScriptで重複するデータを含むオブジェクトの配列を、1つにまとめて集約したい場面はよくあります。そのような場合に最も効果的なのが、Object.values()とreduce()を組み合わせる方法です。この記事では、学生IDごとに点数を合計してマージする具体例を通じて、実装方法をわかりやすく解説します。対象となるデータ今回は以下のようなオブジェクト配列を例にします。同じstudentIdを持つエントリが複数存在しているのがポイントです。var details = [ { studentId: 10, marks: 75, studentName: John },

  14. JavaScriptで文字列をオブジェクトのキーとして設定する方法

    JavaScriptで文字列をオブジェクトのキーとして設定する方法 JavaScriptでは、文字列の値を持つ変数を、そのままオブジェクトのプロパティ名（キー）として利用できます。これを実現するのが「算出プロパティ名（Computed Property Names）」と呼ばれる構文で、ブラケット [] の中に変数を指定するだけでOKです。 例えば、次のような文字列があるとします。 const keyName = username; この文字列をオブジェクトのキーとして設定するには、[] を使って文字列が格納された変数名を渡します。 const stringToObject = { [key

  15. 【JavaScript】ゼロを含む文字列を数値に変換する方法をわかりやすく解説

    JavaScriptでは、ドット（.）やゼロを含む文字列を数値として扱いたい場面があります。例えば、次のような文字列があったとします。var stringValue="453.000.00.00.0000";このようにゼロや区切り文字を含む文字列をそのまま数値変換しようとすると、意図した結果になりません。そこで、replace()メソッドで不要なドットを取り除き、parseInt()で整数に変換するという2段階の処理を行います。var numberValue = parseInt(stringValue.replace(/\./gm, ''));コード全体の

  16. JavaScriptで文字列内の単語をすべて置換する独自関数を作成する方法

    JavaScriptで単語の一括置換を実現するには？ JavaScriptには、文字列内に含まれる特定の単語をすべて一括で置換するための組み込み関数は標準では用意されていません。そのため、split()とjoin()を組み合わせた独自の関数を作成して対応します。まず、次のような文字列を例に考えてみましょう。 var sentence = Yes, My Name is John Smith. I live in US. Yes, My Favourite Subject is JavaScript; サンプルコード 「Yes」という単語を「Hi」に置き換える関数の実装例が以下のコードです。 v

  17. 【JavaScript】ハイフン区切りの文字列を負の数や数値の範囲に対応させて分割する方法

    課題：ハイフン区切りの文字列に負の数や数値の範囲が含まれる場合 ハイフン（-）で区切られた文字列を扱うとき、単純に split(-) を使うだけでは不十分なケースがあります。文字列の中に負の数（-120 など）や数値の範囲（90-100 など）が含まれている場合です。 次のようなデータを例に考えてみましょう。 var firstValue = John-Smith-90-100-US; var secondValue = David-Miller--120-AUS; firstValue には範囲を表す「90-100」が、secondValue には負の数「-120」が含まれています。これらを

  18. JavaScriptでHTMLボタンをクリックしたときにアラートを表示する方法

    ボタンをクリックしたときにアラートを表示するには、JavaScriptのaddEventListener()メソッドを使用します。例として、HTMLページ上に以下のようなボタンが配置されている場合を考えてみましょう。<button type=button>Please Press Me</button>サンプルコード以下は、ボタンがクリックされたときにアラートを表示する完全なコード例です。<!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8> &

  19. JavaScriptでトリプレット（3つ組の値）を比較する方法

    JavaScriptでトリプレット（3つ組の値）を比較するには、if文（条件分岐）を使用します。今回は、6つの値を前半3つと後半3つに分け、それぞれ対応する位置同士を比較する方法を解説します。ここでは、次のような値を渡すケースを想定します。35, 36, 37, 33, 48, 50サンプルコード以下がその実装例です。function tripletsSolution(first, second, third, fourth, fifth, sixth) { var storedResult = []; if (first > fourth || second > fift

  20. JavaScriptで配列から重複する要素を簡単に削除する方法

    JavaScriptでは、配列に含まれる重複した要素をわずか1行のコードで取り除くことができます。その鍵となるのが、Setオブジェクトとスプレッド構文（...）の組み合わせです。重複要素を含む配列の例まず、次のように重複した値を含む配列があると仮定しましょう。10, 20, 10, 50, 60, 10, 20, 40, 50重複を削除する方法：new Set() の活用Setは、同じ値を1つしか保持できないコレクションです。この特性を利用すると、配列をSetに変換した時点で自動的に重複が排除されます。さらに、スプレッド構文（...）を使うことで、そのSetを再び配列に戻すことができます。サン

Total 5937 -コンピューター  FirstPage PreviousPage NextPage LastPage CurrentPage:81/297  20-コンピューター/Page Goto:1 75 76 77 78 79 80 81 82 83 84 85 86 87