Project

カラーパレットジェネレータ

Vanilla JavaScript で実装した、ランダムなカラーパレットを生成・管理できるシンプルな Web アプリケーション。

JavaScriptHTML5CSS3Vanilla JavaScriptClipboard API
FrontendJavaScriptTool
GitHubLive Demo

概要

フレームワークを使わず、純粋な JavaScript（Vanilla JS）で実装したカラーパレットジェネレータです。ランダムに生成された5色のパレットを表示し、お気に入りの色をロックして保持しながら新しいパレットを生成できます。各カラーコードをワンクリックでクリップボードにコピーできる機能も実装しています。DOM操作、イベントハンドリング、Clipboard API の活用など、JavaScript の基礎を学ぶのに適したプロジェクトです。

苦労した点・工夫した点

ロック機能を実装する際、状態管理を Set で行い、配列のインデックスとロック状態を適切に紐付ける必要がありました。また、Clipboard API が使えない古いブラウザへのフォールバックとして、`document.execCommand` を使った実装も追加しました。

得られた学び・振り返り

フレームワークに頼らず Vanilla JavaScript で実装することで、DOM操作の基礎やイベントハンドリングの理解が深まりました。また、状態管理のシンプルなパターン（Set を使ったロック管理）を学び、ユーザー体験を向上させるための細かい機能（トースト通知、ホバーエフェクト）の実装経験も得られました。

Live Demo / プレビュー

技術構成図（Mermaid）

現在は Mermaid 記法をテキストとして表示しています。必要に応じて Mermaid.js のレンダリング処理に差し替え可能です。

graph TD
  User[ユーザー操作] --> Generate[パレット生成]
  Generate --> Random[ランダムカラー生成]
  Random --> Check{ロック状態確認}
  Check -->|ロック済み| Keep[既存色を保持]
  Check -->|未ロック| New[新色を生成]
  Keep --> Render[画面に表示]
  New --> Render
  Render --> Copy[クリップボードコピー]
  Render --> Lock[ロック/アンロック]