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
How to train your dragon (web standard)
notwaldorf
95
6.1k
How STYLIGHT went responsive
nonsquared
100
5.6k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
RailsConf 2023
tenderlove
30
1.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Optimizing for Happiness
mojombo
379
70k
Automating Front-end Workflow
addyosmani
1370
200k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Gamification - CAS2011
davidbonilla
81
5.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
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