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 + TypeScriptで SPAを作る / Build SPA with Nux...
Search
shike
April 11, 2019
Programming
0
140
Nuxt + TypeScriptで SPAを作る / Build SPA with Nuxt and TypeScript
Cluexの社内LT大会で発表した時の資料です。
shike
April 11, 2019
Tweet
Share
More Decks by shike
See All by shike
Code Generatorを作ってコンポーネントを自動生成しよう / Let's make code generator
shike0909
1
2.2k
TypeScript + GASでAPIを作る / Build API with TypeScript and GAS
shike0909
0
150
Lighthouseを使った認証必須のGraphQL API / GraphQL API authentication with Lighthouse
shike0909
0
2.2k
Reduxについて / Redux introduction and TODO example with Redux
shike0909
0
120
Other Decks in Programming
See All in Programming
Leading Effective Engineering Teams in the AI Era
addyosmani
2
310
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
980
止められない医療アプリ、そっと Swift 6 へ
medley
1
160
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
220
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
2
820
株式会社 Sun terras カンパニーデック
sunterras
0
280
CSC509 Lecture 03
javiergs
PRO
0
330
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
230
Le côté obscur des IA génératives
pascallemerrer
0
140
Six and a half ridiculous things to do with Quarkus
hollycummins
0
170
SpecKitでどこまでできる? コストはどれくらい?
leveragestech
0
710
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
570
Featured
See All Featured
Six Lessons from altMBA
skipperchong
28
4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
189
55k
Faster Mobile Websites
deanohume
310
31k
Producing Creativity
orderedlist
PRO
347
40k
YesSQL, Process and Tooling at Scale
rocio
173
14k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
30
2.7k
It's Worth the Effort
3n
187
28k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Music & Morning Musume
bryan
46
6.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Transcript
Nuxt + TypeScriptで SPAを作る グループ 柴山健吾
話すこと • とは • で を作ってみる
Nuxtとは • のフレームワーク • を標準で搭載 • ・ や静的ファイルとして生成も可能 • や
、 も設定済みの環境が作成できる • モジュールとしてあらゆる機能が公開されている ◦ 例: • などなど盛りだくさん
俺的Nuxtのポイント • ディレクトリ構成が決まっているので 設計に悩まない • や の設定がいらず コードを書くだけで良い • や
などのレンダリングモードを選べる • ぶっちゃけやり始めてまだ 週間足らずなので深くは わかってない・・・
Nuxt + TypeScript • から公式が に対応しました • 最新の ではより簡単に 設定できるように
Nuxt + TypeScriptでSPAを作ってみる • さっき紹介したカレンダー を使って カレンダーの一覧を作る • というライブラリを使い オブジェクトではなく
として実装する
型定義 (types/event.ts)
pages/index.vue
pages/index.vue
素のJSでの実装
Vuex
store/index.ts
素のVuex での実装
components/DateEventList.vue
components/ DateEventList.vue
素のJSでの実装
components/ Event.vue
components/ Event.vue
素のJSでの実装
表示してみる
まとめ • 最初の環境構築で多少ハマったけど 設定がほぼいらずにすぐ開発に入れて素敵 • コンポーネントを で書くより で書くのは とも相性がよくて良い •
の部分が補完が効かないのはつらい ◦ 何かやり方があるのか? • まだまだ触り始めて浅いのでもっと極めたい
ご清聴ありがとうございました