異端開発室

1. DOM イベントシステムとフロー 標準的なドキュメントオブジェクトモデル（DOM）イベント処理は、主に以下の流れで発生します。 キャプチャフェーズ：ルートノードからターゲット要素へ向かって下向きに伝播します。 ターゲットフェーズ：特定のイベント対象ノードに到達します。 バブリングフェーズ：ターゲット要素からルートノードへ向かって上向きに伝播します。 / ...

課題の概要 Vue2プロジェクトにおいて、el-selectコンポーネントを使用中に`disabled`プロパティを動的に`true`に変更すると、要素の高さが変化する現象が発生しました。 根本原因の分析 ブラウザの開発者ツールを使用して調査した結果、コンポーネント内部の`input`要素に対して`height`スタイルが動的に適用されていることが判明しました。 プロジェクト内のコードを確 ...

1. 環境構築と基本セットアップ 1.1 Vueプロジェクトの初期化 CLIまたはGUIツールによりVue 2.xプロジェクトを生成し、IDEでプロジェクトを開く。 1.2 Element UIの導入 以下のコマンドでライブラリをインストール： npm install element-ui --save 1.3 メインスクリプトでのグローバル登録 main.js に以下を追加： import Vue from 'vue' import ElementUI from 'element ...

オブジェクトの深い複製手法 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 ...

Vue CLI 3 の構成ファイル概要 Vue CLI バージョン 3.0 以降では、プロジェクトのセットアップ方法が大きく変更されました。以前必要だった build および config ディレクトリは廃止され、設定管理がよりシンプルになりました。CLI サービス内部へ設定が移行したため、基本的な調整や拡張機能が必要になる場合、プロジェクトのルートディレクトリに vue.config.js ファイル ...

Vue.jsのライフサイクル Vueインスタンスのライフサイクルは、生成から破棄までの全過程を指します。このプロセスは4つの主要フェーズに分類され、各段階で特定の処理が実行されます。 ライフサイクルの4フェーズ 生成フェーズ: リアクティブデータの初期化とインスタンス設定 マウントフェーズ: テンプレートのコンパイルとDOMへの描画 更新フェーズ: データ変更 ...

事前準備 依存関係をインストールします npm install html2canvas --save 対象コンポーネントにライブラリをインポートします import html2canvas from 'html2canvas' 画像生成対象の要素にrefを指定します <div ref="thumbnailArea">...</div> 方法1: Blob形式でバックエンドへ送信 methods: { generateThumbnail() { html2canvas(this.$ref ...

システム概要と技術選定 本プロジェクトは、水族館の施設予約管理を目的とした Web アプリケーションです。バックエンドにはスプリントフレームワークを採用し、フロントエンドではモダンな JavaScript ライブラリを使用することで、効率的な開発と柔軟なユーザーインターフェースを実現しています。 主要な技術スタック バックエンド：Spring Boot Spring Boot は、Sprin ...