JavaScript

文字列を受け取り、その中のすべての単語の先頭文字を大文字に変換し、残りの文字はすべて小文字にする関数を作成することを考えてみましょう。これは「タイトルケース」と呼ばれる書式で、記事の見出しなどによく使われます。 処理のイメージ 例えば、入力文字列が以下だった場合： hello world coding is very interesting 期待される出力は次のとおりです。 Hello World Coding Is Very Interesting このような処理を実現するため、文字列を受け取って各単語の先頭文字を大文字にした新しい文字列を返す関数 capitaliseTitle() を定義

文字列として渡されたファイルパスからファイル名を取得する関数を作成する必要があります。通常、ファイル名はパスの一番最後に位置しています。正規表現を使って解決することも可能ですが、JavaScriptのsplit()メソッドを使えば、よりシンプルな一行の解決策を実現できます。本記事では、その方法を詳しく解説します。例として、次のようなファイルパスを考えてみましょう。/app/base/controllers/filename.js実装例以下のコードは、文字列パスからファイル名を取得するものです。const filePath = "/app/base/controllers/filena

配列を引数として受け取り、その配列の値に対応する形で、特定のDOM内にある最初のn個のdiv要素のid属性を変更する関数を作成する必要があるとします。ここでnは配列の長さです。 実装の考え方 まず、DOM内のすべてのdiv要素を取得し、引数として受け取った配列を反復処理しながら、各div要素に対応するidを順番に割り当てていきます。 コード例 const array = [navbar, sidebar, section1, section2, footer]; const changeDivId = (arr) => {     const

まず、次のようなコードとその出力結果を見てください。なぜJavaScriptは文字列中の空白（ ）を0に変換してしまうのでしょうか？const digify = (str) => {    const parsedStr = [...str].map(Number)    return parsedStr;}console.log(digify("778 858 7577"))出力結果[  7, 7, 8, 0, 8,  5, 8, 0, 7, 5,  7,

JavaScriptで文字列内のスペースの数を数える方法は複数あります。例えば、split()メソッドを使う方法、forループで一文字ずつ確認する方法、mapやfilterを組み合わせる方法、そして正規表現を使う方法などが挙げられます。 その中でも、正規表現を利用する方法は、特に大量のテキストを扱う場合において、他の方法と比べてはるかに効率的で高いパフォーマンスを発揮します。そこで、この記事では正規表現を使ってこの問題を解決します。 以下がそのコードです。 サンプルコード console.log((abc def rr tt.match(/ /g) || []).length); conso

JavaScriptを使ってlocalStorageのデータをすべて削除するには、主に2つの方法があります。方法1：clear()メソッドを使うもっともシンプルなのは、localStorageが提供しているclear()メソッドを呼び出す方法です。これだけで保存されているすべてのキーと値が一括削除されます。localStorage.clear();方法2：ループ処理ですべてのキーを削除するfor...in文でlocalStorage内の各キーを順番に取り出し、個別にdelete演算子で削除する方法もあります。for (key in localStorage) { delete localS

はじめにJavaScriptでは、配列に格納された複数のオブジェクトを1つにまとめたり、不要なプロパティを取り除いたりする場面がよくあります。本記事では、Object.assign()を使ったオブジェクトの結合と、delete演算子によるプロパティの削除方法を、具体的なコード例とともに解説します。今回扱うデータまず、次のような2つのオブジェクトを含む配列を用意します。この2つのオブジェクトを1つに結合し、さらにchkプロパティを完全に取り除くことがゴールです。const err = [ { chk : true, name: test },

バニラJavaScript(ライブラリやフレームワークに依存しない素のJavaScript)を使って、配列の要素をdiv要素の中に表示するのはとても簡単です。基本的な考え方は、配列を反復処理しながら、各要素を順番にdivへ追加していくというシンプルなものです。 具体的には、次のように実装できます。 基本的なコード例 const myArray = [stone, paper, scissors]; const embedElements = () => { myArray.forEach(element => { document.getElementByI

JavaScriptでは、オブジェクトと検索文字列を受け取り、その検索文字列で始まるキーだけを抽出した新しいオブジェクトを返す関数を作成できます。本記事では、具体的な実装方法をコード例とともに解説します。 実装例 以下は、科目コードをキーとするオブジェクトから、指定した文字列で始まるキーのみを抽出するサンプルコードです。 { if(key.substr(0, str.length).toLowerCase() === str.toLowerCase()){ filteredObj[key] = obj[key]; } }); return filte

ここでは、引数として数値の配列を1つ受け取り、その中から偶数のみを含む新しい配列を返す関数を作成します。関数名は returnEvenArray とし、以下のように実装できます。サンプルコード { return el % 2 === 0; }) }; console.log(returnEvenArray(arr));コードの解説この関数では、Array.prototype.filter() メソッドを使用しています。filter() は、コールバック関数が true を返した要素だけで構成される新しい配列を作成するメソッドです。ここでは el % 2 === 0 とい

この記事では、数値を受け取ってその桁を逆順に並べ替えた数値を返すJavaScript関数の作成方法を解説します。 例えば、678 を反転すると以下のようになります。 876 実装コード JavaScriptで数値を反転させるコードは次のとおりです。文字列変換・配列操作・数値への再変換というシンプルな流れで実現できます。 const num = 124323; const reverse = (num) => parseInt(String(num) .split() .reverse() .join(), 10); console.log(reverse(num)); 出力結果 コンソー

JavaScriptでは、複数の文字列を格納した配列から、ユーザーが入力したキーワードに一致する要素を効率的に抽出できます。本記事では、入力された文字列をもとに配列を検索する2つのアプローチを、実際のコード例とともに解説します。前提となる課題ここでは、文字列の配列（例：配送データ）と検索用の入力文字列が与えられます。目標は、ユーザーが入力したすべてのキーワードを含む配列要素だけを絞り込むことです。解決策1：split()で入力を分割し、every()で全キーワード一致を確認まず、入力文字列を split( ) で個々のキーワードに分解し、filter() と every() を組み合わせて、す

はじめにJavaScriptでは、sort()メソッドのコールバック関数を工夫することで、複数の基準に基づいた配列の並べ替えが簡単に実現できます。本記事では、「isImportant（重要フラグ）」と「date（日付）」という2つのプロパティを組み合わせて配列をソートする方法を、具体的なコード例とともに解説します。ソートの要件今回目指す並び順は以下のとおりです。isImportant が true のオブジェクトは、false のオブジェクトよりも常に上位に配置されるtrue のグループと false のグループそれぞれの中では、date プロパティ（タイムスタンプ）に従って降順に並べ替えられ

本記事では、複数ページからなるWebサイトの各ページを表すオブジェクトの配列を例に、「next」プロパティと「previous」プロパティを手がかりにして、ランダムな順序で配置された要素を正しい順序へ並べ替える方法を解説します。 各オブジェクトは、別のオブジェクトのidを参照する「next」プロパティ(最終ページを表すオブジェクトには存在しません)と、直前のオブジェクトのidを参照する「previous」プロパティ(先頭ページを表すオブジェクトには存在しません)を持っています。 以下が今回扱うサンプルのオブジェクト配列です。現時点ではすべてのオブジェクトがランダムな順序で配置されています。

initValidation()関数を必ずしも呼び出すことなく、その外側からvalidate()関数を呼び出したい——これはJavaScript開発でよくある課題です。本記事では、この問題の原因と解決方法をわかりやすく解説します。問題となるコードまず、問題となっているコードを見てみましょう。function initValidation(){ // ここは無関係なコード function validate(_block){ // ここに処理を記述 } }なぜ外から呼び出せないのか上記のコードでは、validate()関数はinitValidation()

プロジェクトのディレクトリに employee.json ファイルが配置されており、同じディレクトリ内にある JavaScript ファイルからその内容を読み込みたい――そんな場面は開発現場でよくあります。本記事では、ローカルの JSON ファイルを JavaScript の変数に読み込むための代表的な2つの方法を、具体的なコード例とともにわかりやすく解説します。 サンプルデータ：employees.json の中身 今回使用する employees.json は、従業員情報を配列として格納したファイルです。内容は以下の通りです。 { "Employees": [

例えば、インドのクリケット選手たちの評価(レーティング)を格納した、次のような「オブジェクトの中にオブジェクトが入った」データがあるとします。これを、各要素が name(選手名)と rating(評価オブジェクト)という2つのプロパティを持つオブジェクトの配列に変換する必要があります。サンプルオブジェクトconst playerRating = { V Kohli:{ batting: 99, fielding: 99 }, R Sharma:{ batting: 98, fielding: 95

はじめにHTMLフォームをユーザーが送信した際、通常ブラウザは自動的にページを再読み込みします。しかし、クライアント側でsubmitイベントを処理したい場合、このデフォルトの動作は邪魔になります。本記事では、JavaScriptを使ってフォーム送信時のページリロードを防ぐ方法を解説します。対象となるHTMLフォームまず、以下のようなシンプルなメールアドレス入力フォームを例に考えます。<form name="formcontact1" action="#"> <input type=text name=email

本記事では、「文字列または数値の配列」と「1つの文字列」を引数に受け取り、配列内のすべての要素の前後にその文字列を付けて連結した結果を返す関数の作り方を解説します。 やりたいこと たとえば、次のような呼び出しを行った場合を考えてみましょう。 applyText([1, 2, 3, 4], a); この場合、期待される戻り値は a1a2a3a4a です。つまり、各要素の前に文字列 a を付け、最後にもう一度 a を末尾に追加した形になります。 map()メソッドを使った実装 このような処理には、従来のforループよりも配列のmap()メソッドを使う方が簡潔で読みやすいコードになります。各要素を変

本記事では、JavaScriptを使って文字列内の小数部分が1桁しかない場合に、末尾へ0を追加する方法を解説します。具体的にはsplit()とreplace()という2つの文字列メソッドを組み合わせて実装していきます。要件の整理まず、今回扱うサンプル文字列は以下のとおりです。const a = 250,5;この文字列に対して、次のようなルールで処理を行います。カンマ（,）の後に続く数字が1桁の場合は、末尾に0を追加して2桁に揃える。文字列にカンマが2つ以上含まれている場合は、-1を返して不正な入力であることを示す。実装例これらの処理は、split()でカンマ区切りの要素数や小数部分を取得し、r