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/)画像

例:

> 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(ターミナルコマンド)、javascript、python、json、yaml、html、css
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 公式ドキュメント
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)」を学びます。