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
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
170
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.4k
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
460
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
740
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
2
160
NPOでのDevinの活用
codeforeveryone
0
870
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
230
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
800
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
230
効率的な開発手段として VRTを活用する
ishkawa
0
150
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
320
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
40
1.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
970
Unsuck your backbone
ammeep
671
58k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
For a Future-Friendly Web
brad_frost
179
9.8k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Being A Developer After 40
akosma
90
590k
Designing for Performance
lara
610
69k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
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での実装
表示してみる
まとめ • 最初の環境構築で多少ハマったけど 設定がほぼいらずにすぐ開発に入れて素敵 • コンポーネントを で書くより で書くのは とも相性がよくて良い •
の部分が補完が効かないのはつらい ◦ 何かやり方があるのか? • まだまだ触り始めて浅いのでもっと極めたい
ご清聴ありがとうございました