「もっと効率よくコーディングしたい」と思っていませんか?
現役WEBエンジニアとして、効率化を追求しています。
この記事では、生産性を上げるテクニックを解説します。
目次
キーボードショートカット
VSCode必須ショートカット
| 操作 | Mac | Windows |
|---|---|---|
| コマンドパレット | Cmd+Shift+P | Ctrl+Shift+P |
| ファイル検索 | Cmd+P | Ctrl+P |
| 行の複製 | Cmd+Shift+D | Ctrl+Shift+D |
| 行の移動 | Alt+↑/↓ | Alt+↑/↓ |
| マルチカーソル | Cmd+D | Ctrl+D |
| 全置換 | Cmd+Shift+H | Ctrl+Shift+H |
マルチカーソル活用
1. 変更したい単語を選択
2. Cmd+D で同じ単語を追加選択
3. 一括編集
スニペット
VSCodeスニペット設定
// settings.json -> Configure User Snippets
{
"React Component": {
"prefix": "rfc",
"body": [
"export function ${1:Component}() {",
" return (",
" <div>",
" $0",
" </div>",
" );",
"}"
]
}
}
よく使うスニペット
- コンポーネント雛形
- console.log
- エラーハンドリング
AIコーディング活用
GitHub Copilot
- コメントから生成
- 関数名から推測
- テストコード生成
効果的なプロンプト
// ユーザーIDでユーザー情報を取得する関数
// エラー時はnullを返す
// ← ここでTabを押すとコード生成
ターミナル効率化
エイリアス設定
# ~/.zshrc
alias gs='git status'
alias gc='git commit -m'
alias gp='git push'
alias nr='npm run'
alias nrd='npm run dev'
履歴検索
# Ctrl+R で履歴検索
# fzf を使うとさらに便利
開発環境の最適化
エディタ設定
{
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.wordWrap": "on"
}
拡張機能
- GitHub Copilot
- ESLint + Prettier
- GitLens
- Error Lens
集中するための工夫
環境
- 通知OFF
- BGM(集中できる音楽)
- デュアルモニター
時間管理
- ポモドーロテクニック
- 難しいタスクは午前中
- ミーティングをまとめる
コードを書く前に
設計を考える
- いきなりコードを書かない
- 処理の流れを整理
- 必要な関数を洗い出す
既存コードを確認
- 似た実装がないか
- 共通化できないか
- ライブラリで解決できないか
まとめ
コーディング効率化のポイント:
- ショートカットを覚える
- AIを活用する
- 環境を最適化
- 設計してからコード
