GitHub Flavored Markdown (GFM)

GitHub Flavored Markdown (GFM) は、ソフトウェア開発とコラボレーションのために特別に設計された追加機能を備えた、GitHub によって強化された Markdown バージョンです。このガイドでは、GitHub で利用可能なすべての特別な構文拡張機能について説明します。

GitHub Flavored Markdown (GFM) とは？

GitHub Flavored Markdown は、基本的な Markdown 構文を拡張し、以下により有用な機能を追加しています：

ドキュメント作成（README、Wiki）
イシュートラッキング
プルリクエスト
コードレビュー
プロジェクト管理

GFM の主要機能

1. フェンスドコードブロック

GFM は、言語固有の構文強調表示付きのフェンスドコードブロックをサポートしています：

```javascript
function calculateSum(numbers) {
  return numbers.reduce((sum, num) => sum + num, 0);
}

const result = calculateSum([1, 2, 3, 4, 5]);
console.log(result); // Output: 15
```

javascript

function calculateSum(numbers) {
  return numbers.reduce((sum, num) => sum + num, 0);
}

const result = calculateSum([1, 2, 3, 4, 5]);
console.log(result); // Output: 15

2. 構文強調表示

GitHub は数百の言語の構文強調表示をサポートしています。一般的な言語は以下の通りです：

bash

# Bash スクリプト
echo "Hello GitHub!"

python

# Python スクリプト
def greet(name):
    return f"Hello, {name}!"

java

// Java コード
public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello GitHub!");
    }
}

3. タスクリスト

チェックボックス付きのインタラクティブなタスクリストを作成します：

markdown

- [x] ユーザー認証を完了
- [x] API エンドポイントを実装
- [ ] 単体テストを記述
  - [ ] バックエンドテスト
  - [ ] フロントエンドテスト
- [ ] 本番環境にデプロイ

[x] ユーザー認証を完了
[x] API エンドポイントを実装
[ ] 単体テストを記述
- [ ] バックエンドテスト
- [ ] フロントエンドテスト
[ ] 本番環境にデプロイ

4. テーブル

GFM はテーブルを作成するための簡単な構文を提供します：

markdown

| 機能            | サポート | 説明                          |
|-----------------|----------|-------------------------------|
| フェンスドコード | ✅      | 言語固有の強調表示            |
| タスクリスト     | ✅      | インタラクティブなチェックボックス |
| テーブル         | ✅      | 構造化されたデータ表示        |
| メンション       | ✅      | ユーザーとチームの通知        |
| 絵文字           | ✅      | 視覚的な表現                  |

機能	サポート	説明
フェンスドコード	✅	言語固有の強調表示
タスクリスト	✅	インタラクティブなチェックボックス
テーブル	✅	構造化されたデータ表示
メンション	✅	ユーザーとチームの通知
絵文字	✅	視覚的な表現

5. メンション

ユーザーやチームに通知するためにメンションします：

markdown

@username - 特定のユーザーをメンション
@team-name - チームをメンション

6. 絵文字

ショートコードを使用して絵文字を追加します：

markdown

:smile: - 😊
:thumbsup: - 👍
:heart: - ❤️
:rocket: - 🚀
:warning: - ⚠️

😄 - 😊 👍 - 👍 ❤️ - ❤️ 🚀 - 🚀 ⚠️ - ⚠️

7. 自動リンク

GFM は特定の種類のコンテンツを自動的にリンクします：

イシューとプルリクエスト番号

markdown

#123 - イシュー 123 へのリンク
PR #456 - プルリクエスト 456 へのリンク

SHA ハッシュ

markdown

a1b2c3d - この SHA のコミットへのリンク

イシュー/プルリクエストのユーザーメンション

markdown

@username - ユーザープロフィールに自動リンク

URL

markdown

https://github.com - 自動的にリンクになる

8. 取り消し線

GFM は取り消し線テキストをサポートしています：

markdown

~~このテキストは取り消されます~~

~~このテキストは取り消されます~~

9. 自動リンク参照

GFM は以下のリンクを自動的に作成します：

HTTP/HTTPS URL
メールアドレス
GitHub のイシュー/PR 番号
コミット SHA

markdown

https://github.com/markdownlang/markdownlang.com
user@example.com
#123
PR #456
a1b2c3d4e5f6

10. コードブロックの行強調表示

コードブロック内の特定の行を強調表示します：

```javascript{2,4}
function calculateSum(numbers) {
  return numbers.reduce((sum, num) => sum + num, 0); // Highlighted
}

const result = calculateSum([1, 2, 3, 4, 5]); // Highlighted
console.log(result);
```

javascript

function calculateSum(numbers) {
  return numbers.reduce((sum, num) => sum + num, 0); // Highlighted
}

const result = calculateSum([1, 2, 3, 4, 5]); // Highlighted
console.log(result);

11. Diff 構文強調表示

diff 構文を使用してコードの変更点を強調表示します：

```diff
- const oldFunction = () => {
-   return "old value";
- };
+
+ const newFunction = () => {
+   return "new value";
+ };
```

diff

- const oldFunction = () => {
-   return "old value";
- };
+
+ const newFunction = () => {
+   return "new value";
+ };

12. GitHub 固有のマークアップ

アラート

GitHub ドキュメントでアラートのために特別な構文を使用します：

markdown

> [!NOTE]
> これはノートアラートです。

> [!TIP]
> これはヒントアラートです。

> [!IMPORTANT]
> これは重要なアラートです。

> [!WARNING]
> これは警告アラートです。

> [!CAUTION]
> これは注意アラートです。

NOTE

これはノートアラートです。

TIP

これはヒントアラートです。

IMPORTANT

これは重要なアラートです。

WARNING

これは警告アラートです。

CAUTION

これは注意アラートです。

相対リンク

同じリポジトリ内のファイル間を移動するために相対リンクを使用します：

markdown

[README](/README.md)
[コントリビューションガイド](/CONTRIBUTING.md)
[API ドキュメント](/docs/api.md)

ホバーテキスト付き画像リンク

markdown

![GitHub Logo](/images/github-logo.png "GitHub Logo - ホバーテキスト")

高度な GFM の使用法

1. ネストされたリストとタスクリスト

ネストされたリストとタスクリストを組み合わせます：

markdown

## プロジェクトロードマップ

### フェーズ 1: 計画
- [x] プロジェクトスコープを定義
- [x] 要件を特定
  - [x] 機能要件
  - [x] 非機能要件
- [x] タイムラインを作成

### フェーズ 2: 開発
- [x] プロジェクト構造を設定
- [ ] コア機能を実装
  - [x] 認証
  - [ ] ダッシュボード
  - [ ] API 統合

2. 絵文字とリンク付きテーブル

絵文字とリンクでテーブルを強化します：

markdown

| コンポーネント | ステータス | メンテナー |
|----------------|------------|------------|
| 認証 | ✅ 安定 | @johndoe |
| データベース | ⚠️ 更新が必要 | @janedoe |
| API | 🚧 進行中 | @bobsmith |
| UI | ✅ 安定 | @alicesmith |

コンポーネント	ステータス	メンテナー
認証	✅ 安定	@johndoe
データベース	⚠️ 更新が必要	@janedoe
API	🚧 進行中	@bobsmith
UI	✅ 安定	@alicesmith

3. リスト内のコードブロック

リスト内にコードブロックを含めます：

markdown

1. 依存関係をインストール：

   ```bash
   npm install

開発サーバーを起動：
bash
```
npm run dev
```
本番用ビルド：
bash
```
npm run build
```


### 4. コード付き引用ブロック

引用とコードブロックを組み合わせます：

```markdown
> **プロのヒント：** 以下のコマンドを使用して Git ステータスをすばやく確認できます：
>
> ```bash
> git status
> ```

プロのヒント： 以下のコマンドを使用して Git ステータスをすばやく確認できます：
bash
git status

さまざまな GitHub コンテキストでの GFM

README ファイル

README ファイルはすべての GFM 機能をサポートしており、リポジトリページで自動的にレンダリングされます。

イシューとプルリクエスト

タスクリストを使用して進捗を追跡
コラボレーションのためにチームメンバーをメンション
構文強調表示付きのコードスニペットを含める
#123 構文を使用して関連するイシュー/PR を参照

クイックリアクションに絵文字を使用
行コメントでコードの行を参照
引用ブロックを使用して特定のポイントに応答

Wiki

ネストされたページでコンテンツを整理
テーブルを使用して構造化データを表示
構文強調表示付きのコード例を含める

ベストプラクティス

1. コードスタイル

markdown

<!-- ✅ 良い -->
```javascript
// 説明的な関数名を使用
function calculateTotal(items) {
  return items.reduce((sum, item) => sum + item.price, 0);
}

javascript

function f(i){return i.reduce((a,b)=>a+b.p,0)}```

2. テーブルデザイン

markdown

<!-- ✅ 良い -->
| 機能 | 説明 | ステータス |
|------|------|------------|
| 機能 1 | 簡単な説明 | ✅ |
| 機能 2 |別の説明 | 🚧 |

<!-- ❌ 避ける -->
| 機能 | 説明 | ステータス | | | |
|------|------|------------|---|---|---|
| 機能 1 | この説明は長すぎて、モバイルデバイスでテーブルを読みにくくしています | ✅ | | | |

3. タスクリストの使用

markdown

<!-- ✅ 良い -->
## スプリントバックログ
- [x] ユーザープロフィールページを完了
- [ ] 検索機能を実装
  - [x] バックエンド API
  - [ ] フロントエンドコンポーネント
- [ ] ドキュメントを記述

<!-- ❌ 避ける -->
- [ ] タスク 1
- [ ] タスク 2
- [ ] タスク 3
- [ ] タスク 4
- [ ] タスク 5
（整理されていない多すぎるタスク）

GFM 対標準 Markdown

機能	標準 Markdown	GitHub Flavored Markdown
フェンスドコードブロック	❌	✅
構文強調表示	❌	✅
タスクリスト	❌	✅
テーブル	❌	✅
取り消し線	❌	✅
絵文字	❌	✅
メンション	❌	✅
自動リンク	制限付き	広範

GFM を使用するためのツール

ローカルエディタ

Visual Studio Code - GFM プレビューと拡張機能
Typora - リアルタイム GFM レンダリング
Mark Text - GFM サポート

オンラインツール

GitHub Gist - GFM スニペットの作成と共有
Dillinger - オンライン GFM エディタ
StackEdit - クラウド同期付き GFM サポート

コマンドラインツール

glow - ターミナル GFM レンダラー
pandoc - GFM を他の形式に変換
marked - Node.js GFM パーサー

よくある問題と修正

1. コードブロックが強調表示されない

問題： コードブロックに構文強調表示が表示されない

修正： 正しい言語を指定していることを確認してください：

markdown

<!-- ✅ 正しい -->
```javascript
console.log("Hello");

jsx

console.log("Hello"); // JSX ではないコードに javascript ではなく jsx を使用


### 2. タスクリストのチェックボックスが機能しない

**問題：** タスクリストのチェックボックスがインタラクティブでない

**修正：** 適切な構文を使用していることを確認してください（`-` と `[ ]` の間にスペース）：

```markdown
<!-- ✅ 正しい -->
- [ ] タスク

<!-- ❌ 誤り -->
-[ ] タスク（スペースなし）
-[x] タスク（スペースなし）

3. テーブルが正しくレンダリングされない

問題： テーブルの列が整列していない

修正： パイプが適切に整列していることを確認してください：

markdown

<!-- ✅ 正しい -->
| Column 1 | Column 2 |
|----------|----------|
| Data 1   | Data 2   |

<!-- ❌ 誤り -->
|Column 1|Column 2|
|--|--|
|Data 1|Data 2|

次のステップ

GitHub Flavored Markdown は、ソフトウェア開発におけるコミュニケーションとコラボレーションのための強力なツールです。これらの機能をマスターすることで、より効果的なドキュメントを作成し、イシューをより適切に追跡し、チームとより効率的にコラボレーションできます。

GitHub Flavored Markdown (GFM) ​