PR

【マークダウン記法一覧】プログラミング入門者のための速習チュートリアル

マークダウン記法一覧(プログラミング入門者のための速習チュートリアル) アプリ開発ツール

マークダウン(Markdown)記法とは、文章を記述する際に使う記法(簡単に習得できる一種のプログラミング言語)のこと。

プログラミング初心者、とくにPythonやJavaScript、Htmlを勉強している人にとって、マークダウン記法は、想像の数倍は役立つツールだと言えます。

システム開発でマークダウン記法を使わない日なんて、「週に一度あるかないか」。

マークダウン記法を使うことで、見出しや箇条書き、コードなど「各パートの役割」を理路整然と表わすことができます。

文章を見やすく整形できるため、

  • 技術的な「ドキュメント」を書く際に便利
  • ChatGPTのような「AI」から期待通りの回答を得るのにも有用
  • AIの回答を「コピペ」するだけで、美しいノートになる
  • プログラミング学習の「まとめノート」にも役立つ

といったメリットがあります。人間にもAIにも伝わりやすい「記法」と言えますね。

この記事では、プログラミング学習やAI活用に必要十分マークダウン記法の一覧を紹介していきます。

海外ツールラボ】は最高の「分かりやすさ」を追求し続けます
  • 音声アシスト: 理解しずらい箇所に音声解説を配置!
  • アニメーションアシスト: 文字や図解では理解しずらい箇所にGIFアニメーションを配置!

マークダウン記法一覧

この記事で紹介する記法
  1. 見出し
  2. 箇条書き
  3. コードブロック
  4. リンク
  5. 画像
  6. 引用
  7. 強調(太字・斜体)

下図をご覧ください。「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)」を、明示するのがルールです。

用例: ’’’python’’’JavaScript’’’html

上の「”’」に言語名が示されているのを確認しましょう⬇️

マークダウン記法でコードブロックを表した際のプレビューを、Jupyter notebookで表示している画面
マークダウン記法でコードブロックを表した際のプレビューを、Jupyter notebookで表示している画面

これにより、人間・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/)

実行結果(プレビュー)

上述の「マークダウン記法」をプレビュー表示すると、下図のような画面になります。

Python公式サイトへのリンクのプレビュー画面

5.画像

![代替テキスト](画像のURL)で、画像を埋め込めます。

![Pythonのロゴ](https://www.python.org/static/img/python-logo.png)

実行結果(プレビュー)

保存済みの画像はもちろん、Web上や他サイトの画像URLを引用・表示することも可能です。下記はPython公式サイトのロゴ画像になっています。

Python公式サイトのロゴ画像

6.引用

>を使って引用を表現できます。

> これは引用です。
> 引用は複数行にわたって書くことができます。

7.強調(太字・斜体)

**」で囲むと太字に、「*」で囲むと斜体になります。

**太字**
*斜体* 

補足:無料なのに有料をはるかに凌ぐマークダウンエディタ5選

Local – Local WordPress development made simpleより引用・ローカルPC環境で自分専用のWordPressでMarkdownを活用することが可能!

無料のマークダウンエディタとしては、下記のツールがおすすめ!

  • 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万円かかるようなプログラミングスクールよりも安く早く、そしてなにより面白い学びに発展していくのです。

下記ダウンロードボタンより「マークダウン記法がプログラミング学習を加速させる図式」を、画像形式で保存できます。講座のイメージをざっくり把握する参考に、ご活用ください。