コーディングを劇的に効率化する6つの実践手法｜ツールや時短テクニックも紹介

// 例：userNameをuserFullNameに一括変更
const userName = "田中太郎";      // カーソル1
console.log(userName);            // カーソル2
return { userName: userName };    // カーソル3、4

div.container>ul>li*5>a{Item $}

<div class="container">
  <ul>
      <li><a href="">Item 1</a></li>
      <li><a href="">Item 2</a></li>
      <li><a href="">Item 3</a></li>
      <li><a href="">Item 4</a></li>
      <li><a href="">Item 5</a></li>
  </ul>
</div>

div#header.nav-wrapper.fixed
→ <div id="header" class="nav-wrapper fixed"></div>

input[type=email placeholder="メールアドレス" required]
→ <input type="email" placeholder="メールアドレス" required>

section.section-$*3>h2{セクション$}+p{内容$}

p>lorem20
→ 20単語のダミーテキストを含むp要素

/* m10 → margin: 10px; */
/* p10-20 → padding: 10px 20px; */
/* fz16 → font-size: 16px; */
/* bgc#333 → background-color: #333; */

// .prettierrc の設定例
{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

/* 非効率な記述 */
.element {
    margin-top: 20px;
    margin-right: 15px;
    margin-bottom: 20px;
    margin-left: 15px;
}

/* 効率的な記述 */
.element {
    margin: 20px 15px;
}

/* 個別指定 */
.hero {
    background-image: url('hero.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* ショートハンド */
.hero {
    background: url('hero.jpg') center/cover no-repeat fixed;
}

.button {
    background-color: #007bff;
    background-image: linear-gradient(to bottom, #0088ff, #0066ff);
}

.button:hover {
    background: #0056b3; /* gradientも消えてしまう */
}

/* サイドバーレイアウトの例 */
.sidebar {
    width: 300px;
}

.main-content {
    width: calc(100% - 300px - 40px); /* 40pxは余白 */
    margin-left: 20px;
}

/* レスポンシブな余白の計算 */
.container {
    padding: calc(1rem + 2vw);
    max-width: calc(100vw - 4rem);
}

/* フォントサイズの動的調整 */
.title {
    font-size: clamp(1.5rem, 4vw, 3rem);
}

/* 要素の幅を柔軟に制御 */
.card {
    width: clamp(280px, 30%, 400px);
}

/* 行の高さを動的に */
.paragraph {
    line-height: clamp(1.4, 1em + 0.5vw, 1.8);
}

/* 最大幅を柔軟に設定 */
.container {
    width: min(90%, 1200px);
}

/* 最小の余白を保証 */
.section {
    padding: max(2rem, 5vh);
}

:root {
    --base-spacing: 1rem;
    --scale-factor: 1.5;
}

.component {
    padding: calc(var(--base-spacing) * var(--scale-factor));
    margin-bottom: calc(var(--base-spacing) * 2);
}

@media (max-width: 768px) {
    :root {
        --scale-factor: 1.2;
    }
}

/* Block：独立したコンポーネント */
.card {}

/* Element：Blockの構成要素 */
.card__header {}
.card__title {}
.card__content {}
.card__footer {}

/* Modifier：Blockまたは Elementのバリエーション */
.card--featured {}
.card--disabled {}
.card__title--large {}

<article class="article-card article-card--featured">
    <header class="article-card__header">
        <h2 class="article-card__title article-card__title--primary">
            効率的なCSS設計の重要性
        </h2>
        <time class="article-card__date">2024年1月15日</time>
    </header>
    <div class="article-card__content">
        <p class="article-card__excerpt">
            CSS設計手法を採用することで...
        </p>
    </div>
    <footer class="article-card__footer">
        <a href="#" class="article-card__link">続きを読む</a>
    </footer>
</article>

/* 構造 */
.media {
    display: flex;
    align-items: flex-start;
}

.media__image {
    margin-right: 1rem;
}

.media__body {
    flex: 1;
}

/* スキン（見た目） */
.media--reverse {
    flex-direction: row-reverse;
}

.media--stacked {
    flex-direction: column;
}

/* Base */
h1, h2, h3 { font-family: 'Noto Sans JP', sans-serif; }

/* Layout */
.l-header { position: fixed; top: 0; }
.l-main { margin-top: 80px; }

/* Module */
.card { border: 1px solid #ddd; }
.button { padding: 0.5rem 1rem; }

/* State */
.is-active { background-color: #007bff; }
.is-disabled { opacity: 0.5; cursor: not-allowed; }

/* Theme */
.theme-dark .card { background-color: #333; }

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const autoprefixer = require('gulp-autoprefixer');
const cleanCSS = require('gulp-clean-css');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const imagemin = require('gulp-imagemin');

// Sassのコンパイルと最適化
gulp.task('styles', () => {
    return gulp.src('src/scss/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(autoprefixer({
            cascade: false,
            grid: true
        }))
        .pipe(cleanCSS())
        .pipe(gulp.dest('dist/css'));
});

// JavaScriptの結合と圧縮
gulp.task('scripts', () => {
    return gulp.src('src/js/**/*.js')
        .pipe(concat('main.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});

// 画像の自動圧縮
gulp.task('images', () => {
    return gulp.src('src/images/**/*')
        .pipe(imagemin([
            imagemin.gifsicle({interlaced: true}),
            imagemin.mozjpeg({quality: 75, progressive: true}),
            imagemin.optipng({optimizationLevel: 5}),
            imagemin.svgo({
                plugins: [{removeViewBox: false}]
            })
        ]))
        .pipe(gulp.dest('dist/images'));
});

// ファイル変更の監視と自動実行
gulp.task('watch', () => {
    gulp.watch('src/scss/**/*.scss', gulp.series('styles'));
    gulp.watch('src/js/**/*.js', gulp.series('scripts'));
    gulp.watch('src/images/**/*', gulp.series('images'));
});

// デフォルトタスク
gulp.task('default', gulp.parallel('styles', 'scripts', 'images', 'watch'));

// webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.[contenthash].js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader'
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'styles.[contenthash].css'
        })
    ],
    optimization: {
        minimizer: [
            new TerserPlugin(),
            new OptimizeCSSAssetsPlugin()
        ]
    }
};

{
  "scripts": {
    "build:css": "sass src/scss:dist/css --style compressed",
    "build:js": "uglifyjs src/js/*.js -o dist/js/main.min.js",
    "watch:css": "sass src/scss:dist/css --watch",
    "watch:js": "onchange 'src/js/**/*.js' -- npm run build:js",
    "serve": "browser-sync start --server --files 'dist/**/*'",
    "dev": "npm-run-all --parallel watch:* serve",
    "build": "npm-run-all build:*"
  }
}

# 現在の変更を一時保存
git stash save "機能Xの実装途中"

# 緊急のバグ修正を行う
git checkout hotfix/urgent-bug
# ... 修正作業 ...
git commit -m "緊急バグ修正"

# 元の作業に戻る
git checkout feature/new-feature
git stash pop

# bisectの開始
git bisect start

# 現在のコミット（バグあり）を bad とマーク
git bisect bad

# バグがなかった過去のコミットを good とマーク
git bisect good v1.0

# Gitが自動的に中間のコミットをチェックアウト
# テストを実行して good/bad を判定
git bisect good  # または git bisect bad

# バグを引き起こしたコミットが特定される

# .git/hooks/pre-commit
#!/bin/sh

# ESLintの実行
npm run lint
if [ $? -ne 0 ]; then
    echo "ESLintエラーを修正してください"
    exit 1
fi

# テストの実行
npm test
if [ $? -ne 0 ]; then
    echo "テストが失敗しました"
    exit 1
fi

# ~/.gitconfig
[alias]
    co = checkout
    br = branch
    ci = commit
    st = status
    unstage = reset HEAD --
    last = log -1 HEAD
    visual = !gitk
    lg = log --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit

# .github/workflows/ci.yml
name: CI/CD Pipeline

on:
  push:
    branches: [ main, develop ]
  pull_request:
    branches: [ main ]

jobs:
  test:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v3

    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '18'
        cache: 'npm'

    - name: Install dependencies
      run: npm ci

    - name: Run linter
      run: npm run lint

    - name: Run tests
      run: npm test -- --coverage

    - name: Build project
      run: npm run build

    - name: Upload coverage to Codecov
      uses: codecov/codecov-action@v3

  deploy:
    needs: test
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'

    steps:
    - uses: actions/checkout@v3

    - name: Deploy to production
      env:
        DEPLOY_KEY: ${{ secrets.DEPLOY_KEY }}
      run: |
        npm run build
        npm run deploy

# .gitlab-ci.yml
stages:
  - build
  - test
  - deploy

variables:
  npm_config_cache: "$CI_PROJECT_DIR/.npm"

cache:
  key: ${CI_COMMIT_REF_SLUG}
  paths:
    - .npm/
    - node_modules/

build:
  stage: build
  script:
    - npm ci
    - npm run build
  artifacts:
    paths:
      - dist/
    expire_in: 1 hour

test:lint:
  stage: test
  script:
    - npm run lint

test:unit:
  stage: test
  script:
    - npm test -- --coverage
  coverage: '/Lines\s*:\s*(\d+\.\d+)%/'

deploy:staging:
  stage: deploy
  script:
    - npm run deploy:staging
  environment:
    name: staging
    url: https://staging.example.com
  only:
    - develop

deploy:production:
  stage: deploy
  script:
    - npm run deploy:production
  environment:
    name: production
    url: https://example.com
  only:
    - main
  when: manual

// JavaScriptコーディング規約の例

// 1. 命名規則
// - 変数名・関数名：キャメルケース
const userName = 'John Doe';
function calculateTotalPrice() {}

// - 定数：アッパースネークケース
const MAX_RETRY_COUNT = 3;

// - クラス名：パスカルケース
class UserAccount {}

// - プライベートメソッド：アンダースコアプレフィックス
class Service {
    _internalMethod() {}
}

// 2. 関数の設計原則
// - 単一責任の原則：1つの関数は1つのことだけを行う
// Bad
function processUserData(user) {
    // バリデーション
    if (!user.email) throw new Error('Email required');

    // データ変換
    user.name = user.name.toUpperCase();

    // 保存
    database.save(user);
}

// Good
function validateUser(user) {
    if (!user.email) throw new Error('Email required');
}

function transformUserData(user) {
    return { ...user, name: user.name.toUpperCase() };
}

function saveUser(user) {
    return database.save(user);
}

// 3. エラーハンドリング
// - 明示的なエラーハンドリング
async function fetchUserData(userId) {
    try {
        const response = await api.get(`/users/${userId}`);
        return response.data;
    } catch (error) {
        logger.error('Failed to fetch user data', { userId, error });
        throw new UserFetchError(`User ${userId} not found`);
    }
}

// SCSSコーディング規約の例

// 1. プロパティの記述順序
.component {
    // Positioning
    position: relative;
    top: 0;
    left: 0;

    // Box Model
    display: flex;
    width: 100%;
    padding: 1rem;
    margin: 0 auto;

    // Typography
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1rem;
    line-height: 1.5;

    // Visual
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;

    // Animation
    transition: all 0.3s ease;
}

// 2. ネスティングのルール
// - 3階層以上のネスティングは避ける
// Bad
.page {
    .container {
        .content {
            .item {
                .link {}
            }
        }
    }
}

// Good
.page-container {}
.page-content {}
.content-item {}
.item-link {}

// 3. 変数とMixinの活用
$color-primary: #007bff;
$breakpoint-tablet: 768px;

@mixin button-style($bg-color: $color-primary) {
    padding: 0.5rem 1rem;
    background-color: $bg-color;
    border: none;
    border-radius: 4px;
    cursor: pointer;

    &:hover {
        opacity: 0.8;
    }
}

// .eslintrc.json
{
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "no-console": "warn",
    "no-unused-vars": "error",
    "prefer-const": "error",
    "arrow-body-style": ["error", "as-needed"],
    "object-shorthand": "error"
  }
}

// .prettierrc
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80
}

# プロジェクトテンプレートの構造
project-template/
├── src/
│   ├── assets/
│   │   ├── images/
│   │   ├── fonts/
│   │   └── icons/
│   ├── components/
│   │   ├── common/
│   │   ├── layout/
│   │   └── ui/
│   ├── styles/
│   │   ├── base/
│   │   ├── components/
│   │   ├── layout/
│   │   ├── utils/
│   │   └── main.scss
│   ├── scripts/
│   │   ├── modules/
│   │   ├── utils/
│   │   └── main.js
│   └── index.html
├── tests/
├── docs/
├── .gitignore
├── .eslintrc.json
├── .prettierrc
├── webpack.config.js
├── package.json
└── README.md

// .vscode/snippets/javascript.json
{
  "React Functional Component": {
    "prefix": "rfc",
    "body": [
      "import React from 'react';",
      "import PropTypes from 'prop-types';",
      "import './${TM_FILENAME_BASE}.scss';",
      "",
      "const ${TM_FILENAME_BASE} = ({ ${1:props} }) => {",
      "  return (",
      "    <div className=\"${2:${TM_FILENAME_BASE/(.*)/${1:/downcase}/}}\"}>",
      "      ${3:// Component content}",
      "    </div>",
      "  );",
      "};",
      "",
      "${TM_FILENAME_BASE}.propTypes = {",
      "  ${4:// PropTypes}",
      "};",
      "",
      "${TM_FILENAME_BASE}.defaultProps = {",
      "  ${5:// Default props}",
      "};",
      "",
      "export default ${TM_FILENAME_BASE};"
    ],
    "description": "React Functional Component with PropTypes"
  }
}

// api/baseService.js
class BaseService {
  constructor(baseURL) {
    this.baseURL = baseURL;
  }

  async request(method, endpoint, data = null, options = {}) {
    const config = {
      method,
      headers: {
        'Content-Type': 'application/json',
        ...options.headers,
      },
      ...options,
    };

    if (data) {
      config.body = JSON.stringify(data);
    }

    try {
      const response = await fetch(`${this.baseURL}${endpoint}`, config);

      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }

      return await response.json();
    } catch (error) {
      console.error('API request failed:', error);
      throw error;
    }
  }

  get(endpoint, options) {
    return this.request('GET', endpoint, null, options);
  }

  post(endpoint, data, options) {
    return this.request('POST', endpoint, data, options);
  }

  put(endpoint, data, options) {
    return this.request('PUT', endpoint, data, options);
  }

  delete(endpoint, options) {
    return this.request('DELETE', endpoint, null, options);
  }
}

// 使用例
class UserService extends BaseService {
  constructor() {
    super('https://api.example.com');
  }

  getUsers() {
    return this.get('/users');
  }

  createUser(userData) {
    return this.post('/users', userData);
  }
}

// セッション：認証機能の実装

// ナビゲーター：「まず、JWTトークンの検証ロジックから始めましょう」
// ドライバー：「了解です。ミドルウェアとして実装しますね」

// authMiddleware.js
const jwt = require('jsonwebtoken');

// ナビゲーター：「エラーハンドリングも考慮しましょう」
const authMiddleware = async (req, res, next) => {
  try {
    // ドライバー：「トークンはAuthorizationヘッダーから取得します」
    const token = req.headers.authorization?.split(' ')[1];

    // ナビゲーター：「トークンがない場合の処理も追加してください」
    if (!token) {
      return res.status(401).json({ error: 'No token provided' });
    }

    // ドライバー：「検証にはverifyメソッドを使います」
    const decoded = jwt.verify(token, process.env.JWT_SECRET);

    // ナビゲーター：「デコードされたユーザー情報をリクエストに追加しておきましょう」
    req.user = decoded;
    next();
  } catch (error) {
    // ナビゲーター：「トークンの有効期限切れと、その他のエラーを分けて処理しましょう」
    if (error.name === 'TokenExpiredError') {
      return res.status(401).json({ error: 'Token expired' });
    }

    return res.status(403).json({ error: 'Invalid token' });
  }
};

// ナビゲーター：「テストも一緒に書いておきましょう」
// ドライバー：「そうですね、モックを使ってテストを書きます」

// コメントを書くだけで実装を生成
// ユーザーの年齢から世代を判定する関数
function getGeneration(age) {
  // Copilotが以下を提案
  if (age < 0) return 'Invalid age';
  if (age < 13) return 'Child';
  if (age < 20) return 'Teenager';
  if (age < 30) return 'Twenties';
  if (age < 40) return 'Thirties';
  if (age < 50) return 'Forties';
  if (age < 60) return 'Fifties';
  if (age < 70) return 'Sixties';
  return 'Senior';
}

// 関数を書いた後、テストを書き始めると...
describe('getGeneration', () => {
  // Copilotが包括的なテストケースを提案
  it('should return "Invalid age" for negative ages', () => {
    expect(getGeneration(-1)).toBe('Invalid age');
  });

  it('should return "Child" for ages 0-12', () => {
    expect(getGeneration(0)).toBe('Child');
    expect(getGeneration(12)).toBe('Child');
  });

  it('should return "Teenager" for ages 13-19', () => {
    expect(getGeneration(13)).toBe('Teenager');
    expect(getGeneration(19)).toBe('Teenager');
  });

  // ... 他のテストケースも自動生成
});

// メールアドレスのバリデーション正規表現
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

// 日本の郵便番号の正規表現
const postalCodeRegex = /^\d{3}-?\d{4}$/;

// URLの正規表現
const urlRegex = /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;

// Bad: 処理を行う
// Good: 配列内の重複を除去し、アルファベット順にソートする
function processArray(arr) {
  // Copilotがより適切な実装を提案
  return [...new Set(arr)].sort();
}

// 関数名から意図を推測してCopilotが適切な実装を提案
function calculateCompoundInterest(principal, rate, time, n) {
  // Copilotが複利計算の公式を正しく実装
  return principal * Math.pow((1 + rate / n), n * time);
}

// プロジェクト内の既存パターンに従った提案を受ける
class UserService extends BaseService {
  constructor() {
    super('/api/users');
  }

  // 既存のパターンに従ったメソッドを自動生成
  async getById(id) {
    return this.get(`/${id}`);
  }

  async create(userData) {
    return this.post('/', userData);
  }
}

// エラーメッセージをChatGPTに相談
/*
エラー: TypeError: Cannot read property 'map' of undefined
コード:
const items = data.results.map(item => item.name);

ChatGPTの回答例：
このエラーは、data.resultsがundefinedのときに発生します。
以下の対策を提案します：

1. オプショナルチェーニングを使用:
*/
const items = data?.results?.map(item => item.name) || [];

/*
2. 明示的なチェック:
*/
const items = data && data.results 
  ? data.results.map(item => item.name) 
  : [];

/*
3. デフォルト値の設定:
*/
const { results = [] } = data || {};
const items = results.map(item => item.name);

// 最適化前のコード
function findDuplicates(arr) {
  const duplicates = [];
  for (let i = 0; i < arr.length; i++) {
    for (let j = i + 1; j < arr.length; j++) {
      if (arr[i] === arr[j] && !duplicates.includes(arr[i])) {
        duplicates.push(arr[i]);
      }
    }
  }
  return duplicates;
}

// ChatGPTによる最適化提案
function findDuplicates(arr) {
  const seen = new Set();
  const duplicates = new Set();

  for (const item of arr) {
    if (seen.has(item)) {
      duplicates.add(item);
    } else {
      seen.add(item);
    }
  }

  return Array.from(duplicates);
}
// 時間計算量: O(n²) → O(n)

// レビュー対象のコード
async function fetchUserData(userId) {
  try {
    const response = await fetch(`/api/users/${userId}`);
    const data = await response.json();
    return data;
  } catch (e) {
    console.log(e);
  }
}

/*
ChatGPTのレビューコメント：
1. エラーハンドリングの改善が必要
2. レスポンスステータスのチェックが不足
3. エラー時の戻り値が未定義

改善案：
*/
async function fetchUserData(userId) {
  try {
    const response = await fetch(`/api/users/${userId}`);

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Failed to fetch user data:', error);
    // エラーを上位に伝播するか、デフォルト値を返す
    throw error; // または return null;
  }
}

質問例：
「Reactアプリケーションで状態管理ライブラリを選定しています。
以下の要件があります：
- 中規模のECサイト（商品数1000点程度）
- リアルタイムな在庫更新が必要
- TypeScriptを使用
- 開発チームは3名（React経験1年程度）

Redux、Zustand、Recoilのうち、どれが適していますか？」

ChatGPTの回答を基に、以下のような比較表を作成：

// NG: 機密情報を含むコード
const API_KEY = 'sk-1234567890abcdef'; // 実際のAPIキー
const DATABASE_PASSWORD = 'mySecretPassword123'; // 実際のパスワード

// OK: 環境変数を使用
const API_KEY = process.env.API_KEY;
const DATABASE_PASSWORD = process.env.DB_PASSWORD;

// AIが生成したコードも必ずテストを書く
function aiGeneratedFunction(input) {
  // AI generated code here
}

// テストで動作を確認
describe('aiGeneratedFunction', () => {
  it('should handle edge cases', () => {
    expect(aiGeneratedFunction(null)).toBe(/* expected */);
    expect(aiGeneratedFunction([])).toBe(/* expected */);
  });
});

// AIが生成したコードのパフォーマンスを測定
console.time('AI generated');
aiGeneratedFunction(largeDataSet);
console.timeEnd('AI generated');

console.time('Optimized');
optimizedFunction(largeDataSet);
console.timeEnd('Optimized');

// チーム内ルールの例
/*
* AIツール使用ガイドライン
* 1. 生成されたコードには必ず /* AI-Generated */ コメントを付ける
* 2. セキュリティ関連のコードは手動で書く
* 3. 生成されたコードも通常のコードレビューを受ける
* 4. テストカバレッジ80%以上を維持する
*/

従来のアプローチ：
設計 → 人間がコーディング（効率化ツール使用） → テスト → デバッグ
                  ↑ ここがボトルネック

CodeAGIのアプローチ：
設計 → AIが自動生成 → 完成
        ↑ 2分で完了