Tweet
Tweet

Slide 1

Slide 1 text

Nuxt + TypeScriptで SPAを作る グループ 柴山健吾

Slide 2

Slide 2 text

話すこと ● とは ● で を作ってみる

Slide 3

Slide 3 text

Nuxtとは ● のフレームワーク ● を標準で搭載 ● ・ や静的ファイルとして生成も可能 ● や 、 も設定済みの環境が作成できる ● モジュールとしてあらゆる機能が公開されている ○ 例： ● などなど盛りだくさん

Slide 4

Slide 4 text

俺的Nuxtのポイント ● ディレクトリ構成が決まっているので 設計に悩まない ● や の設定がいらず コードを書くだけで良い ● や などのレンダリングモードを選べる ● ぶっちゃけやり始めてまだ 週間足らずなので深くは わかってない・・・

Slide 5

Slide 5 text

Nuxt + TypeScript ● から公式が に対応しました ● 最新の ではより簡単に 設定できるように

Slide 6

Slide 6 text

Nuxt + TypeScriptでSPAを作ってみる ● さっき紹介したカレンダー を使って カレンダーの一覧を作る ● というライブラリを使い オブジェクトではなく として実装する

Slide 7

Slide 7 text

型定義 (types/event.ts)

Slide 8

Slide 8 text

pages/index.vue

Slide 9

Slide 9 text

pages/index.vue

Slide 10

Slide 10 text

素のJSでの実装

Slide 11

Slide 11 text

Vuex

Slide 12

Slide 12 text

store/index.ts

Slide 13

Slide 13 text

素のVuex での実装

Slide 14

Slide 14 text

components/DateEventList.vue

Slide 15

Slide 15 text

components/ DateEventList.vue

Slide 16

Slide 16 text

素のJSでの実装

Slide 17

Slide 17 text

components/ Event.vue

Slide 18

Slide 18 text

components/ Event.vue

Slide 19

Slide 19 text

素のJSでの実装

Slide 20

Slide 20 text

表示してみる

Slide 21

Slide 21 text

まとめ ● 最初の環境構築で多少ハマったけど 設定がほぼいらずにすぐ開発に入れて素敵 ● コンポーネントを で書くより で書くのは とも相性がよくて良い ● の部分が補完が効かないのはつらい ○ 何かやり方があるのか？ ● まだまだ触り始めて浅いのでもっと極めたい

Slide 22

Slide 22 text

ご清聴ありがとうございました