JavaScript
JavaScriptで配列の重複を除去する：Set・filter・reduceの使い方 const unique = [...new Set(array)]; 最もシンプルな方法です。Set は重複を持たないため、一度変換してスプレッド構文で配列に戻すだけで重複が除去できます。 はじめに JavaScriptで配列…
new URL() はブラウザ・Node.js・Deno で使える組み込みのURL解析クラスです。URLを文字列で扱うより安全で、パス・クエリ・ホスト名など各部分を簡単に取り出せます。 URLを分解する const url = new URL('https://example.com/users/123?page=2&sort=desc#…
GoogleカレンダーはAPIを使わなくても、URLパラメータを組み合わせるだけで「予定を登録するリンク」を作れます。イベントページや社内ドキュメントに埋め込むと、ワンクリックでGoogleカレンダーの予定登録画面を開かせることができます。 基本的なURL構造 …
JavaScriptで日付が1日ずれる原因：タイムゾーン問題の対処法まとめ JavaScript で日付を扱うとき「保存したはずの日付が1日前になっている」「API に送ったら前日の日付が届いた」という問題がよく起きます。原因はほぼ必ず UTC とローカル時刻の解釈の違い…
JavaScript 配列のソート：Array.sort()で数値・文字列・複数条件を並べ替える はじめに JavaScriptの Array.prototype.sort() を使って、数値・文字列を昇順・降順でソートする方法と、複数条件での多段ソートをまとめます。 注意：sort() は破壊的メソッド…
XMLには特別な意味を持つ文字があります。これらをそのまま書くとXMLパーサーが誤解してエラーになるため、エスケープ（別の表現に置き換え）が必要です。 APIのリクエストボディにコードスニペットやHTMLを含める場合、XMLエスケープを忘れると400エラーに…
JavaScriptのreplaceとreplaceAll：文字列置換の使い方まとめ JavaScript で文字列を置換するには replace() と replaceAll() を使います。2つの違いは「最初の1件だけ置換するか、すべて置換するか」です。 replace()：最初の1件だけ置換 const str = 'hell…
oxlint 入門：ESLint より50倍速いJSリンターをnpxで試す 設定なしでもすぐ動かせます。 npx oxlint@latest src/ これだけでプロジェクトの JavaScript / TypeScript ファイルを静的解析できます。インストール不要で試せるので、既存プロジェクトへの導入ハ…
TypeScriptのドラッグ&ドロップ：HTML5 Drag and Drop API入門 ライブラリなしにドラッグ&ドロップを実装する最小コードです。 基本実装：要素を別の場所に移動する <div id="source" draggable="true">ドラッグしてね</div> <div id="target">ここにドロップ</div> const source = document.getElementById('source')! cons…
ブラウザイベント入門：キーボード・マウス・フォーカスの発火順序 イベントの伝播：3つのフェーズ ブラウザのイベントは次の3フェーズで伝播します。 ① キャプチャリング：document → 親 → 対象要素（上から下） ② ターゲット：対象要素でイベント処理 ③ バ…
ブラウザのカスタムイベント：CustomEventとdispatchEventの使い方 CustomEventとは ブラウザには click や keydown などの組み込みイベントに加え、独自のイベントを定義して発火できる仕組みがあります。CustomEvent + dispatchEvent を使うことで、DOM要…
JavaScript 配列の変換・集計：map・reduce・flatMap の使い方 配列を別の形に変換したり、合計・グループ化したりするには map・reduce・flatMap を使います。 早わかりまとめ メソッド 戻り値 向いている用途 map 新しい配列 各要素を変換した配列を作る r…
JavaScript オブジェクトをループする：keys・values・entries オブジェクトのキーや値を繰り返し処理するには Object.keys()・Object.values()・Object.entries() を使います。 早わかりまとめ メソッド 返す内容 向いている用途 Object.keys() キーの配列 …
TypeScriptで通知バッジを実装する：ベルアイコンに数字を表示する SNSやチャットアプリでよく見る、ベルアイコン右上に数字を表示する通知バッジの実装です。ライブラリなしの HTML + CSS + TypeScript で作れます。 HTML構造 position: relative の親要素…
TypeScriptドラッグ&ドロップ発展：ゴースト要素でカンバンボードを実装する HTML5 Drag and Drop API入門の発展編です。マウスイベント（mousedown・mousemove・mouseup）を使ってゴースト要素をカーソルに追従させる実装を紹介します。 HTML5 Drag APIとの…
JavaScript 大文字・小文字変換：toUpperCase と toLowerCase JavaScript で文字列を大文字・小文字に変換するには toUpperCase() と toLowerCase() を使います。どちらも引数なしで呼び出すだけで動作します。 toUpperCase()：すべて大文字に変換 const str…
JavaScriptファクトリパターン入門：クラス版と関数版を比較する GoFのFactoryパターンは「どのクラスをインスタンス化するかを呼び出し側に知らせない」設計です。 JavaScriptに持ち込むと、クラスを使わないファクトリ関数という形に自然と落ち着きます。 …
JavaScriptシングルトンパターン入門：クラス版とES Modules版を比較する GoFのデザインパターンはオブジェクト指向言語（Java/C++）を前提に設計されています。 JavaScriptに持ち込むとき、「クラスで書くべきか」「もっとJSらしい書き方があるか」は悩みど…
JavaScript 配列の実践：filter・map・reduce のチェーン活用例 filter・map・reduce は単体でも使いますが、メソッドチェーンで組み合わせると複雑な処理を簡潔に書けます。実際のコードでよく登場するパターンをまとめます。 カートの合計金額を計算する …
JavaScript Promise の並列処理：all・allSettled・race の使い方 複数の非同期処理を並列で実行するには Promise.all・Promise.allSettled・Promise.race・Promise.any を使います。 早わかりまとめ メソッド 解決タイミング 失敗時の挙動 Promise.all 全件…
JavaScript 配列の絞り込み：filter・find・some の使い方 配列から「条件に合う要素だけ取り出す」には filter・find・findIndex・some・every を使います。何を確認したいかによって使い分けます。 早わかりまとめ メソッド 戻り値 向いている用途 filter …
JavaScript 配列の繰り返し：forEach・map・for...of の使い分け 配列の各要素に対して処理するには forEach・map・for...of がよく使われます。何をしたいかによって使い分けます。 早わかりまとめ メソッド 戻り値 向いている用途 forEach なし（undefined…
今回はReactアプリを作成する際にReferenceError: fetch is not definedエラーが出た際の解消方法をエントリーします。 ケースとしてはcreate react appではなくwebpackやviteでアプリを作成しアプリ内でfetchを使いAPIなどを利用したケースをJest + Testing…
今回はNode.js Express QueryString（クエリストリング）の取得方法についてエントリーします。 req.query.xxx（xxxはリクエスト時に指定したパラメータ名）で取得できます。 コード例 http://localhost:xxxx/sample?num=10とした場合res.json(req.query.num…
Node.js Expressでパスパラメータの取得方法 http://localhost:5000/sample/123でパスパラメータの123を取得したい場合"/sample/:id"でエンドポイントを定義しreq.params.idで取得できる。また123は文字列なのでabc,1b3なども取得できる。ただし/sample/123/…
今回はTypeScript + Express + ESLintの導入をしたので備忘録としてエントリーしたいと思います。 インストール 開発環境のみで利用するためnpmの場合は--save-dev、yarnの場合は-Dのオプションをつけます npmの場合 npm install --save-dev eslint yarnの場…
今回はJavaScriptのスプレッド構文（Spread Syntax）と残余引数（Respt Parameters）について解説します。 スプレッド構文（Spread Syntax） 配列、オブジェクトなどを展開できます。 const arr = [1,2,3,4,5] const newArr = [...arr,6] (6) [1, 2, 3, 4, 5…
今回はArray..prototype.reduce()の利用例についてエントリーしたいと思います。 足し算 1から5を足す計算例（initialValueとして0をaccに渡す） const arr = [1,2,3,4,5] const initialValue = 0 const result = arr.reduce((acc,cur) => acc += cur,initia…
今回はJavaScriptで文字列の中で特定の文字数を数えるプログラムを書いていきます。 サンプルデータ 今回はこのサンプルデータからaの文字数を数える "azbdobkdlaac" 前準備 Array.fromを使い文字列を配列にする(以降arrを利用する) const arr = Array.from(…
今回はArray(配列)に格納されているオブジェクトを特定のプロパティで抽出をArray.prototype.filter()を用いて行います サンプルデータ type ArrayObj = { id: number name: string category: 'a' | 'b' } const arrayObj = [ { id: 1, name: 'taro', catego…
