ReactでリッチなUIの管理画面を開発した話

開発本部2年目メンバーで語り合う。2021年の開発本部の変化 【座談会・後編】

開発本部2年目メンバーで語り合う。2021年の開発本部の変化 【座談会・前編】

レガシーなフロントエンドを捨ててReact.jsでリプレイスした話

## Next.jsで`meta`タグを出し分ける方法
まず Next.js で`meta`タグを出し分ける方法ですが、`next/head`を利用すればサーバー側で`meta`タグを生成してくれるので、OGP画像なども適切に埋め込むことができます。

参考: [https://nextjs.org/docs/api-reference/next/head](https://nextjs.org/docs/api-reference/next/head)

## 設定したはずの`meta`タグが表示されない
実際に`next/head`を使って`title`や`og:image`を挿入したはずが、実際にレンダリングされたページを見ると挿入されていないという問題が発生しました。
そこで考えられる原因と対策を紹介しようと思います。

## `Head`の中に2階層以上のコンポーネントを配置している
> title, meta or any other elements (e.g. script) need to be contained as direct children of the Head element, or wrapped into maximum one level of &lt;React.Fragment&gt; or arrays—otherwise the tags won't be correctly picked up on client-side navigations.

公式ドキュメントにもあるように、`Head`の直下か、最大1階層の`React.Flagment`、もしくは配列に記述する必要があります。

参考: [https://nextjs.org/docs/api-reference/next/head](https://nextjs.org/docs/api-reference/next/head)

## `_document.js`内の`Head`で`title`を定義している
> Adding &lt;title&gt; in pages/_document.js will lead to unexpected results with next/head since _document.js is only rendered on the initial pre-render.

上記のように公式ドキュメントに書いてあります。実際に僕も間違えて`_document.js`内に`title`タグを配置したときに上手く`og:image`などが出力されない問題が確認できました。

ドキュメントにもあるように`title`タグをグローバルに設定したい場合は`_app.js`に記述するようにしましょう。

参考: [https://nextjs.org/docs/messages/no-document-title](https://nextjs.org/docs/messages/no-document-title)

## 最後に
これは、実際に僕がこのブログを実装するときに直面した問題であり、実際に解決できた方法になります。

Next.jsの公式ドキュメントは充実しているので、基本的に原因と対処法が記載されています。なので、ドキュメントをしっかり読む癖を付けましょう(自戒)

Next.jsでmetaタグが思うように出力されないときの原因と対処法

Next.jsでmetaタグが思うように出力されない原因と対処法

## 対象読者
- Markdownから自動的にHTMLを生成しているがゆえに、コードブロックのインラインコードのスタイリングの切り分けをできずに困っている人
- わざわざpreタグとcodeタグの構造を意識しなくてもいい感じにスタイリングを切り分けたい人

## どういった場面で発生するか
MarkdownからHTMLを自動生成してくれるJavaScriptライブラリはいくつか存在しています。例えば`remark`や`react-markdown`、`marked`といったものがあげられます。

それぞれのライブラリで挙動に違いはあると思いますが、基本的にコードブロックとインラインコードの入出力は下記のようになると思います。

### コードブロック
入力(Markdown)
~~~md
```
console.log('Hello World!')
```
~~~

出力(HTML)
~~~html
<pre>
  <code>
    console.log('Hello World!)
  </code>
</pre>
~~~

### インラインコード
入力(Markdown)
~~~md
`console.log('Hello World!')`
~~~

出力(HTML)
~~~html
<code>console.log('Hello World!)</code>
~~~

## `pre`タグと`code`タグのCSSの設定に困る
`pre`タグにはコードブロックとしてのスタイルを、`code`タグにはインラインコードのスタイルを与えようとして、下記のようにCSSを設定したとします。
```css
pre {
  background: black;
}
code {
  background: light-gray;
}
```
しかし、こうしてしまうとコードブロックにも`code`タグが使われているため、結果的に、コードブロックとインラインコードのどちらにも`background: light-gray`が適用されてしまいます。

## `pre`タグと`code`タグのCSSを切り分ける方法
ではどのように指定すれば良いかというと、下記のように`pre`タグの下にある`code`タグは無視するようにCSSを設定してあげれば良いです。
```css
pre {
  background: black;
}
*:not(pre) code {
  background: light-gray;
}
```
`*:not(pre) code`を言葉で説明をするならば、「`pre`タグを除く全ての要素の配下にある`code`タグ」という指定になります。

詳しくはMDNを参考にしてみてください。(最近MDNのデザインがカッコ良くなってちょっと嬉しい)
- [https://developer.mozilla.org/ja/docs/Web/CSS/Universal_selectors](https://developer.mozilla.org/ja/docs/Web/CSS/Universal_selectors)
- [https://developer.mozilla.org/ja/docs/Web/CSS/:not](https://developer.mozilla.org/ja/docs/Web/CSS/:not)

## 最後に
CSSは無限大なので、今回紹介した方法以外にも回避策はたくさんあると思います。ただ、その中でもこの方法を紹介した理由として、コードブロックにはシンタックスハイライトを導入するためのライブラリを使いたいという人が多いかと思います。

そこで、`pre`タグなどのコードブロックは自動的にスタイリングされてしまいます。そのため`code`タグに着目した回避策を紹介させていただきました。
ぜひ参考にしてみてください。

自動生成されるpreタグとcodeタグのスタイルをCSSだけで切り分ける方法

## ブログを開設した経緯
現状、発信しているコンテンツが会社の開発者ブログくらいしかないので、そろそろ個人としても発信できる環境を整備しようかなと思い、開設に至りました。

## なぜ自作ブログなのか
発信する環境として、最近だと Qiita や Zenn などがありますが、なぜそのあたりを使わないかというと、せっかく個人として発信するのだから自分のドメインで配信したいという自己満からです。
また、単純にブログを作るのが好きなので作ってみました。過去にもブログを作っては壊してを繰り返しています。

## このブログで扱っている技術やサービス
タイトルにもあるように、このブログでは　React のフレームワークの Next.js と Headless CMS の Contentful 、ホスティティングサービスの Vercel を利用しています。

### Next.js とは
> **"The React Framework for Production"**  
> Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

つまるところ、高機能でDXが最高な React 製フレームワークということです。実際、独自での設定がほとんど必要なく、そのまま本番で公開することができるのでかなり快適です。
それでいて、SSG や ISR ができるので、ハイパフォーマンスで公開できます。
SSG や ISR についての詳細は下記のページが参考になると思います。
- [Static Generation](https://nextjs.org/docs/basic-features/pages#static-generation-recommended)
- [Incremental Static Regeneration](https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration)

公式サイト: [https://nextjs.org/](https://nextjs.org/)

### Contentful とは
> **"The content platform for the modern tech stack"**  
> Cloud-native. API-first. Endlessly extensible. We help you manage, integrate and deliver content across every digital channel.

つまり、クラウドで管理されたAPIファーストのコンテンツ管理サービスです。ブログ記事やユーザー情報などのコンテンツを API で提供できるようにしたものと考えて良いと思います。
実際に、この記事やページ内に設置されているプロフィール、記事に付けられたタグなども Contentful 上で設定して、 API 経由で Next.js で受け取っています。
サーバレスで構築できるのでフロントエンドが好きなエンジニアとしてはとてもありがたいです。

公式サイト: [https://www.contentful.com](https://www.contentful.com/?&utm_source=google&utm_medium=search-paid&utm_campaign=npd-brand&utm_content=&gclid=Cj0KCQiA64GRBhCZARIsAHOLriKyy0xOilLmIlJnEgX-4VL3MLOe_ZVzYATmFJYtFybF4Uy-U7lqMr8aAi7yEALw_wcB&gclsrc=aw.ds)

### Vercel とは
> Vercel is a platform for frontend frameworks and static sites, built to integrate with your headless content, commerce, or database.

公式ページではこの文章に後述されているのですが、これも Next.js と同じく DX の向上を掲げているホスティングサービスになります。
GitHub と連携して、 Push すると即座に　Preview 環境がデプロイされたり、 Merge すると Production にデプロイされたりと、特別な設定なくインフラ環境を整えることができます。
恩恵を受けるほど活用はしていませんが、スケーラビリティも高いと書かれています。

公式サイト: [https://vercel.com/docs](https://vercel.com/docs)

## このブログの今後について
今後は、このブログを通して様々な発信をしていきたいと考えています。
過去にも何度かブログを作って数記事書いては壊すというのを繰り返していたのですが、今回は本格的に運用していけたらいいなと思っています。

新着記事

Next.jsでmetaタグが思うように出力されない原因と対処法

自動生成されるpreタグとcodeタグのスタイルをCSSだけで切り分ける方法

Next.jsとContentfulでテックブログを作成する方法

外部記事

ReactでリッチなUIの管理画面を開発した話

開発本部2年目メンバーで語り合う。2021年の開発本部の変化【座談会・後編】

開発本部2年目メンバーで語り合う。2021年の開発本部の変化【座談会・前編】

レガシーなフロントエンドを捨ててReact.jsでリプレイスした話

新着記事

Next.jsでmetaタグが思うように出力されない原因と対処法

自動生成されるpreタグとcodeタグのスタイルをCSSだけで切り分ける方法

Next.jsとContentfulでテックブログを作成する方法

外部記事

ReactでリッチなUIの管理画面を開発した話

開発本部2年目メンバーで語り合う。2021年の開発本部の変化 【座談会・後編】

開発本部2年目メンバーで語り合う。2021年の開発本部の変化 【座談会・前編】

レガシーなフロントエンドを捨ててReact.jsでリプレイスした話

開発本部2年目メンバーで語り合う。2021年の開発本部の変化【座談会・後編】

開発本部2年目メンバーで語り合う。2021年の開発本部の変化【座談会・前編】