Git・GitHub実践チュートリアル：初心者のための完全ガイド【2026年版】

Tech Trends AI

2026年2月13日 - 10 minutes read - 2078 words

はじめに

Gitは分散型バージョン管理システム、GitHubはGitリポジトリのホスティングサービスです。現代のソフトウェア開発において必須のツールですが、初心者にとっては概念の理解が難しく感じることも多いでしょう。

この記事では、実際に簡単なプロジェクトを作成しながら、Git・GitHubの基本操作を一歩ずつ学んでいきます。理論よりも実践を重視し、手を動かしながら覚えていけるように構成しています。

今回作成するプロジェクト

個人の読書リストを管理するシンプルなWebサイトを作成します。このプロジェクトを通して以下の操作を学びます：

リポジトリの作成と初期設定
ファイルの追加とコミット
ブランチの作成と切り替え
変更のマージとプルリクエスト
共同開発の基本ワークフロー

事前準備

1. 必要なツールのインストール

Git

# Windows（GitBashをインストール）
# https://gitforwindows.org/

# macOS（Homebrewを使用）
brew install git

# Linux（Ubuntu/Debian）
sudo apt update
sudo apt install git

Node.js（今回のプロジェクトで使用）

# Node.jsの公式サイトからダウンロード
# https://nodejs.org/

# バージョン確認
node --version
npm --version

2. GitHubアカウントの作成

GitHub.comにアクセス
「Sign up」をクリックしてアカウントを作成
メール認証を完了させる

3. Gitの初期設定

# ユーザー名とメールアドレスを設定
git config --global user.name "あなたの名前"
git config --global user.email "あなたのメール@example.com"

# 設定確認
git config --list

Step 1: GitHubでリポジトリを作成

1.1 新規リポジトリの作成

GitHubにログインし、右上の「+」アイコンから「New repository」を選択
以下の設定を入力：
- Repository name: my-reading-list
- Description: 個人の読書リスト管理サイト
- Public/Private: Public を選択
- Initialize with README: ✅ チェック
- Add .gitignore: Node を選択
- Choose a license: MIT License を選択
「Create repository」をクリック

1.2 リポジトリのクローン

ローカル環境にリポジトリをコピーします：

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

# リポジトリをクローン（URLは自分のリポジトリに置き換え）
git clone https://github.com/あなたのユーザー名/my-reading-list.git

# プロジェクトディレクトリに移動
cd my-reading-list

# ファイル構成を確認
ls -la

Step 2: 基本プロジェクトの作成

2.1 プロジェクト構造の準備

# 基本的なディレクトリ構造を作成
mkdir -p src css js
touch index.html src/books.js css/styles.css js/main.js

# ディレクトリ構造を確認
tree .
# または
find . -type f -name "*.html" -o -name "*.js" -o -name "*.css" | sort

2.2 HTML ファイルの作成

index.html を編集：

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>マイ読書リスト</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <header>
        <h1>📚 マイ読書リスト</h1>
    </header>

    <main>
        <section class="book-form">
            <h2>新しい本を追加</h2>
            <form id="bookForm">
                <input type="text" id="bookTitle" placeholder="本のタイトル" required>
                <input type="text" id="bookAuthor" placeholder="著者名" required>
                <select id="bookStatus">
                    <option value="want-to-read">読みたい</option>
                    <option value="reading">読書中</option>
                    <option value="completed">読了</option>
                </select>
                <button type="submit">追加</button>
            </form>
        </section>

        <section class="book-list">
            <h2>本リスト</h2>
            <div id="bookContainer"></div>
        </section>
    </main>

    <script src="js/main.js"></script>
</body>
</html>

2.3 CSS ファイルの作成

css/styles.css を編集：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
}

header {
    background-color: #2c3e50;
    color: white;
    text-align: center;
    padding: 1rem;
    margin-bottom: 2rem;
}

main {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1rem;
}

.book-form {
    background-color: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin-bottom: 2rem;
}

.book-form h2 {
    margin-bottom: 1rem;
    color: #2c3e50;
}

form {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 1rem;
    align-items: end;
}

input, select {
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}

button {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #2980b9;
}

.book-list {
    background-color: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.book-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #eee;
}

.book-item:last-child {
    border-bottom: none;
}

.book-info {
    flex-grow: 1;
}

.book-title {
    font-weight: bold;
    margin-bottom: 0.25rem;
}

.book-author {
    color: #666;
    font-size: 0.9rem;
}

.book-status {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: bold;
}

.status-want-to-read {
    background-color: #f39c12;
    color: white;
}

.status-reading {
    background-color: #e74c3c;
    color: white;
}

.status-completed {
    background-color: #27ae60;
    color: white;
}

@media (max-width: 768px) {
    form {
        grid-template-columns: 1fr;
    }

    .book-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .book-status {
        margin-top: 0.5rem;
    }
}

2.4 JavaScript ファイルの作成

js/main.js を編集：

class ReadingList {
    constructor() {
        this.books = this.loadBooks();
        this.bookForm = document.getElementById('bookForm');
        this.bookContainer = document.getElementById('bookContainer');

        this.init();
    }

    init() {
        this.bookForm.addEventListener('submit', (e) => this.addBook(e));
        this.renderBooks();
    }

    addBook(e) {
        e.preventDefault();

        const title = document.getElementById('bookTitle').value.trim();
        const author = document.getElementById('bookAuthor').value.trim();
        const status = document.getElementById('bookStatus').value;

        if (!title || !author) {
            alert('タイトルと著者名は必須です');
            return;
        }

        const book = {
            id: Date.now().toString(),
            title,
            author,
            status,
            addedDate: new Date().toLocaleDateString('ja-JP')
        };

        this.books.push(book);
        this.saveBooks();
        this.renderBooks();
        this.bookForm.reset();
    }

    removeBook(id) {
        this.books = this.books.filter(book => book.id !== id);
        this.saveBooks();
        this.renderBooks();
    }

    changeStatus(id, newStatus) {
        const book = this.books.find(book => book.id === id);
        if (book) {
            book.status = newStatus;
            this.saveBooks();
            this.renderBooks();
        }
    }

    renderBooks() {
        if (this.books.length === 0) {
            this.bookContainer.innerHTML = '<p>まだ本が追加されていません。</p>';
            return;
        }

        const booksHtml = this.books.map(book => this.createBookHTML(book)).join('');
        this.bookContainer.innerHTML = booksHtml;

        // イベントリスナーを追加
        this.attachEventListeners();
    }

    createBookHTML(book) {
        const statusText = {
            'want-to-read': '読みたい',
            'reading': '読書中',
            'completed': '読了'
        };

        return `
            <div class="book-item" data-id="${book.id}">
                <div class="book-info">
                    <div class="book-title">${book.title}</div>
                    <div class="book-author">著者: ${book.author}</div>
                    <div class="book-date">追加日: ${book.addedDate}</div>
                </div>
                <div class="book-actions">
                    <span class="book-status status-${book.status}">
                        ${statusText[book.status]}
                    </span>
                    <select class="status-select" data-id="${book.id}">
                        <option value="want-to-read" ${book.status === 'want-to-read' ? 'selected' : ''}>読みたい</option>
                        <option value="reading" ${book.status === 'reading' ? 'selected' : ''}>読書中</option>
                        <option value="completed" ${book.status === 'completed' ? 'selected' : ''}>読了</option>
                    </select>
                    <button class="remove-btn" data-id="${book.id}">削除</button>
                </div>
            </div>
        `;
    }

    attachEventListeners() {
        // 削除ボタン
        document.querySelectorAll('.remove-btn').forEach(btn => {
            btn.addEventListener('click', (e) => {
                const id = e.target.dataset.id;
                if (confirm('この本を削除しますか？')) {
                    this.removeBook(id);
                }
            });
        });

        // ステータス変更
        document.querySelectorAll('.status-select').forEach(select => {
            select.addEventListener('change', (e) => {
                const id = e.target.dataset.id;
                const newStatus = e.target.value;
                this.changeStatus(id, newStatus);
            });
        });
    }

    saveBooks() {
        localStorage.setItem('readingList', JSON.stringify(this.books));
    }

    loadBooks() {
        const saved = localStorage.getItem('readingList');
        return saved ? JSON.parse(saved) : [];
    }
}

// アプリケーションの初期化
document.addEventListener('DOMContentLoaded', () => {
    new ReadingList();
});

2.5 データファイルの作成

src/books.js を編集（サンプルデータとして）：

// サンプル書籍データ
const sampleBooks = [
    {
        id: '1',
        title: 'プログラマーの数学',
        author: '結城浩',
        status: 'completed',
        addedDate: '2026/01/15'
    },
    {
        id: '2',
        title: 'リーダブルコード',
        author: 'Dustin Boswell、Trevor Foucher',
        status: 'reading',
        addedDate: '2026/01/20'
    },
    {
        id: '3',
        title: 'デザインパターン',
        author: 'Gang of Four',
        status: 'want-to-read',
        addedDate: '2026/02/01'
    }
];

// ローカルストレージにサンプルデータを設定する関数
function loadSampleData() {
    const existing = localStorage.getItem('readingList');
    if (!existing) {
        localStorage.setItem('readingList', JSON.stringify(sampleBooks));
        console.log('サンプルデータが読み込まれました');
    }
}

// 開発用：サンプルデータを強制的に読み込む
function resetToSampleData() {
    localStorage.setItem('readingList', JSON.stringify(sampleBooks));
    window.location.reload();
}

// ブラウザからアクセス可能にする
if (typeof window !== 'undefined') {
    window.loadSampleData = loadSampleData;
    window.resetToSampleData = resetToSampleData;
}

Step 3: 最初のコミットとプッシュ

3.1 変更状況の確認

# 現在の状態を確認
git status

# 変更されたファイルの内容を確認
git diff

3.2 ファイルをステージングエリアに追加

# すべてのファイルを追加
git add .

# または個別に追加する場合
git add index.html
git add css/styles.css
git add js/main.js
git add src/books.js

# ステージングエリアの状態を確認
git status

3.3 コミットの作成

# 意味のあるコミットメッセージでコミット
git commit -m "feat: 読書リスト管理サイトの基本機能を実装

- HTMLベースのユーザーインターフェースを追加
- 本の追加、削除、ステータス変更機能を実装
- レスポンシブデザインのCSSを適用
- ローカルストレージでデータ永続化
- サンプルデータ機能を追加"

# コミット履歴を確認
git log --oneline

3.4 GitHub にプッシュ

# リモートリポジトリにプッシュ
git push origin main

# プッシュ完了後、GitHubでリポジトリを確認

Step 4: ブランチを使った機能開発

4.1 新しい機能ブランチの作成

検索機能を追加するための新しいブランチを作成します：

# 新しいブランチを作成して移動
git checkout -b feature/search-functionality

# ブランチの確認
git branch

# 現在のブランチを確認
git branch --show-current

4.2 検索機能の実装

index.html に検索フォームを追加：

<!-- book-form セクションの後に追加 -->
<section class="search-section">
    <h2>本を検索</h2>
    <div class="search-form">
        <input type="text" id="searchInput" placeholder="タイトルまたは著者で検索...">
        <select id="statusFilter">
            <option value="">すべて</option>
            <option value="want-to-read">読みたい</option>
            <option value="reading">読書中</option>
            <option value="completed">読了</option>
        </select>
        <button id="clearSearch">クリア</button>
    </div>
</section>

css/styles.css に検索機能のスタイルを追加：

/* 既存のCSSの最後に追加 */

.search-section {
    background-color: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin-bottom: 2rem;
}

.search-section h2 {
    margin-bottom: 1rem;
    color: #2c3e50;
}

.search-form {
    display: grid;
    grid-template-columns: 2fr 1fr auto;
    gap: 1rem;
    align-items: center;
}

.book-item.hidden {
    display: none;
}

.search-stats {
    margin-top: 1rem;
    padding: 0.5rem;
    background-color: #ecf0f1;
    border-radius: 4px;
    font-size: 0.9rem;
    color: #2c3e50;
}

@media (max-width: 768px) {
    .search-form {
        grid-template-columns: 1fr;
    }
}

js/main.js に検索機能を追加：

// ReadingListクラスに以下のメソッドを追加

init() {
    this.bookForm.addEventListener('submit', (e) => this.addBook(e));
    this.setupSearch(); // この行を追加
    this.renderBooks();
}

setupSearch() {
    this.searchInput = document.getElementById('searchInput');
    this.statusFilter = document.getElementById('statusFilter');
    this.clearSearchBtn = document.getElementById('clearSearch');

    if (this.searchInput) {
        this.searchInput.addEventListener('input', () => this.filterBooks());
    }

    if (this.statusFilter) {
        this.statusFilter.addEventListener('change', () => this.filterBooks());
    }

    if (this.clearSearchBtn) {
        this.clearSearchBtn.addEventListener('click', () => this.clearSearch());
    }
}

filterBooks() {
    const searchTerm = this.searchInput ? this.searchInput.value.toLowerCase() : '';
    const statusFilter = this.statusFilter ? this.statusFilter.value : '';

    const bookItems = document.querySelectorAll('.book-item');
    let visibleCount = 0;

    bookItems.forEach(item => {
        const title = item.querySelector('.book-title').textContent.toLowerCase();
        const author = item.querySelector('.book-author').textContent.toLowerCase();
        const status = item.querySelector('.book-status').className.includes(`status-${statusFilter}`) || !statusFilter;

        const matchesSearch = title.includes(searchTerm) || author.includes(searchTerm);
        const matchesStatus = !statusFilter || status;

        if (matchesSearch && matchesStatus) {
            item.classList.remove('hidden');
            visibleCount++;
        } else {
            item.classList.add('hidden');
        }
    });

    this.updateSearchStats(visibleCount);
}

updateSearchStats(count) {
    let statsElement = document.getElementById('searchStats');
    if (!statsElement) {
        statsElement = document.createElement('div');
        statsElement.id = 'searchStats';
        statsElement.className = 'search-stats';
        document.querySelector('.book-list').appendChild(statsElement);
    }

    statsElement.textContent = `${count} 件の本が見つかりました`;
}

clearSearch() {
    if (this.searchInput) this.searchInput.value = '';
    if (this.statusFilter) this.statusFilter.value = '';

    document.querySelectorAll('.book-item').forEach(item => {
        item.classList.remove('hidden');
    });

    this.updateSearchStats(this.books.length);
}

4.3 機能テストとコミット

# ブラウザでindex.htmlを開いて動作確認
open index.html
# または
python -m http.server 8000
# ブラウザで http://localhost:8000 にアクセス

# 変更をコミット
git add .
git commit -m "feat: 本の検索・フィルタリング機能を追加

- タイトル・著者による検索機能
- ステータスによるフィルタリング
- 検索結果数の表示
- 検索クリア機能
- レスポンシブ対応"

# プッシュ
git push origin feature/search-functionality

Step 5: プルリクエストの作成

5.1 GitHubでプルリクエストを作成

GitHubリポジトリにアクセス
「Compare & pull request」ボタンをクリック
プルリクエストのタイトルと説明を記入：

feat: 本の検索・フィルタリング機能を追加

## 概要
読書リスト管理サイトに検索とフィルタリング機能を追加しました。

## 追加機能
- タイトル・著者名による部分一致検索
- ステータス（読みたい/読書中/読了）によるフィルタリング
- 検索結果数の表示
- 検索条件のクリア機能

## 技術的な詳細
- JavaScriptで動的な検索機能を実装
- CSSでレスポンシブなUI設計
- ユーザビリティを考慮したインターフェース

## テスト方法
1. 本を数冊追加する
2. 検索ボックスにキーワードを入力
3. ステータスフィルターを使用
4. 結果が正しく表示されることを確認

## スクリーンショット
（実際には画像を添付）

## チェックリスト
- [x] 機能は正常に動作する
- [x] コードはリーダブル
- [x] レスポンシブデザインに対応
- [x] 既存機能に影響なし

「Create pull request」をクリック

5.2 プルリクエストのレビューとマージ

実際のチーム開発では他の人がレビューしますが、今回は自分でレビューしてマージします：

「Files changed」タブで変更内容を確認
必要に応じてコメントを追加
「Review changes」から「Approve」を選択
「Merge pull request」をクリック
「Confirm merge」をクリック

Step 6: ブランチのクリーンアップとプル

6.1 ローカル環境をメインブランチに戻す

# メインブランチに移動
git checkout main

# リモートから最新の変更を取得
git pull origin main

# マージされた機能ブランチを削除
git branch -d feature/search-functionality

# リモートブランチも削除
git push origin --delete feature/search-functionality

# ブランチの確認
git branch -a

6.2 マージ結果の確認

# コミット履歴を確認
git log --oneline --graph

# 現在のファイル構成を確認
ls -la

Step 7: より高度な機能の追加

7.1 評価機能ブランチの作成

本に星評価機能を追加しましょう：

# 新しい機能ブランチを作成
git checkout -b feature/book-rating

# ブランチ確認
git branch --show-current

7.2 評価機能の実装

js/main.js を更新：

// addBook メソッドを更新
addBook(e) {
    e.preventDefault();

    const title = document.getElementById('bookTitle').value.trim();
    const author = document.getElementById('bookAuthor').value.trim();
    const status = document.getElementById('bookStatus').value;

    if (!title || !author) {
        alert('タイトルと著者名は必須です');
        return;
    }

    const book = {
        id: Date.now().toString(),
        title,
        author,
        status,
        rating: 0, // 評価を追加
        addedDate: new Date().toLocaleDateString('ja-JP')
    };

    this.books.push(book);
    this.saveBooks();
    this.renderBooks();
    this.bookForm.reset();
}

// createBookHTML メソッドを更新
createBookHTML(book) {
    const statusText = {
        'want-to-read': '読みたい',
        'reading': '読書中',
        'completed': '読了'
    };

    const ratingStars = this.createStarRating(book.rating, book.id);

    return `
        <div class="book-item" data-id="${book.id}">
            <div class="book-info">
                <div class="book-title">${book.title}</div>
                <div class="book-author">著者: ${book.author}</div>
                <div class="book-date">追加日: ${book.addedDate}</div>
                <div class="book-rating">
                    評価: ${ratingStars}
                </div>
            </div>
            <div class="book-actions">
                <span class="book-status status-${book.status}">
                    ${statusText[book.status]}
                </span>
                <select class="status-select" data-id="${book.id}">
                    <option value="want-to-read" ${book.status === 'want-to-read' ? 'selected' : ''}>読みたい</option>
                    <option value="reading" ${book.status === 'reading' ? 'selected' : ''}>読書中</option>
                    <option value="completed" ${book.status === 'completed' ? 'selected' : ''}>読了</option>
                </select>
                <button class="remove-btn" data-id="${book.id}">削除</button>
            </div>
        </div>
    `;
}

// 星評価生成メソッドを追加
createStarRating(rating, bookId) {
    let stars = '';
    for (let i = 1; i <= 5; i++) {
        const filled = i <= rating ? 'filled' : '';
        stars += `<span class="star ${filled}" data-rating="${i}" data-book-id="${bookId}">★</span>`;
    }
    return stars;
}

// イベントリスナーを更新
attachEventListeners() {
    // 削除ボタン
    document.querySelectorAll('.remove-btn').forEach(btn => {
        btn.addEventListener('click', (e) => {
            const id = e.target.dataset.id;
            if (confirm('この本を削除しますか？')) {
                this.removeBook(id);
            }
        });
    });

    // ステータス変更
    document.querySelectorAll('.status-select').forEach(select => {
        select.addEventListener('change', (e) => {
            const id = e.target.dataset.id;
            const newStatus = e.target.value;
            this.changeStatus(id, newStatus);
        });
    });

    // 星評価
    document.querySelectorAll('.star').forEach(star => {
        star.addEventListener('click', (e) => {
            const rating = parseInt(e.target.dataset.rating);
            const bookId = e.target.dataset.bookId;
            this.setRating(bookId, rating);
        });
    });
}

// 評価設定メソッドを追加
setRating(bookId, rating) {
    const book = this.books.find(book => book.id === bookId);
    if (book) {
        book.rating = rating;
        this.saveBooks();
        this.renderBooks();
    }
}

css/styles.css に星評価のスタイルを追加：

/* 既存のCSSの最後に追加 */

.book-rating {
    margin-top: 0.25rem;
}

.star {
    font-size: 1.2rem;
    color: #ddd;
    cursor: pointer;
    transition: color 0.2s;
    margin-right: 2px;
}

.star:hover,
.star.filled {
    color: #f1c40f;
}

.star:hover ~ .star {
    color: #ddd;
}

.book-rating:hover .star:hover,
.book-rating:hover .star:hover ~ .star {
    color: #f1c40f;
}

7.3 コミットとプッシュ

# 変更をコミット
git add .
git commit -m "feat: 本に星評価機能を追加

- 1-5星による評価システム実装
- クリックで評価設定可能
- ホバーエフェクトでUX改善
- 既存データとの互換性を維持"

git push origin feature/book-rating

7.4 プルリクエストの作成とマージ

GitHubで新しいプルリクエストを作成し、前回と同様の手順でマージします。

Step 8: 共同開発のシミュレーション

8.1 擬似的なコンフリクトを作成

実際の開発でよく発生するマージコンフリクトの対処を学びましょう：

# メインブランチに戻る
git checkout main
git pull origin main

# 新しいブランチを作成
git checkout -b feature/ui-improvements

8.2 同じファイルを異なる方法で変更

css/styles.css のヘッダー部分を変更：

/* header のスタイルを変更 */
header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-align: center;
    padding: 2rem 1rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

header h1 {
    font-size: 2.5rem;
    font-weight: 300;
    letter-spacing: 2px;
}

コミットします：

git add css/styles.css
git commit -m "style: ヘッダーのデザインをグラデーションに更新"
git push origin feature/ui-improvements

8.3 別のブランチで同じ場所を変更

# 別のブランチを作成（mainから）
git checkout main
git checkout -b feature/dark-theme

# 同じファイルの同じ場所を異なる方法で変更

css/styles.css のヘッダーを違う方法で変更：

header {
    background-color: #1a1a1a;
    color: #00ff88;
    text-align: center;
    padding: 1.5rem;
    margin-bottom: 2rem;
    border-bottom: 3px solid #00ff88;
}

header h1 {
    font-size: 2rem;
    text-shadow: 0 0 10px #00ff88;
}

コミット：

git add css/styles.css
git commit -m "style: ダークテーマでヘッダーをデザイン"
git push origin feature/dark-theme

8.4 コンフリクトの発生と解決

最初のブランチをマージ：

# feature/ui-improvements をマージ
git checkout main
git merge feature/ui-improvements
git push origin main

# feature/dark-theme をマージしようとするとコンフリクト発生
git merge feature/dark-theme

コンフリクトが発生したら、ファイルを開いて解決：

# コンフリクトファイルを確認
git status

# エディターでコンフリクトを解決
# <<<<<<< HEAD
# =======
# >>>>>>> feature/dark-theme
# の部分を適切に統合

git add css/styles.css
git commit -m "resolve: ヘッダースタイルのコンフリクトを解決"
git push origin main

Step 9: タグとリリース

9.1 バージョンタグの作成

# 現在の安定版にタグをつける
git tag -a v1.0.0 -m "Initial release: Basic reading list management

Features:
- Add/remove books
- Status management (want to read/reading/completed)
- Search and filtering
- Star rating system
- Local storage persistence
- Responsive design"

# タグをプッシュ
git push origin v1.0.0

# タグを確認
git tag -l

9.2 GitHubでリリースを作成

GitHubリポジトリの「Releases」セクションにアクセス
「Create a new release」をクリック
タグ v1.0.0 を選択
リリースノートを記入
「Publish release」をクリック

Step 10: さらなる学習のための発展課題

10.1 GitHub Issues の活用

実際のプロジェクトでは Issues を使ってタスク管理を行います：

「New Issue」で新しい課題を作成
ラベルを使って分類
マイルストーンでバージョン管理
プルリクエストとリンク

10.2 GitHub Actions の基本

.github/workflows/test.yml を作成：

name: Test
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Setup Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '18'
    - name: Install dependencies
      run: npm install
    - name: Run tests
      run: npm test

10.3 推奨される追加機能

以下の機能を自分で実装してみましょう：

データのエクスポート/インポート
- JSON形式でのデータ保存
- CSVでの書籍リスト出力
カテゴリー機能
- ジャンル別の分類
- カテゴリーフィルター
読書進捗管理
- ページ数の追加
- 読書進捗バー
統計機能
- 月別読了数グラフ
- ジャンル別分析

まとめ

このチュートリアルで学んだこと：

Git/GitHub の基本操作

リポジトリのクローンと作成
add、commit、push の基本ワークフロー
ブランチの作成、切り替え、マージ
プルリクエストによるコードレビュー
コンフリクト解決の方法
タグとリリース管理

開発のベストプラクティス

意味のあるコミットメッセージ
機能別のブランチ運用
段階的な機能開発
コードレビューの重要性
バージョン管理の方法

実践的な開発スキル

HTML/CSS/JavaScriptによるWebアプリ開発
レスポンシブデザインの実装
ローカルストレージを使ったデータ永続化
ユーザーインターフェースの設計

次のステップ

他の開発者との共同開発
- 友人や同僚とリポジトリを共有
- 実際のコードレビューを体験
より複雑なプロジェクトへの挑戦
- フレームワーク（React, Vue.js）の学習
- バックエンドAPIの開発
- データベースとの連携
オープンソースプロジェクトへの参加
- GitHub上のオープンソースプロジェクトを探索
- Issue の解決に挑戦
- コントリビューションの経験

Git・GitHubは現代のソフトウェア開発に不可欠なツールです。このチュートリアルで基本的な操作を身につけたので、より複雑なプロジェクトでも自信を持って開発を進められるでしょう。

継続的な学習と実践を通じて、効率的で協力的な開発者を目指しましょう！

カテゴリー

プログラミング開発ツール初心者向け

タグ

Git GitHub 初心者チュートリアルバージョン管理ハンズオン