CSS Nite LP64「Coder's High 2019」フォローアップ（7）カイトさん

2019年10月19日に大崎ブライトコアホールで開催したCSS Nite LP64「Coder's High 2019」のフォローアップとして、カイトさん（キテレツ）の『Nuxt.jsがもたらすWordPressの新たな可能性』セッションのスライドなどを公開します。

• スライド（PDF）
• 動画

フォローアップ

こちら（Notion）にまとめていただいていますが、下記に転載します。

• JAMStackとNUXTについての質問です。JAMStackはJSが膨大になることを防止することの理由が挙げられていましたが、NUXTを利用すると反対にJSが膨大になってしまうのではと思ったのですが、どうなのでしょうか？

  中村享介さんより： その質問、僕のセッションでの説明のせいかもしれないですね。すみません。 JAMstack自体はJSのサイズについては特に言及されているものではないのです。 Kiteさんが紹介していたNUXTの静的サイト生成を使えば、JSのファイルサイズは大きく減ることはありませんが、HTMLを構築する処理の部分は終わっているので、速く表示することができます（CPUもその分使わないのでバッテリーのも優しいはず）。ちなみにNUXTのトップページの静的ファイルの生成という見出しの項目で、JAMstackという言葉も出てきますし、NUXTはJAMstackに対応したフレームワークといって問題なさそうです。

  推測ですが、SPA/SSR として Nuxt.js を利用するケースを想定した質問かもしれません。SPA での JS の肥大化の原因は、HTML のレンダリングも JS に大きく依存するからです。しかし、セッションでは詳しく解説できませんでしたが、Nuxt.js はレンダリング方法を選ぶことができ、SSG (スタティックサイトジェネレーター) として、サイト全体を静的ファイルに生成しておけば、ここでいう JS の肥大化にはならないです。極端に言うと、アニメーションや動的コンテンツなどで JS を一切使わないサイトであれば、静的生成されたサイトの配信時は一切 JS がなくても大丈夫です。

• 記事プレビューをしたい場合の手段をもう少し詳しく知りたいです。

  WordPress の下書き記事は、API のエンドポイントにパラメータ status=draft をつけることで取得できます。ただし、通常ではアクセスできず、API と認証を行う必要があります。WP API と認証する方法は下記をご参考ください。 https://ixkaito.github.io/wp-api-docs-ja/guide/authentication/ 公開用に静的生成されたものとは別に、下書きを取得できるようにした SPA もしくは SSR でビルドされたものを用意します。それを非公開で配信すれば、公開サイトの見た目で下書きを確認することができます。SPA の場合、Netlify やほとんどのレンタルサーバに、ファイル一式をアップロードするだけで大丈夫です。SSR の場合はサーバ上で npm start を実行しアプリを常駐させ、さらに外部からアクセスできる状態にしないといけないので、環境は限られてきます。ただ、静的生成されるはずのソースを確認できるなど、より公開サイトに近い状態を確認できるかもしれません。ちなみに、公開用静的ファイルと下書き確認用 SPA/SSR はワンソースで構築できます。それが Nuxt.js の強みでもあります。

• Gatsby.js ではなく Nuxt.js を選んだのはなぜですか？

  一番の理由は Vue.js ベースだからです。HTML/CSS/JS を一つのファイルに記述でき、かつ記述方法も通常の HTML/CSS とほとんど変わらないため、フロントエンドエンジニアが予め設定などを行っておけば、マークアップエンジニアあるいはコーダーでも簡単に開発に参加できます。

• デプロイするサーバーがふつうのレンタルサーバー (CDN (Netlify) じゃない) のときも、つかえるでしょうか？

  使えます。 generate コマンドで生成されたファイル (デフォルトでは dist フォルダ配下) をサーバーにアップロードするだけで大丈夫です。

• Nuxt をはじめるのに参考になるサイトはありますか？

  やはり Nuxt.js の公式ドキュメント (https://ja.nuxtjs.org/) がいいと思います。ほぼ100%日本語化されていると思います。その前に Vue.js の基礎知識もあったほういいと思いますので、ハムさんのセッションを参考にするといいでしょう。