CSS Nite LP64「Coder's High 2019」フォローアップ(7)カイトさん | CSS Nite公式サイト

CSS Nite公式サイト - 2020年1月2日(木) 08:05
このページは、外部サイト CSS Nite公式サイト の情報をRSSフィード経由で取得して表示しているため、記事の一部分しか表示されていなかったり、画像などが正しく表示されなかったり、オリジナル記事が意図したデザインと異なっていたりする場合があります。
完全な状態のオリジナル記事は 「CSS Nite LP64「Coder's High 2019」フォローアップ(7)カイトさん」 からご覧ください。

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

フォローアップ

こちら(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 の基礎知識もあったほういいと思いますので、ハムさんのセッションを参考にするといいでしょう。

メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

人気記事トップ10(過去7日間)

今日の用語

インデックス
検索エンジンがWebページをデータベースに保存しているデータベース。データベース ...→用語集へ

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]