Webアプリ用のカスタムJavascript通知システムの構築

Webアプリ用のカスタムJavaScript通知システムの構築

リアルタイムのフィードバックは、現代のWebアプリケーションのコーナーストーンです。ユーザーは、成功したフォームの投稿、同期エラー、または新しいメッセージであるかどうかにかかわらず、アクションに関する即時、非集中的なアップデートを期待しています。多くのサードパーティのライブラリは既製のトーストまたはアラートコンポーネントを提供し、JavaScriptで独自の通知システムを構築することで、行動、スタイル、および統合を完全に制御できます。依存性が低下し、ブランドのデザイン言語の一貫性を確保し、すべてのユーザーがCSSをカスタム作成し、Webサイトを制作するかどうかを検証することができます。このガイドを使用すると、このガイドを手動で作成できます。

通知システムのコアアーキテクチャの理解

通知システムは、単純なイベント主導パターンに従います。その心は3つのコンポーネントです。[トリガイベント](ユーザーアクション、APIレスポンス、システム更新)、表示ロジック[](通知要素の生成と位置決め)、インターアクション管理(解読、キューイング、グループ通知)、およびこれらのシステム通知の両方がシステムに関係する)。これらのシステムと、これらのシステムが、これらをスケーラブルなシステムが構築できるか、システムが維持されます。

より大きなアプリケーションでは、パブのサブパターンやステート管理ライブラリと統合するかもしれませんが、ほとんどのWebアプリでは、DOM操作と組み合わせた簡単な機能ベースのアプローチが完全に機能します。 JavaScript ]] API と ]]メソッドは、基礎を作成するのに十分です。より高度なユースケースでは、急速火災イベント中に複数の通知をキューイングするなど、配列ベースのキューでデザインを拡張できます。

段階的なガイドでシステムの構築

1. 通知容器の準備

コンテナは、すべての通知がライブする固定位置要素です。レイアウトを干渉しないように、メインコンテンツフローの外側に配置する必要があります。 JavaScript を介して動的にそれを追加すると、HTML がきれいになります。

このスクリプトを使用してコンテナを作成し、それを本体に取り付けます。

const container = document.createElement('div');
container.id = 'notification-container';
Object.assign(container.style, {
 position: 'fixed',
 top: '20px',
 right: '20px',
 zIndex: '9999',
 display: 'flex',
 flexDirection: 'column',
 gap: '10px',
 pointerEvents: 'none'
});
document.body.appendChild(container);

注意 [ - クリックしてコンテナを通過することができます。個々の通知要素は、対話型(例えば、閉じるボタン)する必要があるときに、このプロパティを上書きします。

2. 通知生成機能を書く

コア関数は、[] を生成し、クラスとコンテンツを適用し、コンテナにそれを付加し、指定された期間後に自動削除します。オプションで、カスタムクローズボタンを使用できます。

function showNotification({
 message,
 type = 'info',
 duration = 3000,
 closable = false,
 icon = ''
} = {}) {
 const notification = document.createElement('div');
 notification.className = `notification ${type}`;
 notification.setAttribute('role', 'alert');
 notification.setAttribute('aria-live', 'assertive');

 const messageSpan = document.createElement('span');
 messageSpan.textContent = icon + ' ' + message;
 notification.appendChild(messageSpan);

 if (closable) {
 const closeBtn = document.createElement('button');
 closeBtn.textContent = '×';
 closeBtn.className = 'notification-close';
 closeBtn.addEventListener('click', () => notification.remove());
 notification.appendChild(closeBtn);
 notification.style.pointerEvents = 'auto';
 }

 container.appendChild(notification);

 // Remove after duration, unless the user already dismissed it
 const timeoutId = setTimeout(() => {
 if (notification.parentNode) notification.remove();
 }, duration);

 // Clear timeout if user closes manually
 notification.addEventListener('remove', () => clearTimeout(timeoutId));

 // Animate in
 requestAnimationFrame(() => notification.classList.add('show'));
}

このバージョンではオプションオブジェクトを受け入れ、拡張可能にします。 [ と [] 属性は、画面リーダーのサポートを、重要なアクセシビリティコンポーネントに確実にします。

3. 高度の特徴: キューイングおよびグループ化

多くの通知が迅速な成功で火災する場合、ユーザーは圧倒的にユーザーを避けるために、キューまたはグループ化したい場合があります。簡単なキューを実行します。

const notificationQueue = [];
let isProcessing = false;

function processQueue() {
 if (isProcessing || notificationQueue.length === 0) return;
 isProcessing = true;
 const next = notificationQueue.shift();
 showNotification(next);
 // Wait for the current notification to disappear before processing next
 setTimeout(() => {
 isProcessing = false;
 processQueue();
 }, next.duration || 3000);
}

function enqueueNotification(options) {
 notificationQueue.push(options);
 processQueue();
}

グループのためには、新しいものを作成する代わりに重複した通知を更新します。例えば、2つの「成功」メッセージが500ms以内に現れた場合、既存の1つのコンテンツを更新し、タイマーをリセットします。

4. 通知のスタイリングとアニメーション

CSS は、システムを視覚的にアピールします。スライドインとフェードアウト効果のを使用します。異なるタイプ(情報、成功、エラー、警告)は、異なる背景色とアイコンを持っている必要があります。

.notification {
 padding: 12px 20px;
 border-radius: 6px;
 color: #fff;
 font-family: system-ui, sans-serif;
 box-shadow: 0 4px 12px rgba(0,0,0,0.15);
 transform: translateX(120%);
 transition: transform 0.4s ease, opacity 0.4s ease;
 min-width: 280px;
 max-width: 450px;
}

.notification.show {
 transform: translateX(0);
}

.notification.info { background: #2196F3; }
.notification.success { background: #4CAF50; }
.notification.error { background: #f44336; }
.notification.warning { background: #FF9800; }

.notification-close {
 background: none;
 border: none;
 color: inherit;
 font-size: 1.4rem;
 cursor: pointer;
 margin-left: 16px;
 line-height: 1;
}

/* Fade out before removal (triggered by class removal) */
.notification.hiding {
 transform: translateX(120%);
 opacity: 0;
}

要素を削除する前に「非表示」クラスを追加して、スムーズな終了アニメーションを作成できます。

// In the showNotification function, replace the direct removal:
notification.addEventListener('animationend', () => notification.remove());
notification.classList.add('hiding'); // after timeout triggers fade‑out

5. Web App と連携

任意のイベントハンドラから[を呼び出します。一般的なユースケースには、次のものが含まれます。

フォーム送信] - 成功またはエラーのフィードバックを表示します。
[APIコール] - 読み込み状態またはエラーメッセージを表示します。
[]ユーザアクション - 削除またはデータ同期を確認します。
[]リアルタイムイベント[]] - チャットメッセージやサーバー通知を着信(WebSockets経由)。

// Example: Handling a fetch response
fetch('/api/save', { method: 'POST', body: formData })
 .then(response => {
 if (!response.ok) throw new Error('Save failed');
 showNotification({ message: 'Data saved!', type: 'success' });
 })
 .catch(err => {
 showNotification({ message: err.message, type: 'error', duration: 5000 });
 });

アクセシビリティの検討

通知は、アシスト技術を使用して、すべてのユーザーが知覚できる必要があります。以下のガイドラインに従ってください。

各通知の[とを使用してください。そのため、画面リーダーはすぐに新しいコンテンツを通知します。
閉じるボタンを使用するか、 ] を経由して、削除を許可します。 キー。
色のコントラスト比はWCAG AA規格(背景色に関する白書など)を満たしていることを確認します。
決して色にのみ頼りにはなりません。例えば「成功」、「エラー」などのアイコンやテキストを含んでいません。

実際のスクリーンリーダー(NVDA、VoiceOver)でテストし、ベストプラクティスの[]]ARIAライブエリアのドキュメンテーション]をチェックします。

性能および端の箱

高頻度通知シナリオ(WebSocketストリームのような)では、DOMの過負荷を防ぐため、回転またはバッチ処理を検討してください。キューのアプローチは、以前のヘルプが説明されていますが、可視通知の最大数を制限することもできます(例、最後の5つだけを表示し、残りの部分をスタック)。

別のエッジケース: ユーザーが複数のタブが開いたとき、非アクティブタブの通知はフォーカスを盗むべきではありません。 []]]ページ可視性 API]を使用して、タブが再びアクティブになるまで表示を延ばします。

document.addEventListener('visibilitychange', () => {
 if (document.hidden) {
 // optionally store pending notifications and show them when user returns
 }
});

ライブラリを代わりに考慮すべきとき

カスタムシステムを構築するには、設計制御や最小限の依存関係を必要とするときに理想的です。しかし、あなたのアプリがすでに React、Vue、または Angular のような UI フレームワークを使用している場合は、ネイティブに統合するのまたは []] の [Fue Sonner]]] のようなライブラリを好むかもしれません。純粋なバニラ JS プロジェクトの場合、カスタムアプローチは軽量で完全にカスタマイズ可能なままです。 [FLT:]] または ]] の[FLT:] アニメーションを強制的に確認することができます。[FLT] アニメーションを[FLT:] するには、または [[FLTFLTFLTF] してください。[F] アニメーションを[F] してください。

コンテンツ

カスタム JavaScript 通知システムは、Web アプリのニーズを正確にユーザーフィードバックを生成する自由を与えます。 DOM 操作、CSS アニメーション、および注意深いアクセシビリティに関する検討に基づいて、統合、実行、および包括的な感触するソリューションを作成します。基本から始まり、コンテーナー、生成機能、スタイリング、キュー、グループ化、およびアプリが成長する高度なインタラクションに関するレイヤー。結果は、製品が外部のライブラリを上回ることなく、製品に適応する通知システムです。

更に読みたい場合は、アニメーションのヒントの[]]MDNドキュメントを、]と[]]CSS-Tricks Almanacを参照してください。これらの基礎では、ユーザーのエンゲージメントと快適さを高めるカスタム通知システムを実行できます。

Webアプリ用のカスタムJavascript通知システムの構築

Table of Contents