Webサイト制作を始めたばかりの方や、効率的な開発環境を探している方に向けて、フロントエンド開発キットの使い方を具体的に解説します。HTML、PHP、WordPressの3つの用途に対応しており、GulpやDocker、Makefileなどの便利な仕組みを活用できます。この記事を読めば、面倒な初期設定に悩まず、すぐに制作に集中できる環境を手に入れられます。
フロントエンド開発キットとは
フロントエンド開発キットは、Webサイト制作に必要なツールや設定をまとめて導入できるテンプレートです。HTMLサイト、PHPサイト、WordPressテーマ開発の3つの用途に合わせてブランチが用意されており、それぞれの開発スタイルに最適化されています。Gulpによる自動ビルドやDockerによる仮想環境、Makefileによるコマンドの簡略化など、現場で役立つ仕組みが詰まっています。
| ブランチ名 | 主な用途 | 主な特徴 |
|---|---|---|
| html | 静的HTMLサイト | Gulp、Sass、Nunjucks、画像最適化 |
| php | PHPサイト | Docker、Gulp、Sass、Nunjucks、画像最適化 |
| wordpress | WordPressテーマ開発 | Docker、Gulp、WPテーマ雛形、画像最適化 |
HTMLサイト向けブランチ
HTMLサイト向けのブランチでは、静的なWebページを効率よく制作できるように、Gulpを使った自動ビルドやSassのコンパイル、Nunjucksによるテンプレート管理、画像の最適化などが組み込まれています。例えば、Sassファイルを保存するだけで自動的にCSSに変換され、画像も最適なサイズに圧縮されるため、手作業での変換や圧縮の手間が省けます。Nunjucksというテンプレートエンジンを使うことで、共通パーツの管理やページごとのレイアウト変更も簡単に行えます。これにより、複数ページのWebサイトでも一貫性を保ちながら効率的に制作を進められます。
PHPサイト向けブランチ
PHPサイト向けのブランチでは、Dockerを活用して仮想環境を構築できるため、パソコンの環境に依存せずに開発を進められます。Dockerとは、アプリケーションを動かすための環境をまるごとパッケージ化できる仕組みで、複数人での開発や本番環境への移行もスムーズに行えます。Gulpによる自動ビルドやSass、Nunjucks、画像最適化も標準で組み込まれているため、フロントエンドの作業も効率化できます。Makefileを使うことで、複雑なコマンドも「make all」や「make start」といった簡単な命令で実行できるようになっています。これにより、初心者でも迷わずに開発を始められます。
WordPressテーマ開発向けブランチ
WordPressテーマ開発向けのブランチでは、WordPress本体の自動ダウンロードやセットアップ、PHPのバージョン切り替え、MySQLデータベースの永続化など、WordPress開発に必要な機能が一通り揃っています。GulpによるSassやJavaScript、画像の最適化も自動で行われるため、テーマ制作に集中できます。テーマの雛形ファイルも最初から用意されているので、ゼロからファイルを作る手間がありません。DockerとMakefileを組み合わせることで、複雑な環境構築も「make all」一発で完了します。これにより、WordPress初心者でも安心してテーマ開発に取り組めます。
必要なツールと事前準備
フロントエンド開発キットを使うためには、いくつかのツールを事前にインストールしておく必要があります。以下の表にまとめました。
| ツール名 | 用途 | インストール方法（macOS例） |
|---|---|---|
| Node.js | JavaScript実行環境 | brew install node |
| npm | パッケージ管理 | Node.jsに同梱 |
| Docker | 仮想環境構築 | brew install --cask docker |
| Make | コマンド自動化 | brew install make |
Node.jsとnpmはWeb制作でよく使われるJavaScriptの実行環境とパッケージ管理ツールです。Dockerは仮想環境を作るためのソフトウェアで、Makeは複数のコマンドをまとめて実行できる仕組みです。これらを事前に用意しておくことで、スムーズに開発を始められます。
セットアップ手順
1. リポジトリのクローン
まず、GitHubからリポジトリをクローンします。
コマンド例：
git clone https://github.com/axcelwork/frontend-develop-kit
cd frontend-develop-kit
2. ブランチの切り替え
用途に合わせてブランチを切り替えます。
コマンド例：
git checkout html
「html」「php」「wordpress」から選択できます。
3. 必要なファイルの準備
PHPやWordPressブランチの場合は、環境変数ファイル（.env）を用意します。
cp .env.example .env
必要に応じてエディタで編集します。
4. セットアップコマンドの実行
初回セットアップは「make all」を実行します。
make all
2回目以降は「make start」で開発環境を起動できます。
make start
主なコマンド一覧
| コマンド | 内容 |
|---|---|
| make all | 初回セットアップ（Docker、npm、開発サーバー起動） |
| make start | 2回目以降の起動 |
| make install | npmパッケージのインストール |
| make dev | 開発サーバーの起動 |
| make up | Dockerコンテナの起動（php/wordpress） |
| make download-wordpress | WordPress本体のダウンロード（wordpress） |
コマンドはすべてMakefileにまとめられているため、複雑な手順を覚える必要がありません。初心者でも迷わず操作できます。
ディレクトリ構成の例
プロジェクトのディレクトリ構成は以下のようになっています。
| ディレクトリ/ファイル | 内容 |
|---|---|
| src/ | ソースファイル（sass、js、templates、img） |
| public_html/ | ビルド出力先（assets、PHP/WordPress公開ディレクトリ） |
| docker/ | Docker設定（php/wordpress） |
| gulpfile.js | Gulpの設定ファイル |
| Makefile | ビルドスクリプト |
| package.json | npmの設定ファイル |
| docker-compose.yml | Docker Composeの設定（php/wordpress） |
この構成により、ファイルの管理やビルド作業が整理され、作業効率が向上します。
よく使う専門用語の解説
| 用語 | 意味 |
|---|---|
| Gulp | 作業の自動化ツール。Sassのコンパイルや画像の圧縮などを自動で行う |
| Docker | 仮想環境を作るソフトウェア。開発環境をパソコンごとに統一できる |
| Makefile | 複数のコマンドをまとめて実行できる設定ファイル |
| Nunjucks | テンプレートエンジン。HTMLの共通パーツ管理やレイアウト変更が簡単になる |
| Sass | CSSを効率よく書くための拡張言語。変数や入れ子構造が使える |
トラブルシューティング
| 状況 | 解決方法 |
|---|---|
| 開発サーバーが起動しない | make devを再実行 |
| npmパッケージのインストール失敗 | make installを実行 |
| Dockerが起動しない | docker psやdocker-compose logsで状態確認 |
| ポートが競合している | 別のアプリを終了してから再度起動 |
困ったときは、コマンドを再実行したり、エラーメッセージを確認することで多くの問題を解決できます。
まとめ
フロントエンド開発キットを使えば、HTML、PHP、WordPressの各用途に合わせて、効率的な開発環境をすぐに構築できます。GulpやDocker、Makefileなどの仕組みを活用することで、手作業の手間を減らし、制作に集中できるようになります。初心者でも迷わず使えるように設計されているため、Web制作の現場で役立つこと間違いありません。
詳細や最新情報は、下記のGitHubリポジトリを参照してください。
GitHubリポジトリ
https://github.com/axcelwork/frontend-develop-kit