マークダウン(Markdown)記法とは、文章を記述する際に使う記法(簡単に習得できる一種のプログラミング言語)のこと。
プログラミング初心者、とくにPythonやJavaScript、Htmlを勉強している人にとって、マークダウン記法は、想像の数倍は役立つツールだと言えます。
システム開発でマークダウン記法を使わない日なんて、「週に一度あるかないか」。
マークダウン記法を使うことで、見出しや箇条書き、コードなど「各パートの役割」を理路整然と表わすことができます。
文章を見やすく整形できるため、
- 技術的な「ドキュメント」を書く際に便利
- ChatGPTのような「AI」から期待通りの回答を得るのにも有用
- AIの回答を「コピペ」するだけで、美しいノートになる
- プログラミング学習の「まとめノート」にも役立つ
といったメリットがあります。人間にもAIにも伝わりやすい「記法」と言えますね。
この記事では、プログラミング学習やAI活用に必要十分なマークダウン記法の一覧を紹介していきます。
マークダウン記法一覧
下図をご覧ください。「7種」の記法だけでも、技術的なドキュメントを十分に表現できます。
1.見出し
「#」
を使って見出しを作れます。
#
の数で見出しのレベル(大見出し, 中見出し, 小見出し…)を表します。
レベルとは「文具 > ペン > ボールペン」のような階層のこと(HTMLのh1~h6要素と同じです!)。
「#はタイトル、##は大見出し」だと考えると分かりやすいですね。
# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6
Markdown(マークダウン)ファイルの拡張子は「.md」を使います。
2.箇条書き
「-
」や「*
」を使って箇条書きリストを作成できます。一般には「-」を使うケースが多いですね。
- 項目1
- 項目2
- 項目3
番号付きの箇条書きも可能です。
1. 項目1
2. 項目2
3. 項目3
箇条書きはネスト(入れ子, 階層化)させることもできます。
- 項目1
- サブ項目1
- サブ項目2
- 項目2
1. サブ項目1
2. サブ項目2
3.コードブロック
バッククォート(Shift+数字の7)3つ で囲むことで、コードブロックを作成できます。
マークダウン記法では、でコードをサンドイッチする(コードをバッククォートで挟み込む)のですが、以下の図のように、最初のの直後に小文字で「言語名(例: python)」を、明示するのがルールです。
用例:
、 、これにより、人間・AIともに「どういったプログラミング言語なのか」を理解できます。
⇧でも示した例を、下にもう一度、コピー&ペーストできるように示しますね。
以下の例を覚えてしまえば、コードブロックの記法は、すぐに使いこなせますよ!
```python
this_article = "よく使うMarkdown一覧"
print(this_article)
# 出力: よく使うMarkdown一覧<br>
```
```JavaScript
window.alert("Hello, js!")
```
```html
<title>マークダウン記法一覧</title>
```
バッククォートは「Shift+数字の7」で入力します。
(「”’」は、サンプルコードを表す場合やAIにコードを伝える際に何度も使用するので、IMEのような日本語入力ソフトに登録しておくと便利です。)
上記のMarkdown(.md)を実行すると、Pythonコードが読みやすく「色分け」されているのが分かります。マークダウン記法は、シンプルにもかかわらずコードをきれいに整理できる優れたツール(言語)なんです。
(※コードブロックについて、もっと分かりやすくなるように音声解説もしています!)
実行結果(プレビュー)
上述の「マークダウン記法」を、人間にとって読み取りやすいようにプレビュー表示すると、下図のような画面になります。
4.リンク
[表示テキスト](URL)
でリンクを作成できます。
[Pythonの公式サイト](https://www.python.org/)
実行結果(プレビュー)
上述の「マークダウン記法」をプレビュー表示すると、下図のような画面になります。
5.画像
![代替テキスト](画像のURL)
で、画像を埋め込めます。
![Pythonのロゴ](https://www.python.org/static/img/python-logo.png)
実行結果(プレビュー)
保存済みの画像はもちろん、Web上や他サイトの画像URLを引用・表示することも可能です。下記はPython公式サイトのロゴ画像になっています。
6.引用
「>」
を使って引用を表現できます。
> これは引用です。
> 引用は複数行にわたって書くことができます。
7.強調(太字・斜体)
「**
」で囲むと太字に、「*
」で囲むと斜体になります。
**太字**
*斜体*
補足:無料なのに有料をはるかに凌ぐマークダウンエディタ5選
- Googleドキュメント: 標準でマークダウンファイル(.md)の、インポート/エクスポートが可能! 一番親しみやすいエディタですね
- 「ツール>設定」よりMarkdown編集のON/OFFができる
- WordPress(local): マークダウン記法に完全対応。たとえばグーテンベルクエディタに、ChatGPTの出力(ChatGPTはMarkdownを出力する仕組み)をコピペすると、見出しや箇条書き、コードブロックがきれいに反映される
- localという無料ツールを利用すれば、WindowsやMacOSで「自分専用」のWordPressをマークダウンメモにできる
- Phoenix Code: 日本語対応・無料・クラウド対応・ライブプレビュー可
- Adobe謹製の無料エディタ。操作も直感的で、PCからもブラウザからも利用可能!
- Obsidian: 日本語対応・無料・クラウド対応・ライブプレビュー可・スマホアプリ対応
- 慣れるまでに多少時間はかかるが、マークダウンエディタだけでなくマインドマップのような図解も可能
- Jupyter notebook: 日本語対応・無料・ライブプレビュー可 ・信じられないほど高機能・データ分析にも対応
- マークダウン編集に加え、PythonやJavaScript、Htmlの開発環境でもある
- 初心者のプログラミング学習に最適だが、操作を覚えるのが大変
GoogleドキュメントとChatGPTを、マークダウンを介して連携させる方法に関しては、以下の記事を参考にしてみてください。
ChatGPTやJeminiなど多くのAIは「マークダウン形式」で回答する
例えばプログラミングのAI回答を、PCやスマホにメモしておきたい場合、GoogleドキュメントやPhoenix Codeなどにコピペしておけば「後から検索」できて便利!
加えてGoogleドキュメントなら、MarkdownをPDF化するのも可能です。
まとめ:基本的なマークダウン記法一覧表
当記事で紹介したマークダウン記法の一覧表と、プレビュー表示(実行結果)を示します。コピペしてデスクトップや開発ツールに常設しておくと便利!右上のアイコンをクリック(タップ)すると、コピーできます。
先にプレビュー表示(実行結果)を見ていきましょう。
マークダウン記法の保存用「簡易チートシート」をコピペしよう!
右上のアイコンをクリック(タップ)すると、コピーできます!
# タイトル
## 大見出し(h2)
### 中見出し(h3)
#### 小見出し(h4)
- 箇条書き
- 箇条書き
- 箇条書き
1. 番号付きリスト
2. 番号付きリスト
3. 番号付きリスト
```python
# コードブロック(ちゃんと言語ごとに色分けしてくれる!)
print("Hello Markdown!")
```
```html
<button>クリックしてね!</button>
```
[リンクテキスト](URL)
[Google](https://www.google.co.jp/)
![Pythonのロゴ](https://www.python.org/static/img/python-logo.png) ⇐ 画像
> これは引用です。
> 吾輩は猫である。
**太字**
*斜体*
以上がプログラミング入門者向けの、マークダウン記法一覧です。是非PythonやJavaScript、Htmlなどの勉強と並行して身につけ、より良いドキュメント作成・ノートまとめ等に活用してみてください。
告知:マークダウン記法は、面白いほどAI「プロンプト力」を高める!
ここまでご覧くださり、本当にありがとうございました! 近日Udemyにて、動画講座を公開予定です。
Udemy動画講座『ゼロからわかる!【マークダウン記法】で10倍差がつくChatGPT「プロンプト力」養成講座(仮題)』では、マークダウン記法の基本と実践を通じて、ChatGPTやGeminiから、「期待どおりの回答」を引き出すテクニックを解説していきます。
当サイト限定の
を配布予定です。どうぞよろしくお願いいたします。詳しくはUdemy動画で解説しますが、マークダウン記法はプログラミング学習を底上げします。
さらには、「家庭教師」としてAIをフル活用することにも直結していきます。それは半年で50万円かかるようなプログラミングスクールよりも安く早く、そしてなにより面白い学びに発展していくのです。
下記
より「マークダウン記法がプログラミング学習を加速させる図式」を、画像形式で保存できます。講座のイメージをざっくり把握する参考に、ご活用ください。