【Markdown】TOEIC 370ぐらいで美少女高専生の後輩「また同じURLをコピペしてるの？」

TOEIC 370ぐらいで美少女高専生の後輩「
# TL;DR
繰り返しリンクは以下のように表現できる．

```markdown
[1つ目のリンク][example]と[2つ目のリンク][example] ← この2つのリンク先は同じだよ！

\[example]: http://example.com/
```

```html
<!-- 出力されるHTML -->
<a href="http://example.com/">1つ目のリンク</a>と<a href="http://example.com/">2つ目のリンク</a> ← この2つのリンク先は同じだよ！
```

※ 上記のMarkdownの最下行，行頭の`\`は不要です（Qiita上ではエスケープしておかないとコードブロック中でも表示されなくなってしまうので，とりあえずつけてあります:bow:）．


# Markdown中のリンクをDRYにする
1記事中で同一URLに対しリンクを貼ることってよくありますよね？
このとき，毎回URLをコピペする人もいると思います．めんどくさいですね．
変数に突っ込めたら楽なのになーと，プログラマならだれでも考えると思います．

それ，Markdown標準の機能でできるんです．

> Reference-style links use a second set of square brackets, inside which you place a label of your choosing to identify the link:
>
> ```markdown
> This is [an example][id] reference-style link.
> ```
> 
> You can optionally use a space to separate the sets of brackets:
> 
> ```markdown
> This is [an example] [id] reference-style link.
> ```
> 
> Then, anywhere in the document, you define your link label like this, on a line by itself:
> 
> ```markdown
> [id]: http://example.com/  "Optional Title Here"
> ```
>
> \- <cite>[Links | Daring Fireball: Markdown Syntax Documentation][markdown-syntax]</cite>

**`[link-id]: http://example.com`と定義しておくことで，`[リンクテキスト][link-id]`で`http://example.com`へのリンクを設定することが可能になります．**

なお，この機能については[Qiita公式のMarkdown記法チートシート][qiita]にもしっかり記載してあります．

> - \[リンクテキスト]\[名前]
> - \[名前]:URL
>     - 同じURLへのリンクを複数箇所に設定することができます
> 
> **例**
> 
> > *Markdown:*
> \[ここ]\[link-1] と \[この]\[link-1] リンクは同じになります。
> \[link-1][\] も可能です。
> \[link-1]:http://qiita.com/drafts/c686397e4a0f4f11683d
>
> > *結果:*
> [ここ][link-1] と [この][link-1] リンクは同じになります。
> [link-1][] も可能です。
> [link-1]:http://qiita.com/drafts/c686397e4a0f4f11683d
>
> \- <cite>[Markdown記法 チートシート - Qiita][qiita]</cite>


Qiitaか[GitHub Flavored Markdown][github]，[PHP Markdown][php]あたりの独自拡張かと思いきや，実はMarkdownオフィシャルなやつだったんですね．

## Example
この記法を実際に使ってみた例は以下のようになります．

_Markdown（もとのやつ）_:

```markdown
# [izumin5210][twitter]のほーむぺーじ

[izumin5210][twitter]のホームページヘようこそ！
あなたは17番目のお客様です！

* [Twitterアカウント][twitter]
* [Githubアカウント][github]

\[twitter]: https//twitter.com/izumin5210
\[facebook]: https://facebook.com/izumin5210
```

※ 上記のMarkdownの下2行，行頭の`\`は不要です．


_HTML（出力結果）_:

```html
<h1><a href="https//twitter.com/izumin5210">izumin5210</a>のほーむぺーじ</h1>

<a href="https//twitter.com/izumin5210">izumin5210</a>のホームページヘようこそ！
あなたは17番目のお客様です！

<ul>
  <li><a href="https//twitter.com/izumin5210">Twitterアカウント</a></li>
  <li><a href="https//github.com/izumin5210">GitHubアカウント</a></li>
</ul>
```

## `title`も定義できる
ちなみに，リファレンス定義時に`title`を一緒に決めることもできます．
これはリンクテキストではなく`a`要素の`title`属性になります．

> optionally followed by a title attribute for the link, enclosed in double or single quotes, or enclosed in parentheses.
> \- <cite>[Links | Daring Fireball: Markdown Syntax Documentation][markdown-syntax]</cite>

これでMarkdownもコピペコードじゃなくDRYに書けますね！
」


ぼく「せやな」

TOEIC 370ぐらいで美少女高専生の後輩「
ちなみに，この記事でもreference-styleなリンクを利用してます．
興味がある人はURL末尾に`.md`とつけてみてください！
Markdownのソースが見れると思います！
」

ぼく「お，おう」

---

inspired by [**IQ1450で美少女JSの先輩から、Rubyで無から有を生み出す方法を教わった - Qiita**][iq1450]

# References

* [Links | Daring Fireball: Markdown Syntax Documentation][markdown-syntax]
* [Qiita - Markdown記法 チートシート - Qiita][qiita]
* [GitHub Flavored Markdown - User Documentation][github]
* [Michel Fortin – PHP Markdown][php]
* [IQ1450で美少女JSの先輩から、Rubyで無から有を生み出す方法を教わった - Qiita][iq1450]

[markdown-syntax]: http://daringfireball.net/projects/markdown/syntax#link "Links - Daring Fireball: Markdown Syntax Documentation"
[qiita]: http://qiita.com/Qiita/items/c686397e4a0f4f11683d#links---%E3%83%AA%E3%83%B3%E3%82%AF "Qiita - Markdown記法 チートシート - Qiita"
[github]: https://help.github.com/articles/github-flavored-markdown/ "GitHub Flavored Markdown - User Documentation"
[php]: https://michelf.ca/projects/php-markdown/ "Michel Fortin – PHP Markdown"
[iq1450]:http://qiita.com/supermomonga/items/79d985f4dfd3603afffe "IQ1450で美少女JSの先輩から、Rubyで無から有を生み出す方法を教わった - Qiita"