がみぶろ

#がみぶろ

@jumpei_ikegami

メルペイ社で開催されたNuxtMeetup#2でNuxt.js入門してきた

こんにちは、しがないラジオのgamiです。

今日は、NuxtMeetup#2にブログ枠で参加してきたので、その模様をお伝えします！

当日は、主催の@kotamatsさんの挨拶で乾杯し、お酒を飲みながらLTを聞きました。

スポンサーLT Welcome to Nuxt Meetup @andoshin11

自己紹介

  • Andy(@andoshin11)
  • 3月からメルペイのフロントエンドエンジニア
  • Vue.jsがメイン
  • React NativeやRailsも

merpeyの紹介

  • 信用を創造してなめらかな社会を創る
  • 株式会社ソウゾウの次の子会社
  • 「人々の新しいお財布」を目指している
  • お金の入り口と出口をつくる
  • Nuxt.jsをmerpeyでも使っている

Nuxt+TypeScript事始め @sue__71

自己紹介

  • merpay webフロントエンドiOS
  • ソリューションチーム
    • 技術課題を解決するチーム

今日はなすこと

  • VueのTypeScriptの対応状況
  • Nuxt+TypeScriptの対応状況

TSの特徴

  • 静的型付け言語的にJavaScirptがかける
  • 後付けで型定義がかける

TSのメリット

Vueの状況

  • Vue: 2.5から改善
  • vue-template: 解析されない
  • Vuex: 型定義があるが、微妙
  • Nuxt: 型定義がない

IDE

Lint

  • eslint-plugin-vueを使いたい
  • typescript-eslint-parserで対応
  • いくつかのルールをOFFにする必要がある
    • no-unuesd-vars
    • no-undef

Vue Component

  • 2.5から対応
  • tsconfigでnoImplicitThisをtrueにする

Vue Stateless Component

  • templateのみのファイルを読み込むためのtweak

Vue-Plugin

  • Vueにインジェクトされるものの型を定義する
  • VueCompontentOptionsに提供されるメソッドの型を定義する

Vuex

  • 一番TapeSafeに書きたい
    • anyで定義されるものが多いので、満たせない

型定義の改善

  • TS2.1のMapped Typeを利用することで、Vuexの型定義の改善が可能

Actions

  • dispatchやcommitの定義もtypesafeにできる

TypeSafeではあるが...

  • 実装と一致しないInterfaceを定義する気持ち悪さ
  • namespacedではない場合、さらに型パラメーターを渡さなければならない

Nuxt+TS

  • Nuxtから提供されるコンテキストAPIについて型定義する必要 -nuxtServerInitなど

Pages

  • /pages配下のコンポーネントに対して与えられる拡張
  • 別で定義した方が良さそう

まとめ

  • VueプロジェクトでTS採用するなら、型定義を書く気持ちが必要
  • 完全にTypeSafeで書きたいなら、AngularやReactがいい
  • Nuxtみたいに、機能の多いAPIを覚えるのが大変
    • 定義があると、どこで何ができるかすぐわかる！
  • とりあえず、TypeScriptは正義！

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

speakerdeck.com

今日はなすこと

  • 技術選定の話

サイト

  • 地域のお店を紹介するサイトをリニューアルしたい
  • HTML4系だった...
  • 管理画面も必要
  • Bootstrap感漂うサイト

実際に必要なもの

リソース

  • 1人
  • JS書いたことない

ルール

  • できるだけコードを書かない
  • 無料枠で済ませる

最初の構成

  • Vue+Firebase+Algolia+Cloudinary+bulma

なぜVue.jsか？

  • 学習が容易である必要がある
  • Web知識が流用しやすい
  • モジュール性がある
  • JSでどうにかしているものを採用したくない

課題

  • src/component以下が混雑
  • Babelやwebpackが難しい

Nuxtメリット

  • 設定がいらない
  • ディレクトリ構成がいい感じ
  • router設定もいらない
  • PWAにするのに、公式module入れればいい

Nuxtデメリット

  • 学習コストは上がった
  • components以下が混雑している問題は、解決しなかった
  • generateのビルドが長い

ビルド長い問題

  • nuxt-generate-clusterを使うと軽減された
  • 10.58s -> 3.48s

情報更新時に再ビルドが必要問題

  • Netlifyの存在知らない
  • nuxt devの状態と本番を同じ状態にしたい

SSRの問題点

Hostingを探した

  • now.sh

zeit.co

  • Realtime Global Deployments
  • zeitという会社が作ってる
    • Next.jsを作ったところ
  • CLIだけでdeploy可能
  • Nuxt.jsでつくったものは、そのままnow.shにdeployできる！
  • staticに戻すときも、そのままある

now.shのデメリット

  • now.sh自体の更新が頻繁
  • firebase hostingより費用がかかる
  • now.sh以外で購入したドメインの設定がハマりポイントあり
  • Asia Regionがない

全体の反省点

  • 自分は楽だが、引き継ぎが大変
  • Firebase依存の結果node_modulesが増えた

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

自己紹介

  • 22才
  • 独身
  • 初心者
    • 3ヶ月前に初めてコードを触った
  • それまでは、屋上防水をしていた

仕事

  • 2週間、プロゲートで勉強
  • Nuxtを使って、メディアやLPの作成
  • 人材紹介マガジン
    • SCOUTER

テーマ

  • 初心者がどのようにメディアの作成を進めていったのか

step1 コンポーネント毎にプレビューを確認

  • デザインとにらめっこして、パーツに分ける
  • Componetsに各パーツ毎のVueファイルを作った
  • StoryBookで、Components一覧を確認

step2 一つのまとまりにするために

step3 共通部分はまとめましょう

  • 各ページで、共通部分がある
    • ヘッダー
    • フッター
    • コンテンツ

その他

  • Wordpressを使って記事を書いてるので、getしている

Nuxt.jsでサービス開発して困ったこと @takanorip

自己紹介

  • Takanori Oki
  • 株式会社スマートドライブ
  • フロントエンドエンジニア
    • Nuxt.js
    • React
    • Polymer
    • ウェブ制作
  • Polymer Japan翻訳チーム

SmartDrive Cars

  • Nuxt.jsで作っている
  • SSRはまだしてない

困ったこと

  • 結論: あんまり困らなかった
  • 公式ドキュメントとissueとPRを読めば、だいたい解決する
  • ドキュメント読む癖大事

nuxt-community便利！

  • 神

maxChunkSize

  • buildオプション
  • JSファイルの上限を設定
  • 設定した数値よりファイルサイズが小さい
  • 使うとなんかエラーになる

外部JS動作しない問題

  • window.onloadの時しかJSが走らない

IEでVuexが動かない

  • babel-polyfillを食わせると動く

ライブラリをNuxtに組み込みたい

  • lodashとかをimportするのめんどくさい
  • pluginでvueとNuxt.jsに組み込むと便利
  • 余力があればモジュールとして公開

ローディング最適化

  • APIへのアクセスはasyncDataやfetchの中で行う
  • vendorへの登録忘れない
    • pluginのキャッシュができる
  • pwa-moduleは入れといた方がいい
    • 神
    • SWがいい感じに動いてくれて、いい感じにキャッシュしてくれる
    • たまに、キャッシュが効きすぎて辛いことも

NUXTJS My Friend @Ryosuke_Suzuki

自己紹介

今日の話

  • Showcases
  • Nuxtで環境構築している話

KARTEインフォグラフィック

  • 3週間で開発
  • 開発2人、デザイナー1人

Hello! KARTE

  • static gen

なぜNUXTか？

  • static genできる
  • Webpack書かなくていい
  • SWまで生成してくれる
  • 神

つまづき

  • CSS Preprocessorのコンパイル時エラーが起きる
    • PostCSSの設定が怪しい
  • 数百枚の画像の読み込み辛い
    • CSS spriteで画像を圧縮
  • Cloudfrontへのアップロード
    • キャッシュのクリアをちゃんとやる必要
    • Invalidation周り

NUXTで環境構築

  • 世の中のグローバル企業は、どれもUniversal web applicationだ
  • せっかくならSSRしたい

なぜSSRか？

  • Better User Experience？
  • SEO？

SSR不要説

  • OGPしっかりしてれば、SSR不要
  • コンピュータリソース使う
  • 初期表示速いが、今のデバイスではそんなに問題じゃない
  • 環境構築面倒

なぜSSRか？(再)

  • グローバル水準
  • エンジニアの知的好奇心を満たす
  • どやりたい
  • 常に先端にいたい
  • 「SSRは必要か不要かではない。やるかやらないかだ」

構成

  • TS+Nuxt+Express
  • ProxyでSSRサーバとAPIサーバを分ける

Dir Structure

  • Monorepoっぽく分けた

なぜTSか？

  • JSの自由度を残しつつ、硬くかける
  • 中/大規模アプリケーション開発に向いている
  • VSCodeを使えば補完が強い
  • decoratorが強い

つまづき

  • d.tsしっかりかく
  • tsconfigが複数必要な場合、VSCodeがうまく読み取ってくれない
  • jest, vue-jest, ts-jestを入れるとjestでtest書ける

最後に

  • TSの環境構築はめんどくさい
  • Nuxtは公式docsを読めば詰まることは少ない

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

Nuxt

  • いいですよね
  • 話すまでもない

なので

  • Gatsbyの話をします
  • Qiitaでも、Nuxtより全然人気じゃない

staticgen.com

www.staticgen.com

  • Static Site Generators for JAMstack Sites
  • 静的に書き出した方が楽だよねー
  • ランキング上位は、JSがほとんど

ReactやVueの静的サイトジェネレーター

  • React
  • Vue
    • nuxt.js
    • vuepress

データソース

  • VuePress
    • config
      • .js -> $site
    • data
      • .md -> $page
  • Nuxt+Nuxtent
    • data
      • .md -> .json
      • webpackのassetとしてemit
  • Gatsyby
    • data
      • fileでもapiでもcmsでもいい！すごい！
    • source plugin
      • nodes
    • content server
      • GraphQL
    • templete
      • components

パフォーマンス

  • リンク先リソースの先読み
    • 画面に表示されている領域を先読みできる

すごいところ

  • データソースの一元化
  • GraphQLで統一化されたクエリ
  • 超速(ちょっぱや)にかける意気込み

Guess.js

  • マシンラーニングで先読みを予測
  • "Plese support Vue.js"というissueはある

未来へ

  • Nuxtももっと超速(ちょっぱや)になる！

誰だったのか？

soussune.com

いまからはじめるnuxt-edge @potato4d

speakerdeck.com

自己紹介

  • VueやったりNuxtやったり

nuxt-edgeとは？

  • Nuxt2 is coming! oh year!という記事で紹介
  • 要はNuxt v2のEarly Access edition

medium.com

機能

  • webpack@4になって高速化
  • Support ESModules with .mjs extension

破壊的変更

  • Remove isClient / isServer flag
    • use process.browser / process.server
  • options.devがoptions.isDev
  • vendorsが消えた
    • Nuxt側でやってくれるようになった

モジュール側の追従

  • axios
    • 5.2.0では、nuxt-edgeに移っている
  • pwa
    • Coming soon
  • Other modules
    • independence

移行のための5step

  • yarn remove nuxt @nuxt/axios
  • yarn add nuxt-edge @nuxtjs/axios
  • s/isClient/process.browser/g
  • s/isClient/process.server/g
  • yarn dev

Yarn

  • Nuxtは依存管理をYarnでやっている
  • Yarnを使った方がいい

まとめ

  • Nuxt2は5月リリース！
  • 本番ですでにnuxt-edgeで使っているけど、ちゃんと安定稼働している！

宣伝

  • Nuxt tech bookという技術書同人誌を出版しました！

まとめ

以上です！当日の様子は、Tweetが流れるまでは#nuxtmeetupから追えると思います！

twitter.com