第4章：ファイルのアップロードと管理
学習目標
この章を読み終える頃には、GitHubのWeb画面を使ってファイルの追加、編集、削除ができるようになります。また、「commit（コミット）」という重要な概念を理解し、変更履歴を適切に記録できるようになります。
4.1 Web画面でのファイル追加・編集・削除
まずは自分のリポジトリを開こう
前章で作成したリポジトリを開いてみましょう。GitHubにログインした状態で、画面右上のプロフィールアイコンをクリックし、「Your repositories」を選択すると、あなたのリポジトリ一覧が表示されます。
作成したリポジトリをクリックすると、そのリポジトリの画面が開きます。README.mdファイルを作成していれば、そのファイルが1つ表示されているはずです。
この画面が、あなたの「作業場」になります。ここから、ファイルの追加、編集、削除といったすべての基本操作を行うことができます。
ファイルを追加する方法
新しいファイルを追加するには、「Add file」という緑色のボタンを探してください。このボタンをクリックすると、以下の選択肢が表示されます：
「Create new file」 新しいファイルを一から作成します。テキストファイル、HTMLファイル、CSSファイルなど、どんな種類のファイルでも作成できます。
「Upload files」 すでにあなたのPC上にあるファイルをアップロードします。画像、文書ファイル、プログラムファイルなど、あらゆる種類のファイルをアップロードできます。
方法1：ドラッグ&ドロップでアップロード
最も簡単な方法は、ドラッグ&ドロップです：
- 「Upload files」をクリック
- PCのエクスプローラー（WindowsやMac）から、アップロードしたいファイルを選択
- そのままブラウザの画面にドラッグして、指定された領域にドロップ
対応しているファイル形式：
- テキストファイル（.txt、.html、.css、.js など）
- 画像ファイル（.jpg、.png、.gif、.svg など）
- 文書ファイル（.pdf、.docx など）
- 圧縮ファイル（.zip、.tar など）
ファイルサイズの制限：
- 1つのファイルは100MBまで
- 大きな画像や動画ファイルの場合は、事前に圧縮することをお勧めします
ファイルをドロップすると、アップロードの進行状況が表示されます。完了すると、「Commit changes」という画面が表示されます。これは「この変更を記録として残しますか？」という確認画面です。詳しくは4.2節で説明します。
方法2：新しいファイルを直接作成
「Create new file」を選択すると、ブラウザ上でファイルを編集できる画面が開きます：
ファイル名の入力 上部の入力欄にファイル名を入力します。拡張子も忘れずに入力してください（例：index.html、style.css、script.js）。
エディタ画面 メイン部分には、テキストエディタが表示されます。ここにファイルの内容を入力していきます。
プレビュー機能 MarkdownファイルやHTMLファイルの場合、「Preview」タブをクリックすることで、実際の表示を確認できます。
ファイルを編集する方法
既存のファイルを編集するには：
- ファイル一覧から、編集したいファイル名をクリック
- ファイルの内容が表示されたら、右上の鉛筆アイコン（Edit this file）をクリック
- エディタ画面で内容を修正
- 修正完了後、下にスクロールして「Commit changes」で保存
Web エディタの便利機能：
- 行番号表示：コードの特定の行を指定しやすい
- シンタックスハイライト：プログラムコードが色分けされて見やすくなる
- 検索・置換：Ctrl+F（Windows）またはCmd+F（Mac）で文字列検索
- タブとスペース変換：インデントの統一が簡単
ファイルを削除する方法
不要になったファイルを削除するには：
- 削除したいファイルを開く
- 右上のゴミ箱アイコン（Delete this file）をクリック
- 確認画面で削除理由を入力（任意）
- 「Commit changes」で削除を確定
重要な注意点： ファイルを削除しても、GitHubの履歴には残り続けます。つまり、間違って削除してしまった場合でも、後から復元することが可能です。これがGitHubの大きな安心要素の一つです。
ファイルの変更履歴を確認することで、「いつ、誰が、何を変更したか」を詳細に追跡できます。
よくある失敗と対処法
「ファイル名を間違えた」 → ファイルを開いて編集画面に入り、上部のファイル名部分を変更できます。
「間違った内容をアップロードしてしまった」 → 同じ名前のファイルを再度アップロードすれば、自動的に置き換わります。
「アップロードに失敗する」 → ファイルサイズが大きすぎる可能性があります。100MB以下になるよう圧縮してみてください。
「日本語ファイル名が文字化けする」 → ファイル名には英数字とハイフン（-）、アンダースコア（_）を使用することをお勧めします。
4.2 commit（保存）の概念と実践
「保存」と「commit」の違い
普通のテキストエディタやWordでは、Ctrl+Sを押すと「上書き保存」されます。新しい内容で古い内容が置き換わり、変更前の状態は失われてしまいます。
GitHubの「commit」は、この「保存」とは全く異なります：
通常の保存
- 新しい内容で古い内容を上書き
- 変更前の状態は失われる
- いつ、なぜ変更したかの記録は残らない
GitHubのcommit
- 変更前と変更後の両方を記録として保持
- いつでも過去の任意の時点に戻れる
- 変更理由も一緒に記録できる
- 変更履歴をタイムラインとして閲覧可能
つまり、commitは「変更の記録を作成する」行為です。「この時点でのプロジェクトの状態を、記録として残しておこう」という意味です。
commitを作成する実際の手順
ファイルを作成・編集・削除した後、画面の下部に「Commit changes」というセクションが表示されます。ここでcommitを作成します：
1. 変更内容の確認 画面には、あなたが行った変更の詳細が表示されます：
- 緑色の行：追加された内容
- 赤色の行：削除された内容
- 黄色の行：修正された内容
これらの表示を「diff（差分）」と呼びます。間違いがないか、必ず確認してください。
2. commitメッセージの入力
最も重要なのが、「commitメッセージ」の入力です。これは「なぜこの変更を行ったか」を説明する短い文章です。
メッセージ入力欄の構成：
- タイトル欄（必須）：変更内容を1行で要約（50文字以内推奨）
- 詳細説明欄（任意）：必要に応じて詳しい説明を記入
3. commitの実行 「Commit changes」ボタンをクリックすると、commitが作成されます。
commit作成後、リポジトリの画面に戻ると、ファイル一覧の上部に「○○ commits」という表示が現れます。これをクリックすると、これまでのcommit履歴を一覧で見ることができます。
commitのタイミング
いつcommitすれば良いのか？ 初心者の方からよく受ける質問です。明確なルールはありませんが、以下のようなタイミングが適切です：
機能や修正が一区切りついた時
- 「ヘッダーのデザインを修正した」
- 「お問い合わせフォームを追加した」
- 「バグを1つ修正した」
1日の作業終了時
- 「今日はここまで進んだ」という記録として
実験前のバックアップとして
- 「これから大きな変更を試すので、現在の状態を記録しておこう」
頻度の目安：
- 最低でも1日1回
- 慣れてくると、30分〜1時間に1回程度
- 重要な変更の前後は必ず
commitが失敗する場合
よくあるエラーと対処法：
「Commit message is required」 → commitメッセージを入力していません。タイトル欄に変更内容を入力してください。
「Nothing to commit」 → 何も変更されていない状態でcommitしようとしています。何かファイルを変更してからcommitしてください。
「File too large」 → 大きすぎるファイルを追加しようとしています。ファイルサイズを小さくするか、そのファイルを除外してcommitしてください。
4.3 commitメッセージの書き方とコツ
分かりやすいcommitメッセージの構成要素
commitメッセージは、将来の自分や他の人が「この変更は何のためだったか」を理解するための重要な記録です。分かりやすいメッセージを書くコツをご紹介します。
良いcommitメッセージの特徴：
- 何を変更したかが明確
- なぜ変更したかが分かる
- 50文字以内で簡潔
- 動詞で始まる（「追加」「修正」「削除」など）
例：良いcommitメッセージ
- 「ヘッダーナビゲーションの色をブルーに変更」
- 「お問い合わせフォームのバリデーション機能を追加」
- 「IEでレイアウトが崩れる問題を修正」
- 「商品一覧ページの読み込み速度を改善」
例：悪いcommitメッセージ
- 「修正」（何を修正したか不明）
- 「test」（テストの内容が不明）
- 「あああ」（意味が全く分からない）
- 「昨日の続き」（具体的な内容が分からない）
ブランチでのファイル操作
ブランチ機能を使用することで、メインのコードに影響を与えることなく、安全に実験や新機能の開発を行えます。各ブランチでの変更は独立して管理され、必要に応じて統合できます。
日本語でのメッセージ作成法
GitHubのcommitメッセージは英語で書かれることも多いですが、日本語で書いても全く問題ありません。特に以下の場合は、日本語の方が良いでしょう：
日本語がお勧めの場面：
- 個人プロジェクトや日本人チームでの開発
- 学習目的のプロジェクト
- 複雑な変更理由を詳しく説明したい場合
日本語commitメッセージのパターン：
修正系
- 「○○の表示崩れを修正」
- 「○○機能のバグを修正」
- 「○○の誤字を修正」
追加系
- 「○○ページを追加」
- 「○○機能を追加」
- 「○○のスタイルを追加」
変更系
- 「○○のデザインを変更」
- 「○○の処理方法を変更」
- 「○○の設定を変更」
競合の解決方法
複数の人が同時に同じファイルを編集すると、「競合（コンフリクト）」が発生することがあります。これはGitHubが「どちらの変更を採用すべきか」を判断できない状態です。適切な手順で解決することで、安全に変更を統合できます。
削除系
- 「不要な○○を削除」
- 「古い○○ファイルを削除」
詳細説明を活用する
タイトルだけでは説明しきれない場合は、詳細説明欄を活用しましょう：
例：詳細説明付きcommit
タイトル：スマートフォン表示の改善
詳細説明：
- ナビゲーションメニューをハンバーガーメニューに変更
- テーブルを横スクロール可能に修正
- フォントサイズを14pxから16pxに拡大
- これにより、スマートフォンでの操作性が大幅に向上
参考Issue: #12
詳細説明に含めると良い情報：
- 変更した理由や背景
- 影響を受ける機能や画面
- 関連するIssueやPull Requestの番号
- テスト結果や動作確認方法
commitメッセージの修正
「commitした後で、メッセージの間違いに気づいた」という場合もあります。GitHubのWeb画面からは直接修正できませんが、以下の方法があります：
対処法1：新しいcommitで修正 間違いが小さい場合は、「前のcommitメッセージの修正」というcommitを新たに作成する方法が簡単です。
対処法2：GitHub Desktopを使用 GitHub Desktopというアプリケーションを使うと、最新のcommitメッセージを修正できます（第5章で詳しく説明します）。
4.4 間違ったcommitを取り消す方法
Revert機能の使い方
「commitした変更を元に戻したい」という場面は、開発作業では珍しくありません。GitHubには、安全にcommitを取り消すための「Revert」機能があります。
Revert機能の特徴：
- 過去のcommitを「無かったこと」にするのではなく、「その変更を打ち消す新しいcommit」を作成
- 履歴は完全に保持されるため、安全
- いつでも、どのcommitでも対象にできる
実際の取り消し手順
1. commit履歴を表示 リポジトリ画面の「○○ commits」をクリックして、commit履歴の一覧を表示します。
2. 取り消したいcommitを探す 取り消したいcommitをクリックして、その詳細画面を開きます。
3. Revertボタンをクリック commit詳細画面の右上にある「Revert」ボタンをクリックします。
4. Revert commitのメッセージを確認 「Revert “元のcommitメッセージ”」という形でメッセージが自動生成されます。必要に応じて修正してください。
5. Revert commitを作成 「Create revert」ボタンをクリックして、取り消しのcommitを作成します。
Revert後の状態確認
Revertが完了すると：
- 取り消し対象の変更が元に戻る
- 新しいcommitが1つ追加される（Revert commit）
- 元のcommitは履歴に残り続ける
つまり、「変更を取り消した」という記録も、きちんと履歴として残ります。これにより、「なぜ取り消したのか」「いつ取り消したのか」も後から確認できます。
複数のcommitを取り消す場合
複数のcommitを一度に取り消したい場合は、以下のような手順になります：
新しいcommitから順番に取り消す commitは新しいものから順番にRevertしていきます。古いcommitを先に取り消すと、コンフリクト（競合）が発生する可能性があります。
まとめて取り消すcommitを作成 個別にRevertするのではなく、手動で「複数の変更をまとめて取り消すcommit」を作成する方法もあります。
取り消し操作の注意点
Revert機能は安全ですが、以下の点に注意してください：
他の人と共同作業中の場合 自分以外の人が関わるcommitをRevertする前に、チームメンバーに相談することをお勧めします。
依存関係がある変更 あるcommitが、他のcommitに依存している場合、Revertによって新たな問題が発生する可能性があります。
テストやバックアップ 重要なプロジェクトの場合は、Revertする前に現在の状態をバックアップしておくと安心です。
よくある質問
Q: Revertしたcommitを、さらにRevertできますか？ A: はい、可能です。Revertした変更を再度有効にしたい場合は、RevertのcommitをRevertしてください。
Q: 古いcommitだけをピンポイントでRevertできますか？ A: 可能ですが、その後のcommitで同じ部分が変更されている場合、コンフリクトが発生する可能性があります。
Q: Web画面以外でRevertする方法はありますか？ A: はい、GitHub DesktopやGitコマンドを使用しても同様の操作が可能です。
まとめ
この章では、GitHubのWeb画面でのファイル管理の基本操作を学びました：
ファイル操作の基本
- ドラッグ&ドロップでの簡単アップロード
- Web エディタでの直接編集
- 安全な削除方法
commitの概念
- 単なる「保存」ではなく「変更の記録」
- 履歴として蓄積され、いつでも過去に戻れる
- commitメッセージで変更理由を記録
commitメッセージの書き方
- 50文字以内で簡潔に
- 何を変更したかを明確に
- 日本語で書いても問題なし
安全な取り消し方法
- Revert機能で履歴を保持したまま変更を無効化
- 過去のどの時点にも安全に戻れる
次の章では、GitHub Desktopアプリを使ったローカル環境での作業方法を学び、より効率的な開発ワークフローを身につけます。
理解度確認：
□ GitHubでファイルの追加・編集・削除ができる
□ commitの概念を理解し、適切なタイミングでcommitできる
□ 分かりやすいcommitメッセージを書ける
□ 間違ったcommitを安全に取り消せる
□ Web エディタの基本機能を活用できる