-
JavaScriptで文字列内の隣接する単語を入れ替える方法
本記事では、文字列を受け取り、その文字列内の隣接する単語同士を入れ替えるJavaScript関数の作成方法を解説します。処理の概要例えば、次のような入力文字列が与えられたとします。const str = This is a sample string only;この場合、期待される出力は以下のようになります。is This sample a only stringご覧のとおり、隣り合う単語が2つずつペアになって入れ替えられています。それでは、この関数のコードを見ていきましょう。実装コード以下がそのコードです。 { if(ind % 2 === 1){
-
JavaScriptで3次元配列から最大値を取得する方法
JavaScriptでは、flat()メソッドとMath.max()を組み合わせることで、多次元(3D)配列の中から最大の数値を簡単に見つけることができます。 対象となる3次元配列 例として、以下のような入れ子構造を持つ3次元配列を考えます。 var theValuesIn3DArray = [75, [18, 89], [56, [97], [99]]]; この配列には、数値だけでなく配列が何重にもネストされています。そこで、flat(Infinity)を使って配列を完全にフラット化(一次元化)してから、Math.max()で最大値を求めます。 実装例 Array.prototypeに独自の
-
JavaScriptの配列でundefinedやnullを判定し、null以外の値のみを表示する方法
JavaScriptでは、配列の中にnullやundefinedが混在しているケースはよくあります。このような場合、条件分岐を使ってnull以外の値だけを取り出して表示することができます。nullやundefinedを含む配列の例以下のように、通常の文字列とnull、undefinedが混ざった配列を想定します。var firstName=[John,null,Mike,David,Bob,undefined];null・undefinedを除外して表示するコード!=(不等価演算子)を使って各要素をチェックすると、undefinedだけでなくnullもまとめて除外できます。これは、null =
-
JavaScriptで指定した時刻になったら関数を自動実行する方法
JavaScriptで「特定の日時に達したら関数を実行したい」というケースでは、目標時刻までの時間差(ミリ秒)を計算し、それを setTimeout() に渡すのが基本のアプローチです。ここでは、その実装手順をサンプルコードとともにわかりやすく解説します。 実装の流れ トリガーしたい日時を Date オブジェクトで作成し、getTime() でミリ秒値に変換します。 現在時刻も同様に getTime() でミリ秒として取得します。 「目標時刻 − 現在時刻」の差分を計算します。これが「あと何ミリ秒で目標時刻になるか」を表します。 差分を setTimeout() の第2引数に渡し、第1引数に
-
JavaScriptでinnerHTMLを設定する方法をわかりやすく解説
JavaScriptでHTML要素の内容を動的に書き換えたい場合に便利なのが、innerHTMLプロパティです。innerHTMLを使えば、指定した要素の中にHTML文字列をそのまま挿入・置き換えることができます。本記事では、innerHTMLを設定する正しい構文と、実際に動作するサンプルコードを初心者向けに解説します。 innerHTMLを設定する正しい構文 innerHTMLを設定する際の正しい構文は以下のとおりです。 document.getElementById(yourIdName).innerHTML=yourValue; この構文では、まずgetElementById()メソッド
-
JavaScriptで配列内の空文字列(空の文字)をチェックする方法
JavaScript配列に空文字列が含まれているか確認する方法JavaScriptでは、配列の中に空の文字列(空文字)が含まれているかどうかを、forループと条件分岐を組み合わせて簡単に確認できます。ここでは、空文字列と通常の値が混在した次のような配列を例に考えてみましょう。studentDetails[2] = Smith; studentDetails[3] = ; studentDetails[4] = UK;空文字列をチェックするための基本構文配列内の空文字列を調べる場合の構文は以下の通りです。現在参照しているインデックスの要素が空文字列と一致するかどうかを条件として判定します。if(
-
JavaScriptで配列をn要素分回転させる方法
JavaScriptでは、配列と数値 n を引数に受け取り、その配列を n 要素分回転させる関数を作成することができます。本記事では、その実装方法を具体的なコード例とともに解説します。処理の概要例として、次の入力配列を考えてみましょう。const arr = [12, 6, 43, 5, 7, 2, 5];この配列を n = 3 だけ回転させると、先頭の3つの要素が末尾へ移動し、出力は以下のようになります。const output = [5, 7, 2, 5, 12, 6, 43];コード例以下は、配列のプロトタイプに rotateBy メソッドを追加して実装した例です。// 回転処理 con
-
【JavaScript】偶数・奇数番目の桁の合計が指定した数で割り切れるN桁の数の個数を求める方法
本記事では、3つの引数 A、B、N を受け取るJavaScript関数を作成します。この関数は、偶数番目の桁の合計が A で割り切れ、かつ奇数番目の桁の合計が B で割り切れるN桁の整数が全部でいくつ存在するのかを求めます。 問題の考え方 ここでの「位置」とは、右端の桁をインデックス0として数えたものです。たとえば2桁の数「35」の場合、一の位の「5」がインデックス0(偶数)、十の位の「3」がインデックス1(奇数)に相当します。 条件を満たす数を見つけるには、対象となる範囲内のすべての数に対して次の手順を実行します。 各桁を偶数インデックス用と奇数インデックス用に分けて合計する 偶数インデ
-
【JavaScript】forループとcontinue文を使って文中の特定文字の出現回数を数える方法
本記事では、JavaScriptのforループとcontinue文を活用して、文中に特定の文字が何回出現しているかを数える関数の作成方法を解説します。 実装例 まず、対象となる文字列と、文字の出現回数をカウントする関数のコードを見てみましょう。 const string = This is just an example string for the program; const countAppearances = (str, char) => { let count = 0; for(let i = 0; i < str.length; i++){
-
JavaScriptで2つの数が互いに素(ソ)であるかを判定する方法
2つの数が「互いに素(コプライム)」であるとは、それらの間に共通の素因数が存在しないことを意味します。なお、1は素数ではないため、共通因数としてカウントされません。互いに素とは具体的な例を見てみましょう。4 と 5 → 互いに素 9 と 14 → 互いに素 18 と 35 → 互いに素 21 と 57 → 互いに素ではない(共通の素因数 3 を持つため)実装の方針ここでは、2つの数を受け取り、それらが互いに素であれば true を、そうでなければ false を返す関数を作成します。判定のアプローチはシンプルです。2つの数のうち大きい方までの各整数(2から順に)について、両方の数がその値で割り
-
JavaScriptで平均値を計算する際に一部の値を除外する方法
たとえば、次のようなオブジェクトの配列があったとします。data = [ {Age:26,Level:8}, {Age:37,Level:9}, {Age:32,Level:5}, {Age:31,Level:11}, {Age:null,Level:15}, {Age:null,Level:17}, {Age:null,Level:45} ];このデータには Age(年齢)が null のオブジェクトが含まれています。ここで必要になるのは、Age プロパティが有効な値(truthy な値)を持つオブジェクトだけを対象として、Level
-
JavaScriptの親クラスと子クラスに同じ名前のメソッドを定義できる?メソッドオーバーライドの基本を解説
はい、JavaScriptでは親クラスと子クラスに同じ名前のメソッドを定義できます。子クラスで親クラスと同名のメソッドを定義すると、子クラス側のメソッドが優先的に呼び出されます。この仕組みは「メソッドオーバーライド」と呼ばれ、オブジェクト指向プログラミングにおける重要な概念のひとつです。コード例以下の例では、親クラス「Parent」と子クラス「Child」の両方に、同じ名前のメソッド「showValues()」を定義しています。class Parent { constructor(parentValue) { this.parentValue = parentValue
-
【jQuery】ボタン1回のクリックでチェックボックスを全選択・全解除する方法
Webフォームでは、複数のチェックボックスを一括で選択・解除したいケースがよくあります。本記事では、jQueryのidセレクタを使い、ボタンをクリックするだけで全チェックボックスの選択状態を切り替える方法を解説します。 実装のポイント ポイントは、jQuery(セレクタ)に対象要素のidを指定することです。ボタンがクリックされるたびにtoggleClass()でCSSクラスを付け外しし、その状態に応じてprop()でチェックボックスのON/OFFを切り替えます。 サンプルコード <!DOCTYPE html> <html lang="ja">
-
JavaScriptで配列の0番目のインデックスを比較して重複値を削除する方法
JavaScriptでは、配列内に重複した値が含まれることがあります。例えば、以下のような「科目名と点数」をペアにした2次元配列を考えてみましょう。var subjectNameAlongWithMarks = [ [JavaScript, 78], [Java, 56], [JavaScript, 58], [MySQL, 77], [MongoDB, 75], [Java, 98] ]上記の配列を見ると、「JavaScript」と「Java」がそれぞれ2回登場しており、重複が発生しています。このように、各サブ配列の0番目(先頭)のインデックス
-
JavaScriptでテーブルにNULL値が挿入されるのを防ぐ方法
テーブルにNULL値が挿入されるのを防ぐには、値を入力する際に条件チェックを行う必要があります。NULLをチェックする条件は以下のように記述します。while( !( yourVariableName1==null || yourVariableName2==null || yourVariableName3==null……N){ // yourStatement1 . . N }このロジックを使用することで、NULL値が挿入されることを確実に防ぐことができます。次に、forループを使ってNULL値なしでテーブルに値を挿入します。以下がそのコードです。サンプルコ
-
JavaScriptでBuffer(バッファ)を読み取り可能な文字列に変換する方法
Node.jsでBufferオブジェクトを人間が読める文字列に戻したい場合は、toString(utf8)メソッドを使います。このメソッドは、バッファ内のバイナリデータを指定した文字エンコーディングの文字列へ変換してくれます。以下のコードでは、バッファの作成から文字列への復元、さらに各文字のASCIIコード確認まで、詳しく解説しています。サンプルコードvar actualBufferObject = Buffer.from([John Smith], utf8) console.log(The actual buffer object=); console.log(JSON.stringify
-
JavaScriptでreturnを使って外部に関数を返し、後から呼び出す方法
JavaScriptでは、returnキーワードを使うことで、関数そのものを戻り値として返すことができます。外側の関数が内側の関数を返すことで、後からその関数を呼び出して結果を取得できます。以下に具体的なコード例を示します。 コード例 var subtractMethod = function () { var firstValue = 1000, thirdValue = 200; var divideMethod = function (){ &
-
JavaScriptで文字列内のすべての大文字を先頭に移動する方法
はじめに文字列の中から大文字だけを取り出して先頭に集めたい場面は、テキスト処理やデータ整形でよくあります。JavaScriptでは、スプレッド構文と sort() メソッド、そして正規表現 /[A-Z]/ を組み合わせることで、シンプルにこの処理を実現できます。たとえば、次のような文字列を例に考えてみましょう。my name is JOHN SMITHsort()と正規表現を使った実装方法すべての大文字を文字列の先頭に移動するには、正規表現 /[A-Z]/ と sort() を組み合わせて使用します。コード例var moveAllCapitalLettersAtTheBeginning = [
-
JavaScriptでクラスのオブジェクトの値が変更されたかを確認し、それに基づいて別の値を更新するには?
はじめにJavaScriptでは、クラスから生成したオブジェクト(インスタンス)のプロパティ値が変更されたかどうかを確認したい場面があります。そのような場合に役立つのが、ゲッター(getプロパティ)の仕組みです。ゲッターを利用すると、プロパティへアクセスするタイミングで任意の処理を挟めるため、値の変更を意識した設計が可能になります。実装例以下のコードでは、Studentクラスを定義し、コンストラクタ内でgetValuesというゲッター付きのオブジェクトを作成しています。class Student{ constructor(studentMarks1, studentMarks2){
-
JavaScriptのisNaN()で不正な数値(NaN)をチェックする方法
JavaScriptでは、計算結果が有効な数値かどうかを確認したい場面がよくあります。そんなときに役立つのがグローバル関数のisNaN()です。この関数は、引数がNaN(Not-a-Number:非数)であればtrueを、有効な数値であればfalseを返します。isNaN()を使った実装例以下は、2つの値を掛け合わせた結果が有効な数値かどうかをisNaN()で判定し、コールバック関数を通じて結果とエラー情報を呼び出し元に返すサンプルコードです。Examplefunction multiplication(firstValue, secondValue, callback) { &