Nuxt.js x Composition API x TypeScript

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

Transcript

1. Nuxt.js x Composition API x TypeScript
   2021年9月8日 Nuxt道場 弐面
   株式会社 M&Aクラウド 津崎 善昭
   

   View Slide

2. 自己紹介
   津崎 善昭（つざき よしあき）
   Twitter: @820zacky
   趣味：たまにキャンプ、たまに筋トレ（サボり中）
   2019年にM&AクラウドにJoin
   本日が人生初の20分登壇
   

   View Slide

3. View Slide

4. プロダクト紹介
   

   View Slide

5. LaravelからNuxt.jsへ
   Laravel(PHP)製のアプリケーション
   現在フロントエンドをNuxt.jsに移行中
   バックエンドはLaravelでHTTP APIを提供
   Composition API(@vue/composition-api)を利用
   Typescriptで開発
   

   View Slide

6. Nuxt.js選定理由
   ページ表示速度改善のためSSRしたい
   メンバがVue.jsに馴染みがあり導入しやすそう
   コンポーネントをデザイナーもコーディングできそう
   Vue.jsのコンポーネントはHTMLに似ている
   

   View Slide

7. 話すこと
   Nuxt.js, Compsition API, TypeScript そもそもなんなのか
   なぜComposition APIなのか
   メリット、デメリット
   開発環境を作る
   話さないこと
   Webの基礎などあんまり細かいこと
   他のフレームワークとの比較
   

   View Slide

8. 各技術ざっくり紹介
   

   View Slide

9. Nuxt.jsとは
   Vue.jsのフレームワーク
   ルーティング, データ管理（ストア）, メタタグ管理などWebフロントエンド開発に必要
   な機能が組み込まれている
   サーバサイドレンダリング(ユニバーサルモード)
   静的サイト生成（SSG）
   

   View Slide

10. サーバサイドレンダリング、ユニバーサルモードとは？
    サーバサイドレンダリングとは
    サーバ側でHTMLを生成するWebアプリケーションの方式
    クライアントはHTMLを描画するだけなので高速
    反対にブラウザでHTMLを生成するのがクライアントサイドレンダリング（通常の
    vue.jsやReact)
    = SPA (Single Page Application)
    ユニバーサルモードとは
    サーバサイドレンダリングをした上で、クライアント側で追加のレンダリングなど
    を行う方式
    クライアントで追加のレンダリングを行うため、動的なサイトを作ることができる
    高速でリッチなアプリケーションを実現する
    

    View Slide

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

    View Slide

12. Typescript
    型のあるJavascriptみたいな言語
    TypeScriptからJavascirptに変換（トランスパイル）して使う
    型の力でポカミスを防ぐことができる
    一方で、強力な型の縛りに翻弄されることもある
    

    View Slide

13. なぜComposition APIなのか
    

    View Slide

14. 処理をまとめられる
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

18. Nuxt.jsでComposition APIを使う二つのやり方
    @vue/composition-api
    と @nuxtjs/comopsition-api
    (2021年9月現在)
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

22. メリット、デメリット
    

    View Slide

23. メリット
    Nuxtについて
    Webアプリケーション開発に必要なものが揃っている
    SSR、SSGできる
    Composition APIについて
    関心事ごとに処理をまとめて書くことができる
    大規模な開発にも耐えられる構成にできる
    TypeScriptについて
    型によるポカミス防止
    補間による開発スピード向上
    ※
    JSで開発したことがないのでわからないけど
    

    View Slide

24. デメリット
    フロントエンド初心者にとっては複雑
    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秒）
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

30. まとめ
    Nuxt.js x Composition API x TypeScriptという構成について話した
    複雑なアプリケーションを作る場合、Composition APIを導入するとよい
    今からComposition APIを導入するならNuxt Composition API がよさそう
    TypeScriptもセットアップが簡単なので同時に採用してもよいかも
    

    View Slide