Docker環境でNode.jsを学ぼう_Part4_その他ツール編

# ローカルで作業ディレクトリを作成
mkdir yarn-study && cd yarn-study

# Dockerコンテナを起動
docker run -it --rm -v $(pwd):/work -w /work node:20 bash

# Node.js 20にはyarnが含まれている（Corepack経由）
corepack enable
yarn --version

# プロジェクト初期化
yarn init -y

# package.jsonを確認
cat package.json

{
  "name": "work",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

# パッケージを追加
yarn add lodash

# 開発用パッケージを追加
yarn add --dev jest

# パッケージを確認
cat package.json

# yarn.lockを確認
cat yarn.lock

# package.jsonを更新
cat << 'EOF' > package.json
{
  "name": "yarn-study",
  "version": "1.0.0",
  "scripts": {
    "hello": "echo 'Hello from yarn!'",
    "test": "jest"
  },
  "dependencies": {
    "lodash": "^4.17.21"
  },
  "devDependencies": {
    "jest": "^29.0.0"
  }
}
EOF

# スクリプト実行（runを省略可能）
yarn hello

# インストール済みパッケージの一覧
yarn list --depth=0

# 特定パッケージの情報
yarn info lodash

# キャッシュのクリア
yarn cache clean

# アップグレード可能なパッケージを確認
yarn outdated

exit

/* 従来のCSS：セレクタが長くなりがち */
.navbar {
  background-color: #333;
}

.navbar ul {
  list-style: none;
}

.navbar ul li {
  display: inline-block;
}

.navbar ul li a {
  color: white;
  padding: 10px;
}

.navbar ul li a:hover {
  color: #007bff;
}

/* SCSS：ネストで構造が明確 */
$primary-color: #007bff;
$dark-bg: #333;

.navbar {
  background-color: $dark-bg;
  
  ul {
    list-style: none;
    
    li {
      display: inline-block;
      
      a {
        color: white;
        padding: 10px;
        
        &:hover {
          color: $primary-color;
        }
      }
    }
  }
}

# ローカルで作業ディレクトリを作成
mkdir sass-study && cd sass-study

# Dockerコンテナを起動
docker run -it --rm -v $(pwd):/work -w /work node:20 bash

# コンテナ内で実行
npm init -y

# Sassをインストール（Dart Sass）
npm install --save-dev sass

# ディレクトリを作成
mkdir -p src/scss dist/css

# 変数ファイル
cat << 'EOF' > src/scss/_variables.scss
// カラーパレット
$primary-color: #007bff;
$secondary-color: #6c757d;
$success-color: #28a745;
$danger-color: #dc3545;
$dark-color: #343a40;
$light-color: #f8f9fa;

// フォント
$font-family-base: 'Helvetica Neue', Arial, sans-serif;
$font-size-base: 16px;

// スペーシング
$spacing-unit: 8px;
EOF

# ミックスインファイル
cat << 'EOF' > src/scss/_mixins.scss
// フレックスボックスセンタリング
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// ボタンスタイル
@mixin button-style($bg-color, $text-color: white) {
  background-color: $bg-color;
  color: $text-color;
  padding: $spacing-unit * 1.5 $spacing-unit * 3;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.2s;
  
  &:hover {
    opacity: 0.9;
  }
}

// レスポンシブブレークポイント
@mixin respond-to($breakpoint) {
  @if $breakpoint == 'sm' {
    @media (max-width: 576px) { @content; }
  } @else if $breakpoint == 'md' {
    @media (max-width: 768px) { @content; }
  } @else if $breakpoint == 'lg' {
    @media (max-width: 992px) { @content; }
  }
}
EOF

# メインSCSSファイル
cat << 'EOF' > src/scss/style.scss
// パーシャルファイルをインポート
@use 'variables' as *;
@use 'mixins' as *;

// リセット
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

// ベーススタイル
body {
  font-family: $font-family-base;
  font-size: $font-size-base;
  line-height: 1.6;
  color: $dark-color;
  background-color: $light-color;
}

// ヘッダー
.header {
  background-color: $dark-color;
  padding: $spacing-unit * 2;
  
  &__title {
    color: white;
    font-size: $font-size-base * 1.5;
  }
  
  &__nav {
    margin-top: $spacing-unit;
    
    ul {
      list-style: none;
      @include flex-center;
      gap: $spacing-unit * 2;
      
      li a {
        color: $light-color;
        text-decoration: none;
        
        &:hover {
          color: $primary-color;
        }
      }
    }
  }
}

// メインコンテンツ
.main {
  padding: $spacing-unit * 4;
  max-width: 1200px;
  margin: 0 auto;
  
  @include respond-to('md') {
    padding: $spacing-unit * 2;
  }
}

// カード
.card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: $spacing-unit * 3;
  margin-bottom: $spacing-unit * 3;
  
  &__title {
    color: $primary-color;
    margin-bottom: $spacing-unit * 2;
  }
  
  &__content {
    color: $secondary-color;
  }
}

// ボタン
.btn {
  &--primary {
    @include button-style($primary-color);
  }
  
  &--secondary {
    @include button-style($secondary-color);
  }
  
  &--success {
    @include button-style($success-color);
  }
  
  &--danger {
    @include button-style($danger-color);
  }
}
EOF

# SCSSをCSSにコンパイル
npx sass src/scss/style.scss dist/css/style.css

# 生成されたCSSを確認
cat dist/css/style.css

# package.jsonを更新
cat << 'EOF' > package.json
{
  "name": "sass-study",
  "version": "1.0.0",
  "scripts": {
    "sass": "sass src/scss/style.scss dist/css/style.css",
    "sass:watch": "sass --watch src/scss/style.scss:dist/css/style.css",
    "sass:compressed": "sass src/scss/style.scss dist/css/style.min.css --style=compressed"
  },
  "devDependencies": {
    "sass": "^1.69.0"
  }
}
EOF

# ウォッチモードで起動（変更を自動検知）
npm run sass:watch

# 圧縮版を生成（本番用）
npm run sass:compressed

# 圧縮版を確認
cat dist/css/style.min.css

# HTMLファイルを作成
cat << 'EOF' > dist/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sass Study</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header class="header">
        <h1 class="header__title">Sass Study</h1>
        <nav class="header__nav">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <main class="main">
        <div class="card">
            <h2 class="card__title">Sassの特徴</h2>
            <p class="card__content">
                ネスト、変数、ミックスインなどの機能でCSSの開発効率が向上します。
            </p>
        </div>
        
        <div class="card">
            <h2 class="card__title">ボタンサンプル</h2>
            <div class="card__content">
                <button class="btn btn--primary">Primary</button>
                <button class="btn btn--secondary">Secondary</button>
                <button class="btn btn--success">Success</button>
                <button class="btn btn--danger">Danger</button>
            </div>
        </div>
    </main>
</body>
</html>
EOF

exit

# Node.js 18
docker run -it --rm node:18 node -v
# 出力: v18.x.x

# Node.js 20
docker run -it --rm node:20 node -v
# 出力: v20.x.x

# Node.js 22
docker run -it --rm node:22 node -v
# 出力: v22.x.x

# nvmをインストール（最新バージョンは公式リポジトリを確認）
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

# シェル設定を再読み込み
source ~/.bashrc  # または ~/.zshrc

# インストール確認
nvm --version

# インストール可能なバージョン一覧
nvm ls-remote

# LTS版をインストール
nvm install --lts

# 特定バージョンをインストール
nvm install 18.19.0
nvm install 20.10.0

# インストール済みバージョン一覧
nvm ls

# バージョンを切り替え（現在のターミナルのみ）
nvm use 18.19.0

# デフォルトバージョンを設定（永続化）
nvm alias default 20.10.0

# プロジェクトにバージョンを固定
echo "20.10.0" > .nvmrc

# .nvmrcのバージョンを使用
nvm use

# nodenvをクローン
git clone https://github.com/nodenv/nodenv.git ~/.nodenv

# node-buildプラグインをインストール
git clone https://github.com/nodenv/node-build.git ~/.nodenv/plugins/node-build

# パスを通す（~/.bashrcまたは~/.zshrcに追加）
echo 'export PATH="$HOME/.nodenv/bin:$PATH"' >> ~/.bashrc
echo 'eval "$(nodenv init -)"' >> ~/.bashrc

# 再読み込み
source ~/.bashrc

# 確認
nodenv --version

# インストール可能なバージョン一覧
nodenv install -l

# 特定バージョンをインストール
nodenv install 20.10.0

# グローバルバージョンを設定
nodenv global 20.10.0

# プロジェクトごとのバージョン設定（.node-versionファイル作成）
nodenv local 18.19.0

# インストール済みバージョン一覧
nodenv versions

# 現在のバージョン確認
nodenv version
node -v

# プロジェクトごとに異なるNode.jsバージョンを使用

# プロジェクトA（Node.js 18）
cd project-a
docker run -it --rm -v $(pwd):/work -w /work node:18 bash

# プロジェクトB（Node.js 20）
cd project-b
docker run -it --rm -v $(pwd):/work -w /work node:20 bash

# プロジェクトC（Node.js 22）
cd project-c
docker run -it --rm -v $(pwd):/work -w /work node:22 bash

# プロジェクトルートにdocker-compose.ymlを作成
cat << 'EOF' > docker-compose.yml
services:
  app:
    image: node:20  # ここでバージョンを指定
    volumes:
      - .:/work
    working_dir: /work
    command: bash
    tty: true
    stdin_open: true
    ports:
      - "3000:3000"
EOF

# 起動
docker compose up -d

# コンテナに入る
docker compose exec app bash

# 終了
docker compose down

# すべての学習ディレクトリを削除
rm -rf yarn-study sass-study