Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

D1d987836a880f8c29d1f63c88b92f80?s=47 shike
April 11, 2019
Programming
0
89

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

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

D1d987836a880f8c29d1f63c88b92f80?s=128

shike

April 11, 2019
Tweet

More Decks by shike

See All by shike
Code Generatorを作ってコンポーネントを自動生成しよう / Let's make code generator
D1d987836a880f8c29d1f63c88b92f80?s=48 shike0909
1
1.6k
TypeScript + GASでAPIを作る / Build API with TypeScript and GAS
D1d987836a880f8c29d1f63c88b92f80?s=48 shike0909
0
110
Lighthouseを使った認証必須のGraphQL API / GraphQL API authentication with Lighthouse
D1d987836a880f8c29d1f63c88b92f80?s=48 shike0909
0
1.4k
Reduxについて / Redux introduction and TODO example with Redux
D1d987836a880f8c29d1f63c88b92f80?s=48 shike0909
0
82

Other Decks in Programming

See All in Programming
CUDA高速化セミナーvol.1　～画像処理アルゴリズムの高速化～
Bbf28bf908ac83e5b85b52a675641641?s=48 fixstars
3
170
設計ナイト2022 トランザクションスクリプト
6521324f6ab5266cdcde1dd05945a27b?s=48 shinpeim
11
2k
Seleniumでイキってたらサーバを絞め落としかけてた話
52b9da1c8c4810664baa2bdd3ec8e608?s=48 kenfujita
0
350
ドメインモデル方式のクラス設計　座談会
8f84b7d8869ef6005d89b378e8661f7c?s=48 masuda220
PRO
3
1k
言語処理ライブラリ開発における失敗談 / NLPHacks
7b5bbcad8cad0559a385206fbe038744?s=48 taishii
1
420
Running Laravel/PHP on AWS (AWS Builders Day Taiwan 2022)
2f42f32689c8244280dd01d864f92079?s=48 dwchiang
0
130
I/O Extended 2022 in Android ~ Whats new in Android development tools
354271902cd8ba2762d05b251dfa0f84?s=48 pluu
0
510
Maintaining Software Correctness
D225ebf0faa666ac7655cc7e4689283c?s=48 dlew
PRO
3
230
IE Graduation (IE の功績を讃える)
1ff811939fd0923df8321ec6d8bf9d4b?s=48 jxck
20
12k
Treasure.map(): Functional programming in JVM-based languages
A5503b91ff91d4f8041bcce9bd5ca5ee?s=48 paranoidmonoid
0
130
Web API連携でCSRF対策がどう実装されてるか調べた / how to implements csrf-detection on Web API
79fc33e55cacc42beef647541de24d58?s=48 yasuakiomokawa
2
190
Airflowはすごいぞ！
65389cd2b6fdc531dcc4af999e864593?s=48 hankehly
0
360

Featured

See All Featured
Product Roadmaps are Hard
7cbd3f5f922d798cc312eaf596de7ae6?s=48 iamctodd
34
6.5k
10 Git Anti Patterns You Should be Aware of
Dafc4723e9a1c067796c0fec6f509774?s=48 lemiorhan
638
52k
ReactJS: Keep Simple. Everything can be a component!
Af6a12710770ad9a7cfd08c97efd40d3?s=48 pedronauck
655
120k
How STYLIGHT went responsive
F716e5f737fcfb03f2cf8d1a184f1dbe?s=48 nonsquared
85
3.9k
Fashionably flexible responsive web design (full day workshop)
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
396
62k
Faster Mobile Websites
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
294
28k
In The Pink: A Labor of Love
E837d2996f52008ace055a08fbfff992?s=48 frogandcode
131
21k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
D8fc2580cfaca035f666d9e4ee79a7f7?s=48 mongodb
29
4.3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
88f4e84b94fe07cddbd9e6479d689192?s=48 soudai
39
13k
Docker and Python
Ecdea9b9714877b86cee08458f085481?s=48 trallard
27
1.6k
Building Your Own Lightsaber
Fe6b81005d1553accd6b2a28f6a2bef1?s=48 phodgson
94
4.6k
Fantastic passwords and where to find them - at NoRuKo
8ec1383b240b5ba15ffb9743fceb3c0e?s=48 philnash
27
1.5k

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