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 Nuxt and TypeScript
Search
shike
April 11, 2019
Programming
0
120
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.1k
TypeScript + GASでAPIを作る / Build API with TypeScript and GAS
shike0909
0
130
Lighthouseを使った認証必須のGraphQL API / GraphQL API authentication with Lighthouse
shike0909
0
1.9k
Reduxについて / Redux introduction and TODO example with Redux
shike0909
0
89
Other Decks in Programming
See All in Programming
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
170
Code Reviews
bkuhlmann
4
890
PostmanでAPIの動作確認が楽になった話
h455h1
0
170
サイコロで理解する統計的仮説検定の考え方
tatamiya
4
930
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
130
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.4k
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
370
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
220
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
8
4.1k
Elm 0.19.0 Changes
bkuhlmann
0
490
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
380
雑に思考を整理する技術と効能
konifar
60
29k
Featured
See All Featured
Designing for humans not robots
tammielis
248
25k
KATA
mclloyd
15
12k
Building a Modern Day E-commerce SEO Strategy
aleyda
17
6.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
20
1.9k
Optimising Largest Contentful Paint
csswizardry
8
2.4k
How STYLIGHT went responsive
nonsquared
92
4.8k
Become a Pro
speakerdeck
PRO
11
4.5k
Statistics for Hackers
jakevdp
789
220k
It's Worth the Effort
3n
180
27k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
17
1.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
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での実装
表示してみる
まとめ • 最初の環境構築で多少ハマったけど 設定がほぼいらずにすぐ開発に入れて素敵 • コンポーネントを で書くより で書くのは とも相性がよくて良い •
の部分が補完が効かないのはつらい ◦ 何かやり方があるのか? • まだまだ触り始めて浅いのでもっと極めたい
ご清聴ありがとうございました