2021年9月8日に行われるNuxt道場 弐面にて発表予定のスライドです。
Nuxt.js x Composition API x TypeScript2021年9月8日 Nuxt道場 弐面株式会社 M&Aクラウド 津崎 善昭
View Slide
自己紹介津崎 善昭(つざき よしあき)Twitter: @820zacky趣味:たまにキャンプ、たまに筋トレ(サボり中)2019年にM&AクラウドにJoin本日が人生初の20分登壇
プロダクト紹介
LaravelからNuxt.jsへLaravel(PHP)製のアプリケーション現在フロントエンドをNuxt.jsに移行中バックエンドはLaravelでHTTP APIを提供Composition API(@vue/composition-api)を利用Typescriptで開発
Nuxt.js選定理由ページ表示速度改善のためSSRしたいメンバがVue.jsに馴染みがあり導入しやすそうコンポーネントをデザイナーもコーディングできそうVue.jsのコンポーネントはHTMLに似ている
話すことNuxt.js, Compsition API, TypeScript そもそもなんなのかなぜComposition APIなのかメリット、デメリット開発環境を作る話さないことWebの基礎などあんまり細かいこと他のフレームワークとの比較
各技術ざっくり紹介
Nuxt.jsとはVue.jsのフレームワークルーティング, データ管理(ストア), メタタグ管理などWebフロントエンド開発に必要な機能が組み込まれているサーバサイドレンダリング(ユニバーサルモード)静的サイト生成(SSG)
サーバサイドレンダリング、ユニバーサルモードとは?サーバサイドレンダリングとはサーバ側でHTMLを生成するWebアプリケーションの方式クライアントはHTMLを描画するだけなので高速反対にブラウザでHTMLを生成するのがクライアントサイドレンダリング(通常のvue.jsやReact)= SPA (Single Page Application)ユニバーサルモードとはサーバサイドレンダリングをした上で、クライアント側で追加のレンダリングなどを行う方式クライアントで追加のレンダリングを行うため、動的なサイトを作ることができる高速でリッチなアプリケーションを実現する
Composition APIVue.jsのコンポーネントをいい感じに書く手法2020年9月にリリースされたVue 3にて導入された標準の書き方はOptions APIというコンポーネントからロジックを分離し、再利用可能にする大規模・複雑なコンポーネントを作る時に便利
Typescript型のあるJavascriptみたいな言語TypeScriptからJavascirptに変換(トランスパイル)して使う型の力でポカミスを防ぐことができる一方で、強力な型の縛りに翻弄されることもある
なぜComposition APIなのか
処理をまとめられる
(無理矢理拡大した図)data()内にいろんな関心事の変数が定義されている
関心事ごとに変数を用意できる
ロジックを抽出して再利用ref, reactiveなどのリアクティブな値を作成するメソッドや、onMountedなどのコールバック登録するメソッドなど、細かく機能が分割されているため、共通化したいロジックや肥大化したロジックを別ファイルに移することができる。Options APIではMixinというTrait的なやり方でしか分離できず、再利用性が悪かった
Nuxt.jsでComposition APIを使う二つのやり方@vue/composition-apiと @nuxtjs/comopsition-api(2021年9月現在)
@vue/composition-api従来のやり方Vueの純正composition-apiM&Aクラウドが使っているのはこれSSRとCSRで値をハイドレーションできない問題があり困った(https://speakerdeck.com/kubotak/nuxt-dot-jsdecompositionapiwoshi-u?slide=16)弊社ではVuexストアを使って値を共有している
@nuxtjs/comopsition-api= Nuxt Composition API新しいやり方nuxt-communityが提供しているNuxt 3 のための実験的なものNuxt 3 ではメソッド名がかわるかもしれないNuxt固有の機能を使える弊社もこちらへの意向を検討中
Nuxt Composition API@vue/composition-apiの機能に加えてNuxt固有の機能を提供しているuseMeta : Metaタグの情報にアクセスするメソッドuseAsync : NuxtのAsyncDataフックを使うメソッドuseFetch : NuxtのFetchフックを使うメソッドなどreqRef, reqSsrRef, ssrRefなど新しい概念も登場している(まだよくわかってないがSSRとCSRで値を共有する方法っぽい)
メリット、デメリット
メリットNuxtについてWebアプリケーション開発に必要なものが揃っているSSR、SSGできるComposition APIについて関心事ごとに処理をまとめて書くことができる大規模な開発にも耐えられる構成にできるTypeScriptについて型によるポカミス防止補間による開発スピード向上※JSで開発したことがないのでわからないけど
デメリットフロントエンド初心者にとっては複雑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秒)
Nuxt Composition APIの開発環境を作る
Nuxtインストールyarn create nuxt-app sample-app言語はTypeScriptを選択するComposition APIを導入するyarn add @nuxtjs/composition-api今回は新しいやりかたである@nuxtjs/composition-apiを試してみる
nuxt.config.jsを編集する{buildModules: ['@nuxt/typescript-build',+ '@nuxtjs/composition-api/module']}
サーバーを起動するyarn devlocalhost:3000でサイトが起動する
サンプルコードhttps://qiita.com/zackey2/items/8a2675c14d73e91267fe
まとめNuxt.js x Composition API x TypeScriptという構成について話した複雑なアプリケーションを作る場合、Composition APIを導入するとよい今からComposition APIを導入するならNuxt Composition API がよさそうTypeScriptもセットアップが簡単なので同時に採用してもよいかも