Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Nuxt.js x Composition API x TypeScript

y-tsuzaki
September 05, 2021

Nuxt.js x Composition API x TypeScript

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

y-tsuzaki

September 05, 2021
Tweet

More Decks by y-tsuzaki

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

  3. プロダクト紹介

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. 各技術ざっくり紹介

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. なぜComposition APIなのか

    View full-size slide

  13. 処理をまとめられる

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. メリット、デメリット

    View full-size slide

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

    JSで開発したことがないのでわからないけど

    View full-size slide

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

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

    View full-size slide

  25. Nuxtインストール
    yarn create nuxt-app sample-app

    言語はTypeScriptを選択する
    Composition APIを導入する
    yarn add @nuxtjs/composition-api

    今回は新しいやりかたである@nuxtjs/composition-apiを試してみる

    View full-size slide

  26. nuxt.config.jsを編集する
    {

    buildModules: [

    '@nuxt/typescript-build',

    + '@nuxtjs/composition-api/module'

    ]

    }

    View full-size slide

  27. サーバーを起動する
    yarn dev

    localhost:3000でサイトが起動する

    View full-size slide

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

    View full-size slide

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

    View full-size slide