Nuxt + TypeScriptで SPAを作る / Build SPA with Nuxt and TypeScript

Cluexの社内LT大会で発表した時の資料です。

Transcript

1. Nuxt + TypeScriptで SPAを作る グループ 柴山健吾
2. 話すこと • とは • で を作ってみる
3. Nuxtとは • のフレームワーク • を標準で搭載 • ・ や静的ファイルとして生成も可能 • や 、 も設定済みの環境が作成できる • モジュールとしてあらゆる機能が公開されている ◦ 例： • などなど盛りだくさん
4. 俺的Nuxtのポイント • ディレクトリ構成が決まっているので 設計に悩まない • や の設定がいらず コードを書くだけで良い • や などのレンダリングモードを選べる • ぶっちゃけやり始めてまだ 週間足らずなので深くは わかってない・・・
5. Nuxt + TypeScript • から公式が に対応しました • 最新の ではより簡単に 設定できるように
6. Nuxt + TypeScriptでSPAを作ってみる • さっき紹介したカレンダー を使って カレンダーの一覧を作る • というライブラリを使い オブジェクトではなく として実装する
7. 型定義 (types/event.ts)
8. pages/index.vue
9. pages/index.vue
10. 素のJSでの実装
11. Vuex
12. store/index.ts
13. 素のVuex での実装
14. components/DateEventList.vue
15. components/ DateEventList.vue
16. 素のJSでの実装
17. components/ Event.vue
18. components/ Event.vue
19. 素のJSでの実装
20. 表示してみる
21. まとめ • 最初の環境構築で多少ハマったけど 設定がほぼいらずにすぐ開発に入れて素敵 • コンポーネントを で書くより で書くのは とも相性がよくて良い • の部分が補完が効かないのはつらい ◦ 何かやり方があるのか？ • まだまだ触り始めて浅いのでもっと極めたい
22. ご清聴ありがとうございました