Qiitaで記事を書くために、まずはMarkdown記法に慣れてみる

こんにちは
とある決済事業会社でデータアナリストとして働いている牛です。

プライベートでWebアプリを作ろうと思い、どうせなら並行してQiitaでの発信も始めたいなと思い、初めてのQiita記事を書こうと思い至りました
Qiitaに慣れてくれば、本業のデータアナリストとしての記事も今後執筆していければと思います

とはいえ、これまでこういったテックブログでの発信を行ってきたことがなく、Markdown記法で早速つまづいているのが現状です
会社でもプライベートでもドキュメントツールはScrapboxを利用していることもありMarkedown耐性が0のまま、ここまで生きてきてしまいました
なので、Markdown記法を調べながらこの記事をまずは作ってみることにします

まずはそれっぽく見出しをつけたいですよね

見出し

無事できました。h1、h2、と小さい見出しをどんどんつけていけるみたいですね。どこまでいけるか試してみましょう

h2見出し

h3見出し

h4見出し

h5見出し

h6見出し

####### h7見出し

おっと、どうやらh7はいけないようです

h1、h2見出しについては見出しの下に下線がつくのですね。セクションを目立たせるにはh1やh2を利用し、1つのセクション内に見出しを入れるにはh3以下を利用するのが便利そうだなとぱっと感じました。

ちなみに、h1が存在しないのにh2で見出しを作っていく、もしくはh1の次にh3を使うのはアンチパターンなんでしょうか？詳しい方いれば教えてください。

コードの挿入

自分でMarkdownを試すだけ試して、実際どう書いてるねん！？って読んでる人は思いますよね。なので、コードを挿入する方法を早めに押さえておく必要がありそうです

コードブロックで挿入

example.md

# 見出し
## h2見出し
### h3見出し

なるほどこう書くんですね。

書き方

```Markdown: example.md
# 見出し
## h2見出し
### h3見出し
```

ちなみに、MarkdownのコードをMarkdownのコード挿入の記法で書くときはバッククオートで囲む代わりにチルダ（~）を利用するとうまく行くようです
無事、コードの挿入方法をキャッチアップできました。今後は書き方を試すたびにMarkdownのコードを挿入しながら進めようと思います

インラインでコードを挿入

インラインでのコード挿入もできるみたいですね。バッククオートを使うようです。なんか書いてみましょう

npm startと書くとReact Appがローカルで立ち上がることを最近学びました。初歩の初歩ですね。

example.md

`npm start`と書くとReact Appがローカルで立ち上がることを最近学びました。初歩の初歩ですね。

リンクの挿入

実はと言うか、この記事は別のQiita記事をゴリゴリに参照しながら書いているのですが、そのページの方が遥かに有益なので、ここまで読んでくださった皆さんを全員そのページに遷移させるためのリンクを挿入したいと思います。

テキストリンクの挿入

参照しているページはコチラです。

example.md

参照しているページは[コチラ](https://qiita.com/Qiita/items/c686397e4a0f4f11683d "Markdown記法 チートシート")です。

本ページは上記のページの劣化版にもなりきれてないものになりそうなので、どうぞ上記のページを参照ください。

リンクカードの挿入

リンクカードも生成できるようですね。リンクカードでもしっかり遷移を狙います。

example.md

(空行)
https://qiita.com/Qiita/items/c686397e4a0f4f11683d
(空行)

リンクカードがURLを貼るだけで気軽に挿入できるのは便利ですね

テキストの装飾

さて、ページ遷移によってこれ以降誰もみていないと想定しながらテキスト装飾を試してみようと思います

強調・斜体

これを覚えると、大好きな牛乳を強調したり、職業をイキった感じで表示できそうですね。

僕は北海道に住む牛です。牛乳が好きです。一応某決済事業会社でData Analystをしています。

example.md

僕は北海道に住む牛です。**牛乳**が好きです。一応某決済事業会社で*Data Analyst*をしています。

わかりにくいですが、Data Analystのところを斜体にしてイキってます。念のためですがネタで言ってるだけで全然イキってData Analystしてるわけではないです。

打ち消し線

打ち消したくなるような失言を意図的に入れたいなと思うのですが、なかなか難しいですね。打ち消すくらいなら消せばいいんじゃないかって思っちゃいますし。
いえ、失礼しました。

example.md

打ち消したくなるような失言を意図的に入れたいなと思うのですが、なかなか難しいですね。~~打ち消すくらいなら消せばいいんじゃないかって思っちゃいますし。~~
いえ、失礼しました。

折りたたみ

HTMLタグを入れることで折りたたみを実現することができるようです。折りたたみの中に僕の秘密を閉じ込めておきましょう

僕の秘密はこの中に

実は牛じゃなくて人間です

example.md

<details><summary>僕の秘密はこの中に</summary>

`(秘密は開けてみてのお楽しみ)`

</details>

ほんとくだらなくてすみません。人生楽しいです。

補足

目を引く補足を入れられるようです。見た目が可愛くて結構好きです。

infomation
ここまで読んでAritakaってやつは頭大丈夫か？と思ったあなた。あなたの頭は正常だと思います。

warn
なんとなくおもしろおかしくここまで読んできてしまったあなた。ちょっと毒されてきてます。気をつけてください。

alert
最後まで読んでやってもいいか、と思っているそこのあなた。考え直すべきです。

example.md

:::note info
infomation
ここまで読んでAritakaってやつは頭大丈夫か？と思ったあなた。あなたの頭は正常だと思います。
:::

:::note warn
warn
なんとなくおもしろおかしくここまで読んできてしまったあなた。ちょっと毒されてきてます。気をつけてください。
:::

:::note alert
alert
最後まで読んでやってもいいか、と思っているそこのあなた。考え直すべきです。
:::

内容に特に意味はないです。ないですよ。

引用

引用は多用しそうなので大事ですね。

「いんようは〜だいじ〜ばんどうは、えいじ」

ジョイマン

example.md

> 「いんようは〜だいじ〜ばんどうは、えいじ」
> 
> *ジョイマン*

僕もなんでこんなこと書いたのか、よくわかってないです。いんようとばんどうで韻が踏めてしまったのが悪いのであって僕は悪くないと思ってます。

リスト表記

Bullet List

• Bulletって
• 銃弾って意味だと思うと
• ちょっと怖いよね

example.md

- Bulletって
- 銃弾って意味だと思うと
- ちょっと怖いよね

誰もが一度は思ってそうなこと書きました。Listにする必要な特にないです

Ordered List

1. まず左のハートマークを推します
2. 次にハートマークの下のブックマークを押して保存します
3. さらにその次にTwitterアイコンを押して共有します
4. こんな駄文を読んだ人がいるのか、、、と僕が恥ずかしくなります

example.md

1. まず左のハートマークを推します
2. 次にハートマークの下のブックマークを押して保存します
3. さらにその次にTwitterアイコンを押して共有します
4. こんな駄文を読んだ人がいるのか、、、と僕が恥ずかしくなります

これはScrapboxと同じですね。（急に冷静）

他にもDescription Listとか、Checkboxなんかがあるらしいです。あんま使わなさそうなので、一旦Skipします

画像の埋め込み

画像の埋め込みもよく利用しそうですね。スクリーンショットなどを共有する機会は多そうです

引用元：ジョイマン プロフィール｜吉本興業株式会社

example.md

![ジョイマン](https://profile.yoshimoto.co.jp/assets/data/profile/612/26a9d288ca8327b42c5e8858355e6a98d2b9c87d.jpg)

引用元：[ジョイマン プロフィール｜吉本興業株式会社](https://profile.yoshimoto.co.jp/talent/detail?id=612)

ジョイマン高木さんの相方さんの名前わかりますか？ちなみに僕は知らなかったので、プロフィールを見てしりました。これがテックブログでアウトプットすることによる学びなんですね。

ちなみに僕はジョイマンさんのことを特別好きというわけでもありません。

おわりに

Markdown記法、完全に理解した。