NuxtMeetup#2 参加レポート＆感想 #nuxtmeetup

2018年5月16日 23:19

Nuxt Meetup#2 ブログ枠ギリギリ参加のものです。というわけで参加レポ＆感想などをば。

自己紹介ですが株式会社GEEKってところでマークアップとフロントエンドやってますyamanokuと申します。社内メインはReact.jsですが個人的にはVue.js推しです。

Nuxtに関しては自サイトのリニューアルとかPWAアプリとかで使わせてもらってます。あと去年のVue.js アドベントカレンダーにNuxt感想記事とかも載せてます。

前回第１回は株式会社SCOUTERにて開催され、そこまで規模は大きくはなかったのですが、２回目となる今回はメルペイ社協力の下、100人を超える参加者がくるというNuxt.jsへの興味の高さが伺える人数でした（途中申し込み人数追加も何回かあった模様）。

・sue71 「Nuxt＋TypeScript事始め」
・corosuke_k「Web初心者がNuxtでサイトを一つ作るまでの技術選定」
・hirokinishizawa「初の勉強会にて初LTをする初心者エンジニアのお話」
・takanorip「Nuxt.jsでサービス開発して困ったこと」
・Ryosuke_Suzuki「Nuxtjs my friend」
・Masaya Kazama 「Static site generatorにおけるデータ調達の話」
・HANATANI Takuma「今から始めるnuxt-edge」

sue71「Nuxt＋TypeScript事始め」

今現在、TypeScriptを知らない開発系エンジニアも居ないんじゃないかというくらいには名が知れ渡っている印象があります。そんな静的型付言語をVue.js、Nuxtに導入してみたらどうなったかというMerpayの中の人sue71さんによる発表。

皆さんもご存知の通り、Vue.jsはv2.5よりTypeScriptの恩恵が受けられるようになったのですが、全体を通してみると定義など面でまだまだ気苦労が耐えなさそうな感じです。

sue71さんや他の方もおっしゃられてるのですが、完璧な型定義をするならReact、Angularをやる方が精神的安全性の面でも良いというのは納得感はあります。もしそれでもやるなら（現状は）徹底的にTypeScriptと付き合っていくやる気が必要そうです。

関連リンク
・Vetur - Visual Studio Marketplace
・typescript-eslint-parser
・Mapped types - Advanced Types・TypeScript
・feat: improve helper types for more type safety #1121
・API: The Context - Vue.js
・2017年度の Vue + TypeScript
・Vue.jsをTypeScriptで書ける環境を作る

corosuke_k 「Web初心者がNuxtでサイトを一つ作るまでの技術選定」

もしくは、Web（に関しては）初心者の方がNuxtをつかってサイトを作るまでの技術選定、のcorosukeさんの発表。発表聞いてて声かわいいなと思いました。

JSはまったく触ったことのない人が選定をする上で要望が適えられそうで、且つナウいものを使うという点で今回Nuxtが良かったとのことでした（ほかサーバーサイド側の方もfirebaseほかナウくて良さそうなのものを選定されてます）。

最終的な選定技術
・now.sh（ホスティング）
・Firebase Realtime Database - Google（DB）
・Algolia | The Most Reliable Platform for Building Search（検索）
・Cloudinary（投稿画像処理）
・Firebase Authentication - Google（認証）
・Bluma（CSSフレームワーク）
・Nuxt

now.shについては名前は聞いていながらもまだ試してはいなかったので雑感みたいなのが知れてよかったと思います（とはいえまだ本番実践までしている知見は少なそう）。公式がカスタムドメイン発行してくれるのは先週知りました。

あとビルド時間を解消するためには「nuxt-generate-cluster」導入するとよい、というのは知れて良かったです。

 "scripts": {
   "generate": "nuxt-generate -w 4"
 }

hirokinishizawa「初の勉強会にて初LTをする初心者エンジニアのお話」

webの仕事以前は屋上防水の仕事をされていたhirokinishizawaさんによる初心者エンジニアがNuxtつかってみた発表。

今やガチの初心者がjQueryからさわり始める時代は終わった…といわんばかりのいきなりのNuxt実践投入とのことでおじさんは大変たまげてます。SCOUTER社としてはVue.js、Nuxtメインとのことだとは思いますがスタートがNuxtとは恵まれた時代になったんだなぁ…と感じました。

基本的なコンポーネントとしての独立、レイアウト上での共通化、更にはStorybookを活用するなど初歩的な部分が3ヶ月でしっかり叩き込まれてる様子でした。

今回の件をベースに次代のWeb業界を築いていく若人エンジニアをNuxtと一緒に応援していきたい限りです。

ここからは個人的な感想になるんですが、これまでWebに触ってこない３ヶ月の初心者がLTをするという場を設定するのは本人の経験値としてアリだとは思ったのですが、それを大衆が普通に聞きうるレベルまでにSCOUTER側が練習をさせるなり監督なりはしてこなかったのかというのが非常に気になりました。無茶振りはともかく、そのまま投げっぱなしにしたのかなと感じられて自分個人ではあまり印象はよくなかったです。Nuxtがどうとか初心者がどうとか抜きで。以上。

takanorip「Nuxt.jsをやって困ったこと」

roppongi.js#2 にてウェブフォントに関する発表をされていたtakanorip（たかのりぴー）さんのNuxt困った話…だったのですが「特に困ったことはない」とのことでした。まさかのタイトル思わせぶり詐欺。

でも実際蓋を開けてみると公式ドキュメント探ったりIssueやプルリクしっかり読んでおけば、現状考えられうる問題点はしっかり潰せるとのことです。他の登壇者の方もおっしゃられてましたが「まずは公式のドキュメント読め！」は今後のNuxt開発において心の中に止めておきたいです。（あとは有志同士での質問しあいとか）

nuxt-communityのモジュール充実さがすごいというのとコミュニティ内ですぐシェアーできる良さがあったり、更に以下についても話してくださいました。pwa-moduleはほんとに素晴らしいです。

・チャンクサイズが大きくなったらmaxChunkSizeにて制限
・Vuex StoreのIE対策にbabel-polyfil入れておく
・API通信はasyncDataやfetchでやる
・vendorへの登録
・pwa-moduleはとにかく神なので入れとくと良い（キャッシュ強めだが）

ちなみにtakanoripさんはお仕事にてNuxtを使用したサイト構築をやられていたようです。

Ryosuke_Suzuki 「NUXTJS My Friend」

株式会社プレイドインターンのRyosuke_Suzukiさんによる発表。KARTEのインフォグラフィックページみた時はかなり良くできててNuxtかぁこれと思ったのですがまさかその制作関係者が来るとは…。（製作期間３週間らしい）

Nuxtを導入した経緯として、「Static gen」ができる・webpackを１から書かなくていい・ServiceWorkerを生成してくれる、というのが大きく導入に至ったようです。わかる。

そしてSSRについて。色々と言われてる(*1)けど、そんなことはともかくSSRやろうぜ！というSSR＝男のロマンのような気概を感じました。Netﬂix, Twitter, Youtube, Facebook, Medium, Dev.toなどは Universal Web Applicationなのでここに並びたい、そのためにもSSRだろうと（あとドヤりたいとか）。

*1 ... SSR不要関連リンク
・サーバーサイドレンダリング不要論
・やっぱりサーバーサイドレンダリングなんかしなくていいやという気持ち
・いわゆる SPA + サーバーサイドレンダリングがダルい

Next.jsのpwaとかでもそうなんですが、SSRをやる準備を色々すっ飛ばしてすぐに作れるという利点においてはやはりNuxtすごいなと言わざるを得ないです。所作を学ぶ上で細かく分解してwebpack周りを考える必要はあるかもですが、まずSSRを体験としてでもやれる！かどうかというのはデカイです。

あとJestのテスト周りにも触れていたのですがもうちょい掘り下げてほしかったかもです。

Masaya Kazama「Static site generatorにおけるデータ調達の話」

soussuneポッドキャストパーソナリティのMasaya KazamaさんによるNuxtMeetupなのにまさかのGatsbyトーク（全体を通せばSite Gemの話なのでたぶんセーフ）。

Nuxtには皆さんご存知のgenerateという静的出力をやってくれる素晴らしいコマンドが搭載されているのですが、実は世の中見回してみるとJS製の静的出力プロダクトは割とあります。そんな中でGatsbyが「データ調達」の点において優れている！との報告でした。

最近リリースされたマークダウンデータをパースしてStatic site gemしてくれるVuePressや、やや影に隠れてしまった感のあるNuxtentも新規性・Vue.js製で見ると使ってみる価値はあるのですが、Gatsbyは色んなデータ形式（ファイル・API・CMS）を補完してくれてるのがすごいとのことです（あとGraphQLが使えるのも個人的にはデカイと思います）。

あとI/O2018で紹介されていたGuess.js（アナリティクスからユーザ行動判定してページ読み込みprefetchするライブラリ）がやばいみたいな話もあり、Evans氏もVue.jsのサポートIssueでコメントしており期待されているようです（vue-router上に載せる感じ？）。

関連リンク
・StaticGen | Top Open Source Static Site Generators
・JAMstack | JavaScript, APIs, and Markup

ちなみにsoussuneポッドキャストサイトはNuxt製とのこと。

HANATANI Takuma「今から始めるnuxt-edge」

「Nuxtといったらこの人」というのが浮かぶくらいにはNuxt宣教師の印象が強いpotato4dさん。技術書展にてNuxt本買わせていただきました。

Nuxt2.0はいつ出るんじゃい！みたいな話は、どうやら今月中に出すよとの噂が立ってるのですが、そんなの待ってるよりも早く次のNuxt触りたい…という方へのnuxt-edgeのススメ。

nuxt-edge（Nuxt@2）の恩恵としてはクライアントビルド速度があがっていることや、webpack 4へのアップデート、ESModulesのサポートなどがあります。一応破壊的変更箇所もあるのですが、メリットが大きいので是非アプデして体感してほしいとのこと。

potato4dさんの方で今回切り替えのデモも行ってくれて、 isServer / isClientを process.browser / process.server の変更とaxiosの最新Stableの入れ替えに注意ですが、そこを含めても切り替えは簡単そうな感じでした。
ただ、pwa moduleはまだNuxt@2に対応していないそうです。

potato4dさんの方で関わっているサービスのサイトもすでにnuxt-edgeに対応済みとのことです（下記関連リンク参考）。

関連リンク
・🚀 Nuxt 2 is coming! Oh yeah!
・【実録】Nuxt.jsの既存プロジェクトを一足早くNuxt v2( nuxt-edge )へとアップグレードする方法
・SeQueue | フリーランスのための請求書管理クラウド
・Push7 | Webサイト運営者のための、Webプッシュ通知サービス
・SARDINE | 紹介料を１００%受け取れる業務支援クラウドサービス
・https://github.com/magitek-telescope/nuxt-meetup-2

総評

Nuxt1.0が正式リリースされてしばらく経ちますが、そこに至るまでで自分が体感したこととしては「便利だが本番で活かすにはまだ力不足かもしれない」ということでした。

しかしながら、今回のLT発表で改めて認識できたこともさることながら、各種モジュールの派生、公式の手厚いアップデート・サポート対応（静的型付け関連はまだですが）、そして実践投入している企業があちらこちらで出来ているというのを見る以上、もはや力不足・使えないと思ってるのは非常にもったいない気がしてきます（もちろん適したフレームワークがあるならそれを使うべきですが）。

今回初学者でもやってみたという内容もあり、そういう方たちにも安心して進められるフレームワーク（あと日本語サポートが豊富）もなかなか無いと思います。初心者も上級者もどんどん皆で盛り上げていきたいものに感じました。

あとあんまり関係ないんですが、Next.jsの方もそろそろrouter実装がされそう（v6.0あたりで？）とのことなんですが、NuxtはNuxtでVue.jsと共に己が道を進んでいってる感じもあるのでそこはあまり気にしなくて良さそうです。

こちらからは以上です。次回開催は以下よりどうぞ。

この記事が気に入ったらサポートをしてみませんか？