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
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
240
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
410
エンジニア向け採用ピッチ資料
inusan
0
160
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.3k
関数型まつり2025登壇資料「関数プログラミングと再帰」
taisontsukada
2
850
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
320
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
100
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
690
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
850
5つのアンチパターンから学ぶLT設計
narihara
1
110
Benchmark
sysong
0
270
ドメインモデリングにおける抽象の役割、tagless-finalによるDSL構築、そして型安全な最適化
knih
11
2k
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Raft: Consensus for Rubyists
vanstee
140
7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.4k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Code Reviewing Like a Champion
maltzj
524
40k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
Visualization
eitanlees
146
16k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Bash Introduction
62gerente
614
210k
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での実装
表示してみる
まとめ • 最初の環境構築で多少ハマったけど 設定がほぼいらずにすぐ開発に入れて素敵 • コンポーネントを で書くより で書くのは とも相性がよくて良い •
の部分が補完が効かないのはつらい ◦ 何かやり方があるのか? • まだまだ触り始めて浅いのでもっと極めたい
ご清聴ありがとうございました