生成AI研修
Part 1: IT リテラシー基礎

Chapter 5: Markdown 入門

Markdown の書き方と開発での活用

5.1 Markdown とは

Markdown(マークダウン) は、テキストに簡単な記号を加えることで、見出しや太字・リストなどの書式を表現できる書き方のルールです。

普通のメモ(プレーンテキスト)と HTML(Webページ用のコード)の中間に位置するものです。

なぜ Markdown を使うのか

方法書きやすさどこでも使える
Word / Google Docs簡単だが専用ソフトが必要ソフトが必要
HTML難しいブラウザがあれば読める
Markdownシンプルで素早いどんなエディタでも書ける

Markdown はソフトウェア開発の現場で特によく使われます。

  • README ファイル — プロジェクトの説明書(GitHub で自動的に表示される)
  • プルリクエストの説明 — コード変更の内容を記述する
  • 技術ドキュメント — 設計書・仕様書・手順書
  • この研修コンテンツ自体 も Markdown で書かれています

ファイルの拡張子は .md(または .mdx)です。


5.2 見出し・段落・改行

見出し

# の数で見出しのレベルを表します。

# H1 - 一番大きな見出し(章タイトル)
## H2 - 中くらいの見出し(節)
### H3 - 小さな見出し(項)
#### H4 - さらに小さな見出し

表示されるイメージ:

  • # → 一番大きな文字のタイトル
  • ## → 少し小さいサブタイトル
  • ### → さらに小さい項目タイトル

段落

空行を1行挟むと、別の段落になります。

これは最初の段落です。
同じ行の続きは同じ段落の一部になります。

これは2番目の段落です。
空行で区切ることで段落が分かれます。

強調(太字・斜体)

**太字にしたいテキスト**
*斜体にしたいテキスト*
~~取り消し線を引きたいテキスト~~

表示: 太字斜体取り消し線


5.3 リスト(箇条書き・番号付き)

箇条書きリスト

-*+ のいずれかで箇条書きを作れます。インデント(字下げ)で入れ子にできます。

- リンゴ
- バナナ
- ぶどう
  - 巨峰
  - マスカット

表示:

  • リンゴ
  • バナナ
  • ぶどう
    • 巨峰
    • マスカット

番号付きリスト

1. まず VS Code をインストールする
2. フォルダを開く
3. ファイルを作成する
4. コードを書く
5. 保存する

番号は自動で連番になります。1. 2. ... と書かなくても、すべて 1. と書くだけで正しく連番になります(実際の Markdown レンダラーが自動採番するため)。

タスクリスト(チェックボックス)

- [x] VS Code をインストールした
- [x] ターミナルの基本コマンドを覚えた
- [ ] Markdown の書き方を習得する ← まだ
- [ ] Git を使えるようになる

GitHub などでは実際にチェックボックスとして表示されます。


5.4 リンクと画像

リンク

[表示するテキスト](URL)

例:
[Google](https://www.google.com)
[VS Code のダウンロードページ](https://code.visualstudio.com/)

画像

![代替テキスト(画像が表示できない場合に出るテキスト)](画像のURL またはパス)

例:
![VS Codeのロゴ](./images/vscode-logo.png)
> TODO: screenshot - GitHubのOctocatマスコット

! を先頭につけるとリンクではなく画像として表示されます。

リンクの応用(ページ内リンク)

見出しへのリンクを作れます。長いドキュメントに「目次」を作るときに便利です。

## 目次

- [はじめに](#はじめに)
- [インストール](#インストール)
- [使い方](#使い方)

## はじめに
...

5.5 コードブロック

Markdown は開発ドキュメントで使われるため、コードを見やすく表示する機能が充実しています。

インラインコード

文章の中に短いコードを埋め込む場合はバッククォート(`)で囲みます。

`pwd` コマンドで現在のディレクトリを確認できます。
ファイル名は `index.html` です。

表示: pwd コマンドで現在のディレクトリを確認できます。

コードブロック

複数行のコードはバッククォート3つ(```)で囲みます。言語名を指定するとシンタックスハイライト(コードに色がつく)が適用されます。

```javascript
function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet("World");
```
function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet("World");

よく使う言語指定:bash(ターミナルコマンド)、javascriptpythonjsonyamlhtmlcss


5.6 テーブル

| 列1のタイトル | 列2のタイトル | 列3のタイトル |
|-------------|-------------|-------------|
| データ1     | データ2     | データ3     |
| データ4     | データ5     | データ6     |

表示:

列1のタイトル列2のタイトル列3のタイトル
データ1データ2データ3
データ4データ5データ6

列の揃え方

| 左揃え | 中央揃え | 右揃え |
|:------|:-------:|------:|
| テキスト | テキスト | テキスト |

:--- は左揃え、:---: は中央揃え、---: は右揃えです。


5.7 実践: 自己紹介ページを書いてみよう

これまでに学んだ Markdown の機能を使って、自己紹介ページを書いてみましょう。

VS Code を開いて、profile.md というファイルを作り、以下を参考に書いてみてください。

# 山田 太郎(Taro Yamada)

## 自己紹介

はじめまして!山田太郎と申します。
現在、**非エンジニア向けのITリスキリング研修**に参加中です。

## スキル・経験

- 業務経験
  - 営業部門での顧客対応(5年)
  - 社内システムの運用管理(2年)
- 現在学習中
  - Markdown
  - ターミナルの基本操作
  - VS Code の使い方

## 研修の目標

1. ターミナルを自在に使えるようになる
2. 生成AIを使って業務改善ツールを作る
3. チームに「ちょっとできるやつ」と思われる

## 参考にしているリソース

- [MDN Web Docs](https://developer.mozilla.org/ja/)
- [GitHub Docs](https://docs.github.com/ja)

## 今週の学習メモ

| 日付 | 学習内容 | 理解度 |
|------|---------|-------|
| 月曜日 | ターミナル入門 | ★★★ |
| 火曜日 | ファイルシステム | ★★★ |
| 水曜日 | VS Code の設定 | ★★☆ |
| 木曜日 | Markdown | 学習中 |

---

> ※ この研修を通じて、ITの基礎を身につけたいと思っています。

VS Code のサイドバイサイドエディタ 出典: VS Code 公式ドキュメント

TODO: あとで実際のスクリーンショットに置き換え - VS Code で profile.md を書いた後、Markdown プレビューと並べた画面

VS Code でプレビューを表示する

Command + Shift + V(Mac)/ Ctrl + Shift + V(Win)でプレビューが開きます。

または、エディタ右上の「Open Preview」ボタン(画面のアイコン)をクリックします。


まとめ

Markdown の重要な記法を一覧にまとめます。

記法結果
# テキスト見出し(#の数でレベルが変わる)
**テキスト**太字
*テキスト*斜体
- テキスト箇条書きリスト
1. テキスト番号付きリスト
[テキスト](URL)リンク
![テキスト](パス)画像
`コード`インラインコード
``` ... ```コードブロック
| col | col |テーブル

Markdown は慣れると非常に素早くドキュメントを書けます。次のChapterでは、開発現場で頻出する「データ形式(JSON / YAML / XML)」を学びます。

On this page