NuxtMeetup#2に参加してきました!

開発Div. イベントレポート部の喜村です。

今回は、今アツいJSフレームワークのNuxt.jsに関するイベント、
NuxtMeetup#2に参加してきました!

nuxt-meetup.connpass.com

Why?

弊社も一部の人たちが以下のブログ記事のようにNuxtを推していて、 Productionにも導入しようとする動きもあります。

blog.keepdata.jp

Production導入にあたって、他社のProduction導入事例を聞いた上で検討したいと思い参加してきました!

今アツいフレームワークのイベントだけあって、100人の定員に対して150人以上も参加希望者がおり、会場にいても常に熱気が伝わってくるイベントでした。
LTの内容もProduction導入事例がほとんどで、先人の知見が得られたので大変よかったです。

というわけで、1つ1つのセッションの内容を軽くまとめつつ振り返ります。

Session

Nuxt + Typescriptの事始め

  • 弊社も「書くならTypeSafeな言語がいいよね派」が多数を占める会社
  • なので、Nuxt(Vue) + TypeScriptはProduction導入検討にあたり大変Hotなワード
  • Vue.js本体はサポート済・VuexはPR出ている・Nuxtは自作といった状況
  • 今現在だと、Production導入はTypeScriptのプロがいないと厳しそうな印象

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

  • 生まれてから一度もJS書いたことない人でも触れるフレームワークがNuxt
  • nuxt自体の学習コストより、JSエコシステム全般の学習コストが下がる方が大きい
  • zeid/now便利だけど本番運用に向いてない気がするが大丈夫?->大丈夫じゃなかった
  • nuxt buildが遅いのは共通問題、nuxt v2を待つかnuxt-generate-clusterを使おう

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

  • 3ヶ月前に初めてコードを見た人でもWebサイトを作れるフレームワークがNuxt
  • 社内にUIデザイナーがいる/いない関係なしにStoryBookはあると便利そう
    • 導入したい
  • 自社HPやLPをNuxtでstatic generateして作っているところを結構見るなという印象

Nuxt.jsで困ったこと

  • そんなにない
    • . 大体のことは Document / Issue / PullRequest 読めば解決する
  • plugin機能で、よく使うライブラリをcontextの中に入れられる
    • lodashとか入れておくと便利
  • pwa-moduleは神
    • 入れるだけでserviceworkerがいい感じに動いてキャッシュしてくれる
  • APIへのアクセスは、asyncDataやfetchでやろう

Nuxt.js MyFriend

  • Nuxtでstatic genしてインフォグラフィックを作った話
  • Why Nuxt
    • static genできる
    • webpack書く必要なし
    • 一瞬で開発環境が整う
    • pwa-moduleが神
  • Nuxxt + Typescriptは環境構築が大変
  • Nuxt + Typescript + Jestは参考文献がなく、試行錯誤が必要
    • jest, vue-jest, ts-jestを入れるとjestが使える

Static site generatorにおけるデータ調達の話

  • SSRの時代は終わった、これからはJAMstackという印象
  • JAMstackにするためのstatic site generator
    • React製のGatsbyがすごく使いやすい
      • データソースの一元化
      • 統一化されたクエリ
      • 超速に懸ける意気込み
  • 投機的先読みといえば、Guess.js
    • Vue.jsもサポート可能とEvan氏がissueに書いた

今から始める nuxt-edge

  • nuxt2がそろそろ出る(おそらく5月中)
  • いち早くnuxt 2を体感したい人は nuxt-edge が使える
  • nuxt-edgeを使いたい人は、axiosとpwa-moduleにさえ留意すれば簡単にできる

全体を通して

  • 想像してた以上にProduction運用が多かった印象を受けました
  • SSRしてる人が思ったより少なく、大体static generateな印象も受けました
  • 公式ドキュメントが親切で、学習コストが低いフレームワークと再認識しました
    • 未経験者が3ヶ月でサイトを作れてしまうのは本当にすごい
  • Nuxt + TypeScriptで幸せになっている人はいない少ない印象です
    • まだ時期尚早な気がします
  • これからも盛り上がっていくコミュニティだと思うので弊社も貢献したいですね

というわけで、NuxtMeetup#2の参加レポートでした。
次回開催も決まっていたので、Productionへ本格的に導入するためにも積極的に参加していきたいです!