WebUIでのファイル編集

この章では、ブラウザ上でGitHubのファイルを直接編集する方法を学びます。ローカル環境がなくても、簡単な修正が可能です。

WebUIでファイルを編集する

編集の手順

1. 編集したいファイルを開く
2. 右上の**鉛筆アイコン（Edit this file）**をクリック
3. 内容を編集
4. 「Commit changes…」をクリック
5. コミットメッセージを入力
6. 「Commit changes」で保存

直接コミット vs ブランチ作成

コミット時に2つの選択肢があります：

オプション	説明	使い分け
Commit directly to main	mainに直接コミット	軽微な修正（タイポ等）
Create a new branch	新しいブランチを作成してPR	レビューが必要な変更

ノート

ブランチ保護が有効な場合、mainへの直接コミットはできません。

新規ファイルの作成

手順

1. 「Add file」→「Create new file」
2. ファイル名を入力（パスも含めて指定可能）
3. 内容を入力
4. コミット

ファイル名でディレクトリを作成

ファイル名入力時に / を含めると、ディレクトリを同時に作成できます：

入力例: src/components/Button.tsx

結果:
src/
└── components/
    └── Button.tsx

テンプレートの自動適用

特定のファイル名を入力すると、テンプレートが提案されます：

• LICENSE → ライセンステンプレート
• .gitignore → 言語別テンプレート
• README.md → READMEのヒント

ファイルのアップロード

手順

1. 「Add file」→「Upload files」
2. ファイルをドラッグ＆ドロップ、または選択
3. コミットメッセージを入力
4. コミット

制限事項

項目	制限
1ファイルあたり	最大 25MB
1回のアップロード	最大 100ファイル
Git LFS	Web UIからはアップロード不可

注意

大きなファイルや大量のファイルは、ローカルからプッシュすることを推奨します。

ファイル名の変更・移動

名前変更

1. ファイルを開いて編集モードに
2. ファイル名の入力欄で新しい名前を入力
3. コミット

移動

ファイル名入力欄でパスを変更：

README.md

# 変更後: docs/README.md

ファイル名欄に「docs/README.md」と入力

親ディレクトリに移動

src/components/Button.tsx

# 変更後: src/Button.tsx

ファイル名欄で「components/」を削除

キーボードショートカット

ファイル名入力欄で `Backspace` を押すと、パスの一部を素早く削除できます。

ファイルの削除

手順

1. 削除したいファイルを開く
2. 右上の「…」→「Delete file」
3. コミットメッセージを入力
4. コミット

複数ファイルの削除

WebUIでは1ファイルずつの削除になります。複数ファイルを削除する場合は：

• github.dev を使用（次の章で解説）
• ローカルで操作してプッシュ

ファイルの表示オプション

Raw表示

ファイルの生データを表示：

• 「Raw」ボタンをクリック
• URL: https://raw.githubusercontent.com/user/repo/branch/path/file

Blame表示

各行の最終編集者とコミットを表示：

• 「Blame」ボタンをクリック
• 誰がいつその行を変更したか確認可能

History

ファイルの変更履歴を表示：

• 「History」ボタンをクリック
• 各コミットの変更を確認可能

コードナビゲーション

シンボルジャンプ

対応言語のファイルでは、関数やクラスの定義にジャンプできます：

1. ファイルを表示
2. 関数名やクラス名をクリック
3. 「Jump to definition」を選択

ファイル検索

リポジトリ内のファイルを素早く検索：

• キーボードショートカット: T
• ファイル名の一部を入力して絞り込み

コード検索

リポジトリ全体からコードを検索：

• キーボードショートカット: S または /
• 正規表現も使用可能

---

中級者向けTips

キーボードショートカット

ショートカット	動作
T	ファイルファインダー
L	行番号にジャンプ
W	ブランチ切り替え
B	Blame表示
E	ファイル編集
.	github.devを開く

パーマリンクの作成

特定のコミット時点のファイルへのリンク：

1. ファイルを表示
2. Y を押す（URLがコミットハッシュに変わる）

Before: github.com/user/repo/blob/main/file.js
After:  github.com/user/repo/blob/abc1234/file.js

行番号へのリンク

特定の行を共有：

1. 行番号をクリック（ハイライトされる）
2. Shift + クリックで範囲選択
3. URLに #L10 や #L10-L20 が追加される

https://github.com/user/repo/blob/main/file.js#L10-L20

マークダウンのプレビュー

.md ファイルは自動でレンダリングされます：

• 「Code」ボタンで生のマークダウンを表示
• 「Preview」ボタンでレンダリング結果を表示

CSVの表形式表示

.csv ファイルはテーブルとして表示されます：

• 検索、ソート機能あり
• 「Raw」で生データを表示

Jupyter Notebookの表示

.ipynb ファイルはレンダリングされて表示：

• コード、マークダウン、出力を表示
• グラフや画像も表示される

---

まとめ

操作	手順
編集	ファイル → 鉛筆アイコン → 編集 → コミット
作成	Add file → Create new file → 入力 → コミット
アップロード	Add file → Upload files → ドロップ → コミット
削除	ファイル → … → Delete file → コミット
名前変更	編集 → ファイル名を変更 → コミット

WebUI編集の使い分け

状況	推奨
タイポ修正	WebUI で直接コミット
README 更新	WebUI または github.dev
設定ファイル修正	WebUI（新ブランチ→PR）
複数ファイル変更	github.dev またはローカル
大規模な変更	ローカル環境

次の章では、github.dev エディタでの編集方法を学びます。

Q1. WebUIでファイルを編集する際、どのアイコンをクリックしますか?

A) 歯車アイコン B) 鉛筆アイコン C) フォルダアイコン D) ゴミ箱アイコン

Q2. WebUIでのファイルアップロードの制限として正しいものはどれですか?

A) 1ファイル最大10MB B) 1ファイル最大25MB C) 1ファイル最大50MB D) 制限なし

Q3. Blameモードで確認できる情報はどれですか?

A) ファイルのサイズと作成日 B) 各行の最終編集者とコミット C) ファイルの依存関係 D) ファイルのダウンロード回数

回答を確認する