Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Nuxt.js x Composition API x TypeScript

y-tsuzaki
September 05, 2021

Nuxt.js x Composition API x TypeScript

2021年9月8日に行われるNuxt道場 弐面にて発表予定のスライドです。

y-tsuzaki

September 05, 2021
Tweet

More Decks by y-tsuzaki

Other Decks in Technology

Transcript

  1. 話すこと Nuxt.js, Compsition API, TypeScript そもそもなんなのか なぜComposition APIなのか メリット、デメリット 開発環境を作る

    話さないこと Webの基礎などあんまり細かいこと 他のフレームワークとの比較
  2. サーバサイドレンダリング、ユニバーサルモードとは? サーバサイドレンダリングとは サーバ側でHTMLを生成するWebアプリケーションの方式 クライアントはHTMLを描画するだけなので高速 反対にブラウザでHTMLを生成するのがクライアントサイドレンダリング(通常の vue.jsやReact) = SPA (Single Page

    Application) ユニバーサルモードとは サーバサイドレンダリングをした上で、クライアント側で追加のレンダリングなど を行う方式 クライアントで追加のレンダリングを行うため、動的なサイトを作ることができる 高速でリッチなアプリケーションを実現する
  3. @nuxtjs/comopsition-api = Nuxt Composition API 新しいやり方 nuxt-communityが提供している Nuxt 3 のための実験的なもの

    Nuxt 3 ではメソッド名がかわるかもしれない Nuxt固有の機能を使える 弊社もこちらへの意向を検討中
  4. Nuxt Composition API @vue/composition-apiの機能に加えてNuxt固有の機能を提供している useMeta : Metaタグの情報にアクセスするメソッド useAsync : NuxtのAsyncDataフックを使うメソッド

    useFetch : NuxtのFetchフックを使うメソッド など reqRef, reqSsrRef, ssrRefなど新しい概念も登場している (まだよくわかってないがSSRとCSRで値を共有する方法っぽい)
  5. デメリット フロントエンド初心者にとっては複雑 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秒)
  6. Nuxtインストール yarn create nuxt-app sample-app 言語はTypeScriptを選択する Composition APIを導入する yarn add

    @nuxtjs/composition-api 今回は新しいやりかたである@nuxtjs/composition-apiを試してみる
  7. まとめ Nuxt.js x Composition API x TypeScriptという構成について話した 複雑なアプリケーションを作る場合、Composition APIを導入するとよい 今からComposition

    APIを導入するならNuxt Composition API がよさそう TypeScriptもセットアップが簡単なので同時に採用してもよいかも