Nuxt Composition API 使ってみた

Transcript

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

   View Slide

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

   View Slide

3. View Slide

4. View Slide

5. View Slide

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

   View Slide

7. View Slide

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

   View Slide

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

   View Slide

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

    View Slide

11. View Slide

12. View Slide

13. 最初から入ってる
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

17. なぜComposition APIなのか
    

    View Slide

18. 処理をまとめられる
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

22. Nuxt Composition APIの開発環境を作る
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide