<h1 id="h4660df9f76">そもそもSSGってなに？</h1>Static site generator。 静的なファイルを生成し、CDNに配置する。 動的なページではない場合に使える。(ニュースやブログ等) <h1 id="hbb46ebecb3">なぜ静的なファイルを生成するといいの？</h1><ol><li>クライアント側での初期データ(ニュースやブログで言う記事データ)を取得するAPIコールが不要になり、データの表示が早くなる</li><li>1のおかげでGoogle botなどのクローラはデータが挿入された意図通りにレンダーされたページを読み込むのでSEO的によい</li><li>静的なHTMLをCDNに配置することでWebサーバーを介す必要がなくなり、レスポンスが早い</li></ol>つまりユーザー体験が向上し、さらに(ユーザー体験が向上した結果)SEOの評価向上に繋がる。 <h1 id="hc245c1e517">SSGが出てくるまでの経緯</h1><h2 id="h944f55828f">React.js等DOM操作ライブラリの台頭</h2>これまではRuby on RailsやDjangoのように、ページに掲載する情報はHTMLとしてサーバーがビルドしてクライアントに返していた。 しかし現在React.jsやVue.js等、ブラウザ上でJavascriptを使ってDOMを操作しHTMLを構築する技術が主流になっている。(そのおかげで動的なページ作成が容易になりユーザー体験や開発体験が向上した) しかしHTMLはクライアント側で構築されるため、基本的にはサーバーが返すHTMLにデータを入れ込む事ができない。クライアント側が、HTMLやJSを取得した後に非同期でAPIコールを行いデータを取得する事になる。 <pre><code>1 - [Web server] &lt;=(HTML取得)=&gt; [Client]
2 - [Web server] [Client] =(データ取得)=&gt; [API server]</code></pre> <h2 id="hd3764614d6">クライアント側でデータを取得する弱点</h2>クライアント側でデータを取得する分、レンダーがAPIリクエストのレスポンスが帰ってくるまでその分遅れる。 またそうしたレンダーのタイムラグのせいで、データがまだ反映されていない空白のページとしてGoogleに認識されてしまい、SEO的なデメリットが発生する場合もある。 <a href="undefined"><img src="https://images.microcms-assets.io/protected/ap-northeast-1:f75175b6-b80e-4008-a5fe-284e4b9ef300/service/ok8omk/media/loading.gif" alt="undefined"></a> <h2 id="h491cb0f428">SSRによる解決</h2>そこでサーバーサイドでデータを取得して、データが挿入されたレスポンスを返すSSR(Server side rendering)が登場した。 これによりデータ取得はクライアントサイドで行う必要がなくなった。 <pre><code>1 - [API server] &lt;=(データ取得)= [Web server] [Client]
2 - [API server] [Web server] &lt;=(データ入ったHTML取得)= [Client]</code></pre> <h2 id="hc29e72107a">でもSSRよりSSGがベターな場合がある</h2>SSRによってクライアント側のデータ取得が必要なくなったが、レスポンス毎にWebサーバーがAPIコールや計算をしている。 クライアントによって異なるデータを取得する必要がある場合を除いて(ログイン済みのページ等)、ニュースやブログ等の場合同じHTMLを返せばよい。 そういう場合はレスポンス時にデータを取得してHTMLを作成する必要はなく、データが更新された段階でHTMLを生成すればよい。 このブログで言えばブログ記事が投稿されたことをトリガーにHTMLを生成すればよい。<pre><code>0 - [API server] &lt;=(データ取得)= [Web server] [CDN] [Client]
0 - [API server] [Web server] =(配置)=&gt; [CDN] [Client]
1 - [API server] [Web server] [CDN] =(取得)=&gt; [Client]</code></pre> しかもCDNに配置することでWebサーバーの計算する負担をなくせる。そしてレスポンスが早い。

SSGってなんなのかを個人用にまとめたメモ

SSGって何者？

技術系のメモが出来るブログにしたかったので、このブログにはシンタックスハイライトの機能を実装している。 その実装の際に困ったことをメモしておく。 <h1 id="hd4bacdbe5f">どのnpmモジュールを選択するか</h1>結論、このブログでは<a href="https://github.com/PrismJS/prism" target="_blank" rel="noopener noreferrer">Prism.js</a>を使っている。 最初は「javascript syntax highlight」でググって一番上に出てくる<a href="https://github.com/highlightjs/highlight.js" target="_blank" rel="noopener noreferrer">Highlight.js</a>を使おうと思っていた。 ただHighlight.jsが調べた限りではtsxに対応していなかった。(<a href="https://github.com/highlightjs/highlight.js/issues/1155" target="_blank" rel="noopener noreferrer">それっぽいIssue</a>は立っているのでもう時期実装されるかもだが) tsxは書きたい言語の1つだったので別のモジュールを探した結果、tsxに対応しているらしいPrism.jsに決定した。 <h1 id="h7a9093de09">Prism.jsでどのようにシンタックスハイライトをSSGするか</h1>「Next.js Prism.js SSG」とかでググっても丸々パクれそうなコードが見つからなかった。 稚拙な実装ではあるが同じような人がいた時にググれるようにメモを残しておく。 結論、要点は2つ。<ol><li>Prism.jsが提供するAPIの内、ローレベルなhighlightメソッドを使用した</li><li>microCMSのデータスキーマについて、コードとセットで言語種別を渡すように設定した</li></ol>なぜそういう結論に至ったかを説明していく。<h2 id="he84b192133">Prism.jsが提供するAPIの内、ローレベルなhighlightメソッドを使用した</h2>これに関しては<a href="https://prismjs.com/#basic-usage-node" target="_blank" rel="noopener noreferrer">Prism.jsのドキュメント</a>のUsage with Nodeのセクションに、<a href="https://prismjs.com/docs/Prism.html#.highlight" target="_blank" rel="noopener noreferrer">highlight</a>メソッドが使われていたのでそうした。 ちなみに<a href="https://prismjs.com/docs/index.html" target="_blank" rel="noopener noreferrer">Prism.jsのAPIドキュメント</a>を見ると分かるが、highlightよりも上位のAPIとして<a href="https://prismjs.com/docs/Prism.html#.highlightAll" target="_blank" rel="noopener noreferrer">highlightAll</a>というメソッドが提供されている。<blockquote>This is the most high-level function in Prism’s API. It fetches all the elements that have a <code>.language-xxxx</code> class and then calls <a href="https://prismjs.com/docs/Prism.html#.highlightElement" target="_blank" rel="noopener noreferrer">Prism.highlightElement</a> on each one of them.</blockquote>とあるように、language-xxxというクラス名が付いているnodeに全てに対してハイライトをかける便利なメソッドである。 このようにhighlightAllがハイライトするトリガーはクラス名になる訳だが、 自分が使っているmicroCMSのリッチエディタではコードブロックのノードにクラス名を指定することが出来ない。(他のheadless CMSだと出来ることなのかもしれない。もし出来るならそのまま使えばOKです) という訳で大人しくhighlightメソッドを使う方法を探すことにした。 <h2 id="h0cba8ccb34">microCMSのデータスキーマについて、コードとセットで言語種別を渡すように設定した</h2><a href="https://prismjs.com/docs/Prism.html#.highlight" target="_blank" rel="noopener noreferrer">highlight</a>メソッドの引数には、そのコードの言語が何かを示す文字列を渡す必要がある。(以下表のlanguage) <a href="undefined"><img src="https://images.microcms-assets.io/protected/ap-northeast-1:f75175b6-b80e-4008-a5fe-284e4b9ef300/service/ok8omk/media/ScreenShot%2033.jpg" alt="undefined"></a> そのため<a href="https://microcms.io/blog/input-richeditor-and-html" target="_blank" rel="noopener noreferrer">microCMSのブログ（リッチエディタで入稿しつつ一部はHTMLで入稿する）</a>を参考にして、 ソースコードと言語種別をセットで渡せるようなデータスキーマを設定した。 データスキーマはこんな感じ。 本文をリッチエディタにするのではなく、「リッチエディタ + 言語種別 + ソースコード」の繰り返しフィールドにすることで実現した。 <a href="undefined"><img src="https://images.microcms-assets.io/protected/ap-northeast-1:f75175b6-b80e-4008-a5fe-284e4b9ef300/service/ok8omk/media/ScreenShot%2034.jpg" alt="undefined"></a> <a href="undefined"><img src="https://images.microcms-assets.io/protected/ap-northeast-1:f75175b6-b80e-4008-a5fe-284e4b9ef300/service/ok8omk/media/ScreenShot%2035.jpg" alt="undefined"></a> 実際に入稿する時はこんな感じになる。 <a href="undefined"><img src="https://images.microcms-assets.io/protected/ap-northeast-1:f75175b6-b80e-4008-a5fe-284e4b9ef300/service/ok8omk/media/ScreenShot%2036.jpg" alt="undefined"></a> こうすることでソースコードとセットで言語種別を取得できるので、highlightメソッドを実行する準備が整う。 SSG時にサーバーサイドでハイライトするソースコードの実装はこんな感じ。 <pre class='language-tsx'><code class='language-tsx'> private highlightContent( contentParts: { richEditor: string; language: string; sourceCode: string }[] ): string { let content = ""; contentParts.forEach(({ richEditor, language, sourceCode }, index) => { if (index > 0) { content += "&lt;br />"; } content += richEditor; if (!LANGUAGES.includes(language)) { return; } content += "&lt;br />"; content += `&lt;pre class='language-${language}'>&lt;code class='language-${language}'>`; sourceCode.split("\n").forEach((lineOfsourceCode) => { content += highlight(lineOfsourceCode, languages[language], language); content += "&lt;br />"; }); content += "&lt;/code>&lt;/pre>"; }); return content; } </code></pre> <blockquote>URL: <a href="https://github.com/ok8omk/iam.oke.tokyo/blob/master/lib/post.ts" target="_blank" rel="noopener noreferrer">https://github.com/ok8omk/iam.oke.tokyo/blob/master/lib/post.ts</a></blockquote>繰り返しフィールドとして本文のフィールドを複数の値に分割しているので、 それらの値に対してハイライトをかけつつ1つの本文にまとめ直す処理をしている。 書きたかったことは以上で終わり。 これからくるりの京都音楽博覧会2020見るので楽しみだぁ。では。

CSRではなくSSGでシンタックスハイライトする記事が少なかったので、実装した時詰まったポイントを記事に残しておく

Next.js+microCMSのSSGでコードのシンタックスハイライトを効かせる

<h1 id="h9707d3a59a">概要</h1>このJAMstackなブログを作った際に参考にした資料をメモ。 <a href="https://github.com/ok8omk/iam.oke.tokyo" target="_blank" rel="noopener noreferrer">ソースコード</a> <h1 id="ha9b4b8d26c">このブログで使用しているサービス</h1><ul><li><a href="https://nextjs.org/" target="_blank" rel="noopener noreferrer">Next.js</a></li><li><a href="https://vercel.com/" target="_blank" rel="noopener noreferrer">Vercel</a></li><li><a href="https://microcms.io/" target="_blank" rel="noopener noreferrer">microCMS</a></li></ul>お金払ってるのはドメイン周りだけ。 <h1 id="hac3e927f6e">Next.jsについて</h1>前提、Reactを業務で1年ほど触ってるのでReact自体は触り慣れていた。 その上で<a href="https://nextjs.org/learn/basics/create-nextjs-app" target="_blank" rel="noopener noreferrer">Next.jsのチュートリアル</a>を丸々1周やった。 チュートリアル自体がブログの構築を題材にしており、ルーティング、SSRやSSG、アセットの配置、cssなど、Next.jsでシンプルなブログを作るための知識が網羅的にカバーされている。 正直チュートリアルが優秀すぎて書くことがない。 設定が面倒だと思っていたTypeScriptの設定もカバーされていてとても助かった。 Google Analyticsの設定はチュートリアルに書いてなかったが、ググったら公式のサンプルコードが出てきたのでこれを参考に設定した。 <a href="https://github.com/vercel/next.js/tree/canary/examples/with-google-analytics" target="_blank" rel="noopener noreferrer">https://github.com/vercel/next.js/tree/canary/examples/with-google-analytics</a> <h1 id="he9636dbaaa">Vercelについて</h1>Next.jsを開発している会社のホスティングサービス。 前述のNext.jsのチュートリアルでもこのサービスを使って実際にデプロイすることになる。 Next.jsとの親和性が素晴らしく、Github連携するだけでデプロイができるようになっている。<ul><li>PRを作成するとそのブランチのstaging環境用URLをPR上に生成してくれる</li><li>masterにマージするとデプロイしてくれる</li></ul>これまた説明することは殆どないが、自分の持ってるドメインを設定した時に参考にしたURLは下記。 <a href="https://vercel.com/docs/v2/custom-domains" target="_blank" rel="noopener noreferrer">https://vercel.com/docs/v2/custom-domains</a> <h1 id="hae6947d5ce">microCMS</h1>国産の<a href="https://microcms.io/blog/what-is-headlesscms/" target="_blank" rel="noopener noreferrer">ヘッドレスCMS</a>。 ヘッドレスCMSなら何でも良かったが、<a href="https://microcms.io/blog/" target="_blank" rel="noopener noreferrer">同社のブログ</a>が充実していたので使ってみることにした。 <a href="undefined"><img src="https://images.microcms-assets.io/protected/ap-northeast-1:f75175b6-b80e-4008-a5fe-284e4b9ef300/service/ok8omk/media/ScreenShot%20108.jpg" alt="undefined"></a> スキーマはこんな感じ。記事を管理するAPIを立てなくていいのは本当に楽で感動。 contentParts(本文)の種類が繰り返しになっているのはコードにシンタックスハイライトを効かせるためだが、 それは後日後述する。

このブログをNext.js+microCMSで作った時に参考にした資料をまとめる予定だったが、Next.jsのチュートリアルを触れば済むので書くことがない。

Next.js+microCMSでブログを作る

タイトルの通りだけどブログを作った。 構成は<a href="https://nextjs.org/" target="_blank" rel="noopener noreferrer">Next.js</a> + <a href="https://microcms.io/" target="_blank" rel="noopener noreferrer">microCMS</a>。<a href="https://vercel.com/" target="_blank" rel="noopener noreferrer">Vercel</a>にホスティングしている。 「ブログ作りたいけどサーバーサイド書くのめんどさいなぁ」と思っていたんだけど、 Headless CMSがその面倒くささを全部肩代わりしてくれている。とても便利。 Next.jsをVercelにデプロイするのもめっちゃ楽で、想像以上に作業少なかった。素敵。

ブログが完成したので記念に投稿した。

ブログを作った

<h1 id="h698f6d872c">h1</h1><h2 id="h339723c59e">h2</h2><h3 id="h824e73a9d9">h3</h3><h4 id="hd3fc62d264">h4</h4><h5 id="he0a25d6d97">h5</h5>Plain Bold Italic Underline<blockquote>Quote</blockquote><ol><li>First</li><li>Second</li><li>Third</li></ol><ul><li>First<ul><li>First-First</li><li>First-Second</li></ul></li><li>Second</li><li>Third</li></ul><a href="https://google.com/" target="_blank" rel="noopener noreferrer">Link to Google</a> <a href="undefined"><img src="https://images.microcms-assets.io/protected/ap-northeast-1:f75175b6-b80e-4008-a5fe-284e4b9ef300/service/ok8omk/media/johann-siemens-EPy0gBJzzZU-unsplash%20(1).jpg" alt="undefined"></a> <pre class='language-tsx'><code class='language-tsx'>function Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return &lt;UserGreeting />; } return &lt;GuestGreeting />; } ReactDOM.render( // Try changing to isLoggedIn={true}: &lt;Greeting isLoggedIn={false} />, document.getElementById('root') ); </code></pre>

Hello world2

Hello. This is a first post.