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
140
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
120
Other Decks in Programming
See All in Programming
開発者への寄付をアプリ内課金として実装する時の気の使いどころ
ski
0
340
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
ota1022
0
230
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
1
440
GraphQL×Railsアプリのデータベース負荷分散 - 月間3,000万人利用サービスを無停止で
koxya
1
1k
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
320
ABEMAモバイルアプリが Kotlin Multiplatformと歩んだ5年 ─ 導入と運用、成功と課題 / iOSDC 2025
akkyie
0
310
ててべんす独演会〜Flowの全てを語ります〜
tbsten
1
220
クラシルを支える技術と組織
rakutek
0
190
止められない医療アプリ、そっと Swift 6 へ
medley
1
110
Let's Write a Train Tracking Algorithm
twocentstudios
0
220
ネイティブ製ガントチャートUIを作って学ぶUICollectionViewLayoutの威力
jrsaruo
0
120
プログラマのための作曲入門
cheebow
0
530
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
27
2k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
850
The Language of Interfaces
destraynor
162
25k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Practical Orchestrator
shlominoach
190
11k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Site-Speed That Sticks
csswizardry
11
880
Become a Pro
speakerdeck
PRO
29
5.5k
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での実装
表示してみる
まとめ • 最初の環境構築で多少ハマったけど 設定がほぼいらずにすぐ開発に入れて素敵 • コンポーネントを で書くより で書くのは とも相性がよくて良い •
の部分が補完が効かないのはつらい ◦ 何かやり方があるのか? • まだまだ触り始めて浅いのでもっと極めたい
ご清聴ありがとうございました