「NuxtMeetup#5」に参加してきました

勉強会メモ
  • Nuxt Meetupに参加してきました。

nuxt-meetup.connpass.com

  • 今回は具体的な実装よりも、なぜNuxtを選択するのかといった話や実運用での苦労話多くありました。
  • 実運用している方の踏み込んだ話が聞けて参考になりました。
タイトル 発表者
バンドルファイルの肥大化問題解消にみるNuxt.jsの成熟化 Wakamatsu Hisashi
フロントエンド(実稼働)までひとりでできるもん hiroki_yoshitug
Vue or Nuxt masaakikunsan
Vueを広めるためのNuxt.jsの可能性 かめぽん
Nuxtを使っていて地味にハマった小ネタの紹介 Yuki Terashima
nuxt-i18nを使ったWebサイトの多言語化 odan
NuxtでのJAMStackな開発とポイント Tame

バンドルファイルの肥大化問題解消にみるNuxt.jsの成熟化

  • Wakamatsu Hisashiさん

Nuxt2

  • webpack4
  • ESModules
  • babel7

Nuxtのメリット

  • SSR手軽にできるのは大きなメリット
    • VueCLI3も便利だけど

Code Splitting

  • 柔軟性を欠いていた(v1)
    • ファイル肥大化
  • maxChunkSizeを指定できるようになった(v1.2.1~v1.4.1)
    • http2環境でないと良さを活かしきれない
  • optimization.splitChunkの仕様に沿って指定できるようになった(v2)

Nuxtを使う上で大事なこと

  • 便利に使えるけど内部がどうなってるかわからない
    • node_modules/nuxt配下にどんな初期値が設定されてるかも見るよい

フロントエンド(実稼働)までひとりでできるもん

  • hiroki_yoshitugさん

DODA

技術スタック

  • Nuxt(SSR)
  • PWA(nuxt-pwa-module)
  • express
  • mysql

Nodeサーバのかどう

  • マルチプロセスで動かす
  • 80port使えるのか？
  • クラスタ構成で上手くロギング

マルチプロセスで動かす

  • npm run startだと持て余してしまう
  • クラスタモードで起動する
  • PM2を使う

80port使えるのか？

  • well known portはroot必要
  • authbindを導入してpm2のエイリアスを設定することで一般ユーザでできる

クラスタ構成で上手くロギング

PM2でできること

  • プロセス監視
  • ファイル変更時に自動でプロセス再起動
  • メトリクスの設定

Vue or Nuxt

  • masaakikunsanさん(SCOUTER)

VueとNuxtの動向

  • どちらも上向いてる

Vueのメリット

  • 公式のエコシステム豊富

Nuxtのメリット

  • Webpackやbabelが隠蔽
  • SSRが簡単
  • routing自動生成
  • 規約があること

Nuxtを選択した方がいいケース

  • SSRしたい
  • SEO気にする
  • Vueに精通してる人が多い
  • 静的サイトを作りたい
  • routerが便利だから?
    • vueでも便利なライブラリはある

github.com

Nuxtを選ばないほうがいいケース

  • SEO気にしない
  • 設計を自分でやりたい
  • Vue初心者が多い
  • TS使いたい

まとめ

  • SEO/SSR以外の時はNuxtじゃないといけない理由はない
  • Nuxt便利だからって思考停止してませんか？
  • よく考えてVue/Nuxtでハッピーライフを

Vueを広めるためのNuxt.jsの可能性

  • かめぽんさん

Vue/Nuxtをなぜ拡散させる必要あるか

  • フロントエンドが居やすい環境
  • jQueryにより弊害を激減させる
  • 組織をドライブさせるため
    • 適切な技術は適切な人を呼ぶ

Nuxtの組織に与えるインパクト

  • 劇的な親しみやすさ
    • Vueだから
  • 規約で意識の共通化
    • 初心者でも爆発しづらい
  • 圧倒的スピード
    • スターターの充実

まとめ

  • 新しい技術を定着させるのは時間と体力がいる
  • Nuxt使うと早い

Nuxtを使っていて地味にハマった小ネタの紹介

  • Yuki Terashimaさん

地味なハマりポイントがある

GTMの設定

Lambda上で動かす

  • AWS Lambda上で動かしている
    • 実例が少ない

500エラーの挙動

  • layouts/error.vue
  • SSRしてるとファイルが読み込まれない
    • それだと困る
    • app/views/error.htmlで解決する
    • nuxt.config.jsのsrcDirがapp app/app/views/error.htmlじゃないとダメ

まとめ

  • Nuxtは変なところでハマることもあるが基本的に使いやすい
  • 公式読めばだいたい分かる

nuxt-i18nを使ったWebサイトの多言語化

  • odanさん

i18n

  • internationalizationの略
  • 言語、時差、名詞の複数形

vue-i18n

github.com

  • messagesに入れておけば自動的に入れ替わる

nuxt-i18n

github.com

  • 日本語情報が少ない
    • つい最近qiitaの記事が出た

qiita.com

  • ルーティングの自動生成
  • 便利関数
  • SEO対策の機能

NuxtでのJAMStackな開発とポイント

  • Tameさん

JAMStack

NuxtとJAMStack

  • NuxtとJAMStackは相性が良い
    • ディレクトリ構成がルール化されている
    • 静的ファイルも生成できる

Nuxtでサイトを公開するパターン

  • SPA
  • SSR
  • JAMStack

NuxtでJAMStack

  • Nuxt + Netlify + Contentful
  • gitにpushするとNetlifyにデプロイ
  • Netlifyのprerenderingを使ってデプロイ時に記事を生成