【Phase 2】Git & Command Line学習：すでに使っているツールを体系的に理解する

Phase 2で実際にGitを使いながら作品を公開してきましたが、体系的に学んだことはありませんでした。ProgateのGitコース・Command Lineコースで、使っているツールを改めて理解しました。

学習の背景

すでにGitを使っていた

Phase 2で作った3つの作品：

  • 自己紹介ページ
  • クリックカウンター
  • タイピングゲーム

これらを公開するために、すでにGitを使っていました：

git init
git add .
git commit -m "メッセージ"
git push

でも、「なぜこうするのか」を完全には理解していませんでした。

Progateで体系的に学ぶ決断

学習方針:

  • Progate（体系的な基礎学習）
  • YouTube/Qiita（実践的な情報収集）
  • AI（サポート・解説）

今回はProgateを活用。

すでに使っているツールを体系的に学ぶことで、理解が深まると判断しました。

Gitコースで学んだこと

Gitとは

Git: バージョン管理システム

できること:

  • コードの変更を記録
  • 過去のバージョンに戻せる
  • チームで共同開発できる

共同開発の3つのStep

Step 1: コードの変更

  • ファイルを編集

Step 2: 共有する準備

  • git add（ファイルを選択）
  • git commit（変更を記録）

Step 3: 共有

  • git push（リモートにアップロード）

基本コマンド（復習）

1. git init

git init
  • Gitを使う準備として実行
  • initialize（初期化）の略

使った場面: 各プロジェクトの最初

2. git add

git add ファイル名
git add .  # すべてのファイル
  • 共有するファイルを選択
  • .（ドット）はすべてのファイルを意味

使った場面: 変更したファイルを選択

3. git commit

git commit -m "メッセージ"
  • 選択したファイルの変更を記録
  • メッセージをコミットメッセージという

使った場面: 「クリックカウンター完成」などのメッセージで記録

4. git remote add

git remote add origin URL
  • リモートリポジトリ（共有のファイル置き場）を登録
  • リモートリポジトリの名前は一般的にorigin

使った場面: GitHubのURLを登録

5. git push

git push origin main
  • リモートリポジトリにアップロード

使った場面: GitHub Pagesで公開するために実行

新しく学んだコマンド

6. git pull

git pull origin main
  • リモートリポジトリからダウンロード
  • 他の人が変更したコードを取り込む

チーム開発で必須のコマンド

7. git status

git status
  • 自分が変更したファイル名を表示
  • ファイルの選択状況も確認できる

使い方:

git status  # 何を変更したか確認
git add .   # 選択
git status  # 選択されたか確認

8. git diff

git diff
  • 変更内容の詳細を確認
  • どの行を変更したか表示される

便利な場面: 「何を変更したか忘れた」とき

9. git log

git log
git log -p  # 変更内容も表示
  • 自分や他人のコミットを把握
  • 誰が、いつ、何をコミットしたか

git log -p: 変更内容も一緒に表示

実務での使い方（理想的な流れ）

# 1. 何を変更したか確認
git status

# 2. 変更内容の詳細を確認
git diff

# 3. ファイルを選択
git add .

# 4. もう一度確認
git status

# 5. 記録
git commit -m "機能を追加"

# 6. アップロード
git push origin main

# 7. 履歴を確認
git log

今後はこの流れで使っていく。

Command Lineコースで学んだこと

コマンドラインとは

コマンドライン: 文字だけでコンピュータを操作するためのもの

VS Codeのターミナルがコマンドラインです。

UNIXコマンド

UNIXコマンド: 主にLinuxやmacOSなどで利用される

コマンド: 命令

$: 入力開始OKの合図

ファイル・ディレクトリ操作

ファイル作成

touch ファイル名

例:

touch index.html
touch style.css script.js

ファイル内容確認

cat ファイル名

例:

cat index.html

ディレクトリ作成

mkdir ディレクトリ名
  • make directoryの略

例:

mkdir new-project

ファイル構造の理解

ツリー構造

ファイルとディレクトリはツリー構造になっています：

/ (ルートディレクトリ)
  └── Users
       └── username (ホームディレクトリ)
            ├── Desktop
            ├── Documents
            └── Downloads

カレントディレクトリ

カレントディレクトリ: 自分が今いるディレクトリ

$の左側にカレントディレクトリが表示されます：

~/Desktop $

→ デスクトップにいる

ディレクトリ移動

cd ディレクトリ名
  • change directoryの略
  • 1つの子階層まで移動

例:

cd Documents  # Documentsに移動
cd            # ホームディレクトリに移動

現在地確認

pwd
  • print working directoryの略
  • カレントディレクトリを表示

ファイル一覧表示

ls
  • listの略
  • ファイル、ディレクトリの一覧を表示
  • 1つの子階層まで表示

ファイル・ディレクトリの移動とコピー

移動・名前変更

mv ファイル名 移動先のディレクトリ名
mv 古いファイル名 新しいファイル名
  • moveの略

例:

mv file.txt folder/      # folder に移動
mv old.txt new.txt       # 名前変更

ファイルコピー

cp コピーするファイル 新しいファイル名
  • copyの略

例:

cp file.txt file2.txt

ディレクトリコピー

cp -r コピーするディレクトリ 新しいディレクトリ
  • -rオプションが必要

例:

cp -r folder/ folder2/

ファイル削除

rm ファイル名

例:

rm test.txt

ディレクトリ削除

rm -r ディレクトリ名

例:

rm -r test-folder/

注意: 削除したファイルは復元できません！

便利機能

Tab補完

  • ファイル名やディレクトリ名を途中まで入力
  • Tabキーで補完

例:

cd Docu[Tab]  → cd Documents/

↑キーで過去のコマンド再利用

  • ↑キーで過去に実行したコマンドを呼び出せる

便利な場面: 同じコマンドを何度も実行するとき

コマンド一覧（まとめ）

ファイル・ディレクトリ操作

コマンド意味例
touchファイル作成touch index.html
mkdirディレクトリ作成mkdir project
catファイル内容表示cat index.html
lsファイル一覧ls
pwd現在地表示pwd
cdディレクトリ移動cd folder/
mv移動・名前変更mv file.txt new.txt
cpファイルコピーcp file.txt file2.txt
cp -rディレクトリコピーcp -r folder/ folder2/
rmファイル削除rm file.txt
rm -rディレクトリ削除rm -r folder/

Gitコマンド

コマンド意味例
git initGit初期化git init
git addファイル選択git add .
git commit変更記録git commit -m "完成"
git pushアップロードgit push origin main
git pullダウンロードgit pull origin main
git status状態確認git status
git diff変更内容確認git diff
git log履歴確認git log

VS Codeで実際に使っているコマンド

すでに使っていたコマンドを再確認：

# プロジェクト作成時
mkdir typing-game
cd typing-game
touch index.html style.css script.js

# Git操作
git init
git add .
git commit -m "タイピングゲーム完成"
git push origin main

これらはすべてコマンドライン！

理解が深まったこと

「なぜこうするのか」が分かった

以前:

  • 「AIが言った通りにコマンドを打つ」
  • 「エラーが出たら分からない」

今:

  • 「なぜ git add が必要か」理解
  • 「git status で確認できる」と知った
  • 「ディレクトリ構造」が理解できた

次回からの変化

今後のプロジェクト作成:

# コマンドの意味を理解しながら実行
pwd                    # 今どこ？
mkdir new-project      # プロジェクト作成
cd new-project         # 移動
touch index.html       # ファイル作成
git init               # Git初期化
git status             # 状態確認

自信を持ってコマンドを打てる。

Progateの価値を再認識

年間契約を活用

今回の学習:

  • Gitコース完走
  • Command Lineコース完走

Progateで学んだコース（累計）:

  1. HTML/CSS ✅
  2. JavaScript ✅
  3. Python ✅
  4. Git ✅
  5. Command Line ✅

5コース完走！

実践と学習のバランス

Phase 2の流れ:

  • 実践（作品作り）
  • 学習（Progate）
  • また実践

このバランスが良い。

次のステップ

次回の作品作りで実践

新しく学んだコマンドを使う:

# 作業前
git status  # 何を変更したか確認
git diff    # 詳細確認

# 作業後
git add .
git status  # 選択されたか確認
git commit -m "機能追加"
git push origin main
git log     # 履歴確認

理解しながら使える。

Progateで次に学ぶコース

Week 4-6（4月）の予定:

  • Reactコース

その後:

  • Node.jsコース（6-7月）
  • SQLコース（7-8月）

Progateを最大限活用していく。

感想

「使いながら学ぶ」の効果

実践してから学ぶのが効果的だと実感しました。

以前の学習順序（Phase 1）:

  1. Progateで学ぶ
  2. （実践なし）

今回の学習順序（Phase 2）:

  1. 実践で使う
  2. Progateで体系的に学ぶ
  3. 理解が深まる

「使ってから学ぶ」方が理解が深い。

すでに知っているからこそ分かる

Gitを使ったことがあるからこそ：

  • 「あ、これやったことある」
  • 「だからこうなっていたのか」
  • 「次はこう使おう」

経験があるから、学習が楽しい。

Phase 2、順調に進んでいます。

実践と学習のバランスが、とても良い感じです。

コメント