Slide 1

Slide 1 text

Nuxt.js x Composition API x TypeScript 2021年9月8日 Nuxt道場 弐面 株式会社 M&Aクラウド 津崎 善昭

Slide 2

Slide 2 text

自己紹介 津崎 善昭(つざき よしあき) Twitter: @820zacky 趣味:たまにキャンプ、たまに筋トレ(サボり中) 2019年にM&AクラウドにJoin 本日が人生初の20分登壇

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

プロダクト紹介

Slide 5

Slide 5 text

LaravelからNuxt.jsへ Laravel(PHP)製のアプリケーション 現在フロントエンドをNuxt.jsに移行中 バックエンドはLaravelでHTTP APIを提供 Composition API(@vue/composition-api)を利用 Typescriptで開発

Slide 6

Slide 6 text

Nuxt.js選定理由 ページ表示速度改善のためSSRしたい メンバがVue.jsに馴染みがあり導入しやすそう コンポーネントをデザイナーもコーディングできそう Vue.jsのコンポーネントはHTMLに似ている

Slide 7

Slide 7 text

話すこと Nuxt.js, Compsition API, TypeScript そもそもなんなのか なぜComposition APIなのか メリット、デメリット 開発環境を作る 話さないこと Webの基礎などあんまり細かいこと 他のフレームワークとの比較

Slide 8

Slide 8 text

各技術ざっくり紹介

Slide 9

Slide 9 text

Nuxt.jsとは Vue.jsのフレームワーク ルーティング, データ管理(ストア), メタタグ管理などWebフロントエンド開発に必要 な機能が組み込まれている サーバサイドレンダリング(ユニバーサルモード) 静的サイト生成(SSG)

Slide 10

Slide 10 text

サーバサイドレンダリング、ユニバーサルモードとは? サーバサイドレンダリングとは サーバ側でHTMLを生成するWebアプリケーションの方式 クライアントはHTMLを描画するだけなので高速 反対にブラウザでHTMLを生成するのがクライアントサイドレンダリング(通常の vue.jsやReact) = SPA (Single Page Application) ユニバーサルモードとは サーバサイドレンダリングをした上で、クライアント側で追加のレンダリングなど を行う方式 クライアントで追加のレンダリングを行うため、動的なサイトを作ることができる 高速でリッチなアプリケーションを実現する

Slide 11

Slide 11 text

Composition API Vue.jsのコンポーネントをいい感じに書く手法 2020年9月にリリースされたVue 3にて導入された 標準の書き方はOptions APIという コンポーネントからロジックを分離し、再利用可能にする 大規模・複雑なコンポーネントを作る時に便利

Slide 12

Slide 12 text

Typescript 型のあるJavascriptみたいな言語 TypeScriptからJavascirptに変換(トランスパイル)して使う 型の力でポカミスを防ぐことができる 一方で、強力な型の縛りに翻弄されることもある

Slide 13

Slide 13 text

なぜComposition APIなのか

Slide 14

Slide 14 text

処理をまとめられる

Slide 15

Slide 15 text

(無理矢理拡大した図) data()内にいろんな関心事の変数が定義されている

Slide 16

Slide 16 text

関心事ごとに変数を用意できる

Slide 17

Slide 17 text

ロジックを抽出して再利用 ref, reactiveなどのリアクティブな値を作成するメソッドや、onMountedなどのコ ールバック登録するメソッドなど、細かく機能が分割されているため、共通化した いロジックや肥大化したロジックを別ファイルに移することができる。 Options APIではMixinというTrait的なやり方でしか分離できず、再利用性が悪かっ た

Slide 18

Slide 18 text

Nuxt.jsでComposition APIを使う二つのやり方 @vue/composition-api と @nuxtjs/comopsition-api (2021年9月現在)

Slide 19

Slide 19 text

@vue/composition-api 従来のやり方 Vueの純正composition-api M&Aクラウドが使っているのはこれ SSRとCSRで値をハイドレーションできない問題があり困った (https://speakerdeck.com/kubotak/nuxt-dot-jsdecompositionapiwoshi-u? slide=16) 弊社ではVuexストアを使って値を共有している

Slide 20

Slide 20 text

@nuxtjs/comopsition-api = Nuxt Composition API 新しいやり方 nuxt-communityが提供している Nuxt 3 のための実験的なもの Nuxt 3 ではメソッド名がかわるかもしれない Nuxt固有の機能を使える 弊社もこちらへの意向を検討中

Slide 21

Slide 21 text

Nuxt Composition API @vue/composition-apiの機能に加えてNuxt固有の機能を提供している useMeta : Metaタグの情報にアクセスするメソッド useAsync : NuxtのAsyncDataフックを使うメソッド useFetch : NuxtのFetchフックを使うメソッド など reqRef, reqSsrRef, ssrRefなど新しい概念も登場している (まだよくわかってないがSSRとCSRで値を共有する方法っぽい)

Slide 22

Slide 22 text

メリット、デメリット

Slide 23

Slide 23 text

メリット Nuxtについて Webアプリケーション開発に必要なものが揃っている SSR、SSGできる Composition APIについて 関心事ごとに処理をまとめて書くことができる 大規模な開発にも耐えられる構成にできる TypeScriptについて 型によるポカミス防止 補間による開発スピード向上 ※ JSで開発したことがないのでわからないけど

Slide 24

Slide 24 text

デメリット フロントエンド初心者にとっては複雑 Nuxtのコードを書いてるのか、Composition APIを書いてるのか、TypeScriptを書 いてるのかよくわからない @vue/composition-api ではVuexを使わないとSSRとCSRで値を共有化(ハイドレー ション)できない Nuxt Comopsition APIのreqRef、ssrRefなどの新しい概念が難しい Nuxt.jsはコードが増えるとビルドが遅くなる(開発用ビルドで3分) hard-source-webpack-pluginで負荷軽減してもやっぱり遅い(1分程度) コンポーネントやCSSの更新はビルドが早い(10秒)

Slide 25

Slide 25 text

Nuxt Composition APIの開発環境を作る

Slide 26

Slide 26 text

Nuxtインストール yarn create nuxt-app sample-app 言語はTypeScriptを選択する Composition APIを導入する yarn add @nuxtjs/composition-api 今回は新しいやりかたである@nuxtjs/composition-apiを試してみる

Slide 27

Slide 27 text

nuxt.config.jsを編集する { buildModules: [ '@nuxt/typescript-build', + '@nuxtjs/composition-api/module' ] }

Slide 28

Slide 28 text

サーバーを起動する yarn dev localhost:3000でサイトが起動する

Slide 29

Slide 29 text

サンプルコード https://qiita.com/zackey2/items/8a2675c14d73e91267fe

Slide 30

Slide 30 text

まとめ Nuxt.js x Composition API x TypeScriptという構成について話した 複雑なアプリケーションを作る場合、Composition APIを導入するとよい 今からComposition APIを導入するならNuxt Composition API がよさそう TypeScriptもセットアップが簡単なので同時に採用してもよいかも