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

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

nuxt-meetup.connpass.com

  • 普段はReactエンジニアですが、Vue/Nuxtも興味あるので参加してみました。SSRのつらみ等Nuxtに閉じない話も聞けて勉強になりました。
  • イベント公開から数時間で定員が埋まってしまうところから見てもNuxtは今注目されていることが実感できます。
  • ちなみに次回は10/18だそうです。
タイトル 発表者
LINEとNuxt jun
STUDIOのつくりかた @keimakai1993
で、NuxtのSSRっていつ使うの? @kotamats
Nuxtのプロダクション事例 @AkiraTameto
Nuxtを使うと初心者と上級者の実装差がない @aintek4
リクルートライフスタイルにおけるNuxt.jsの導入事例 @YuG1224

LINEとNuxt

  • junさん

LINEとNuxt

  • LINEでNuxt使ってる
    • WebViewとかもあって意外とある

API/Auth

  • APIや認証サーバは別で作るほうが良い

API

  • host(ドメイン)をどう共有するか
    • /apiパスベースのプロキシ
    • /apiだとAPIサーバ、そうでなければNuxtサーバ
  • SSR
    • axios-module
    • Nuxtサーバ->APIサーバ

Auth

  • LINE Login
  • Authした状態でSSRしたい
    • axios-moduleでできる
  • ログインしてない時に/auth/loginとかにredirect
    • vueのコンポーネントを探しに行ってしまう
    • location.hlefでで認証に飛ばす
    • redirectじゃないので画面が出てしまう
    • login用の空のコンポーネントを用意して対応している

まとめ

  • axios-moduleがいい！

メモ

https://axios.nuxtjs.org/

https://github.com/nuxt-community/axios-module

STUDIOのつくりかた

  • @keimakai1993さん

STUDIO

studio.design

  • デザインだけでWeb制作できるツール
  • GUIベースでデザインが作れる
  • そのままWebに公開できる

STUDIOでNuxtがどう使われているか

  • デザイン編集
    • 内部的にはvue-cli叩いて作ってる
  • ライブプレビュー
    • Nuxt使ってる
    • 変更内容をFirebaseへ
    • それをプレビューに反映してる
  • パブリッシュ
    • Nuxt使ってる
    • GCPにアップ
    • SSRで動作

Nuxt/Vueで良かった点

  • サービスの成長スピードに合わせてプロダクト作れる
  • 出だしの素早さ
  • 軌道に乗ってからの作り込み

Nuxt/Vueで困ってる点

  • SSRしてるのでサーバ負荷が高い
    • Nuxt generate
  • メモリリーク
    • 長時間ページを表示し続けることが多い
    • 4分おきにk8sでNuxtのpodをローリングアップしてる

で、NuxtのSSRっていつ使うの?

  • @kotamatsさん

よくある会話

  • NuxtってSPA,SSR,generateどれ使うのがいいの？
    • generateがいいのかなー
    • SSRは使わなくていいんじゃね
  • generateはめっちゃ楽
    • nuxt generate
    • 初回レンダリング速い
    • 2ページ目以降はSPAモード
    • 動的なページも設定すればgenerateできる

(Nuxtの)SSRは癖がある

  • インフラ面
    • node環境
    • node死活監視
  • コーディング面
    • ブラウザ依存のAPI使えない
      • window``document
      • localStorage``indexedDB
  • フロントエンドエンジニアがあんまり考えたくないところ
    • インフラエンジニアも考えたくない

SSRいつ使うか

  1. CMS系のOGP対応
  2. 認証後のページの表示高速化
  3. Nuxtだけでサーバのセッションを使いたい
    • 認証情報をNuxtサーバで管理とか
  4. generateでできないことをしたい
    • middkeware使いたいとか
    • nuxtServerInit使いたいとか

まとめ

  • 静的サイトの場合はgenerateでどうにかなる
  • 会員制サイトなどはmiddleware使うことが多いのでgenerateだと厳しい
  • SSR固有の要素は代替技術もあるので選定が大事
  • SSR自体はNuxtではとても簡単

Nuxtのプロダクション事例

  • @AkiraTametoさん

どうしてNuxt

  • (Reactより)学習コストが低い
  • (Nextより)Nuxtは快適
  • コミュニティも活発

Nuxtのデメリット

  • 今のところない
  • 情報が少しすくないかなというくらい

事例

おしゃれなさいとがほしい

  • Nuxt + Netlify
  • 状態管理できるのでCSSアニメーション使いやすい

Wordpressのようなブログがほしい

  • Nuxt + Contentful + Netlify
  • Contentfulで簡単にCMS作れる
  • メール送信SendGrid使った

チャット付きのイベントアプリがほしい

  • Nuxt + Firebase + PWA
  • NuxtだとPWA簡単にできた
    • initコマンド的なのでPWA指定できる

Googleスライドのようなツールがほしい

  • Nuxt + Firebase + go + GCP
  • 作成したSVGをFirebaseに保存

快適な求人システムがほしい

  • Nuxt + go + GCP + Apollo
  • GraphQL使ってる

重いサイトをリプレイスしてほしい

まとめ

  • 基本全部Nuxtでいける！

Nuxtを使うと初心者と上級者の実装差がない

  • @aintek4さん

なぜNuxtは初心者と上級者の実装差がないと思うか

  • 実装がシンプル
    • ルーティング
    • 非同期処理
    • 簡単な設定ファイル

ルーティング

非同期処理

  • asyncDataの書き方は3パターン
  • どれを使うかチームで決めておけば分かりやすい
    • Promise
    • async/await
    • callback

簡単な設定ファイル

  • nuxt.config.jsだけ書けばいい
  • そもそもほとんど自分で書かなくていい

Nuxtを使う意義

  • 自分で書く量が少ないからビジネスの本質に時間を費やせる

まとめ

  • Nuxtを使えば初心者でも上級者と同じコードが書ける
  • フレームワーク側で用意してくれてるから実装がシンプルになる

リクルートライフスタイルにおけるNuxt.jsの導入事例

  • @YuG1224さん

Nuxt導入の背景

  • 大規模既存システムの存在
  • じゃらんの新機能追加(既存システムとの連携あり)
    • 既存の技術的負債を広げたくない
    • 負債はAPI Aggregationで吸収させる
    • API Aggregationはexpressで立てた

Nuxtの役割

  • NuxtはSPAとSSR
  • expressはAPI Aggregation

Nuxt採用してよかったこと

  • 既存システムの負債を簡単に吸収できた
  • 今後PWA対応簡単にできそう
  • コード規約が平和的に定まる

Nuxt採用してはまったこと

  • Nuxt内部のデバッグが大変
  • SPA + SSR + API Aggregationの構成が肥大化しそう

まとめ

  • Nuxt + Expressで簡単にSPA + SSR + API Aggregationを実現できた