Nuxt Composition API 使ってみた

1. Nuxt Composition API 使ってみた 2021年9月17日 v-okinawa 株式会社 M&Aクラウド 津崎 善昭
2. 自己紹介 津崎 善昭（つざき よしあき） Twitter: @820zacky 趣味：たまにキャンプ、たまに筋トレ（サボり中） 得意: 資格勉強 セキュリティスペシャリスト,ネットワークスペシャリスト,データベーススペシャリスト SIer -> Web制作会社 -> Webベンチャー フロントエンド入門中
6. ※ 北海道出身だけどいじめないでください
8. Composition API とは？ Vue.jsのコンポーネントをいい感じに書く手法 2020年9月にリリースされたVue 3にて導入された 標準の書き方はOptions APIという コンポーネントからロジックを分離し、再利用可能にする 大規模・複雑なコンポーネントを作る時に便利
9. Nuxt.jsでComposition APIを使う2つのやり方 @vue/composition-api と @nuxtjs/comopsition-api
10. ふたつのやり方と言ったな？ あれは嘘だ -> Nuxt3が10/12にリリースになりました https://nuxtjs.org/ja/v3/ もうどちらもいらない!
13. 最初から入ってる
14. @vue/composition-api 従来のやり方 Vueの純正composition-api M&Aクラウドが使っているのはこれ SSRとCSRで値をハイドレーションできない問題があり困った (https://speakerdeck.com/kubotak/nuxt-dot-jsdecompositionapiwoshi-u? slide=16) 弊社ではVuexストアを使って値を共有している
15. @nuxtjs/comopsition-api = Nuxt Composition API 新しいやり方 nuxt-communityが提供している Nuxt 3 のための実験的なもの Nuxt 3 ではメソッド名がかわるかもしれない Nuxt固有の機能を使える 弊社もこちらへの意向を検討中
16. Nuxt Composition API @vue/composition-apiの機能に加えてNuxt固有の機能を提供している useMeta : Metaタグの情報にアクセスするメソッド useAsync : NuxtのAsyncDataフックを使うメソッド useFetch : NuxtのFetchフックを使うメソッド など reqRef, reqSsrRef, ssrRefなど新しい概念も登場している （まだよくわかってないがSSRとCSRで値を共有する方法っぽい）
17. なぜComposition APIなのか
18. 処理をまとめられる
19. （無理矢理拡大した図） data()内にいろんな関心事の変数が定義されている
20. 関心事ごとに変数を用意できる
21. ロジックを抽出して再利用 ref, reactiveなどのリアクティブな値を作成するメソッドや、onMountedなどのコ ールバック登録するメソッドなど、細かく機能が分割されているため、共通化した いロジックや肥大化したロジックを別ファイルに移することができる。 Options APIではMixinというTrait的なやり方でしか分離できず、再利用性が悪かっ た
22. Nuxt Composition APIの開発環境を作る
23. Nuxtインストール yarn create nuxt-app sample-app 言語はTypeScriptを選択する Composition APIを導入する yarn add @nuxtjs/composition-api 今回は新しいやりかたである@nuxtjs/composition-apiを試してみる
24. nuxt.config.jsを編集する { buildModules: [ '@nuxt/typescript-build', + '@nuxtjs/composition-api/module' ] }
25. サーバーを起動する yarn dev localhost:3000でサイトが起動する
26. サンプルコード https://qiita.com/zackey2/items/8a2675c14d73e91267fe
27. まとめ Nuxt3 10/12リリース予定 Nuxt3 では最初から Composition APIが使えます！