公開前チェック｜基礎を学ぶ

最初のレッスンに戻る

このコースの1回目にやったことを覚えているでしょうか。React で作った fleama をブラウザで開き、右クリックして「ページのソースを表示」を選びました。出てきたのはこれだけでした。

<body>
  <div id="root"></div>
  <script src="/assets/index-a1b2c3.js"></script>
</body>

商品名も価格も、どこにも書かれていませんでした。検索エンジンから見れば中身の無いページで、最初の1秒は白い画面でした。あれを解くために、ここまで来ています。

公開した fleama で、同じことをします。今度はこう見えるはずです。

<body>
  <main>
    <h1>おすすめ</h1>
    <a href="/items/1">スニーカー</a>
    <a href="/items/2">革靴</a>
  </main>
</body>

商品名が最初の HTML に入っています。サーバー側でデータを取って組み立ててから送っているので、JavaScript が動く前から中身があります。検索エンジンにも、SNS のカードにも、これがそのまま読まれます。1回目に書き出した2つの困りごとは、どちらも解けました。

初期 HTML のほかにも、開いただけでは分からないところがあります。公開前に一度、順番に見ておきます。

直したくなる箇所は必ず出てきますが、それでいいのです。点検の目的は、直す場所を自分で見つけられるようになることです。

公開後の初期 HTML を書き出し、5項目の点検表を作って全部に印を付けます。