DenoでもViteしたい！インポートパスのエイリアスを指定してラクラクアプリ開発

Slide 1

Slide 1 text

Bengo4.com, Inc. DenoでもViteしたい！インポートパスのエイリアスを指定してラクラクアプリ開発 2024.10.02 Vue Fes Japan × TSKaigi 合同イベント「次世代フロントエンドツールチェイン」 1

Slide 2

Slide 2 text

Bengo4.com, Inc. 質問 2

Slide 3

Slide 3 text

Bengo4.com, Inc. Deno で Vite 動かしたことがある人 🙋 3

Slide 4

Slide 4 text

Bengo4.com, Inc. 要点 4

Slide 5

Slide 5 text

Bengo4.com, Inc. ①DenoでもViteが使える 5

Slide 6

Slide 6 text

Bengo4.com, Inc. ②インポートパスのエイリアスを設定すると幸せ 6

Slide 7

Slide 7 text

Bengo4.com, Inc. 誰 7

Slide 8

Slide 8 text

Bengo4.com, Inc. かみくず 8 ● 弁護士ドットコム株式会社クラウドサイン事業本部 ● Webフロントエンドエンジニア ● 𝕏: @p_craft ● 最近書いたもの: ボタンをaタグで作るな高校校歌 - 弁護士ドットコム株式会社 Creators’ blog

Slide 9

Slide 9 text

Bengo4.com, Inc. 弁護士ドットコム 9 ● Vue Fes Japan のスポンサー https://vuefes.jp/2024/sponsors/bengo4

Slide 10

Slide 10 text

Bengo4.com,Inc. 税理士に無料で相談・検索できる日本最大級の税務相談ポータルサイト最新の法改正や実務について分かりやすく解説する日本最大級の企業法務ポータルサイト日本最大級の無料法律相談ポータルサイト時事問題の弁護士解説を中心としたメディア弁護士事務所、企業法務職向け人材紹介事業契約の締結から管理までデジタルで完結させる契約マネジメントプラットフォーム会議の効率化・生産性を最大化するミーティングマネジメントツール 10

Slide 11

Slide 11 text

Bengo4.com, Inc. 契約締結から契約書管理まで可能なクラウド型の電子契約サービス契約交渉が済んだ完成済の契約書をアップロードし、相手方が承認するだけで契約を締結することが出来ます書類の受信者はクラウドサインに登録する必要がありません 11 クラウドサイン

Slide 12

Slide 12 text

Bengo4.com, Inc. 本編 12

Slide 13

Slide 13 text

Bengo4.com, Inc. ことの始め 13

Slide 14

Slide 14 text

Bengo4.com, Inc. リモートワークでスクラム開発 14

Slide 15

Slide 15 text

Bengo4.com, Inc. オンラインでプランニングポーカー 15

Slide 16

Slide 16 text

Bengo4.com, Inc. しっくりくる既存アプリがない 16

Slide 17

Slide 17 text

Bengo4.com, Inc. →作る 17

Slide 18

Slide 18 text

Bengo4.com, Inc. PPAP: Planning Poker App Portable 18

Slide 19

Slide 19 text

Bengo4.com, Inc. 今日はこれができるまでの話 19

Slide 20

Slide 20 text

Bengo4.com, Inc. 技術スタック決め 20

Slide 21

Slide 21 text

Bengo4.com, Inc. 画面は Vue で作る (固い意志) 21

Slide 22

Slide 22 text

Bengo4.com, Inc. →開発ツールは Vite 22

Slide 23

Slide 23 text

Bengo4.com, Inc. プランニングポーカーするならサーバーが必要 23

Slide 24

Slide 24 text

Bengo4.com, Inc. (Node.js じゃいつも通りだなぁ ……) 24

Slide 25

Slide 25 text

Bengo4.com, Inc. → Deno 25

Slide 26

Slide 26 text

Bengo4.com, Inc. Deno で Vite 動かせるんだろうか…… 26

Slide 27

Slide 27 text

Bengo4.com, Inc. →動かせます！ 27

Slide 28

Slide 28 text

Bengo4.com, Inc. Deno 1.28 (2022/11)から npm に対応 28 https://deno.com/blog/v1.28 https://docs.deno.com/runtime/reference/npm/#npm--specifiers

Slide 29

Slide 29 text

Bengo4.com, Inc. 公式ドキュメントにチュートリアルがある 29 https://docs.deno.com/deploy/tutorials/vite/

Slide 30

Slide 30 text

Bengo4.com, Inc. ①DenoでもViteが使える〜完〜 30

Slide 31

Slide 31 text

Bengo4.com, Inc. おもむろに作る 31

Slide 32

Slide 32 text

Bengo4.com, Inc. クライアントサイドもサーバーサイドも TS 32

Slide 33

Slide 33 text

Bengo4.com, Inc. 型定義が共有できていい (この程度の規模ならね ) 33

Slide 34

Slide 34 text

Bengo4.com, Inc. 現れるつらみ 34

Slide 35

Slide 35 text

Bengo4.com, Inc. 35 importのfromを相対パスで遡って指定している

Slide 36

Slide 36 text

Bengo4.com, Inc. ルートから辿りたい 36

Slide 37

Slide 37 text

Bengo4.com, Inc. プロジェクトルートを `@/` と表そう 37

Slide 38

Slide 38 text

Bengo4.com, Inc. クライアントサイド (Vite)とサーバーサイド (Deno)がある 38

Slide 39

Slide 39 text

Bengo4.com, Inc. 両方やらねば 39

Slide 40

Slide 40 text

Bengo4.com, Inc. Vite 40

Slide 41

Slide 41 text

Bengo4.com, Inc. vite.conﬁg.ts で `resolve.alias` 41

Slide 42

Slide 42 text

Bengo4.com, Inc. 42 https://ja.vitejs.dev/config/shared-options#resolve-alias

Slide 43

Slide 43 text

Bengo4.com, Inc. 設定 43

Slide 44

Slide 44 text

Bengo4.com, Inc. 44 vite.conﬁg.ts

Slide 45

Slide 45 text

Bengo4.com, Inc. Deno 45

Slide 46

Slide 46 text

Bengo4.com, Inc. deno.json で `imports` 46

Slide 47

Slide 47 text

Bengo4.com, Inc. 47 https://docs.deno.com/runtime/fundamentals/configuration/#custom-path-mappings

Slide 48

Slide 48 text

Bengo4.com, Inc. 設定 48

Slide 49

Slide 49 text

Bengo4.com, Inc. 49 deno.json

Slide 50

Slide 50 text

Bengo4.com, Inc. ビルドは通るアプリも動く 50

Slide 51

Slide 51 text

Bengo4.com, Inc. 無事に済んだかと思いきや 51

Slide 52

Slide 52 text

Bengo4.com, Inc. 52 エディタ上の .vue ファイルでエラー 😭

Slide 53

Slide 53 text

Bengo4.com, Inc. Visual Studio Code 53

Slide 54

Slide 54 text

Bengo4.com, Inc. 54 : deno.json : vite.conﬁg.ts : ???

Slide 55

Slide 55 text

Bengo4.com, Inc. 55 : deno.json : vite.conﬁg.ts : Vue - Ofﬁcial

Slide 56

Slide 56 text

Bengo4.com, Inc. 56 : deno.json : vite.conﬁg.ts : : tsconﬁg.json

Slide 57

Slide 57 text

Bengo4.com, Inc. tsconﬁg.json で `paths` 57

Slide 58

Slide 58 text

Bengo4.com, Inc. 58 https://www.typescriptlang.org/tsconfig/#paths

Slide 59

Slide 59 text

Bengo4.com, Inc. 設定 59

Slide 60

Slide 60 text

Bengo4.com, Inc. 60 tsconﬁg.json

Slide 61

Slide 61 text

Bengo4.com, Inc. 61 エラーなくインポート 🤩

Slide 62

Slide 62 text

Bengo4.com, Inc. めでたしめでたし 62

Slide 63

Slide 63 text

Bengo4.com, Inc. 予告 63

Slide 64

Slide 64 text

Bengo4.com, Inc. 2024.10.19 Vue Fes Japan 2024 64

Slide 65

Slide 65 text

Bengo4.com, Inc. 弊社より2名登壇 65

Slide 66

Slide 66 text

Bengo4.com, Inc. 66 https://vuefes.jp/2024/sessions/keisuke-tsuji https://vuefes.jp/2024/sessions/tsuno