初めに
Qiitaで投稿していくにあたり、Markdownとは長い付き合いになりそうなので、初投稿はMarkdownについてのお勉強の内容とする。
投稿を続けていくにつれて新たな書き方を覚えていくと思うので、その都度この記事に追加をしていく。
以下のサイトを参考にし、自分が使いそうな部分をピックアップした。
- Markdown記法 - 日本語Markdownユーザー会
- Markdown記法 サンプル集 - Qiita
- ZennのMarkdown記法一覧
- Markdown記法 チートシート - Qiita
- Mermaid記法の書き方
ここからメイン
コードブロック
メモ
この記事を含め今後の投稿において必須となるコードを表示するためのもの。
お遊び
「初めに」からスタートして以下のコードブロックを表示するまで、Markdownでは以下のように書いている。
（下3行分はちょっと嘘だけど、それは後で説明する）
# 初めに
Qiitaで投稿していくにあたり、Markdownとは長い付き合いになりそうなので、初投稿はMarkdownについてのお勉強の内容とする。
投稿を続けていくにつれて新たな書き方を覚えていくと思うので、その都度この記事に追加をしていく。
以下のサイトを参考にし、自分が使いそうな部分をピックアップした。
- [Markdown記法 - 日本語Markdownユーザー会](https://www.markdown.jp/syntax/)
- [Markdown記法 サンプル集 - Qiita](https://qiita.com/tbpgr/items/989c6badefff69377da7)
- [ZennのMarkdown記法一覧](https://zenn.dev/zenn/articles/markdown-guide#%E3%82%B3%E3%83%BC%E3%83%89%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF)
- [Markdown記法 チートシート - Qiita](https://qiita.com/Qiita/items/c686397e4a0f4f11683d)
- [Mermaid記法の書き方](https://notepm.jp/help/mermaid)
# ここからメイン
## コードブロック
### メモ
この記事を含め今後の投稿において必須となるコードを表示するためのもの。
### お遊び
「初めに」からスタートして以下のコードブロックを表示するまで、Markdownでは以下のように書いている。
（下3行分はちょっと嘘だけど、それは後で説明する）
```markdown
（ここにコードブロックの内容、ここを書くと無限に文章が入るので省略）
```
基本
テンプレはこんな感じ。
```diff_（javascriptやpythonなどの言語名）:（ソース名）
（コード）
- （変更前）
+ （変更後）
```
Pythonで試してみると、
- import time
+ import sleep from time
- time.sleep(10)
+ sleep(10)
print("Hello from Python.")
diff_の後の言語名だけJavaScriptにすると少し変わるけど、そこまで気にならない。
- import time
+ import sleep from time
- time.sleep(10)
+ sleep(10)
print("Hello from Python.")
コードブロックのコード表示
コードブロックのコードを表示したいときは、3つの`で挟んでいる箇所をさらに4つで挟めばよい。
例えば、
```javascript
console.log("Hello from JavaScript.");
```
上記を表示したければ、Markdownでは以下のように記載すればよい。
````markdown
```javascript
console.log("Hello from JavaScript.");
```
````
上記を表示するためさらに5つの`で挟んでいる
見出し
メモ
セクションを分けるために使用する。
基本
Markdownでの記載は、
# 第一階層
## 第二階層
### 第三階層
#### 第四階層
##### 第五階層
第六階層
実際の表示は、
第一階層
第二階層
第三階層
第四階層
第五階層
第六階層
第五階層に#を増やしても表示は変わらない
箇条書き
メモ
文章中に階層構造を持たせたいときに使う。
基本（番号なし）
見出しで`にしていた部分で-か*を使えばよい。
テンプレはこんな感じ。
- 第一階層
- 第二階層
- 第三階層
- 第四階層
- 第一階層
- 第二階層
- 第三階層
- 第四階層
- 第三階層
- 第二階層
第三階層からは記号に変化がない
基本（番号付き）
見出しで`にしていた部分で1.を使えばよい。
数字自体はなんでもいいようで、テンプレはこんな感じ。
1. 第一階層
1. 第二階層
1. 第二階層
1. 第三階層
1. 第三階層
表示上は以下の通りで、階層ごとの表示は変わらないよう。
- 第一階層
- 第二階層
- 第二階層
- 第三階層
- 第三階層
リンクと引用
メモ
引用しているサイトや文章を文章中に埋め込みたいときに使う。
基本（べた書き）
URLをそのまま書き入れるだけ。
https://qiita.com/tbpgr/items/989c6badefff69377da7#gfm%E3%83%AA%E3%83%B3%E3%82%AF%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E7%B0%A1%E6%98%93%E8%A8%98%E6%B3%95
いい感じに表示される。
基本（サイトの引用）
テンプレはこんな感じ。
- [（表示名）](（URL）)
以下のように書くと、Markdown記法 - 日本語Markdownユーザー会といった感じでリンクができ、文章中にも埋め込むことができる。
[Markdown記法 - 日本語Markdownユーザー会](https://www.markdown.jp/syntax/)
基本（文章の引用）
テンプレはこんな感じ。
（引用外の文章）
>（引用した文章）
>>（引用した文章）
感覚としてはメール返信時に返信元のメール本文が下に引っ付いてくるのと同じで、引用を重ねることができる。
（引用した文章）
（引用した文章）
（引用した文章）
直前の引用を抜けたいときには1行空ける
装飾
メモ
文章を装飾するために使用する。
基本
テンプレはこんな感じ。
ただし、上下付きのものはHTMLでやっている。
*斜体*
**ボールド**
***斜体ボールド***
~~取り消し線~~
<sup>上付き</sup><sub>下付き</sub><sup><sub>上付きの下付き（下付きの上付き）</sub></sup>
`強調`
何かしらの文章[^1]、押したら説明に飛ぶ[^2]
[^1]:何かしらの説明
[^2]:押したら脚注の挿入場所に飛ぶ
:::note info
ちょっとした情報
:::
:::note warn
気をつけなければいけない情報
:::
:::note alert
非常に気をつけなければいけない情報
:::
脚注の説明はページ最下部に移動してしまう。
斜体
ボールド
斜体ボールド
取り消し線
上付き下付き上付きの下付き（下付きの上付き）
強調
何かしらの文章1、押したら説明に飛ぶ2
ちょっとした情報
気をつけなければいけない情報
非常に気をつけなければいけない情報
表
メモ
何かしらできっと使うであろうもの。
基本
テンプレはこんな感じ。
|カラム名|カラム名|カラム名|
|:-|:-:|-:|
|TD|TD|TD|
|TD|TD|TD|
-の数によって何かありそうだけど、気づいたらその都度追加する。
| カラム名 | カラム名 | カラム名 |
|---|---|---|
| TD | TD | TD |
| TD | TD | TD |
ダイアグラム
メモ
処理を図示して示すときに使う。
ここだけでいろいろ書けそうだけど、ここに時間をかけても仕方がないので例として挙がっていたものだけ記載する。
基本（PlantUML）
テンプレはこんな感じ。
```plantuml
（オブジェクトA）->（オブジェクトB）:（処理）
（オブジェクトB）->（オブジェクトC）:（処理）
（オブジェクトC）<-（オブジェクトB）:（処理）
```
単純な三層アーキテクチャに当てはめると以下のようになる。
登場人物の並び順はplantumlに記載した順となる
基本（Mermaid）
```mermaid
graph TD;
（オブジェクトA）-->（オブジェクトB）;
（オブジェクトA）-->（オブジェクトC）;
（オブジェクトB）-->（オブジェクトD）;
```
すぐに良い例が思いつかなかったのでPDCAサイクルに回ってもらった。
（そうじゃない感が強いけど。。。）