OpenSkillIndex← back to search
unknown

dev-tools

技術スタック - Tool App

install
source · Clone the upstream repo
git clone https://github.com/CafeIT25/dev-tools
manifest: skill.md
source content

技術スタック - Tool App

コア技術

フロントエンドフレームワーク

  • React 18.3.x
    • 最新の機能を活用（Concurrent Features、Suspense）
    • Server Componentsは今回は使用しない（クライアントサイド完結のため）

ビルドツール

  • Vite 6.x
    • 高速な開発サーバー
    • HMR（Hot Module Replacement）
    • 最適化されたプロダクションビルド

言語

  • TypeScript 5.x
    • 型安全性の確保
    • 開発体験の向上
    • 厳格な型チェック設定

状態管理

  • Zustand 5.x
    • シンプルで軽量な状態管理
    • TypeScript完全サポート
    • DevToolsサポート

スタイリング

  • TailwindCSS v4（最新版）

    • ユーティリティファーストCSS
    • JIT（Just-In-Time）コンパイル
    • カスタムデザインシステムの構築

  • CSS Modules（必要に応じて）

    • コンポーネントスコープのスタイリング
    • Liquid Glass効果の詳細な実装

UI/UXライブラリ

アイコン

  • Lucide React
    • 軽量で美しいアイコンセット
    • Tree-shakable
    • TypeScriptサポート

アニメーション

  • Framer Motion
    • 滑らかなアニメーション
    • ジェスチャー対応
    • レイアウトアニメーション

ツリービュー

  • React Arborist または @tanstack/react-virtual
    • 高性能なツリービュー実装
    • バーチャルスクローリング対応

データ処理

JSON/YAML処理

  • js-yaml
    • YAMLのパース/シリアライズ
    • TypeScript型定義付き

テキスト選択

  • rangy または selection-range
    • 高度なテキスト選択機能
    • 部分マスキング実装用

ユーティリティ

クリップボード操作

  • clipboard-copy
    • クロスブラウザ対応
    • Promiseベース

シンタックスハイライト

  • Prism.js または Monaco Editor（軽量版）
    • JSON/YAML/テキストのハイライト
    • カスタムテーマ対応

正規表現

  • ネイティブJavaScript RegExp
  • regex101のパターンライブラリ参考

開発ツール

コード品質

  • ESLint 9.x

    • コード品質の維持
    • TypeScript ESLintプラグイン
    • React Hooksルール

  • Prettier 3.x

    • コードフォーマット統一
    • ESLintとの統合

テスト（将来的に導入）

  • Vitest

    • Viteネイティブテストランナー
    • Jest互換API

  • React Testing Library

    • コンポーネントテスト
    • ユーザー中心のテスト

パフォーマンス最適化

バンドル最適化

  • Rollup（Viteに統合）
    • Tree-shaking
    • コード分割
    • 動的インポート

実行時最適化

  • React.memo

    • コンポーネントの再レンダリング防止

  • useMemo/useCallback

    • 計算結果のメモ化

  • Virtual Scrolling

    • 大量データの効率的表示

セキュリティ考慮事項

クライアントサイド処理

  • すべての処理はブラウザ内で完結
  • 外部APIへの通信なし
  • LocalStorageの使用は最小限

サニタイゼーション

  • XSS対策（Reactのデフォルト機能を活用）
  • 正規表現のDoS攻撃対策

バージョン管理

package.json（予定）

{
  "dependencies": {
    "react": "^18.3.0",
    "react-dom": "^18.3.0",
    "zustand": "^5.0.0",
    "lucide-react": "^0.300.0",
    "framer-motion": "^11.0.0",
    "js-yaml": "^4.1.0",
    "clipboard-copy": "^4.0.0"
  },
  "devDependencies": {
    "@types/react": "^18.3.0",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react": "^4.3.0",
    "typescript": "^5.5.0",
    "vite": "^6.0.0",
    "tailwindcss": "^4.0.0",
    "eslint": "^9.0.0",
    "prettier": "^3.0.0"
  }
}

アーキテクチャ方針

Atomic Design

src/
├── components/
│   ├── atoms/        # 最小単位のコンポーネント
│   ├── molecules/    # 複数のatomsの組み合わせ
│   ├── organisms/    # 複雑なUIパーツ
│   ├── templates/    # ページレイアウト
│   └── pages/        # 完全なページ
├── hooks/           # カスタムフック
├── stores/          # Zustandストア
├── utils/           # ユーティリティ関数
└── styles/          # グローバルスタイル

デザインパターン

  • Container/Presentationalパターン
  • Compound Componentsパターン（複雑なコンポーネント用）
  • Render PropsまたはCustom Hooks（ロジックの共有）

更新履歴

  • 2025-01-07: 初版作成
  • 今後、実装に応じて随時更新予定