5月7日（火） に Nagatacho GRiD ATTiC で開催された NuxtMeetUp#8 に行ってきました。

NuxtMeetUp には、#2,4,5の会に参加してきました。 Nuxt.js も v2.6 にもなり、TypeScript 対応など様々な機能が追加されて便利になってきていますね。

それでは、NuxtMeetUp#8 に参加した際にとっていたメモをまとめます。 詳しく見たい方はそれぞれの登壇者のスライドをご覧ください（リンクを載せています）

スポンサーLT：スタートアップがNuxtを採用するメリット

登壇者：@daijiro_ma さん （株式会社テックピット 創業者）

• スタートアップにおいて重要なのは「仮設検証を回すスピード」

• エンジニアがすでに習得している技術、学習コストが低い技術が良い

• また、人の流動性が高い（業務委託、フリーランス、インターン...）ため、Nuxt.js で謳われている「設定より規約」が有効に働く

• さらに、Nuxt.js を使用することにより、Vue.js 周りの煩雑な設定から開放される

Next vs Nuxt ~TypeScript + Serverless SSR + PWA~

登壇者：@ringoh72 さん

Nuxt.js (Vue.js) より Next.js (React) が好きな方 職場では Nuxt.js がデファクトだったが Next.js を使いたかったので、TypeScript,、Cloud Functions for Firebase、PWA それぞれの機能、使いやすさの比較をした。

結果は… Nuxt.js の勝ちでした！

TypeScript

Nuxt.js

TypeScript サポート - Nuxt.js Nuxt プロジェクトを作成して@nuxt/typescript をインストールし、設定周りを変更する

yarn create nuxt-app PROJECT_NAME yarn add -D @nuxt/typescript

Next.js

Next プロジェクトを作成するだけ！（TypeScriptのボイラープレートを使う）

yarn create next-app --example with-firebase-hosting-and-typescript PROJECT_NAME

引き分け！

SSR on Cloud Functions for Firebase

Nuxt.js

• nuxt/core の import ができない

  • 型定義ないので require を使わざるを得ない

Next.js

• Serverless 向けの Export ができるように

Next.jsの勝ち！

PWA （Progressive Web Apps）

以下の要素が必要

• Webアプリマニフェスト

• ServiceWorker

Nuxt.js

• create-nuxt-appのオプションで一発

Next.js

• next-manifestとnext-offlineを使用

• next-manifestが必ず/staticにmanifestを作るので、パッチ当てないとダメ

Next.jsの勝ち！

以上の比較検討をして、Nuxt.js の使用を継続することにしたそうです。

GatewayパターンとScheme駆動開発

登壇者：@andoshin11 さん

バックエンドのデータをそのままクライアントで使うのが辛い → Translatorを作ろう

挟むのはどこでもいい

• BFF

• API ClientのMiddleware

• Client Side Gateway

Universal Schema（Swagger）を使用する → Swaggerのyamlから型定義を自動生成するライブラリを作った APIの仕様を変えたときに、自動で型定義等を更新することができ、フロント側でもリアルタイムに型定義が更新されるのでメンテしやすい

axios-moduleをやめてaxiosを使う

登壇者：@nakajmg さん

何故やめたか

• 同じエンドポイントに対するリクエストが散らばっている

• テンプレートリテラルを展開してアクセス

このままだと

• 雑にかけすぎる

• 可読性低下

• リファクタリングしんどい

axios を wrap したリクエストモジュールを作成

• axios やめるときも楽

• エディタの解析が効く

axios に限らず、外部ライブラリは wrap したモジュールを作成しよう

新しく参画したプロジェクトでNuxtに置き換えようとして・・・

登壇者：@yohei_fujii1127 さん

現状は以下の通り

• もともとのディレクトリがめちゃくちゃ

• 依存パッケージが多い

• 画像参照が相対パス

• 書き方に一貫性がない

• CSSがグローバルすぎる

  • Vue使ってるのにScopedしてなかったり

半年後にこれらの進捗を報告するそうなので、楽しみに待っていたいと思います

Nuxt/Vueのベストプラクティスを求めて ～みんなどうしてる？～

登壇者：@techlessninja さん

レガシーな技術だと、採用で優秀な人が来ない。

みなさんは Pages で Actions と Mutations どっちも使っていますか？ Pages が非同期か同期かを知る必要がないからすべて Actions のみを使用している

custom elements + sass mixin + rscss 使ってる

Frontでもテストかくべきでね？

登壇者：＠masaakikunsan さん

• フロントに求められることが増えている

• jsの複雑化

• きれいなコードを書くために

• 自分を守るために

とりあえず Unit Test は Jest いれとけ E2E Test は Puppeteer, TestCafe

いきなり全部書くのは大変なので、重要なところからテストをちょっとずつ書いていきましょう

まとめ

NuxtMeetUp はこれからも参加するつもりなので、Nuxt.js のプロダクトを作っていきたい

登壇する気も少し持ちつつ頑張ろう