Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Nuxt Composition API 使ってみた
Search
y-tsuzaki
September 17, 2021
Programming
0
130
Nuxt Composition API 使ってみた
y-tsuzaki
September 17, 2021
Tweet
Share
More Decks by y-tsuzaki
See All by y-tsuzaki
PHPカンファレンス福岡2024 【超特急】SQLアンチパターン総おさらいLT
ytsuzaki
0
560
PHPカンファレンス北海道2024 リーダブルSQL
ytsuzaki
5
470
ある日PHPerがベンチャー企業のデータ基盤を作ることになったら
ytsuzaki
1
340
【PhpStorm】モブプログラミングの実践と学び【結局はバランス?】
ytsuzaki
0
320
PHPerKaigi 2022 【Laravel】 サクッとN + 1問題を見つけて倒しチャオ!
ytsuzaki
1
2.5k
【超特急】「SQLアンチパターン」 総おさらいLT 【4分で25個】
ytsuzaki
2
710
Nuxt.js x Composition API x TypeScript
ytsuzaki
0
610
PHPerKaigi 2021 LT PHPで簡単コード生成! 同じようなコードをたくさん書くなら コード生成しチャイナ!
ytsuzaki
0
97
アクセス制御ライブラリ Casbinを使ってみた
ytsuzaki
2
1.2k
Other Decks in Programming
See All in Programming
ゼロから始める型安全なGraphQL開発
shachi_daikon55
0
170
インプロセスQAとテスト自動化の両輪で進める食べログの開発生産性と品質改善の3年間
hagevvashi
2
930
Breaking the Ceiling: Scaling Your Impact at the Staff-Plus Level (InfoQ-DevSummit-Boston)
thiagoghisi
0
110
2024年版 Kotlin サーバーサイドプログラミング実践開発
n_takehata
3
960
アーキテクチャレベルで考える開発生産性 / architecture-and-productivity
minodriven
15
4.3k
CSC307 Lecture 02
javiergs
PRO
0
280
タクシーアプリ『GO』の reCAPTCHA Enterprise 導入
mot_techtalk
1
110
スクラムチームに入れないという選択: フルサイクルチームにおける開発者のステップアップ / Why We Don’t Add Newbies to Our Scrum Team
yuk4w4
3
1.5k
ドラ🔵もんでDIを学ぶ
tomo1227
0
4.7k
技術サポートでよく見かけるパターンと便利な活用方法
tamai_63
0
170
プラットフォームエンジニアリングを 普及と実践し続けて見えてきた利点とリスク
zawa_zawa0210
2
940
5分でわかるExplicitly Built Modules
giginet
PRO
0
160
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
784
250k
A better future with KSS
kneath
231
17k
Unsuck your backbone
ammeep
664
57k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.8k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
Rails Girls Zürich Keynote
gr2m
91
13k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
128
32k
Faster Mobile Websites
deanohume
300
30k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
23
1.5k
Speed Design
sergeychernyshev
3
160
Web Components: a chance to create the future
zenorocha
307
41k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Transcript
Nuxt Composition API 使ってみた 2021年9月17日 v-okinawa 株式会社 M&Aクラウド 津崎 善昭
自己紹介 津崎 善昭(つざき よしあき) Twitter: @820zacky 趣味:たまにキャンプ、たまに筋トレ(サボり中) 得意: 資格勉強 セキュリティスペシャリスト,ネットワークスペシャリスト,データベーススペシャリスト
SIer -> Web制作会社 -> Webベンチャー フロントエンド入門中
None
None
None
※ 北海道出身だけどいじめないでください
None
Composition API とは? Vue.jsのコンポーネントをいい感じに書く手法 2020年9月にリリースされたVue 3にて導入された 標準の書き方はOptions APIという コンポーネントからロジックを分離し、再利用可能にする 大規模・複雑なコンポーネントを作る時に便利
Nuxt.jsでComposition APIを使う2つのやり方 @vue/composition-api と @nuxtjs/comopsition-api
ふたつのやり方と言ったな? あれは嘘だ -> Nuxt3が10/12にリリースになりました https://nuxtjs.org/ja/v3/ もうどちらもいらない!
None
None
最初から入ってる
@vue/composition-api 従来のやり方 Vueの純正composition-api M&Aクラウドが使っているのはこれ SSRとCSRで値をハイドレーションできない問題があり困った (https://speakerdeck.com/kubotak/nuxt-dot-jsdecompositionapiwoshi-u? slide=16) 弊社ではVuexストアを使って値を共有している
@nuxtjs/comopsition-api = Nuxt Composition API 新しいやり方 nuxt-communityが提供している Nuxt 3 のための実験的なもの
Nuxt 3 ではメソッド名がかわるかもしれない Nuxt固有の機能を使える 弊社もこちらへの意向を検討中
Nuxt Composition API @vue/composition-apiの機能に加えてNuxt固有の機能を提供している useMeta : Metaタグの情報にアクセスするメソッド useAsync : NuxtのAsyncDataフックを使うメソッド
useFetch : NuxtのFetchフックを使うメソッド など reqRef, reqSsrRef, ssrRefなど新しい概念も登場している (まだよくわかってないがSSRとCSRで値を共有する方法っぽい)
なぜComposition APIなのか
処理をまとめられる
(無理矢理拡大した図) data()内にいろんな関心事の変数が定義されている
関心事ごとに変数を用意できる
ロジックを抽出して再利用 ref, reactiveなどのリアクティブな値を作成するメソッドや、onMountedなどのコ ールバック登録するメソッドなど、細かく機能が分割されているため、共通化した いロジックや肥大化したロジックを別ファイルに移することができる。 Options APIではMixinというTrait的なやり方でしか分離できず、再利用性が悪かっ た
Nuxt Composition APIの開発環境を作る
Nuxtインストール yarn create nuxt-app sample-app 言語はTypeScriptを選択する Composition APIを導入する yarn add
@nuxtjs/composition-api 今回は新しいやりかたである@nuxtjs/composition-apiを試してみる
nuxt.config.jsを編集する { buildModules: [ '@nuxt/typescript-build', + '@nuxtjs/composition-api/module' ] }
サーバーを起動する yarn dev localhost:3000でサイトが起動する
サンプルコード https://qiita.com/zackey2/items/8a2675c14d73e91267fe
まとめ Nuxt3 10/12リリース予定 Nuxt3 では最初から Composition APIが使えます!