異端開発室

JSON（JavaScript Object Notation）は、軽量なテキストベースのデータ交換形式であり、JavaScript のnative構文を元に設計されています。ES5より、JSONオブジェクトが導入され、データのシリアライズ・デシリアライズを扱うための標準APIが提供されました。 JSONオブジェクトは、フロットのメソッドを2つだけ持つ特殊なオブジェクトであり、コンストラクタとして使用でき ...

Vue リアクティブデータ処理と初期化タイミング クライアントサイドアプリケーションを実装する際、コンポーネントのマウント直後にデータを取得し、その結果に基づいて状態を管理する必要があります。この場合、ref で定義された変数の値が即座に同期されていないため、外部からの参照や次の画面への引数受け渡しにおいて予期しない初期値が保持される現象が発生します。 ...

オブジェクトの深い複製手法 JSON変換による方法 const original = { data: [1, 2, { value: 3 }] }; const duplicated = JSON.parse(JSON.stringify(original)); 再帰関数を用いた実装 function createDeepCopy(source) { if (!source || typeof source !== 'object') return source; const result = Array.isArray(source) ? [] : {}; for (const prop in s ...

パターンは、入力データを変換するためのルールです。データを1つ以上の論理構造と比較し、構成要素に分解したり、様々な方法で情報を抽出するために使用されます。 セットアップ JavaScriptには、パターンマッチングによる分解機能は組み込まれていますが、フィルタリング機能はありません。パターンを使用してプログラムの流れを制御することで、より宣言的でモジュー ...

関数型パラダイムとは 関数型プログラミング（FP）は「値の変換」を中心に据えた設計思想である。OOPが「物」をモデル化するのに対し、FPは「関係＝写像」をコード化する。React/Vue3 が再注目させた背景には、副作用を排除しテスタビリティとtree-shaking効率を高める点にある。 // 命令型 let price = 1000, tax = 1.1; let total = price * tax; // 関数型 const with ...

jsPDFの最新バージョンへ移行するための実践ガイド JavaScriptでPDFを生成する際によく利用されるライブラリ「jsPDF」は、近年大きな変更が加えられました。特にv2.x以降ではAPI設計が刷新され、モジュール構成やフォント管理方法が大きく進化しています。既存プロジェクトで古いバージョンを使っている場合、コンソールに警告が出たり、一部機能が動作しなくなることがあ ...

Vue3アプリケーションでAxiosインターセプターを活用し、再利用可能なrequestモジュールを作成する方法を説明します。 まず、新しいファイルを「httpService.js」として作成し、Axiosをインポートします。 import axios from 'axios'; 次に、カスタム設定を持つAxiosインスタンスを作成し、それを変数clientとして保存します。ここで、タイムアウトやベースURLなどの基本 ...

IndexedDBの概要 IndexedDBは、ブラウザが提供するローカルストレージの仕組みであり、大量の構造化されたデータを効率的に保存および検索するために設計されています。この技術は、非同期処理をサポートしており、オブジェクトや配列、バイナリデータまで保存可能で、インデックスを用いて高速なクエリ処理が行えます。 IndexedDBの主な特徴 大容量デ ...

バンドルサイズ最適化の必要性 Web アプリケーションの開発において、UI ライブラリの導入は開発効率を向上させますが、同時にバンドルサイズの増大を招くリスクがあります。特に mdb-ui-kit のような包括的なコンポーネントライブラリを使用する場合、必要な機能のみを利用しているにもかかわらず、ライブラリ全体がバンドルに含まれてしまうケースが見受けられます。本稿 ...

Node.js のコアはイベントループによって動いているため、業務ロジックを持つ独自クラスでも「何かが起きたら通知したい」という要求が頻繁に出る。events モジュールに含まれる EventEmitter を継承すれば、簡単にその要求を満たせる。 EventEmitter の主な API メソッド用途 addListener(name, fn)イベント名に対してコールバックを登録 on(name, fn)addListener のエ ...