developer-experience

開発者エクスペリエンス

このスキルは、開発ワークフローを最適化し、摩擦を減らし、反復作業を自動化することで、開発の生産性と楽しさを向上させます。

このスキルを使用するタイミング

• 新しいプロジェクトをセットアップするときや、開発者をオンボーディングするとき
• 反復作業を特定してなくすとき
• ビルドとテストの実行時間を改善するとき
• 開発ワークフローを最適化するとき
• 便利なエイリアスやショートカットを作成するとき
• IDE の設定やツールをセットアップするとき

このスキルでできること

1. 環境のセットアップ：オンボーディングを 5 分未満で完了できるようにします
2. ワークフローの最適化：反復作業を特定して自動化します
3. ツールの強化：IDE の設定、git フック、CLI コマンドを構成します
4. ドキュメント：セットアップガイドとトラブルシューティング用ドキュメントを作成します
5. 自動化：一般的なタスク向けのスクリプトとコマンドを作成します
6. 摩擦の軽減：手動の手順をなくし、フィードバックループを改善します

使用方法

ワークフローを最適化する

Analyze the development workflow and suggest improvements

Set up this project for optimal developer experience

具体的な改善

Create helpful npm scripts for common tasks

Set up git hooks for code quality checks

最適化する領域

環境のセットアップ

目標：

• 5 分未満でオンボーディングを完了
• インテリジェントなデフォルト設定
• 依存関係のインストールを自動化
• わかりやすいエラーメッセージ
• 明確なセットアップ手順

成果物：

• 明確なセットアップ手順を記載した README
• セットアップスクリプト（setup.sh、setup.ps1）
• 環境の検証
• 依存関係の確認
• 設定テンプレート

開発ワークフロー

反復作業を特定する：

• コード生成
• データベースのマイグレーション
• テストの実行
• ビルドプロセス
• デプロイ手順

自動化を作成する：

• npm/yarn スクリプト
• Makefile コマンド
• シェルエイリアス
• カスタム CLI ツール
• タスクランナー

ツールの強化

IDE の設定：

• EditorConfig
• ESLint/Prettier の設定
• VS Code の設定
• デバッグ設定
• スニペットライブラリ

Git フック：

• コミット前フック（リンティング、フォーマット）
• コミットメッセージの検証
• プッシュ前フック（テスト）
• マージ後フック（依存関係の更新）

CLI コマンド：

• プロジェクト固有のコマンド
• 開発用ショートカット
• データベースユーティリティ
• テスト用ヘルパー

例

例 1：プロジェクトセットアップの最適化

入力：このプロジェクトのセットアッププロセスを最適化する

出力：

## Developer Experience Improvements

### Current Setup Issues
- Manual dependency installation
- No environment validation
- Unclear setup instructions
- Missing development tools

### Improvements

**1. Setup Script**
```bash
#!/bin/bash
# setup.sh
echo "Setting up development environment..."

# Check Node.js version
node_version=$(node -v | cut -d'v' -f2 | cut -d'.' -f1)
if [ "$node_version" -lt 18 ]; then
  echo "Error: Node.js 18+ required"
  exit 1
fi

# Install dependencies
npm install

# Setup environment
cp .env.example .env

# Run database migrations
npm run db:migrate

echo "Setup complete! Run 'npm run dev' to start."

2. 強化された package.json スクリプト

{
  "scripts": {
    "dev": "nodemon src/index.js",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage",
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "format": "prettier --write .",
    "db:migrate": "knex migrate:latest",
    "db:seed": "knex seed:run",
    "setup": "bash setup.sh"
  }
}

3. Git フック

# .husky/pre-commit
#!/bin/sh
npm run lint
npm run test

例 2：ワークフローの自動化

入力：一般的な開発タスク向けのショートカットを作成する

出力：

## Development Shortcuts

### Makefile Commands
```makefile
.PHONY: dev test lint format db-setup

dev:
 npm run dev

test:
 npm test

lint:
 npm run lint

format:
 npm run format

db-setup:
 npm run db:migrate
 npm run db:seed

clean:
 rm -rf node_modules dist .next

install:
 npm install

シェルエイリアス

# Add to ~/.zshrc or ~/.bashrc
alias dev="npm run dev"
alias test="npm test"
alias lint="npm run lint"
alias format="npm run format"

VS Code のタスク

// .vscode/tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Run Tests",
      "type": "shell",
      "command": "npm test",
      "group": "test"
    },
    {
      "label": "Start Dev Server",
      "type": "shell",
      "command": "npm run dev",
      "group": "build",
      "isBackground": true
    }
  ]
}

## Best Practices

### DX Principles

1. **Invisible When Working**: Great DX is seamless when it works
2. **Obvious When Broken**: Clear error messages when something fails
3. **Fast Feedback**: Quick build/test cycles
4. **Clear Documentation**: Setup guides that actually work
5. **Helpful Defaults**: Sensible configurations out of the box

### Success Metrics

- **Time to First Success**: How long until a new developer runs the app?
- **Manual Steps**: Count of manual steps eliminated
- **Build/Test Time**: Execution time for common tasks
- **Developer Satisfaction**: Feedback on workflow improvements

### Common Improvements

**Fast Feedback:**
- Hot reload for development
- Fast test execution
- Quick build times
- Instant linting feedback

**Clear Errors:**
- Helpful error messages
- Stack traces with context
- Setup validation
- Dependency checking

**Automation:**
- One-command setup
- Automated testing
- Code generation
- Deployment automation

## Reference Files

- **`references/ONBOARDING_GUIDE.template.md`** - Developer onboarding guide template with environment setup, day-by-day tasks, and troubleshooting

## Related Use Cases

- Project setup optimization
- Workflow automation
- Tooling configuration
- Developer onboarding
- Reducing development friction
- Improving build/test times