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

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. ご清聴ありがとうございました