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

D1d987836a880f8c29d1f63c88b92f80?s=47 shike
April 11, 2019

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

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

D1d987836a880f8c29d1f63c88b92f80?s=128

shike

April 11, 2019
Tweet

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