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
vue_js_composition_api
Search
Hirofumi Horiuchi
May 25, 2020
0
64
vue_js_composition_api
Hirofumi Horiuchi
May 25, 2020
Tweet
Share
More Decks by Hirofumi Horiuchi
See All by Hirofumi Horiuchi
Stimulusのはなし
h_reader
0
32
同じってなんだ?
h_reader
0
32
OSSを読んでみた?
h_reader
0
51
秒速でリリースするWebアプリ.pdf
h_reader
0
40
はじめよう async/await
h_reader
0
46
Node.jsではじめるオレオレツールの世界
h_reader
0
480
Featured
See All Featured
Side Projects
sachag
455
42k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Typedesign – Prime Four
hannesfritz
42
2.7k
How STYLIGHT went responsive
nonsquared
100
5.6k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Speed Design
sergeychernyshev
32
1k
Transcript
Vue.js の新機能 Composition APIを 使ってみた Tried using Composition API which
is a new feature of Vue.js
Hello! I am Hirofumi Horiuchi. Corp: Job: IoT Engineer Hobby:
Camp, Watting Football @h_reader 2
“ Vue.js 3.x は現在 Beta版が リリースされています。 Vue.js 3.x is currently
in beta release.
“ Vue.js 3.x の Composition API を使ってみました I tried using
the Composition API of Vue.js 3.x
“ Composition API を利用すると VueComponent内のscriptの 書き方が変わります How to write script
in Vue Component changes when using Composition API.
“ 現在の書き方とComposition APIを 使った書き方で カウンターアプリを作ってみました I tried to make a
counter application with the current writing style and the writing style using Composition API.
7 カウンターアプリUI Counter app UI count up ボタン -> カウントを1上げる
count up button -> Add 1 to the count Count -> 現在のカウント Count -> Current count. Double -> カウントの2倍 Count -> Double the count.
現在の書き方 Current writing style
Composition APIの書き方 How to write with Composition API
“ なんだか面倒だな。。。 It's troublesome...
“ そんなふうに考えていた時期が 俺にもありました There was also a time when I
was thinking that way.
“ Composition APIおじさんは こう言っています。 He says:
“ Composition APIを使うと Component間のロジックを抽出して 簡単に再利用できるよ! The Composition APIs make it
more straightforward to extract and reuse logic between components.
“ 先ほどのロジックを 抽出してみましょう。 Let's extract the logic.
ロジックを抽出して別ファイルへ Extract logic to another file use_increment.js
ロジックを抽出して別ファイルへ Extract logic to another file component
“ なるほど!これはいいかも I got it! This might be good.
“ Vuexを使う場合はどうなるんだろう? What if I use Vuex?
Vuex を使う Use Vuex store
Vuex を使う Use Vuex component
Vuex を使うロジックを抽出 Extract the logic that uses Vuex use_increment_store.js
Vuex を使うロジックを抽出 Extract the logic that uses Vuex component
まとめ Summary Composition API は 機能ごとにComponentのロジックを分 割するためのAPI Composition API is
an API for dividing the component logic by function. 今まで複数のComponentで書いていた同じロジックをDRYに 書けそう I wrote the same logic to multiple components, but I can write to DRY. VSCode is the amazing editor.
おまけ extra 24
“ Composition API の公式に載っていた とても良かったコード Very good code on the
official Composition API site.
None
27 Thanks! Any questions? You can find me at ▪
@h_reader