開発効率化Tips集 - 日々の作業を10倍速にする実践テクニック¶

# ~/.bashrc or ~/.zshrc
alias gs='git status'
alias ga='git add .'
alias gc='git commit -m'
alias gp='git push'
alias gb='git branch'
alias ll='ls -la'
alias ..='cd ..'
alias ...='cd ../..'
alias py='python3'
alias serve='python3 -m http.server 8000'

# Ctrl+R で履歴を検索
# より高度な履歴検索にはfzfを使用
brew install fzf

# ~/.bashrc に追加
[ -f ~/.fzf.bash ] && source ~/.fzf.bash

# よく使うディレクトリへのショートカット
alias proj='cd ~/Documents/projects'
alias docs='cd ~/Documents'
alias desk='cd ~/Desktop'

# または autojump を使用
brew install autojump
# ~/.bashrc に追加
[[ -s $(brew --prefix)/etc/profile.d/autojump.sh ]] && . $(brew --prefix)/etc/profile.d/autojump.sh

# グローバル設定で効率化
git config --global alias.co checkout
git config --global alias.br branch  
git config --global alias.ci commit
git config --global alias.st status
git config --global alias.unstage 'reset HEAD --'
git config --global alias.last 'log -1 HEAD'
git config --global alias.visual '!gitk'

# より便利なログ表示
git config --global alias.lg "log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit"

# プロジェクト作成時に自動でgitignoreを生成
curl -L https://www.gitignore.io/api/node,python,macos,windows,linux > .gitignore

# 作業中のファイルを一時保存
git stash push -m "WIP: 作業中の機能"

# 名前付きstashで管理
git stash list
git stash apply stash@{0}
git stash drop stash@{0}

// JavaScript用スニペット例
{
  "Console log": {
    "prefix": "cl",
    "body": ["console.log($1);"],
    "description": "Console log"
  },
  "Function": {
    "prefix": "fn",
    "body": [
      "function $1($2) {",
      "  $3",
      "}"
    ],
    "description": "Function declaration"
  }
}

<!-- div.container>ul.list>li.item*3>a -->
<div class="container">
  <ul class="list">
    <li class="item"><a href=""></a></li>
    <li class="item"><a href=""></a></li>
    <li class="item"><a href=""></a></li>
  </ul>
</div>

# VS Code拡張機能「Live Server」を使用
# または
npx live-server

{
  "scripts": {
    "dev": "npm run build && npm run serve",
    "build": "webpack --mode production",
    "serve": "live-server dist/",
    "test": "jest",
    "lint": "eslint src/ --fix",
    "deploy": "npm run build && gh-pages -d dist"
  }
}

# .env ファイル
NODE_ENV=development
API_URL=http://localhost:3000
DATABASE_URL=postgresql://localhost/myapp

// 使用例
const apiUrl = process.env.API_URL || 'https://api.example.com';

# 簡単なNode.js環境
FROM node:16-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "start"]

// コンソールでの便利技
console.table(data);  // テーブル形式で表示
console.time('timer'); // 時間計測開始
console.timeEnd('timer'); // 時間計測終了

// DOM要素を簡単選択
$('selector')  // document.querySelector()の短縮
$$('selector') // document.querySelectorAll()の短縮

// 関数の実行時間を測定
function measurePerformance(func, ...args) {
  const start = performance.now();
  const result = func(...args);
  const end = performance.now();
  console.log(`実行時間: ${end - start}ms`);
  return result;
}

# コマンドラインでJSONを整形
curl -s https://api.example.com/data | python -m json.tool

# または jq を使用
curl -s https://api.example.com/data | jq .

/* 簡単なグリッドレイアウト */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

/* センタリングの決定版 */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// SCSS変数で管理
$breakpoints: (
  mobile: 480px,
  tablet: 768px,
  desktop: 1024px,
  wide: 1200px
);

@mixin respond-to($breakpoint) {
  @media (min-width: map-get($breakpoints, $breakpoint)) {
    @content;
  }
}

// 使用例
.container {
  width: 100%;

  @include respond-to(tablet) {
    width: 750px;
  }

  @include respond-to(desktop) {
    width: 1000px;
  }
}

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --danger-color: #e74c3c;
  --font-family: 'Roboto', sans-serif;
  --border-radius: 4px;
  --box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.button {
  background-color: var(--primary-color);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}

.loading {
  border: 2px solid #f3f3f3;
  border-top: 2px solid var(--primary-color);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

# .github/workflows/deploy.yml
name: Deploy
on:
  push:
    branches: [ main ]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Setup Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '16'
    - run: npm install
    - run: npm run build
    - run: npm run deploy

{
  "scripts": {
    "prebuild": "rm -rf dist",
    "build": "webpack --mode production",
    "postbuild": "cp -r public/* dist/",
    "pretest": "npm run lint",
    "test": "jest",
    "start": "npm run build && npm run serve"
  }
}