Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Nuxt.jsでCompositionAPIを使う
kubotak
February 25, 2020
Programming
1
740
Nuxt.jsでCompositionAPIを使う
Roppongi.vue#5 LT
kubotak
February 25, 2020
Tweet
Share
More Decks by kubotak
See All by kubotak
Felteで作る簡単フォームバリデーション
kubotak
1
130
SvelteKitを本番投入してみて
kubotak
0
490
PlaywrightによるSvelteコンポーネントテスト
kubotak
0
1k
AWS CDKでまるっと インフラ環境をIaCしたぞ!
kubotak
0
74
FeatureToggle戦略と運用方法
kubotak
3
780
SvelteKitでストアのハイドレーションを考えてみた
kubotak
2
98
PHPコードを消すライブラリを作った
kubotak
0
1.1k
なぜLaravel9はLTSではないのか
kubotak
0
930
Nuxt v2からv3へのマイグレーション
kubotak
0
520
Other Decks in Programming
See All in Programming
PHPDocにおける配列の型定義を少し知る
shimabox
1
110
Kyvernoを利用したKubernetesのポリシー制御
kisokazu
0
170
TypeScript 4.9のas const satisfiesが便利
tonkotsuboy_com
8
2.2k
Workshop on Jetpack compose
aldefy
0
140
OSSから学んだPR Descriptionの書き方
fugakkbn
4
120
【DevFest & ADS JP 22】チームで導入する
[email protected]
おいしい健康
kako351
0
210
様々なWebアプリをAzureにデプロイする
tomokusaba
0
110
あなたと 「|」 したい・・・
track3jyo
PRO
2
1k
(新米)エンジニアリングマネージャーのしごと #RSGT2023
murabayashi
9
5.3k
Gradle build: The time is now
nonews
0
110
Jetpack Compose 完全に理解した
mkeeda
1
420
TokyoR#103_DataProcessing
kilometer
0
350
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
643
54k
Thoughts on Productivity
jonyablonski
49
2.7k
Statistics for Hackers
jakevdp
784
210k
The Illustrated Children's Guide to Kubernetes
chrisshort
22
42k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
Product Roadmaps are Hard
iamctodd
38
7.7k
Gamification - CAS2011
davidbonilla
75
4.1k
Why You Should Never Use an ORM
jnunemaker
PRO
49
7.9k
StorybookのUI Testing Handbookを読んだ
zakiyama
8
3.2k
Into the Great Unknown - MozCon
thekraken
2
270
Building Your Own Lightsaber
phodgson
96
4.9k
YesSQL, Process and Tooling at Scale
rocio
159
12k
Transcript
Copyright © M&A Cloud All rights reserved. Roppongi.vue #5 @KenjiroKubota
Nuxt.jsでCompositionAPIを使う 1
Copyright © M&A Cloud All rights reserved. Profile 2 久保田
賢二朗 kubotak-is kubotak_public kenjiro.kubota 株式会社M&Aクラウド所属 PHP JavaScript Go Scala
Copyright © M&A Cloud All rights reserved. 3 PR
Copyright © M&A Cloud All rights reserved. 前置き 4 LaravelからNuxt.jsへ
Laravel(PHP)で作られたサイトをNuxt.jsに移行 LaravelでHTTP APIを作成し、Nuxt.jsでフロントエンドを作る ❏ フロントエンドはVue.jsを使っていたので学習コストが低いだろうと Nuxt.jsを選定 ❏ 型安全の恩恵を受けるためにTypescriptで開発 ❏ Vue.js version3で導入が決まっているCompositionAPIを利用
Copyright © M&A Cloud All rights reserved. 前置き 5 Composition
APIについては詳しく話さない もうみんな耳にタコができるくらい聞いていると思うのでCompositionAPIについ ては詳しく話しません。
Copyright © M&A Cloud All rights reserved. お品書き Nuxt.js +
CompositionAPI 6 1 Nuxt.js + Typescript + Composition API 2 Nuxt.js + Vuex 3 Vuex + CompositionAPI
Copyright © M&A Cloud All rights reserved. Nuxt.js + Typescript
7 Typescript Nuxt.jsをTypescriptで開発する ためにNuxt Typescriptを利用し てスケルトンを作成
Copyright © M&A Cloud All rights reserved. Nuxt.js + Composition
API 8
Copyright © M&A Cloud All rights reserved. Nuxt.js + Composition
API 9 pluginsディレクトリにこんな感じのファイルを作成
Copyright © M&A Cloud All rights reserved. Nuxt.js + Composition
API 10 nuxt.config.tsのpluginsに作成したファイルを指定
Copyright © M&A Cloud All rights reserved. Nuxt.js + Composition
API 11
Copyright © M&A Cloud All rights reserved. Nuxt.js + Composition
API 12 SFCで普通にComposition APIが利用できる ※2020/02現在ではCompositionAPIライブラリが必須
Copyright © M&A Cloud All rights reserved. Nuxt.js + Composition
API 13 @nuxt/types/app/vue.d.tsにNuxt.js特有のSFCプロパティ の定義があるのでTypescriptの恩恵を受けられる
Copyright © M&A Cloud All rights reserved. 14 (o`・ω・´σ)σ 普通に使えそうやん と思ったが
Copyright © M&A Cloud All rights reserved. 15 (o`・ω・´σ)σ 普通に使えそうやん と思ったが
そんなことはなかった _:(´ཀ`」 ∠):
Copyright © M&A Cloud All rights reserved. Nuxt.js + Composition
API 16 Nuxt.js + Composition APIの問題点 Nuxtはサーバーサイドレンダリングの際に、サーバーサイドで取得し たデータをHTMLのscriptタグにwindow.__NUXT__.~に出力して、ク ライアントサイドでステートをマッピングすることができるが CompositionAPIを利用した際にはうまく出力されなかった・・・ (書き方を間違えているかもしれないのでホントはできるぞという方は 後で連絡ください)
Copyright © M&A Cloud All rights reserved. Nuxt.js + Composition
API 17 Nuxt.js + Composition APIの問題点 templateに埋め込んでHTMLとしてサーバーサイドレンダリングはされ るのでSEOとしては利用できるが、その出力した変数情報は空になって しまうのでAPI通信などでデータ取得してる場合はクライアントサイド でも再度取得しなければならない・・・
Copyright © M&A Cloud All rights reserved. 18 ( ー`дー´) ならばVuex
Copyright © M&A Cloud All rights reserved. Nuxt.js + Vuex
19 Nuxt.jsにはVuexコアが組み込まれている Vuexについてはみなさんもうご存知と思うので詳しく説明しません。 Nuxt.jsではstoreディレクトリにあるファイルをVuexとしてインポート する仕組みを持っている。 ここで状態管理がされたステートはwindow.__NUXT__.~を利用してク ライアントサイドでステートを引き継ぐことができる
Copyright © M&A Cloud All rights reserved. Nuxt.js + Vuex
20 VuexとTypescript Nuxt.jsでVuexをTypescriptで扱う場合は大きく以下の2パタンある • クラスベース • Vanilla
Copyright © M&A Cloud All rights reserved. Nuxt.js + Vuex
21 クラスベース vuex-module-decorators を利用する
Copyright © M&A Cloud All rights reserved. Nuxt.js + Vuex
22 Vanilla Vuexに用意されている型 定義を利用して素朴に記 述する
Copyright © M&A Cloud All rights reserved. 23 クラスベースに慣れてないので Vanillaを採用
Copyright © M&A Cloud All rights reserved. Nuxt.js + Vuex
24 nuxt-typed-vuex Vuexで型定義の恩恵を受けられるライブラリがあるらしいが検証でき てない(懇親会があったら聞きたかった・・・!)
Copyright © M&A Cloud All rights reserved. 25 ( ゚д゚
)あれ? Composition APIは?
Copyright © M&A Cloud All rights reserved. Vuex + Composition
API 26 SFC Composition API Vuex SFCから直接Vuexにdispatchやgettersを実行せず、CompisitionAPI側 にVuexとの接続を隠蔽
Copyright © M&A Cloud All rights reserved. Vuex + Composition
API 27 なぜCompositionAPIを挟むのか • 現状でVuexとのやりとりが文字ベースなので型情報が失われるの でCompositionAPIで型を定義し直す ◦ nuxt-typed-vuexで解決するかも • SFCが依存するものをCompositionAPIだけに制限したい • 将来的にサーバーとクライアントのステート共有が CompositionAPIだけになったらいいなという期待 • クライアントサイドだけで非同期通信して値を取得する場合は Vuexを使わず、CompositionAPIだけで完結させている
Copyright © M&A Cloud All rights reserved. Vuex + Composition
API 28
Copyright © M&A Cloud All rights reserved. Vuex + Composition
API 29 Vuexを利用している場合はCompositionAPIは右から左に バケツリレーするだけ
Copyright © M&A Cloud All rights reserved. Vuex + Composition
APIのテスト 30 先程の構成のCompositionAPIをテストする(Jest)
Copyright © M&A Cloud All rights reserved. Vuex + Composition
APIのテスト 31 LocalVueにVuexとCompositionAPIを登録
Copyright © M&A Cloud All rights reserved. Vuex + Composition
APIのテスト 32 VuexStoreの登録
Copyright © M&A Cloud All rights reserved. Vuex + Composition
APIのテスト 33 モジュールモードで登録されるように加工
Copyright © M&A Cloud All rights reserved. Vuex + Composition
APIのテスト 34 APIレスポンスのモックを作成
Copyright © M&A Cloud All rights reserved. Vuex + Composition
APIのテスト 35 モックの差し込み
Copyright © M&A Cloud All rights reserved. Vuex + Composition
APIのテスト 36 簡単でしたね?
Copyright © M&A Cloud All rights reserved. まとめ 37 まとめ
• Nuxt.js+CompositionAPIはサーバーサイドとクライアントサイド でのステート共有においてまだ使えないが、既存の仕組み(Vuex) と組み合わせることで問題なく使える • 懇親会で色々聞きたかった人生
Copyright © M&A Cloud All rights reserved. 38