toranoana@LT #26 × Vue3の登壇資料です。

1. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
Vue3でアプリ開発してみて
困ったこと4選
虎の穴ラボ 古賀
1

2. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
対象の人
● 日頃、Nuxt.jsやVue2（Vue-CLI/Webpack）で開発している
人
● Composition API初心者の人
● TypeScriptをあまり触ったことがない人
2

3. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
アジェンダ
1. @を使ってインポートができない
2. SVG画像の色を変えたい（Vite）
3. ロジックの共通化をしたい
4. コンポーネント連携のemitが動かない
5. まとめ
3

4. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
1. @を使ってインポートができない
Nuxt.jsの様に、いつもどおりに書きました
4
この場合、@が解決できずエラーになりま
す

5. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
1. @を使ってインポートができない
ViteとTypeScriptのalias設定を追加します
5
tsconfig.jsonにpathsの設定を追加 vite.config.tsにaliasの設定を追加
※ これと同等の設定はvue-cli（webpack）でも必要です

6. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
Nuxt.jsが良い感じにしてる部
分はVue3にはない
6
日頃、Nuxt.jsを使ってて無意識でした 😱

7. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
2. SVG画像の色を変えたい
srcフォルダに置いた、SVGファイルを読み込もうとしましたが、、、
7
読み込まれない・・・！！
Chromeの開発者ツールで確認すると
これでは、読み込まれない

8. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
2. SVG画像の色を変えたい
実際のソースコード（NGパターン1）
8
imgのsrcにsvgのファイルパスを書く

9. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
実際のソースコード（NGパターン2）
2. SVG画像の色を変えたい
9
svgのファイルをインポートする
インポートしたSVGをsrc属性にバインドする

10. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
そういえば、vue-svg-loader
が必要だった😱
10

11. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
vue-svg-loader を見るとVite
に非対応っぽい
😱
11

12. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
そうだ、vite-svg-loader を使おう！
2. SVG画像の色を変えたい
12
SVGをインポートする
（TypeScript の場合、?componet を付ける）

13. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
vite-svg-loader を使おう！
2. SVG画像の色を変えたい
13
SVGをコンポーネントとして記載する
SVGが表示された！！

14. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
vite-svg-loader を使おう！
2. SVG画像の色を変えたい
14
SVGのコンポーネントにclassを記載する
SVGの色が変わった！！

15. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
Viteの場合は
vite-svg-loaderを使おう！！
15
Viteでビルドする場合は、 vue-cli（webpack）ではない！

16. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
3. ロジックの共通化をしたい
firebase functionsのエミュレータの初期化処理を共通化したい！
16
すべてのfunction呼び出しにこの処理
を書いていた・・・！！

17. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
3. ロジックの共通化をしたい
Vue2で、mixin/pluginを使ってたので代替手段を探しましたが、、、
見当たらず😱
mixin は Composition API で非推奨らしい
（どこの記事で見たか忘れました
🙏）
17

18. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
3. ロジックの共通化をしたい
この件を、とらラボの朝活チャンネルで相談したところ
18
Composition APIなら
mixinする必要あんまりないのでは。
たしかにそうかも。。。

19. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
3. ロジックの共通化をしたい
アドバイスを元に普通にtsファイルをimportするようにしました
19
共通関数を記載した、 tsファ
イルをインポート
共通関数を呼び出しする

20. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
3. ロジックの共通化をしたい
作成したtsファイル
20
作成した、共通関数

21. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
Vue3でロジックを共通化した
い場合はimportしよう！！
21
Composition APIの場合

22. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
4. コンポーネント連携のemitが動かない
ボタンをクリックしたら、”click”をemitする！
22
Vue2/Nuxt.jsの様に、いつもどおりに書き
ました

23. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
4. コンポーネント連携のemitが動かない
うごかない。。。。
ボタンを押しても、clickイベントが発火しない😱
公式サイトを見ながら、調べてみました💪
23

24. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
4. コンポーネント連携のemitが動かない
原因1：exportにemitsにイベント名を書いてない
emitsを書いてない
24
Composition APIで必要になった

25. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
4. コンポーネント連携のemitが動かない
原因2：emitを宣言してない
25
Composition APIでは、this.$emitではなく
なった

26. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
原因3：event.targetは常にHTMLButtonElementではない
4. コンポーネント連携のemitが動かない
26
emitを実行する分岐に入らない
※ Buttonタグ内のsvgの部分をクリックすると、 svgタグに
なる

27. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
修正後
4. コンポーネント連携のemitが動かない
27
原因1〜3を修正した後😆

28. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
困ったら、公式ドキュメントをみよ
う！
28
Vueは日本語のドキュメントが整備されてるので助かる！

29. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
まとめ！
29
Vue3でサービスを作ってみた感想 🙌

30. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
7. まとめ
Vue3はVue2／Nuxt.jsの知識がそこそこ活かせる。
困ったら、
1. Vue3の公式サイト(日本語)
2. StackOverflow（英語の方）
3. vuejs/vue-next（英語）のIssueを探す
（開発する前に、テックカンファレンスの藤原さんの登壇資料を読むとすんなり入れます）
（情報量が少ないので、困ったら公式。新しいフレームワークあるある。）
30

31. Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
ご静聴、ありがとうございました
31