転生したらGoogleボットだった件

※フィクションです。Googleの検索アルゴリズムが実際このように動いているという話ではありません。

# やれやれ、ワイは蘇生した。
ワイ「・・・うーん・・・ハッ！？」
ワイ「あれ・・・？」
ワイ「ワイ・・・生きてるんか！？」
ワイ「・・・何やこの真っ白い部屋は・・・！」
ワイ「何がどうなってるんや・・・」
ワイ「確かワイは・・・」

# それは昨日のこと
ワイ「確か、ワイらがようやくWebサイトを作り上げた後に」
ワイ「クライアントの一番**偉い人**が登場して」
ワイ「**仕様を根本から変えたい**って言い出したんや・・・」
ワイ「それまでのウォーターフォール型開発から、突如**メテオフォール型開発[^1]**に方針転換したことで」
ワイ「確か、ワイはショックで**殉職**してしもうたはず・・・」
ワイ「・・・と思ってたけど、どうやら一命を取り留めたようやな・・・」

# しかし何かが違う
ワイ「でも、何か普段と違う感じがするで・・・」
ワイ「・・・あっ！！！」
ワイ「何やこの体・・・！」
ワイ「ワイ、**Googlebot**になってもうとるやないかい！！！」

ハリー先輩「**なんで体を見て分かんねん**」
ハリー先輩「**設定ムチャクチャやん**」

# ハリー先輩もいた
ワイ「**[ハリー先輩](https://qiita.com/Yametaro/items/831d23536ae1310447e6)！？**」

ハリー先輩「どうやら俺達は**メテオフォール**のショックで、チームメンバー全員が**殉職**してもうたみたいや」
ハリー先輩「そしてこの世界に**転生した**いうことやな」

ワイ「そんな・・・」
ワイ「ところでこの**真っ白い部屋**は何でっか？」
ワイ「ここはどういう世界なんでっか！？」

# ここは検索エンジン
ハリー先輩「どうやらここは**Googleの検索エンジン**や」
ハリー先輩「世界中のWebサイトの情報を集めて」
ハリー先輩「ユーザーが検索したワードに関する情報が載っているサイトを」
ハリー先輩「一覧にして提供するのがお仕事や」

ワイ「おお・・・！そうなんでっか・・・！」
ワイ「さすがハリー先輩・・・」
ワイ「この**何もない真っ白い部屋**の中に**急にほっぽり出されて**」
ワイ「**ノーヒント**でそこまで状況を把握してまうなんて・・・」
ワイ「やっぱりハンパなさ過ぎますわ・・・！」

ハリー先輩「そんなことはええ」
ハリー先輩「ウダウダ言うててもしゃあない」
ハリー先輩「とにかく、お前はこの世界ではGooglebotや」
ハリー先輩「早くWebサイトをクローリングしてこい！」

ワイ「はいっ！」

# クローリング開始
ワイ「まずは`jzmstrjp.netlify.com`いうサイトやな・・・」
ワイ「おお、一瞬で着いたで」
ワイ「どれどれ・・・」
ワイ「・・・何やこのWebサイト」
ワイ「中身が空っぽやんけ」

```html
<div id="app"></div>
```

ワイ「body要素の中身、実質これだけやないか」
ワイ「ん・・・？」
ワイ「・・・なんかワイの中から**不思議な力**を感じるで・・・！」
ワイ「**！？**」

```html
<div id="app">
    <header>
        <h1>bfjnxkrhorzlb</h1>
    </header>
    <nav>
        <ul>
            <li><a href="/aaa/" title="">lksbjhiu</a></li>
            <li><a href="/bbb/" title="">stih;bjb</a></li>
            <li><a href="/ccc/" title="">nbsltuhbkls</a></li>
        </ul>
    </nav>
    <section>
        <h2>sep:igzrjf:</h2>
        <p>;tpeshj;kzjbxkkb</p>
    </section>

    <!-- 省略 -->

    <footer>
        gjs;rsoibjvkjg;lrgk
    </footer>
</div>
```

ワイ「おお・・・！」
ワイ「さっきまで空っぽに見えたdiv要素の中に」
ワイ「色んな要素たちが生成されたで・・・！」
ワイ「ワイの中の**JavaScriptパワー**が目覚めて」
ワイ「このサイト内のスクリプトを解釈することができたんやな」
ワイ「前世では**あんなに読めへんかった**JavaScriptが」
ワイ「無意識レベルで理解できたで・・・！」
ワイ「最近のGoogleのクローラーは**最新のChrome相当**やっていうもんな」
ワイ「せやからこういう、**JSで動的に生成される**ページも解釈可能なんやな」

ワイ「・・・でもおかしいな・・・」
ワイ「逆に、日本語が読めなくなっとる気がする・・・」
ワイ「だって、ここは日本語のサイトのはずなのに」

```html
<h1>bfjnxkrhorzlb</h1>
```

ワイ「↑こんなおかしな文字列ばっかりに見えるで」
ワイ「botになったから自然言語が読めなくなってしもうたんか・・・？」

ワイ「まあ、そんなん言うててもしゃあない！」
ワイ「とりあえず、この調子で色んなサイトを見て回って、内容を保存していくで！」

# しばらくして、ハリー先輩のところへ帰る
ワイ「ハリー先輩！」
ワイ「とりあえず10サイトで2,000ページほど保存して持ってきました！」

ハリー先輩「おう、ご苦労やったな」
ハリー先輩「どれどれ、まずは`jzmstrjp.netlify.com`の内容を見てみよか・・・」

# 解析開始
ハリー先輩「なるほどな、このページの・・・」
ハリー先輩「ここからここまでの部分は、このテーマについて書いてあるんやな・・・」

ワイ「え？ハリー先輩・・・」

```html
<section>
    <h2>sep:igzrjf:</h2>
    <p>;tpeshj;kzjbxkkb</p>
    <!-- 省略 -->
</section>
```

ワイ「この変な文字列、読めるんでっか！？」

ハリー先輩「いや、読めへんで」
ハリー先輩「俺たちロボットは、自然言語をちゃんと理解できるわけやないからな」
ハリー先輩「俺たちには日本語が`sep:igzrjf:`みたいな意味不明な文字列に見えてしまうんや」

ワイ「ほな何で文書の構造みたいなんが分かるんでっか？」

ハリー先輩「このページはちゃんと**セマンティックなタグ**でマークアップされとるからな」

ワイ「セマンティックなタグ・・・？」

ハリー先輩「html5からぎょうさん増えた、**意味のあるタグ**のことや」
ハリー先輩「例えば・・・」

```html
<div>
    <h2>sep:igzrjf:</h2>
    <p>;tpeshj;kzjbxkkb</p>
    <!-- 省略 -->
</div>
```

ハリー先輩「こんな感じで`section`やなくて`div`タグでマークアップされとったら」
ハリー先輩「その中の`h2`タグが**どの範囲に対する見出しなのか**が曖昧やねん」
ハリー先輩「`div`タグってのは、文書構造的な意味を持たない**汎用的なタグ**やからな」
ハリー先輩「せやけど、このページではちゃんと`section`タグが使われとるから」
ハリー先輩「この`h2`要素は、**この章（セクション）に対する見出し**なんやな、って分かんねん」
ハリー先輩「俺たちロボットでも読みやすい、**マシンリーダブル**なhtml文書やっちゅうことや」

ワイ「おお・・・なるほど・・・」

？？「**こっちのページなんかも分かりやすいですよ**」

ワイ「・・・君は・・・！？」

# ハスケル子も転生していた
ワイ「天才中学生**[ハスケル子](https://qiita.com/Yametaro/items/11dcd3ec26027ff30214)ちゃん**やないか！」
ワイ「君も転生しとったんやな・・・！」
ワイ「っていうか、インターンなのにブラック案件に巻き込んでごめんな・・・」

ハスケル子「そんなことは今どうでもいいんです」

ワイ「（**殉職も意に介さず！？**）」

ハスケル子「ここのhtmlソースを見てください」

```html
<figure>
    <img src="aaa.png" alt="a;grhb;z">
    <figcaption>bns*?gjrsj</figcaption>
</figure>
```

ハスケル子「ちゃんと`figure`タグが使われているので」
ハスケル子「この`figcaption`が、この画像に対する説明だってことが分かります」

ワイ「おお〜、そんなタグもあんねんな・・・！」
ワイ「たしかに・・・」

```html
<div>
    <img src="aaa.png" alt="a;grhb;z">
    <span>bns*?gjrsj</span>
</div>
```

ワイ「もし、こんな感じで`div`や`span`ばっかりでマークアップされとったら」
ワイ「ワイらロボットには、この画像とテキストの**関係性が分からへん**もんな」

ハスケル子「そういう事です」

ワイ「なるほどな〜」
ワイ「セマンティック要素を使用すると、検索エンジンに対して文書構造を明確にアピールできる・・・」
ワイ「とか聞いたことあったけど、こういうことやったんやな・・・」
ワイ「ホンマいろいろ知ってんな、ハスケル子ちゃん」

ハスケル子「**やめ太郎くん・・・やめ太郎くん・・・**」

ワイ「ん、ハスケル子ちゃん？」
ワイ「どないしたんや？」

ハスケル子「やめ太郎くん・・・やめ太郎くん・・・」

ワイ「ハリー先輩！ハスケル子ちゃんの様子がおかしいでっせ！」

ハリー先輩「やめ太郎くん・・・やめ太郎くん・・・」

ワイ「ハリー先輩まで！」
ワイ「どないなってんねや・・・！」

# ここで目が覚める
社長「やめ太郎くん・・・やめ太郎くん・・・！」
社長「**おい！やめ太郎くん！**」
社長「**堂々と昼寝すなよ・・・！**」

ワイ「**ファッ！？**」
ワイ「ワイは殉職してGooglebotに・・・」
ワイ「早くクローリングの続きをせんと・・・」

社長「何を寝ぼけてんねん・・・」
社長「さっさと昨日頼んだhtmlコーディング終わらしてくれや・・・」

ワイ「ゆ、夢やったんか・・・」

# 気を取り直してマークアップ
ワイ「よっしゃ、夢の中で学んだことを活かして」
ワイ「**セマンティックなマークアップ**をしていくで！」

# しかし5分後
ワイ「ここは何のタグでマークアップすべきかな・・・」
ワイ「いうてもワイ、アホやから・・・」
ワイ「そもそも文章内の言葉の意味が分からん・・・」
ワイ「**意味の分からん言葉**に**意味のあるタグ**なんて付けられまっかいな・・・」
ワイ「・・・もう**全部`div`タグ**でええわ！！！」

社長「おい、さっきから全部聞こえてんで・・・！」
社長「**ほんまに殉職させたろかい！！！**」

**〜おしまい〜**


[^1]: 神（偉い人）が現れて、隕石のような破壊力のある指示で現場を無茶苦茶にする開発手法。