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
130
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
110
Other Decks in Programming
See All in Programming
Perlで痩せる
yuukis
1
680
つよそうにふるまい、つよい成果を出すのなら、つよいのかもしれない
irof
1
250
Practical Tips and Tricks for Working with Compose Multiplatform Previews (mDevCamp 2025)
stewemetal
0
110
KotlinConf 2025 現地で感じたServer-Side Kotlin
n_takehata
1
130
がんばりすぎないコーディングルール運用術
tsukakei
1
210
20250528 AWS Startupイベント登壇資料:AIコーディングの取り組み
procrustes5
0
150
Passkeys for Java Developers
ynojima
2
800
プロダクト開発でも使おう 関数のオーバーロード
yoiwamoto
0
130
Gleamという選択肢
comamoca
6
560
Interface vs Types ~型推論が過多推論~
hirokiomote
1
250
複数アプリケーションを育てていくための共通化戦略
irof
9
3.6k
Rails産でないDBを Railsに引っ越すHACK - Omotesando.rb #110
lnit
1
160
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
77
9.4k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
How STYLIGHT went responsive
nonsquared
100
5.6k
Six Lessons from altMBA
skipperchong
28
3.8k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
870
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
34k
Producing Creativity
orderedlist
PRO
346
40k
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での実装
表示してみる
まとめ • 最初の環境構築で多少ハマったけど 設定がほぼいらずにすぐ開発に入れて素敵 • コンポーネントを で書くより で書くのは とも相性がよくて良い •
の部分が補完が効かないのはつらい ◦ 何かやり方があるのか? • まだまだ触り始めて浅いのでもっと極めたい
ご清聴ありがとうございました