Tweet
Tweet

Slide 1

Slide 1 text

Nuxt Composition API 使ってみた 2021年9月17日 v-okinawa 株式会社 M&Aクラウド 津崎 善昭

Slide 2

Slide 2 text

自己紹介 津崎 善昭（つざき よしあき） Twitter: @820zacky 趣味：たまにキャンプ、たまに筋トレ（サボり中） 得意: 資格勉強 セキュリティスペシャリスト,ネットワークスペシャリスト,データベーススペシャリスト SIer -> Web制作会社 -> Webベンチャー フロントエンド入門中

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

※ 北海道出身だけどいじめないでください

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Nuxt.jsでComposition APIを使う2つのやり方 @vue/composition-api と @nuxtjs/comopsition-api

Slide 10

Slide 10 text

ふたつのやり方と言ったな？ あれは嘘だ -> Nuxt3が10/12にリリースになりました https://nuxtjs.org/ja/v3/ もうどちらもいらない!

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

最初から入ってる

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

なぜComposition APIなのか

Slide 18

Slide 18 text

処理をまとめられる

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Nuxt Composition APIの開発環境を作る

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

まとめ Nuxt3 10/12リリース予定 Nuxt3 では最初から Composition APIが使えます！