リンクの中にリンクを入れたらどうなるの

# リンクの中にリンクを入れたらどうなるの

Markdown において自動的にリンクを作成する記法（以下、**自動リンク**と呼称）には、以下のような 3 つの記法がある。

- `http:` 等から始まる生の URL リンク
- `http:` 等から始まる URL を `<`\~`>` で囲うリンク
- `@` によるユーザーへのリンク
- `#` によるタグへのリンク

これらが Markdown 記法による以下のような手動リンクの表示テキスト (`displayed text`) 内に含まれていた場合、どちらのリンクが優先されるのか検証してみたい。

```markdown
[displayed text](URI/address "link title")
 ^^^^^^^^^^^^^^
  ↑ ここに自動的に作成されるリンクを挿入する
```

## ■ 背景

CommonMark によるリンクの仕様では、「リンクが入れ子になっている場合には内側のリンクが優先される[<sup>Example 517</sup>][commonmark-ex517]」ようになっている。

[commonmark-ex517]: https://spec.commonmark.org/0.30/#example-517 "CommonMark \- Example 517"

```markdown
[Example Domain [Qiita](https://qiita.com) ](https://www.example.com)
                                            ^^^^^^^^^^^^^^^^^^^^^^^^^
                                              ↑ ここはリテラルに表示される

[Example Domain [Qiita][qiita] ](https://www.example.com)
                                ^^^^^^^^^^^^^^^^^^^^^^^^^
                                  ↑ ここはリテラルに表示される

[qiita]: https://qiita.com
```

[Example Domain [Qiita](https://qiita.com) ](https://www.example.com)

[Example Domain [Qiita][qiita] ](https://www.example.com)

[qiita]: https://qiita.com

では、自動リンクが表示テキスト内に挿入された場合はどのようになるのでしょうか。

## ■ 検証

具体的に次のようなリンクを作成した場合、どのような表示となるか検証してみたい。

- `http:` 等から始まる生の URL リンク
    ```markdown
    [https://qiita.com](https://www.example.com)
    ```
- `http:` 等から始まる URL を `<`\~`>` で囲うリンク
    ```markdown
    [<https://qiita.com>](https://www.example.com)
    ```
- `@` によるユーザーへのリンク
    ```markdown
    [@Qiita](https://www.example.com)
    ```
- `#` によるタグへのリンク
    ```markdown
    [#1](https://www.example.com)
    ```

どうなると思いますか？

少しだけおもしろい結果を得ます。

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

## ■ 結果

Qiita では次のような結果を得ました。（ただし、`#` によるタグリンクは作成されません）

- `http:` 等から始まる生の URL リンク
    ```markdown
    [https://qiita.com](https://www.example.com)
    ```

    [https://qiita.com](https://www.example.com)

- `http:` 等から始まる URL を `<`\~`>` で囲うリンク
    ```markdown
    [<https://qiita.com>](https://www.example.com)
    ```

    [<https://qiita.com>](https://www.example.com)

- `@` によるユーザーへのリンク
    ```markdown
    [@Qiita](https://www.example.com)
    ```

    [@Qiita](https://www.example.com)

- `#` によるタグへのリンク
    ```markdown
    [#1](https://www.example.com)
    ```

    [#1](https://www.example.com)

一見すると、どのリンクも期待した通りのスタイルで表示されており、手動リンクの表示が壊れていない。と言うことは、表示テキスト内のリンクになる文字列はリテラルに解釈され、https://www.example.com のリンクが貼られていると考えられる。

では、マウスポインタをホバーしたりロングタップして、実際に遷移するリンクを確認してほしい。

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

表示テキスト内に `<`\~`>` で囲われた自動リンクを挿入した場合、遷移するリンク先は <https://qiita.com> だぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁ！！！

![角括弧で囲われたリンクが表示テキスト内にある場合のリンク][displayedText]

[displayedText]: https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/590705/b989578f-058a-c5af-250b-a550e42137b1.png

### ▽ 新たな疑問

`<`\~`>` で囲われた自動リンクは CommonMark で仕様が決定されているが、この自動リンクは次のように手動リンクと等価なものとして解釈できる。（HTML へのパース結果が等価に示されているため <sup>[Example 482][commonmark-ex482], [Example 593][commonmark-ex593]</sup>）

[commonmark-ex482]: https://spec.commonmark.org/0.30/#example-482 "CommonMark \- Example 482"
[commonmark-ex593]: https://spec.commonmark.org/0.30/#example-593 "CommonMark \- Example 593"

```markdown
<https://qiita.com>
  ⇅
[https://qiita.com](https://qiita.com)
```

すなわち、感覚としては次のような状態と考えることが出来る。このリンクは内側のリンクがリンクとして解釈され、外側のリンクは壊れる。

```markdown
[[https://qiita.com](https://qiita.com)](https://www.example.com)
```

[[https://qiita.com](https://qiita.com)](https://www.example.com)

しかし、`<`\~`>` で囲われた自動リンクが表示テキスト内にある場合、自動リンクが優先され、手動リンクはどこかへ消えてしまう。どこへ……？？？

### ▽ 行方の捜索

`[<https://qiita.com>](https://www.example.com)` において、https://www.example.com のリンクの行方を探してみたい。

commonmark.js のデモから HTML を表示させてみる [<sup>⧉</sup>][commonmark-html] と、次のようにパースされていることが分かる。（直接の関係がないため `<p>` タグを意図的に消しています）

[commonmark-html]: https://spec.commonmark.org/dingus/?text=%5B%3Chttps%3A%2F%2Fqiita.com%3E%5D(https%3A%2F%2Fwww.example.com)%0A "commonmark.js でのデモ結果"

```html
<a href="https://www.example.com"><a href="https://qiita.com">https://qiita.com</a></a>
```

実は、以下のような Markdown リンクを作成すると https://www.example.com がどこへ行ったのか分かる。

```markdown
[Example <https://qiita.com>](https://www.example.com)
  ↓
<a href="https://www.example.com">Example <a href="https://qiita.com">https://qiita.com</a></a>
```

[Example <https://qiita.com>](https://www.example.com)

“Example ” は https://www.example.com へのリンクとなっている。

すなわち、`[<https://qiita.com>](https://www.example.com)` では、https://www.example.com のリンクを埋め込む文字列がない状態となっていたために、行方不明になっていたようだ。

このような挙動が HTML でスタンダードに決められているのかを調べることは出来なかった。

また、`[`\~`]` で囲われた `<https://qiita.com>` の前後に文字列を挿入すると、不思議なことが起こる。

```markdown
[Example <https://qiita.com> Domain](https://www.example.com)
```

[Example <https://qiita.com> Domain](https://www.example.com)

`<https://qiita.com>` の左側の文字列 (`Example`) にはリンクが埋め込まれるのに対して、右側の文字列 (`Domain`) にはリンクが埋め込まれない。commonmark.js でのデモであっても、次のような HTML にパースしている。[<sup>⧉</sup>][commonmark-html2]

[commonmark-html2]: https://spec.commonmark.org/dingus/?text=%5BExample%20%3Chttps%3A%2F%2Fqiita.com%3E%20Domain%5D(https%3A%2F%2Fwww.example.com)%0A

```html
<a href="https://www.example.com">Example <a href="https://qiita.com">https://qiita.com</a> Domain</a>
```

ふしぎ :thinking:

# まとめ

リンクは URL で表示されていれば安心して遷移して良いものではない。出来るならば、URL ウィンドウを確認した方が望ましいだろう。

“`<a>` nested in `<a>`” のときのリンクの挙動はどのように規定されているのだろう。知っている人がいたら教えてほしい。

ちなみに、この挙動は GitHub Markdown でも同じものとして確認することが出来た。

<details>
<summary>検証用（折りたたみ）</summary>
<div>

```markdown
[https://qiita.com](https://www.example.com)

[<https://qiita.com>](https://www.example.com)

[@Qiita](https://www.example.com)

[#1](https://www.example.com)
```

</div>
</details>

# 追記

2023/01/16: 軽微修正。