fein's personal site

個人サイト制作：サイトマップへ戻る

Webサイトの共同制作とGitHub

Webサイトを作ろうという流れになると、必ずと言って良いほど話題になるのが共同制作。
このようなサイトを共同制作する場合、普通はGitHubのようなソースコードの管理ツールを使うものです。
複数人で作業をする時、各々の書いているコードの進捗状況を管理したり、コンフリクトを解消するために使うんだよね。
このページでは、Webサイトを共同制作するときの注意点から出発し、GitHubの初期設定をするところまで進めていきます。

こういう話はですね…
うんちくを並べるより、現実的なことをサラッと書いてしまった方が伝わると思ってますね。

記事を書けばお金になる

Webサイトの周りにはいろんなお仕事がありますよ。
例えば、いま私が書いているような文章を書くお仕事もあります。
クラウドワークスというページをご覧いただけるとすぐ分かります。

いかがでしょうか？
給料の高低は別にしても、文筆の仕事もあるでしょ？
他人様のWebサイトのために文章を書き、それを提供する。
これは立派な仕事なわけです。

もちろん実際に報酬も出ます。
頑張って頂ければ、ちょっとしたゲームのガチャ代くらいなら稼げますよ。─ 年末調整云々等は一般常識ですから、ここでは割愛させて頂きます。 ─

フリーでお小遣い稼ぎをする時の注意点

こういう場所だと、なかには報酬をバックレるような業者がいたりします。
見積書・納品書・請求書など、ちゃんとしていただきまして。
これらも常識の範囲内なので詳しくは書きませんが、いろんなことが自己責任となります。

私も学生時代にやってたことありますよ？
防災グッズに関するブログ記事を書いたり、グローバルナビゲーション用のプログラムを提供したり。
ちゃんと報酬がもらえます。
こういうフリーの活動は、アルバイトみたいに時間の縛りがないのがメリットですよね。

Webサイトの共同制作とお金

よく見る流れが、次のようなものです。
私は以前、自分の好きなゲームでファンサイトを作ろうなんて呼びかけをしたことがありました。
その時に一番懸念していたのが、こういう流れだったのです。

• プログラミングが得意なA君に、プルダウンメニューを作ってもらおう！
• 絵が上手なB美ちゃんに、イラストを描いてもらおう！
• 文章が上手なC子ちゃんに、ストーリーを書いてもらおう！

でも、何をどうするかは俺が決める。広告も貼ってアフィリエイトしよう。だって、このサイトは俺のものだから。

分かりやすいよう、ちょっとした物語にしてみました。
こういうの、度が過ぎるとトラブルになります。
Webサイトの共同制作なんて、なんかプロジェクトリーダーにでもなったみたいでウキウキしちゃうもの。
特に慣れない初心者さんはそうですし、このような流れは私もSNSで昔から目にしてきました。
技術を借りる側も、そして技術を貸す側も、十分に注意する必要があると私は思います。
とはいったものの…
こういうのって実際にトラブルを目の当たりにしないと分からないもんだけどね（笑）

さて！ そんなこんなをクリアできたら、いよいよWebサイトを共同制作することになります。
次からはソースコードの管理ツールであるGitHubについて、お話します。

GitHubを触ってみよう

ここからはVisual Studio Codeを触ってみようと併せてご覧いただけると、より分かりやすいかもしれません。
GitHubをVisual Studio Code（VS Code）で使用することには、いくつかの重要な利点があります。
開発作業の効率化するための便利な機能がいっぱいあるんですよね。

よく「サイトを共同編集しようぜ！」なんてのを耳にするけど…
もし複数人でプロジェクト化したいのであれば、こういうツールを使ってやると良いですよ？

統合環境

VS CodeはGitHubとシームレスに統合されています。
エディタ内から直接リポジトリのクローン作成、プッシュ、プル、ブランチの管理などが可能です。
一貫した環境で作業を進められるため、時間と手間を大幅に削減できます。

コードレビューとコラボレーション

GitHubのプルリクエスト機能とVS Codeの統合により、コードレビューが簡単に行えます。
チームメンバーとの共同作業がよりスムーズになり、リアルタイムでフィードバックを受け取ることができます。

拡張機能

GitHub用の専用拡張機能が多数存在します。
例えばGitHub Pull Requests and Issues拡張機能を使用すると、エディタ内から直接プルリクエストやイシューの管理が可能です。
コードとプロジェクト管理が一体化され、開発効率が向上します。

バージョン管理の利便性

VS Code内で直接GitHubのバージョン管理機能を利用できるため、コードの変更履歴を簡単に追跡・管理できます。
また、変更内容をステージングし、コミットする操作もエディタ内で完結します。

デプロイメントの自動化

GitHub Actionsを利用することで、自動デプロイメントやCI/CD（継続的インテグレーション / 継続的デリバリー）パイプラインの設定が行えます。
VS Codeのエディタ内からこれらの設定やモニタリングができるため、開発からデプロイまでのフローがスムーズになります。

Gitのインストール

何も設定していない状態でVS Codeのソース管理を開くと、「Windows用Gitのダウンロード」とあります。
Gitはツールであり、GitHubはそのツールを使ってオンラインでコードを管理するサービスです。

Windows用Gitのダウンロード

Windows用Gitのダウンロードを開いてダウンロードし、まずはgitをインストールします。
gitインストール時に戸惑いがちな設定は次のような項目があるかと。

私が使っている選択肢の側に★マークを付けておきますね。

Choosing thr default editor used by Git

★Use Visual Studio Code as Git's default editor
・Use Visual Studio Code Insiders as Git's default editor

通常版のVisual Studio CodeをGitのデフォルトエディタとして使用する設定です。
一般的に使われている安定版のVisual Studio Codeとなります。
一方、Visual Studio Code Insidersは新機能や改善が早めに提供されるため、安定性においては通常版よりも若干リスクがあります。

Adjusting the name of the initial branch in new repositories

★Let's Git decide
・Override the default branch name for new repositories

ブランチ名はアカウント名とは異なり、特定の変更履歴を指す名前です。
開発中の異なるバージョンや機能を分けて管理するためのものであり、例えば「main」というブランチは通常、プロジェクトの主要な開発ラインを表します。

Adjusting your PATH enviroment

・Use Git from Git Bash only
★Git from the command line and also from 3re-party software
・Use Git and optional Unix tools from the Command Prompt

コマンドプロンプトや他のターミナル（例：PowerShell）からもGitコマンドを利用できます。
また、他のサードパーティのソフトウェア（例：VS Code、Sourcetreeなど）でもGitを利用できるようになります。
このオプションが最も汎用的で、多くのユーザーにとって便利だと思いますね。

Choosing the SSH executable

★Use bundled OpenSSH
・Use external OpenSSH

Use external OpenSSHは外部にインストールされているOpenSSHを使用しますが、後から変更することもできます。

Choosing HTTPS transport bakend

★Use the OpenSSL library
・Use the native Windows Secure Channel library

私の場合は特にクロスプラットフォーム環境や、OpenSSLの特性を活用したいシーンが増えてくると思うから。

Configuring the line ending conversions

★Checkout Windows-style, commit Unix-style line endings
・Check as-is, commit Unix-style line endings
・Check as-is, commit as-is

ファイルの改行コードに関する設定なのですが、Windows環境で作業しつつ、他の環境（例：Linux、macOS）と互換性を保つ必要があります。

次にConfiguring the terminal emulator to use with Git Bashの画面で次の選択肢があります。
ここでの選択肢は、Git Bashを使用する際の端末エミュレータを選択するものです。

★Use MinTTY (the default terminal of MSYS2)

MinTTYは、MSYS2プロジェクトに含まれるデフォルトのターミナルエミュレータで、外観やカスタマイズ性が高くUnix系のターミナルに似た操作感を提供します。
標準のWindowsコンソールよりも高機能で、カラー表示やフォントの設定もできます。

Use Windows' default console window

Windowsの標準コンソールウィンドウ（コマンドプロンプト）を使用します。
特に追加の設定を行わずに利用でき、慣れ親しんだ環境で作業ができるというメリットがあります。

どちらを選んでもGitの機能に影響はありませんが、ここはUse MinTTY (the default terminal of MSYS2)のほうがお勧めかな？
Windowsに特化しなくてもいいし、コマンドプロンプトよりUnix系のターミナルに慣れたほうが良いと思うから。

Choose the default behavior of 'git pull'

★Fast-forward or merge
・Rebase
・Only ever fast-forward

通常の開発フローを優先するならFast-forward or merge、
クリーンな履歴を保ちたいならRebase、
直線的な履歴を強制したいならOnly ever fast-forwardです。

Choose a credential helper

★Git Credential Manager
・None

Git Credential Manager（GCM）は、認証情報を簡単に管理するためのツールです。
マイクロソフトアカウント、GitHubなど複数のプロバイダに対応しているので、普通はこっちかな。

Configuring extra options

★Enable file system caching
・Enable symbolic links

シンボリックリンクはどうかなー
けっこう便利だけど、ここではファイル操作のパフォーマンス向上を重視する方向でやってます。

キリがないからこのへんで。
ちなみにGUI Clientsもあります。

GitHubのアカウント登録

GitHubアカウントを作成して、Visual Studio(Atelier) Codeからリポジトリを管理する手順です。
ここからがソースコード管理らしくなってくるかな。
念のため、本格的に使いたい人はGet the complete developer platform.をよく見て、自分の開発状況で費用が発生するかどうかを確認しましょう。
まずはprivateで使ってみて、慣れてきたらpublicにするのがお勧めです。

Visual Studio(Atelier) CodeのGitHub連携

1. GitHubアカウントの作成
2. コマンドパレットを開いて検索バーに「GitHub: Sign in」と入力し、表示された「GitHub: Sign in」を選択
   ブラウザが開き、GitHubアカウントにサインインするためのページが表示される

これでVS CodeからGitHubにリポジトリを公開できるようになります。
ひとまず次の用語を覚えておくと混乱が少ないです。

ローカルリポジトリ

開発者のコンピュータ上にあるリポジトリ

リモートリポジトリ

GitHubのクラウド上に保存されたリポジトリ

GitHubのリポジトリをプライベートにする

プライベートリポジトリであれば、リポジトリの所有者と指定されたコラボレーターのみがアクセスできます。
他の人はWeb上で貴方のコードを見ることはできません。

• GitHubにログインしてプライベートにしたいリポジトリのページに移動
• リポジトリページの上部にある「Settings」タブをクリック
• 「General」セクションの「Danger Zone」までスクロール
• 「This repository is currently private.」と表示されていれば、リポジトリがプライベートになっている

もしくは、GitHubリポジトリ一覧ページで、リポジトリ名の横に鍵のアイコンが表示されていれば、リポジトリはプライベートです。

Gitのステータス表示と操作

GitHubとの連携直後、VS Codeでファイル名が緑色になると思います。
加えて右側に「A」と表示されているはずで、それはGitのステータス表示です。
それぞれの意味と、続く操作を説明しますね。

緑色のファイル名 A

ファイルがGitに新規追加されたことを意味します。
ステージングエリアに追加されており、次のコミットでリポジトリに追加される予定のファイルです。
「A」は「Added」（追加）を意味します。
そのファイルが新しく追加されたことを示しています。

緑色のファイル名 U

Gitがそのファイルを「未追跡」（Untracked）として認識していることを示しています。
Gitがまだそのファイルを追跡しておらず、リポジトリにコミットされていないという意味ですね。

橙色のファイル名 M

ファイルが変更されたことを示しています。
既存のファイルに対して何らかの編集が加えられた状態です。
「M」は「Modified」（変更）の略で、そのファイルが修正されたことを意味します。

GitHubのリポジトリにプッシュする

Gitが開発者のコミットを追跡するために、まずはユーザー名とメールアドレスを設定する必要があります。

1. VS Codeのターミナルを開く

2.グローバルなユーザー名とメールアドレスの設定

git config --global user.name "your_name"
git config --global user.email "your_email@example.com"

3. 設定の確認

git config --global --list

これでユーザー名とメールアドレスが設定され、コミットを行う準備が整いました。
次は新しいリポジトリのセットアップです。

1. リポジトリの初期設定

GitHubリポジトリにおける標準的なファイル構成を設定します。
README・LICENSE・.gitignoreの3つを登録するほうが良いのですが、とりあえず静的ウェブサイトのソースコードならLICENSEは後回しで良いでしょう。

2. ローカルリポジトリの初期化

既にローカルにプロジェクトが存在する場合、ローカルリポジトリを初期化してリモートリポジトリに接続します。

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/fein-denscothmn/fein-sites-dev1.git
git branch -M main
git push -u origin main

3. リポジトリにファイルをアップロード

GitHubのウェブインターフェースからもファイルをアップロードできます。

これでリポジトリが初期設定され、プロジェクトのコードやファイルを簡単に管理できるようになります。
ちなみにGitHubのデスクトップ版もあります。

Githubのリモートレポジトリを公開する

ここでは、Githubのリモートレポジトリを公開する際の注意について書いていきます。

• コード管理という目的に必要ないものを公開しないための設定
• privateからpublicに変更する手順

まずは基礎的な使い方をご紹介した後、プライベートにする流れをお伝えしました。そのほうがリスクもないからです。
しかし、パブリックにしたいケースもあるかと。─ 本来はpublicにして扱うものだけどね。 ─
GitHubはソースコードの管理や共有を行う場所です。
AI学習が問題になっている今、人様が懸命に描いた絵まで公開する必要はありません。

公開したくないデータを決める

まず、次のように「.gitignore」へ公開したくないファイルやディレクトリを記載します。
.gitignoreファイルはルートディレクトリに設置しましょう。

# 特定のファイルを除外
/www/himitu1.xml
/www/himitu2.txt

# 特定のディレクトリを除外
www/another-eden/anaimage/
www/another-eden/icon/
www/image/
www/paint/

これで、ローカルレポジトリからリモートレポジトリへアップされないファイルやディレクトリが指定された、「除外リスト」ができたことになります。

.gitignoreを上げる

後からでも良いのですが、この段階で「.gitignore」をリモートレポジトリへプッシュしてしまいます。

git add .gitignore
git commit -m "Update .gitignore to exclude specific files and directories"
git push origin main

このGitコマンドを説明します。

git add .gitignore:
.gitignoreファイルの変更をステージングエリアに追加するコマンドです。
このコマンドは指定された.gitignoreファイルをステージングエリアに追加します。

git commit -m "Update .gitignore to exclude specific files and directories":
ステージングエリアに追加された変更をコミットするコマンドです。
-mオプションは、コミットメッセージを指定します。
このコミットメッセージは「特定のファイルやディレクトリを除外するために.gitignoreを更新」という意味ですね。

git push origin main:
ローカルリポジトリの変更をリモートリポジトリ（origin）のmainブランチにプッシュするコマンドです。
originはリモートリポジトリのデフォルト名で、mainはブランチ名です。
これでローカルレポジトリの「.gitignore」がリモートリポジトリに反映されます。

.gitignoreを確認してファイル退避

この段階で、リモートレポジトリでは非公開となるローカルレポジトリのファイルが設定されています。
念のためGitHubのWebにあるリモートレポジトリを確認し、.gitignoreが反映されていることを確認しましょう。
それから、ローカルレポジトリから公開したくないファイルやディレクトリを一時的に他のディレクトリへ移動しておきます。
ローカルレポジトリに、一時的なデータの欠損が発生している状態を作るのです。

欠損があるローカルレポジトリをプッシュ

公開したくないファイルやディレクトリが含まれていない状態のローカルレポジトリを、リモートレポジトリへプッシュします。

git add .gitignore
git commit -m "Update .gitignore to exclude specific files and directories"
git push origin main

git add .:
現在のディレクトリ内のすべての変更をステージングエリアに追加するコマンドです。
ここで言う「変更」には、新しく作成したファイル、変更されたファイル、削除されたファイルが含まれます。
. はカレントディレクトリを意味し、その下にあるすべてのファイルとディレクトリを対象とします。

git commit -m "Remove sensitive files and update repository":
ステージングエリアに追加された変更をコミットするコマンドです。
-m オプションはコミットメッセージを指定します。
この場合、コミットメッセージは "Remove sensitive files and update repository" です。
公開したくないファイルを削除し、リポジトリを更新したことを示しています。

git push origin main:
ローカルリポジトリの変更をリモートリポジトリ（origin）の main ブランチにプッシュするコマンドです。
origin はリモートリポジトリのデフォルト名で、main はブランチ名です。
これでローカルの変更がリモートリポジトリに反映されます。
つまり、欠損があるローカルレポジトリをプッシュしたことになります。

ローカルレポジトリを元に戻す

ローカルレポジトリへ、上述の手順で退避させておいたファイルやディレクトリを戻します。
上記で公開したくないファイルを欠損させたローカルレポジトリをプッシュしましたが、このままでは本番のWebサイトにも欠損が発生してしまいます。─ 開発環境によるけどね。 ─
GitHubに無用なデータを公開しなければ良いだけですから、改めてローカルレポジトリを元に戻しましょう。

除外設定があるローカルレポジトリをプッシュ

この段階のローカルレポジトリは、公開したくないファイルやディレクトリが含まれているものの、「.gitignore」による除外設定が効いている状態です。
これをリモートレポジトリへプッシュします。

git add .
git commit -m "Update repository with .gitignore in place"
git push origin main

git add .:
現在のディレクトリ内のすべての変更をステージングエリアに追加するコマンドです。
新しく作成したファイルや変更されたファイルが含まれます。
. はカレントディレクトリを意味し、その下にあるすべてのファイルとディレクトリを対象とします。

git commit -m "Update repository with .gitignore in place":
ステージングエリアに追加された変更をコミットするコマンドです。
-m オプションは、コミットメッセージを指定します。
この場合、コミットメッセージは "Update repository with .gitignore in place" です。
これは、.gitignore ファイルを更新したことを示しています。

git push origin main:
ローカルリポジトリの変更をリモートリポジトリ（origin）の main ブランチにプッシュするコマンドです。
origin はリモートリポジトリのデフォルト名で、main はブランチ名です。
これでローカルの変更がリモートリポジトリに反映されます。
つまり、除外設定があるローカルレポジトリをプッシュしたことになります。

リモートレポジトリを確認

GitHubのWebにあるリモートレポジトリを確認し、公開したくないファイルやディレクトリが存在しないことを確認しましょう。
後は普段通りgithubを使うだけです。
これで、githubをpublicにしても、公開したくないファイルはwebで閲覧できなくなります。
言い変えると、リモートリポジトリには公開したくないファイルが含まれない状態を維持できるってことですね。

コードを書かないGitHub？！

HTMLなどのコードを書かずにWeb公開できる、ホームページ作成サービスがいろいろありますよね。
文章を書くだけで良いので便利ですが、その文章の管理にGitHubを使うこともあるようです。
要するに多数の記事の管理にGitHubを使うという。
でもちょっとイメージしにくいかな？
普通の文章なら、それこそMarkdown記法だけで十分だと思うし。
まぁでも、アイデアとしてはおもしろいよね！