局部状態を活用したブログコードの最適化
ブログ機能と軽量状態管理の統合
前回までの記事では、Vite2 + Vue3でブログサイトを構築する方法と、軽量状態管理の基本的な使い方について解説しました。今回は、それらを組み合わせてブログのリスト機能を効率化する方法を紹介します。
共通するリスト機能の抽象化
ブログには、記事一覧、編集画面の記事リスト、コメントリストといった複数のリストが存在します。これ ...
10月21日 11:19 投稿
Vue3で作る高性能AIチャットアプリ：アーキテクチャ設計から実装まで
企業向けシステムにAIチャット機能を統合する際、既存のソリューションではカスタマイズ性やパフォーマンス面での課題に直面することが多い。特に社内知識ベースや業務支援ツールにおいては、柔軟なUI制御と複数AIモデルの切り替えが不可欠だ。この記事では、Vue3（+TypeScript）を基盤とした高品質なチャットアプリの構築手法について、実践的な視点から解説する。
...
10月15日 01:08 投稿
Vue 3プロジェクトの基本構成とルーティング入門
Vueプロジェクトの主要ディレクトリとファイル
Vue 3プロジェクトは、Viteなどのビルドツールによって生成された標準的なディレクトリ構造を持っています。各ファイルやディレクトリには特定の役割があり、これらを理解することはプロジェクト管理と開発の効率化に不可欠です。
node_modules/: プロジェクトが依存する外部ライブラリやパッケージが格納されるディレク ...
10月13日 18:18 投稿
Vue 3／TypeScript／Vite連携による企業級管理画面フレームワークの技術構造分析
アーキテクチャ設計の概要
本プロジェクトは、単一リポジトリ内で複数のアプリケーションを管理するmonorepoパターンを採用しています。コア機能はパッケージ単位で分離され、依存関係の整合性と再利用性を高める工夫がなされています。主なディレクトリ構成は以下の通りです。
apps/：各UIキットに対応した実装版アプリケーション
packages/：共有コンポーネント、ユーテ ...
10月12日 10:17 投稿
Vue 3におけるElement Plus el-selectの実践的制御と拡張技法
基本構成と状態に応じた制御
フォーム設計において、ユーザーの操作権限や画面モードに応じて入力コンポーネントの可否を切り替えるのは一般的な要件です。Vue 3のComposition APIとcomputedプロパティを組み合わせることで、簡潔なリアクティブな無効化ロジックを構築できます。
<template>
<el-form-item label="配信チャネル：" :prop="FormKeys.CHANNEL_TYP ...
9月22日 08:44 投稿
Vue 3で画像付きテーブルをExcelにエクスポートする方法
ExcelJSライブラリを使用すると、画像を含むテーブルデータをExcelファイルとして出力できます。以下では、画像がURLまたはBase64形式で提供される場合の実装例を紹介します。
必要なパッケージのインストール
npm install exceljs file-saver
URL形式の画像を1セル1枚で出力
この実装では、画像を並列でダウンロードし、必要に応じて圧縮してからExcelに埋め込みます。
...
9月7日 08:15 投稿
Vue3におけるvue-routerの簡易実装とルーター技術の進化に伴う考察
jQuery以前の時代、フロントエンドエンジニアはルーティングの概念を理解する必要がありませんでした。ページ遷移はすべてバックエンドがテンプレートを再描画することで処理していました。この開発スタイルではフロントエンドがバックエンドに依存し、開発スピードは速く、バックエンドが一部のフロントエンドタスクを担当することも可能でした。ただし、プロジェクトの分 ...
8月17日 19:21 投稿
Vue3におけるdefineExposeの活用方法
モバイル版の人材管理システム開発でこの機能を使用したことがあるが、実際にはさまざまな場面で利用されている。この概念は少し理解しにくい部分がある。
（コードは見つからなかったので、例として以下のようなものを使う）
例えばこのポップアップダイアログの場合
親コンポーネントのコード
<template>
<div class="sf-right" @click="popOpe ...
8月11日 07:00 投稿
Vue Router におけるメタ情報とナビゲーションガードの実装
ルートメタ情報の概要
Vue Router では、各ルート定義に任意のデータを付与する「メタ情報」機能を提供しています。この機能を利用することで、権限管理、ページタイトルの動的設定、レイアウトの切り替えなど、ルート固有の情報をコンポーネント外から制御可能になります。メタ情報は meta プロパティを通じて定義され、ナビゲーションガードやコンポーネント内から参照す ...
8月7日 01:32 投稿
Vue3における動的ルーティング権限制御の実装
権限制御の実装アプローチ
バックエンドから提供される権限コードとローカルルート設定のIDを照合することで、ユーザー権限に基づく動的ルーティングを実装します。ロール毎に表示可能な操作項目を制御し、ルート設定を正規化後にaddRouteメソッドで動的に追加します。
ルーティング設定構造
// 基本ルート設定
export const baseRoutes: RouteConfig[] = [
{
path: ...
8月2日 18:01 投稿