【初心者向け】Vue.jsとGitHub連携入門：バージョン管理からデプロイまで徹底解説

はじめに

Vue.jsを使った開発を始めたばかりの皆さん、こんにちは！ Vue.jsで動的なWebアプリケーションを作成するのはとても楽しいですね。しかし、開発を進めていく上で、避けて通れないのが「バージョン管理」と「コードの共有」です。そして、それらの強力な味方となるのが Git と GitHub です。

このガイドでは、Vue.jsプロジェクトの開発において、なぜGitとGitHubが重要なのか、そして具体的にどのようにこれらを活用していくのかを、初心者の方にも分かりやすく、ステップバイステップで詳細に解説します。

最終的には、皆さんのVue.jsプロジェクトをGitHubで管理し、さらにはGitHub Pagesを使って無料で公開するところまでを目指します。約5000語というボリュームで、必要な情報を網羅的に提供しますので、じっくり読み進めてください。

なぜVue.js開発でGitHubを使うのか？

Vue.jsに限らず、現代のソフトウェア開発においてGitとGitHubはデファクトスタンダードとなっています。その主な理由をいくつかご紹介します。

バージョン管理: コードの変更履歴を記録し、いつでも過去の状態に戻したり、特定の時点のコードを確認したりできます。これにより、「あの時の動いていたコードはどこに行った…？」といった混乱を防ぎ、安心して開発を進められます。
共同作業: 複数人で一つのプロジェクトを開発する際に必須です。それぞれの開発者が独立して作業を進め、後で変更内容を統合することができます。GitHubは、その共同作業を円滑に進めるための様々な機能（プルリクエスト、課題管理など）を提供します。
バックアップ: ローカル環境だけでなく、リモート（GitHub）にもコードを保存しておくことで、万が一ローカル環境に問題が発生してもコードを失う心配がありません。
ポートフォリオ: GitHubで自分のコードを公開することで、自身のスキルをアピールできます。就職活動や転職活動の際に、企業に自分の開発実績を見てもらうための重要なツールとなります。
デプロイ: GitHubと連携することで、コードの変更を検知して自動的にWebサイトを公開（デプロイ）する仕組みを簡単に構築できます。特にGitHub Pagesは、静的なVue.jsアプリケーションを手軽にホスティングするのに非常に便利です。

これらのメリットを享受するためにも、Vue.js開発と並行してGitとGitHubの使い方をマスターすることは非常に重要です。

対象読者

Vue.jsで簡単なアプリケーションを作成したことがある方
GitやGitHubという言葉は聞いたことがあるが、使い方がよく分からない方
自分のVue.jsプロジェクトをGitHubで管理し、公開したい方
コマンドライン（ターミナル）の基本的な操作に抵抗がない方

全くのプログラミング初心者というよりは、Vue.jsでの開発がある程度できるようになった方を想定しています。GitやGitHubの経験は問いません。

前提知識

このガイドを進めるにあたって、以下の知識があるとスムーズに理解できます。もし不安な点があれば、先に簡単なチュートリアルなどで補っておくことをお勧めします。

Vue.jsの基本的なプロジェクト作成: Vue CLI や Vite を使ってプロジェクトを作成し、開発サーバーを起動できる程度の知識。
ターミナル/コマンドプロンプトの基本的な操作: ディレクトリの移動 (cd)、コマンドの実行などができること。
Gitの基本的な概念: 「リポジトリ」、「コミット」、「プッシュ」といった言葉の意味を知っていると、より理解が深まりますが、知らなくてもこの記事で解説します。

環境構築

Vue.js開発およびGit/GitHub連携に必要なツールが揃っているか確認しましょう。もしインストールされていないものがあれば、以下の手順でインストールしてください。

Node.jsとnpm (または yarn) のインストール確認

Vue.jsの開発にはNode.jsが必要です。Node.jsをインストールすると、パッケージ管理ツールのnpmも一緒にインストールされます。最近ではyarnやpnpmといったツールも使われますが、ここでは一般的に使われるnpmを例に説明します。

ターミナルを開き、以下のコマンドを実行してバージョンが表示されるか確認してください。

bash node -v npm -v

バージョンが表示されない場合、Node.jsの公式サイトからインストーラーをダウンロードしてインストールしてください。
Node.js公式サイト

Vue CLI (または Vite) のインストール確認

Vue.jsプロジェクトを作成するためのツールが必要です。以前はVue CLIが主流でしたが、最近はViteが高速で人気があります。どちらを使っても構いませんが、ここでは両方の作成コマンドを紹介します。

Vue CLI (レガシー):
もしVue CLIを使う場合は、グローバルにインストールが必要です。

bash npm install -g @vue/cli

または

bash yarn global add @vue/cli

インストール後、バージョンを確認できます。

bash vue --version

Vite (推奨):
Viteはプロジェクトごとにインストールされることが多いため、グローバルインストールは必須ではありません。プロジェクト作成時に自動的にインストールされます。

Gitのインストール

Gitは、バージョン管理を行うためのツールです。GitHubはこのGitの仕組みを利用したWebサービスです。

ターミナルを開き、以下のコマンドを実行してバージョンが表示されるか確認してください。

bash git --version

バージョンが表示されない場合、以下の公式サイトからインストーラーをダウンロードしてインストールしてください。
Git公式サイト

インストール後、Gitを使う前に初期設定としてユーザー名とメールアドレスを設定しておくことをお勧めします。これは、誰がコミットを行ったかを識別するために使われます。

bash git config --global user.name "あなたの名前" git config --global user.email "あなたのメールアドレス"

"あなたの名前"と"あなたのメールアドレス"は、実際にGitHubアカウントに登録する予定の名前とメールアドレスに合わせるのが一般的です。

GitHubアカウントの作成

GitHubは、GitリポジトリをホスティングするWebサービスです。コードの公開、共同作業、Issueトラッキングなど、様々な機能を提供します。

まだアカウントを持っていない場合は、以下の公式サイトにアクセスして無料アカウントを作成してください。
GitHub公式サイト

アカウント作成後、GitHubにログインできるようになれば準備完了です。

Vue.jsプロジェクトの作成

GitHubに連携する対象となるVue.jsプロジェクトを作成しましょう。ここでは、新しいプロジェクトを作成する手順を示します。既にあるプロジェクトを使う場合は、このステップはスキップしてください。

プロジェクトを作成したいディレクトリにターミナルで移動し、以下のいずれかのコマンドを実行します。

Viteを使う場合 (推奨)

Viteは高速な開発サーバーとビルドツールを備えており、最近のVue.js開発でよく使われます。

bash npm create vue@latest

または

bash yarn create vue@latest

または

bash pnpm create vue@latest

コマンドを実行すると、対話形式でプロジェクト名や利用する機能（TypeScript、Router、Pinia、Testing、ESLint、Prettierなど）を聞かれます。今回は入門のため、必要最低限の機能（例えばTypeScriptなし、Routerなしなど）を選択しても構いません。

例：
Project name: my-vue-github-app
Add TypeScript? No
Add JSX Support? No
Add Vue Router for Single Page Application development? No
Add Pinia for State Management? No
Add Vitest for Unit Testing? No
Add an End-to-End Testing Solution? No
Add ESLint for Code Quality? No
Add Prettier for Code Formatting? No

選択後、指定したプロジェクト名（例: my-vue-github-app）のディレクトリが作成されます。そのディレクトリに移動し、依存関係をインストールします。

bash cd my-vue-github-app npm install

または

bash yarn install

または

bash pnpm install

これでプロジェクトの準備は完了です。開発サーバーを起動して、正しく動作するか確認できます。

bash npm run dev

または

bash yarn dev

または

bash pnpm dev

ブラウザで表示されるURL（通常は http://localhost:5173/ など）にアクセスして確認してください。

Vue CLIを使う場合 (レガシー)

Vue CLIでプロジェクトを作成する場合は、以下のコマンドを実行します。

bash vue create my-vue-github-app

または

bash vue ui # GUIで作成する場合

vue create を実行すると、プリセットの選択や手動設定を選べます。ここではデフォルトのプリセット（Vue 3）を選択しても構いません。

例：
? Please pick a preset: Default (Vue 3) ([Vue 3] babel, eslint)

選択後、指定したプロジェクト名（例: my-vue-github-app）のディレクトリが作成され、依存関係のインストールが自動で行われます。

プロジェクトディレクトリに移動して、開発サーバーを起動します。

bash cd my-vue-github-app npm run serve

または

bash yarn serve

ブラウザで表示されるURL（通常は http://localhost:8080/ など）にアクセスして確認してください。

既存のVue.jsプロジェクトとGitの連携

新しくプロジェクトを作成した場合も、既に手元にあるプロジェクトを使う場合も、まずはそのプロジェクトをGitで管理できるようにします。

プロジェクトディレクトリへの移動

ターミナルで、Git管理下に置きたいVue.jsプロジェクトのルートディレクトリに移動してください。

bash cd path/to/your/vue-project

例:

bash cd my-vue-github-app

`git init` によるローカルリポジトリの作成

プロジェクトディレクトリ内で、以下のコマンドを実行します。

bash git init

このコマンドは、現在のディレクトリに .git という隠しディレクトリを作成します。この .git ディレクトリが、プロジェクトのバージョン管理情報（変更履歴、コミット情報など）をすべて記録する「ローカルリポジトリ」となります。

実行後、ターミナルに Initialized empty Git repository in /path/to/your/vue-project/.git/ のようなメッセージが表示されれば成功です。

これで、あなたのVue.jsプロジェクトはGitによってバージョン管理される準備ができました。

`.gitignore` ファイルの設定

Gitはデフォルトではプロジェクト内の全てのファイルを追跡しようとします。しかし、バージョン管理に含める必要のないファイルや、含めるべきではないファイルがたくさんあります。例えば、以下の様なファイルやディレクトリです。

node_modules ディレクトリ（依存パッケージ群）：これは package.json または yarn.lock を見ればいつでも再現できるため、バージョン管理の対象外とします。サイズも非常に大きいです。
.env ファイル（環境変数など）：APIキーやパスワードなどの機密情報が含まれる可能性があるため、公開リポジトリには絶対含めてはいけません。
ビルド成果物ディレクトリ（通常 dist や build）：これはソースコードから生成されるものであり、ソースコードがあればいつでも再生成できるため、通常は含めません。
OSやエディタが生成する一時ファイルや設定ファイル

これらのファイルをGitの管理対象から外すために、.gitignore というファイルを作成します。プロジェクトのルートディレクトリに .gitignore という名前でファイルを作成し、無視したいファイルやディレクトリを記述します。

.gitignore の例:

“`gitignore

Log files

npm-debug.log
yarn-debug.log
yarn-error.log
lerna-debug.log
.pnpm-debug.log*

Dependency directories

node_modules/
jspm_packages/

build output

dist/
out/
build/
es/
lib/
temp/
tmp/

Editor directories and files

.vscode/
.idea/
*.swp
.DS_Store
Thumbs.db

misc

.env
.env.
local.env
local.env.
.local

VuePress build output

.vuepress/dist

Nuxt.js build output

.nuxt/
dist/

vite press build output

.vitepress/cache
.vitepress/dist

Serverless directories

.serverless/

Optional npm cache directory

.npm

Optional eslint cache

.eslintcache

Optional stylelint cache

.stylelintcache

Optional Prettier cache

.prettiercache

storybook

.storybook/out

tauri

src-tauri/target/

test coverage

coverage/

svelte-kit

.svelte-kit/

svelte-add

.svelte-add/

playwright cache

.cache/playwright/

Environment variables

.env
.env.development.local
.env.test.local
.env.production.local

“`

この内容は、一般的なJavaScript/Node.jsプロジェクトやVue.jsプロジェクトで無視すべきファイルを網羅しています。この内容をコピー＆ペーストして .gitignore ファイルを作成してください。

.gitignore ファイルを作成したら、これがGitに認識されているか確認します。

最初のコミット

ローカルリポジトリを作成し、.gitignore を設定したら、プロジェクトの現在の状態を最初のバージョンとして記録（コミット）します。

まず、Gitに現在の変更内容（新しく作成/変更されたファイル）を認識させます。「ステージングエリア」と呼ばれる場所にファイルを追加します。

bash git add .

. は「現在のディレクトリにある全ての変更」を意味します。.gitignore に記載されたファイルは git add . の対象から自動的に除外されます。

git status コマンドを使うと、現在Gitが認識している変更内容を確認できます。git add . の後で実行してみましょう。

bash git status

.gitignore に指定したファイル（例: node_modules/）が含まれていないことを確認してください。新たに追加されたファイル群が “Changes to be committed:” の下に緑色で表示されていれば成功です。

ステージングエリアにファイルが追加されたら、その状態を確定して履歴に記録します。これが「コミット」です。コミットには、その変更がどのような内容であるかを説明する「コミットメッセージ」を付けます。

bash git commit -m "feat: initial commit"

-m オプションの後ろにコミットメッセージを記述します。慣習的に、最初のコミットメッセージは "Initial commit" や "feat: initial commit" とすることが多いです。

実行後、何件のファイルが変更され、何行追加/削除されたかなどの情報が表示されます。

これで、あなたのVue.jsプロジェクトの最初のバージョンがローカルのGitリポジトリに記録されました。

git log コマンドを使うと、これまでのコミット履歴を確認できます。

bash git log

最初のコミットが表示されるはずです。

GitHubでのリポジトリ作成

次に、ローカルで作成したGitリポジトリを、リモートにあるGitHubリポジトリと紐付けます。まずはGitHub上に空のリポジトリを作成しましょう。

GitHubにログイン: ウェブブラウザでGitHubにアクセスし、ログインします。
新しいリポジトリを作成: ログイン後、GitHubのトップページまたは右上の「+」ボタンから「New repository」を選択します。
リポジトリ情報を入力:
- Owner: あなたのGitHubユーザー名が表示されます。
- Repository name: リポジトリの名前を付けます。プロジェクト名と同じにするのが分かりやすいでしょう。例: my-vue-github-app
- Description (Optional): リポジトリの説明を記述します。
- Public or Private: 公開する場合は「Public」、非公開にする場合は「Private」を選択します。個人開発や練習であればPublicで問題ないでしょう。機密情報や個人プロジェクトの場合はPrivateを選択してください。
- Initialize this repository with:
  - Add a README file: チェックを外します。今回はローカルで既にプロジェクトを作成しているので、GitHub側でREADMEを自動生成させると、ローカルのファイルと競合する可能性があります。
  - Add .gitignore: チェックを外します。ローカルで既に.gitignoreを作成済みです。
  - Choose a license: 必要に応じて選択しますが、今回はチェックを外しておきます。
リポジトリを作成: 緑色の「Create repository」ボタンをクリックします。

リポジトリが作成されると、次に行うべき操作（ローカルリポジトリとの紐付けやプッシュ）を示す画面が表示されます。そこに表示されるリポジトリのURL（HTTPSまたはSSH）をメモしておきましょう。

例：https://github.com/your-username/my-vue-github-app.git

ローカルリポジトリとリモートリポジトリの連携

GitHub上に空のリポジトリができたので、ローカルのVue.jsプロジェクトリポジトリと紐付けます。

リモートリポジトリのURLを追加

ローカルのプロジェクトディレクトリで、以下のコマンドを実行します。<repository_url> の部分を、先ほどGitHubで作成したリポジトリのURLに置き換えてください。通常はHTTPSのURLを使います。

bash git remote add origin <repository_url>

例:

bash git remote add origin https://github.com/your-username/my-vue-github-app.git

git remote: リモートリポジトリを管理するためのコマンドです。
add: 新しいリモートリポジトリを追加します。
origin: 追加するリモートリポジトリに付ける「名前」です。慣習的に、最初に紐付けるメインのリモートリポジトリには origin という名前を付けます。
<repository_url>: GitHubで作成したリポジトリのURLです。

このコマンドを実行しても特にメッセージは表示されません。

リモート設定の確認

正しくリモートリポジトリが設定されたか確認するには、以下のコマンドを使います。

bash git remote -v

実行すると、origin という名前で、指定したURLが表示されるはずです。fetch（取得）用とpush（送信）用のURLが表示されますが、同じURLです。

origin https://github.com/your-username/my-vue-github-app.git (fetch) origin https://github.com/your-username/my-vue-github-app.git (push)

これで、ローカルリポジトリはGitHub上のリモートリポジトリ「origin」と連携されました。

最初のプッシュ

ローカルリポジトリのコミット履歴を、GitHubのリモートリポジトリに送信します。この操作を「プッシュ」と呼びます。

ローカルのプロジェクトディレクトリで、以下のコマンドを実行します。

bash git push -u origin main

または、ローカルのデフォルトブランチが master の場合は以下を使います。（Gitの新しいバージョンでは main がデフォルトです）

bash git push -u origin master

git push: ローカルのコミットをリモートに送信するコマンドです。
-u origin main: origin というリモートリポジトリの main ブランチに対し、ローカルの現在のブランチをプッシュします。-u オプション（または --set-upstream）は、今後同じブランチに対して git pull や git push を行う際に、どのリモートのどのブランチと紐付けるかを設定するものです。一度設定しておけば、次回以降は git push だけで済むようになります。（ただし、どのブランチをプッシュするか明示的に指定する方が安全な場合もあります）

初めてリモートにプッシュする場合、GitHubのユーザー名とパスワード（またはPersonal Access Token）を入力して認証を求められることがあります。GitHubはセキュリティ向上のため、パスワード認証を廃止し、Personal Access Token (PAT) の利用を推奨しています。もしパスワード認証でエラーになる場合は、GitHubのSettings > Developer settings > Personal access tokens から新しいPATを生成し、それを使って認証を行う必要があります。Windowsの場合はGit Credential Manager、macOSの場合はKeychain Accessなどが認証情報を保存してくれます。

認証に成功すると、ローカルリポジトリのコミットがリモートの origin/main ブランチに送信されます。

GitHubのリポジトリページをブラウザで再読み込みしてみてください。作成したファイル群やコミット履歴が表示されているはずです。これで、あなたのVue.jsプロジェクトがGitHubで管理されるようになりました！

開発サイクルとGit操作

プロジェクトがGitHubで管理されるようになったら、日々の開発では以下のGit操作を繰り返すことになります。

変更を加える: Vueコンポーネントを編集したり、新しいファイルを作成したりします。
変更内容を確認: git status で、どのファイルが変更されたか、新しいファイルは何かなどを確認します。
変更をステージング: git add <ファイル名> または git add . で、コミットに含めたい変更をステージングエリアに移動します。
変更をコミット: git commit -m "コミットメッセージ" で、ステージングされた変更を履歴に記録します。
リモートにプッシュ: git push で、ローカルのコミットをGitHubに送信します。

これを繰り返すことで、プロジェクトの進行状況を細かく記録し、GitHubで共有できます。

ブランチの概念

Gitの強力な機能の一つに「ブランチ」があります。ブランチは、プロジェクトのメインの流れ（通常は main または master ブランチ）から分岐して、独立した環境で開発を進めることができる機能です。

例えば、新しい機能を追加したり、バグを修正したりする場合、いきなりメインブランチで作業するのではなく、専用のブランチを作成してそこで作業するのが一般的です。作業が完了し、テストも終えたら、そのブランチの変更内容をメインブランチに取り込みます（これをマージと呼びます）。

これにより、メインブランチは常に安定した状態を保ちつつ、複数の機能を並行して開発したり、他の開発者の作業と干渉することなく自身の作業を進めたりできます。

新しいブランチの作成:

bash git branch feat/add-user-profile

このコマンドは feat/add-user-profile という名前の新しいブランチを作成しますが、現在のブランチは切り替わりません。

ブランチの切り替え:

bash git checkout feat/add-user-profile

これで、作業するブランチが feat/add-user-profile に切り替わります。

ブランチ作成と切り替えを同時に行う:

bash git checkout -b feat/add-user-profile

このコマンドは、新しいブランチを作成し、すぐにそのブランチに切り替えます。

現在のブランチを確認:

bash git branch

実行すると、ローカルにあるブランチの一覧が表示され、現在いるブランチには * が付きます。

変更をコミットし、ブランチをプッシュ:

特定のブランチで作業を進め、変更をコミットしたら、そのブランチをリモート（GitHub）にプッシュできます。初めてそのブランチをプッシュする場合、-u オプションを付けてリモートとの紐付けを行うのが一般的です。

bash git add . git commit -m "feat: add user profile component" git push -u origin feat/add-user-profile

GitHubを見ると、新しく feat/add-user-profile ブランチが作成されていることが確認できます。

一人で開発している場合でも、機能ごとにブランチを分ける習慣を付けると、開発が整理され、後から変更履歴を追いやすくなります。

リモートからのプル (`git pull`)

共同開発を行っている場合や、他の場所で同じリポジトリをクローンして作業する場合、リモート（GitHub）の変更をローカルに取り込む必要があります。これには git pull コマンドを使います。

bash git pull origin main

または、現在いるブランチがリモートと紐付いている場合はシンプルに

bash git pull

git pull は、リモートから最新のコミットを取得 (git fetch) し、それを現在のローカルブランチに自動的にマージ (git merge) するコマンドです。共同開発では、作業を始める前に常に git pull を実行して、ローカルを最新の状態にしておくことが推奨されます。

一人開発の場合でも、例えば別のPCで同じリポジトリをクローンして作業した場合など、GitHub上のリポジトリがローカルより新しくなっていることがあります。その場合も git pull でローカルを最新の状態にします。

GitHub Pagesを使った簡単なデプロイ

Vue.jsで作成したアプリケーションは、通常、HTML, CSS, JavaScript の静的なファイルとしてビルドされます。これらの静的ファイルをホストするサービスを利用すれば、簡単にWebサイトとして公開できます。GitHub Pagesは、GitHubリポジトリと連携して、無料で静的なWebサイトを公開できる便利なサービスです。

ここでは、GitHub Pagesを使ってVue.jsアプリケーションを公開する手順を説明します。

なぜGitHub Pagesを使うのか？

無料: GitHubアカウントがあれば無料で利用できます。
簡単: GitHubリポジトリと連携するため、設定が比較的容易です。
静的サイト向け: Vue.jsのビルド成果物のような静的サイトのホスティングに適しています。
カスタムドメイン対応: 独自のドメインを設定することも可能です（設定方法はここでは割愛します）。

ただし、GitHub Pagesは静的なサイトホスティングサービスであるため、サーバーサイドの処理が必要なアプリケーションや、データベースを使用するアプリケーションには適していません。Vue.jsのフロントエンドのみで完結するアプリケーションの公開には最適です。

Vue.jsプロジェクトのビルド設定

Vue.jsアプリケーションをGitHub Pagesで公開するには、まずアプリケーションを「ビルド」して公開用の静的ファイルを生成する必要があります。ビルドコマンドは、Vue CLIまたはViteのプロジェクト作成時に自動的に設定されています。通常は以下のコマンドです。

bash npm run build

または

bash yarn build

または

bash pnpm build

このコマンドを実行すると、プロジェクトのルートディレクトリに通常 dist というディレクトリが作成され、その中に公開用のファイル群（HTML、CSS、JavaScript、画像など）が格納されます。

注意: GitHub Pagesで公開する場合、リポジトリのURLが https://your-username.github.io/your-repository-name/ のようになります。この /your-repository-name/ という部分がサブディレクトリになるため、アプリケーションが正しくリソース（CSSファイル、JSファイルなど）を読み込めるように、ビルド時のベースURLを設定する必要があります。

Viteの場合

vite.config.js または vite.config.ts ファイルを編集し、base オプションを設定します。

“`javascript
import { defineConfig } from ‘vite’
import vue from ‘@vitejs/plugin-vue’

// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
base: ‘/your-repository-name/’ // ここをGitHubリポジトリ名に置き換える
})
“`

例: リポジトリ名が my-vue-github-app なら base: '/my-vue-github-app/' とします。

Vue CLIの場合 (レガシー)

vue.config.js ファイルをプロジェクトのルートに作成（もし無ければ）し、publicPath オプションを設定します。

javascript const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, publicPath: '/your-repository-name/' // ここをGitHubリポジトリ名に置き換える })

例: リポジトリ名が my-vue-github-app なら publicPath: '/my-vue-github-app/' とします。

設定変更後、再度ビルドコマンドを実行してください。ビルド成果物（distディレクトリの中身）のリソースパスが正しく /your-repository-name/ を基準とするようになります。

デプロイ方法

GitHub Pagesにデプロイする方法はいくつかありますが、ここでは初心者向けに「gh-pages」ライブラリを使った簡単な方法と、より自動化されたGitHub Actionsを使う方法を紹介します。

方法1: gh-pages ライブラリを使った手動デプロイ

gh-pages ライブラリを使うと、ビルド成果物ディレクトリ (dist) の内容を gh-pages という特別なブランチにプッシュできます。GitHub Pagesはこの gh-pages ブランチの内容を自動的に公開する設定が可能です。

ライブラリのインストール:

bash npm install gh-pages --save-dev

または

bash yarn add gh-pages --dev
package.json にデプロイスクリプトを追加:
package.json ファイルの scripts セクションに、ビルドとデプロイを連続して実行するスクリプトを追加します。

json "scripts": { "dev": "vite --open", // Viteの場合 "build": "vite build", // Viteの場合 "serve": "vue-cli-service serve", // Vue CLIの場合 "build": "vue-cli-service build", // Vue CLIの場合 "preview": "vite preview", // Viteの場合 "deploy": "npm run build && gh-pages -d dist" // ← これを追加 },

"deploy": "npm run build && gh-pages -d dist" は、「npm run build を実行し、成功したら gh-pages コマンドで dist ディレクトリの内容をデプロイする」という意味です。
GitHub Pages の設定:
GitHubリポジトリのページにアクセスし、「Settings」タブをクリックします。左側のメニューから「Pages」を選択します。
Source のドロップダウンで、「Deploy from a branch」を選択します。Branch のドロップダウンで、「gh-pages」ブランチを選択し、ディレクトリは / (root) を選択します。「Save」ボタンをクリックします。

注意: 最初は gh-pages ブランチが存在しないため選択できません。次のステップで一度デプロイするとブランチが作成され、選択できるようになります。
デプロイの実行:
ターミナルで、プロジェクトのルートディレクトリに移動し、以下のコマンドを実行します。

bash npm run deploy

または

bash yarn deploy

このコマンドを実行すると、ビルドが走り、その後 gh-pages ライブラリが dist ディレクトリの中身を新しい gh-pages ブランチにプッシュします。gh-pages ブランチは通常、ローカルには存在せず、直接リモートに作成・更新されます。
公開URLの確認:
デプロイが成功すると、GitHubリポジトリのSettings > Pages のページに、公開されたサイトのURLが表示されます（例: https://your-username.github.io/your-repository-name/）。デプロイには数分かかることがあります。URLにアクセスして、アプリケーションが表示されるか確認してください。

以降、コードを変更して公開したい場合は、コミット＆プッシュした後、再度 npm run deploy を実行するだけです。

方法2: GitHub Actions を使った自動デプロイ (より推奨)

gh-pages ライブラリを使う方法は簡単ですが、毎回手動でコマンドを実行する必要があります。GitHub Actionsを使うと、例えば main ブランチにプッシュするたびに自動的にビルド＆デプロイを実行するように設定できます。一度設定すれば、その後のデプロイ作業が不要になるため、こちらの方が効率的です。

GitHub Actions は、リポジトリでの特定のイベント（プッシュ、プルリクエストなど）をトリガーにして、事前に定義したワークフロー（一連の処理）を実行できるCI/CD（継続的インテグレーション/継続的デプロイメント）サービスです。

GitHub Actions ワークフローファイルを作成:
プロジェクトのルートディレクトリに .github/workflows/ というディレクトリを作成します。その中に、ワークフローを定義するYAMLファイルを作成します。ファイル名は任意ですが、例えば deploy-gh-pages.yml とします。

.github/workflows/deploy-gh-pages.yml

“`yaml
name: Deploy to GitHub Pages

on:
push:
branches:
– main # mainブランチにプッシュされたときにトリガー

jobs:
build-and-deploy:
runs-on: ubuntu-latest # Ubuntu Linux環境で実行
```
steps:
- name: Checkout # リポジトリのコードをチェックアウト
  uses: actions/checkout@v3 # または最新バージョン

- name: Set up Node.js # Node.js環境をセットアップ
  uses: actions/setup-node@v3 # または最新バージョン
  with:
    node-version: '18' # 使用するNode.jsのバージョンを指定 (Vue/Viteの要求バージョンに合わせる)
    cache: 'npm' # npmのキャッシュを有効化 (高速化)

- name: Install dependencies # 依存関係をインストール
  run: npm install

- name: Build # プロジェクトをビルド
  run: npm run build

- name: Deploy to GitHub Pages # gh-pagesブランチにデプロイ
  uses: peaceiris/actions-gh-pages@v3 # または最新バージョン
  with:
    github_token: ${{ secrets.GITHUB_TOKEN }} # デフォルトで利用可能なトークン
    publish_dir: ./dist # デプロイするディレクトリ (ビルド成果物)
    cname: '' # カスタムドメインを使う場合はここにドメイン名を設定 (使わない場合は空文字)
```
“`

このYAMLファイルは以下の処理を定義しています：
* name: ワークフローの名前。
* on.push.branches: main ブランチへのプッシュをトリガーとする。
* jobs.build-and-deploy: 実行するジョブの名前。
* runs-on: ジョブを実行するOS環境（ここではUbuntu最新版）。
* steps: ジョブで実行する一連のステップ。
* actions/checkout@v3: GitHub Actions がリポジトリのコードを仮想環境にコピーします。
* actions/setup-node@v3: Node.js 環境をセットアップします。node-version はあなたのプロジェクトで使用しているバージョンに合わせてください。
* npm install: プロジェクトの依存関係をインストールします。
* npm run build: プロジェクトをビルドします。
* peaceiris/actions-gh-pages@v3: ビルド成果物を gh-pages ブランチにデプロイするための人気のアクションです。github_token はGitHub Actionsが自動で提供してくれる認証情報、publish_dir はデプロイ元となるビルド成果物ディレクトリを指定します。
ビルド設定の確認:
前述の「Vue.jsプロジェクトのビルド設定」で説明した base (Vite) または publicPath (Vue CLI) の設定が、リポジトリ名に合わせて正しく行われているか再度確認してください。GitHub Actionsでビルドされる際にもこの設定が使われます。
ワークフローファイルをコミット＆プッシュ:
作成した .github/workflows/deploy-gh-pages.yml ファイルをGitに追加、コミットし、main ブランチにプッシュします。

bash git add .github/workflows/deploy-gh-pages.yml git commit -m "feat: add github actions for gh-pages deploy" git push origin main # または master
GitHub Actionsの実行を確認:
プッシュ後、GitHubリポジトリのページを開き、「Actions」タブをクリックします。新しいワークフローの実行が開始されているのが確認できます。ジョブが完了するまで待ちます。成功すれば緑色のチェックマークが表示されます。もしエラーが出た場合は、ログの詳細を確認して原因を特定してください。
GitHub Pages の設定:
ワークフローが一度でも成功すると、GitHubリポジトリに gh-pages ブランチが自動的に作成されます。
GitHubリポジトリのSettings > Pages にアクセスし、Source の Branch で「gh-pages」を選択し、ディレクトリを / (root) に設定して Save します。
公開URLの確認:
設定を保存後、数分待つとサイトが公開され、Settings > Pages のページに公開URLが表示されます。アクセスして確認してください。

これ以降は、ローカルでコードを修正し、コミットして main ブランチにプッシュするだけで、GitHub Actionsが自動的にビルドとデプロイを行ってくれます。

共同開発におけるGit/GitHub (入門)

一人で開発している場合でも、いずれ他の人とコードを共有したり、OSS（オープンソースソフトウェア）の開発に参加したりする機会があるかもしれません。ここでは、共同開発の基本的な流れと、それに欠かせない「プルリクエスト」について簡単に触れておきます。

プルリクエスト (Pull Request / Merge Request)

プルリクエスト（PR）は、自分が変更したコードをメインブランチ（例: main や develop）に取り込んでもらいたいときに、リポジトリの管理者や他の開発者に「私のこの変更をあなたのブランチにプル（取り込み）して、マージしてください」と依頼するための仕組みです。

PRを作成することで、以下のようなことが可能になります。

コードレビュー: 他の開発者があなたの変更内容を確認し、改善点や問題点を指摘してくれます。
変更内容の議論: 変更について関係者と話し合う場となります。
CI/CDトリガー: PR作成や更新をトリガーに、自動テストやビルドを実行できます（前述のGitHub Actionsなど）。
変更履歴の可視化: どのような議論を経てコードが変更されたかの記録が残ります。

プルリクエストの一般的な流れ:

作業用ブランチを作成: main ブランチから、新機能追加やバグ修正のための作業用ブランチを作成し、そのブランチに切り替えます。
bash git checkout -b feature/new-feature
コードを開発: 新しいブランチで作業を進め、変更をコミットします。
bash git add . git commit -m "feat: implement new feature"
作業用ブランチをプッシュ: 作業用ブランチをリモート（GitHub）にプッシュします。
bash git push -u origin feature/new-feature
GitHubでプルリクエストを作成: GitHubのリポジトリページにアクセスすると、プッシュしたブランチに対してプルリクエストを作成するよう促されることがあります。あるいは、「Pull requests」タブから「New pull request」ボタンをクリックします。
- どのブランチから（Compare: 例 feature/new-feature）
- どのブランチへ（Base: 例 main）
- マージしたいかを選択します。
  変更内容のタイトルや説明を入力し、必要であればレビュアーを指定してPRを作成します。
レビューと議論: 他の開発者があなたのコードをレビューし、コメントを残したり、変更をリクエストしたりします。
コードの修正 (必要な場合): レビューコメントに基づいてコードを修正します。修正したら、同じ作業用ブランチにコミット＆プッシュします。自動的に既存のプルリクエストに反映されます。
マージ: コードレビューが完了し、変更内容に問題がなければ、プルリクエストを「Merge pull request」ボタンでマージします。通常、対象となるメインブランチ（mainなど）に、作業用ブランチの変更が統合されます。マージ後、作業用ブランチは不要になることが多いので削除します。
ローカルのメインブランチを最新化: GitHub上でマージが行われたら、ローカルの main ブランチは古くなっています。ローカルの main ブランチに切り替えて、リモートから最新の変更を取り込みます。
bash git checkout main git pull origin main

このプルリクエストのワークフローは、チーム開発においてコードの品質を保ち、安全に変更を取り込むために非常に重要です。一人開発でも、機能ごとにブランチを切って、最後に自身でレビューしてからメインブランチにマージする習慣を付けるのは良い練習になります。

コンフリクトの解決

複数人が同じファイルや同じ行を同時に変更し、それぞれの変更をマージしようとした際に発生するのが「コンフリクト（衝突）」です。Gitは自動的にマージできない部分を検出し、開発者に手動で解決するように求めます。

コンフリクトが発生すると、Gitは対象ファイル内に衝突部分を示すマーカー（<<<<<<<, =======, >>>>>>> など）を挿入します。開発者はこれらのマーカーを確認し、どちらの変更を残すか、あるいは両方の変更を組み合わせて、正しいコードになるようにファイルを編集します。コンフリクトを解決したら、そのファイルを git add でステージングし、git commit で「コンフリクト解決コミット」を作成してマージを完了させます。

コンフリクト解決は慣れるまで少し難しいかもしれませんが、共同開発では避けて通れないスキルです。最初は簡単な衝突を発生させて解決する練習をしてみるのも良いでしょう。

よくある問題とトラブルシューティング

GitやGitHubを使っていると、いくつかの問題に遭遇することがあります。ここでは初心者の方が遭遇しやすい問題をいくつか挙げ、簡単な解決策を示します。

認証エラーでプッシュできない

最も多い問題の一つです。

原因: GitHubへのプッシュ時に、ユーザー名とパスワード、またはPersonal Access Token (PAT) が正しく認証されない。
解決策:
- GitHubはパスワード認証を非推奨とし、PATの利用を推奨しています。PATを生成し、Gitクライアントに設定してください。GitHubの Settings > Developer settings > Personal access tokens で生成できます。
- WindowsではGit Credential Manager、macOSではKeychain Accessが認証情報を保存してくれます。これらが正しく設定されているか確認してください。
- HTTPSではなくSSH接続を利用する場合、SSHキーの設定が必要です。GitHubのドキュメントを参照してSSHキーを設定してください。

`.gitignore` が機能しない

指定したはずのファイルやディレクトリがGitによって追跡されてしまう。

原因:
- .gitignore ファイルが正しく記述されていない。
- 対象のファイルが、.gitignore を作成する前に一度でもGitによって追跡（add/commit）されてしまった。
解決策:
- .gitignore ファイルの記述ミスがないか確認してください。パスが正しいか、スラッシュやワイルドカードの使い方が正しいかなど。
- 一度Gitに追跡されてしまったファイルは、.gitignore に追加しても追跡対象から外れません。その場合は、Gitのインデックス（ステージングエリアや履歴）から対象ファイルを削除し、改めてコミットし直す必要があります。
  bash git rm --cached <ファイル名> # 例: git rm --cached .env git commit -m "Remove tracked file" git push origin main # リモートにも反映
  その後、改めて git add . やコミットを行う際には .gitignore が有効になります。

ブランチを間違えてコミット/プッシュしてしまった

本来作業すべきでないブランチで作業してしまった。

解決策:
- まだコミットしていない場合: git status で変更内容を確認し、必要であればstashで一時的に変更を退避 (git stash) してから正しいブランチに切り替え (git checkout <正しいブランチ>)、stashから変更を戻します (git stash pop)。
- コミットしてしまったが、まだプッシュしていない場合:
  - そのコミットが他の誰とも共有されていない（プッシュしていない）単独のコミットであれば、git reset HEAD~1 で直前のコミットを取り消し（変更内容は残ります）、正しいブランチに切り替えて改めてコミットします。
  - あるいは、そのコミットを含んだブランチをそのままプッシュし、後で正しいブランチにマージしたり、Cherry-pick（特定のコミットだけを他のブランチに移動）したりする方法もありますが、初心者には少し複雑です。
- プッシュしてしまった場合: 既にリモートに共有されてしまった変更は、取り消すのが難しくなります。他の開発者がその変更をプルしてしまう可能性があるためです。基本的にはそのままにして、正しいブランチからその変更を取り込む（マージなど）か、あるいは revert コマンドでそのコミットの変更を打ち消す新しいコミットを作成するなどの方法があります。プッシュ後の履歴の改変（git push --force など）は他の開発者に影響を与えるため、避けるべきです。

デプロイしたサイトが表示されない、またはリソースが読み込めない

GitHub Pagesにデプロイしたが、404エラーになる、CSSや画像が表示されないなど。

原因:
- GitHub Pages の設定（Source Branch や Directory）が間違っている。
- ビルド設定 (base や publicPath) が、GitHubリポジトリ名に合わせて正しく設定されていない。
- ビルド成果物 (dist ディレクトリ) の中身が、期待通りになっていない。
- デプロイ処理自体が成功していない。
解決策:
- GitHubリポジトリの Settings > Pages で、デプロイ元が正しいブランチ (gh-pages または main/master) と正しいディレクトリ (/ (root) または /docs) になっているか確認してください。
- Viteの場合は vite.config.js の base、Vue CLIの場合は vue.config.js の publicPath が、/your-repository-name/ の形式で正しく設定されているか確認してください。
- ローカルで npm run build を実行し、生成された dist ディレクトリの中身を確認してください。index.html が存在するか、CSS/JSファイルへのパスが期待通りになっているかなど。
- GitHub Actionsを使っている場合は、「Actions」タブでワークフローの実行が成功しているか確認してください。ビルドステップやデプロイステップでエラーが出ていないかログを確認します。
- ブラウザの開発者ツール（F12キーなど）を開き、ConsoleタブやNetworkタブでエラーが出ていないか確認してください。特にNetworkタブで、CSSやJSファイルなどのリソースへのリクエストが正しいURLになっているか、404エラーになっていないかなどを確認します。

これらの問題は、GitやGitHubの基本的な仕組みを理解することで解決しやすくなります。公式ドキュメントや、他の開発者のブログなども参考にしながら、根気強く調べてみましょう。

さらに学習するために

このガイドでは、Vue.jsプロジェクトとGitHubを連携させるための基本的なワークフローを学びました。GitとGitHubには、これ以外にも便利な機能がたくさんあります。

Gitの高度な機能: rebase によるコミット履歴の整理、cherry-pick による特定のコミットの取り込み、bisect によるバグの原因特定など。より複雑なシナリオで役立ちます。
Git Flow や GitHub Flow: ブランチ運用やプルリクエストを活用した、より体系的なチーム開発ワークフローです。
Issue管理: GitHubのIssue機能を使って、タスク管理やバグ報告を行います。
CI/CD: GitHub Actions をさらに活用して、テストの自動実行やLintチェックなどを組み込みます。
他のデプロイ先: Netlify, Vercel, AWS S3/CloudFront, Firebase Hosting など、静的サイトホスティングサービスは他にもたくさんあります。それぞれ特徴や料金体系が異なります。
ホスティングサービスとの連携: NetlifyやVercelなどは、GitHubリポジトリと連携することで、コードをプッシュするだけで自動的にビルド＆デプロイを行ってくれる機能が充実しています。

これらのキーワードで検索して、ぜひステップアップのための学習を進めてみてください。

まとめ

このガイドでは、Vue.jsプロジェクトを対象に、Gitを使ったローカルでのバージョン管理から、GitHubを使ったリモートでのコード共有、そしてGitHub Pagesを使ったWebサイト公開までの一連の流れを詳細に解説しました。

Vue.jsプロジェクトをGitで初期化し、ローカルリポジトリを作成しました。
.gitignore を設定し、管理対象から外すファイルを指定しました。
GitHub上にリモートリポジトリを作成し、ローカルリポジトリと連携させました。
最初のコミットをGitHubにプッシュしました。
日々の開発における基本的なGit操作（add, commit, push）と、ブランチの概念を学びました。
GitHub Pagesを使って、Vue.jsアプリケーションをWebに公開する手順（手動とGitHub Actions）を学びました。
共同開発の基本となるプルリクエストやコンフリクト解決について簡単に触れました。
遭遇しやすい問題とその解決策を紹介しました。

Vue.js開発において、GitとGitHubは切っても切り離せないツールです。初めはコマンド操作に戸惑うかもしれませんが、使い続けるうちに慣れてきます。このガイドを参考に、皆さんのVue.js開発がより効率的で、より多くの人と共有できるものになれば幸いです。

今後も様々なプロジェクトでGitとGitHubを積極的に活用し、開発スキルを磨いていきましょう！