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
160
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
850
PHPカンファレンス北海道2024 リーダブルSQL
ytsuzaki
5
570
ある日PHPerがベンチャー企業のデータ基盤を作ることになったら
ytsuzaki
1
350
【PhpStorm】モブプログラミングの実践と学び【結局はバランス?】
ytsuzaki
0
340
PHPerKaigi 2022 【Laravel】 サクッとN + 1問題を見つけて倒しチャオ!
ytsuzaki
1
2.7k
【超特急】「SQLアンチパターン」 総おさらいLT 【4分で25個】
ytsuzaki
2
740
Nuxt.js x Composition API x TypeScript
ytsuzaki
0
660
PHPerKaigi 2021 LT PHPで簡単コード生成! 同じようなコードをたくさん書くなら コード生成しチャイナ!
ytsuzaki
0
100
アクセス制御ライブラリ Casbinを使ってみた
ytsuzaki
2
1.3k
Other Decks in Programming
See All in Programming
[PyCon Korea 2024 Keynote] 커뮤니티와 파이썬, 그리고 우리
beomi
0
110
【Kaigi on Rails 2024】YOUTRUST スポンサーLT
krpk1900
1
240
リリース8年目のサービスの1800個のERBファイルをViewComponentに移行した方法とその結果
katty0324
5
3.5k
WEBエンジニア向けAI活用入門
sutetotanuki
0
300
推し活の ハイトラフィックに立ち向かう Railsとアーキテクチャ - Kaigi on Rails 2024
falcon8823
6
2.1k
約9000個の自動テストの 時間を50分->10分に短縮 Flakyテストを1%以下に抑えた話
hatsu38
23
10k
Android 15 でアクションバー表示時にステータスバーが白くなってしまう問題
tonionagauzzi
0
130
Macとオーディオ再生 2024/11/02
yusukeito
0
140
開発効率向上のためのリファクタリングの一歩目の選択肢 ~コード分割~ / JJUG CCC 2024 Fall
ryounasso
0
360
Vue SFCのtemplateでTypeScriptの型を活用しよう
tsukkee
3
1.5k
Re:ProS_案内資料
rect
0
380
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
7
420
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
4 Signs Your Business is Dying
shpigford
180
21k
Done Done
chrislema
181
16k
Bash Introduction
62gerente
608
210k
A Philosophy of Restraint
colly
203
16k
A Modern Web Designer's Workflow
chriscoyier
692
190k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
1
39
Producing Creativity
orderedlist
PRO
341
39k
Designing the Hi-DPI Web
ddemaree
280
34k
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が使えます!