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
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
870
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
170
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
200
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
580
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
450
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
8.2k
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
1
770
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
650
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
1k
VS Code Update for GitHub Copilot
74th
2
670
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
670
TypeScriptでDXを上げろ! Hono編
yusukebe
3
650
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.5k
Designing for Performance
lara
610
69k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Building Adaptive Systems
keathley
43
2.7k
Building an army of robots
kneath
306
45k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
What's in a price? How to price your products and services
michaelherold
246
12k
Documentation Writing (for coders)
carmenintech
72
4.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
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での実装
表示してみる
まとめ • 最初の環境構築で多少ハマったけど 設定がほぼいらずにすぐ開発に入れて素敵 • コンポーネントを で書くより で書くのは とも相性がよくて良い •
の部分が補完が効かないのはつらい ◦ 何かやり方があるのか? • まだまだ触り始めて浅いのでもっと極めたい
ご清聴ありがとうございました