Develop Skill / 開発技術マップ
Web開発において必要な技術スタック、ツール、環境構築に関するナレッジベースです。
目次
- 基礎概念
- ソースコードのバージョン管理
- ライブラリ・パッケージ・言語バージョン管理
- プリプロセッサ・トランスパイラ・バンドラ
- フレームワーク
- 品質管理 (Lint/Format/Test)
- インフラ・デプロイ (FTP/SSH/CI/CD)
- ローカル開発環境の構築
基礎概念
現代のWeb開発では、単にコードを書くだけでなく、効率的な管理、自動化、品質担保を行うための「環境」を作る能力が求められます。
- バージョン管理: 変更履歴の保存、チーム開発の競合防止。
- パッケージ管理: 外部ライブラリの依存関係解決。
- ビルド/トランスパイル: 開発しやすい言語（Sass, TS）から実行可能な言語（CSS, JS）への変換。
- Lint (静的解析): バグの未然防止とコーディング規約の統一。
- CI/CD: テストやデプロイの自動化。
- 仮想環境: Docker等を用いた、OSに依存しない開発環境の統一。
ソースコードのバージョン管理
ソースコードの管理は開発の要です。過去の変更点を確認したり、作業を巻き戻したりできます。 最大のメリットは、ブランチ (Branch) 機能を利用し、本番環境に影響を与えずに新機能開発やバグ修正を複数人で並行して行える点です。
ソフトウェア
- Git: 現在のデファクトスタンダード。分散型管理。
- Subversion (SVN): 集中型管理（レガシーシステム等で使用）。
リモートリポジトリサービス (Git Hosting)
ローカルPCだけでなく、ウェブサービスを利用してネット上でソースコードを管理します。
- GitHub: 世界最大のシェア。
- GitLab: CI/CD機能が強力。オンプレミス版もあり。
- Bitbucket: JiraなどのAtlassian製品との連携に強み。
ライブラリ・パッケージ・言語バージョン管理
言語自体のバージョン管理と、プロジェクトごとのライブラリ管理を使い分けます。
OS / システムパッケージ
- macOS: Homebrew
- Windows: Winget, Chocolatey
言語別管理ツール
| 言語 | パッケージ管理 (ライブラリ) | 言語バージョン管理 (本体切り替え) |
|---|---|---|
| Node.js | npm, Yarn, pnpm | Volta, nvm, nodebrew |
| PHP | Composer | phpbrew, Dockerでの切り替え |
| Ruby | Gem (Bundler) | rbenv, rvm |
| Python | pip, Poetry | pyenv |
Note: 近年は
asdfやMiseのような、1つのツールで複数言語のバージョンを管理できるツールも人気です。
プリプロセッサ・トランスパイラ・バンドラ
ブラウザが解釈できる形式へ変換する技術群です。
- CSSプリプロセッサ
- Sass (SCSS): 変数やネストが使える標準的なツール。
- PostCSS: ベンダープレフィックス付与や次世代CSS構文の利用。
- JSトランスパイラ
- TypeScript: 型定義による堅牢な開発。JSのスーパーセット。
- Babel: 新しいJS構文を古いブラウザ向けに変換。
- バンドラ / タスクランナー
- Vite: 高速な次世代フロントエンドツール。現在の主流。
- Webpack: 高機能で複雑な構成に対応できるバンドラ。
- Gulp: タスクランナー（レガシーだが現役）。
フレームワーク
フロントエンド (JavaScript)
- React / Next.js: コンポーネント指向。現在の主流。
- Vue.js / Nuxt: 学習コストが低く導入しやすい。
- Svelte: 仮想DOMを使わない高速なフレームワーク。
バックエンド (PHP)
- Laravel: 機能豊富で記述しやすい。PHPのデファクト。
- Symfony: 堅牢で大規模向け。
- WordPress: CMS兼フレームワークとして利用。
CSS
- Tailwind CSS: ユーティリティファースト。
- Bootstrap: UIコンポーネント集。
品質管理 (Lint/Format/Test)
Lint (静的解析) & Formatter
- ESLint: JavaScript/TypeScriptの構文チェック。
- Prettier: コードの自動整形（フォーマッタ）。
- PHPCS / PHPStan: PHPの規約チェックと型解析。
- Stylelint: CSS/SCSSのチェック。
テストツール
- 単体テスト: Jest, Vitest (JS) / PHPUnit (PHP)
- E2Eテスト: Cypress, Playwright (ブラウザ操作の自動化)
インフラ・デプロイ (FTP, SSH, CI/CD)
接続・転送
- SSH: 安全なリモート操作。公開鍵認証が必須。
- SFTP / SCP / Rsync: 安全なファイル転送（FTPは非推奨）。
ビルド・デプロイ自動化 (CI/CD)
手動でのFTPアップロードを卒業し、Gitへのプッシュをトリガーに自動で反映させる仕組みです。
- GitHub Actions: GitHub標準のCI/CD。
- Deployer: PHP製のデプロイツール（Rsync等を自動化）。
ローカル開発環境の構築
仮想化技術
現在は Docker を用いて、プロジェクトごとに環境をコード（docker-compose.yml）で定義するのが主流です。
- Docker Desktop / OrbStack: コンテナ型仮想化。
- XAMPP / MAMP: インストール型（学習用としては現役だが、バージョン切り替えが困難）。
CMS環境の構築 (Docker推奨)
WordPress
Docker Composeを使うことで、DBとWebサーバーをセットで即座に立ち上げられます。 * Quickstart: Compose and WordPress (Docker公式) * wp-env (WordPress公式の環境構築ツール)
a-blog cms
Movable Type (MT)
クラウドIDE (Cloud Development)
ブラウザ上で開発環境を完結させる手法です。
- GitHub Codespaces: ブラウザでVS Codeが起動し、即座に開発可能。
- AWS Cloud9: EC2上で動作するIDE。
- VS Code Remote Containers: ローカルのVS CodeからDockerコンテナ内で開発を行う技術（Dev Containers）。