個人開発から学ぶVue.js開発環境 / v-okinawa Meetup #5

https://v-okinawa.connpass.com/event/223357/

v-okinawa Meetup #5 LT大会の登壇資料です。

Transcript

1. 個人開発から学ぶ
 Vue.js開発環境
 2021/9/17　まぁし

2. 知念 昌史 / まぁし@chocodogmagic
 TAM/TAMTOのフロントエンドエンジニア
 • 沖縄でリモートワーク
 • 技術コミュニティ運営
 ◦ PWA Night（東京）/ v-okinawa（沖縄） 
 ◦ 平日朝9時からTwitter SpacesでWeb雑談 
 • ものづくりが好き
 ◦ イラスト、ゲーム、アプリ、漫画、小説 
 • ベテランポケモントレーナー
 • スプラトゥーン頑張ってウデマエSめざしてる

3. こんなの作ってます

4. Vue.jsで開発しよう

5. Vue.jsを使った開発手法3選
 1. scriptタグを使って読み込み
 ◦ リアクティブ
 2. Vue CLIやViteを使ったビルド環境
 ◦ コンポーネント開発
 ◦ SFC（Single File Component） 
 3. Nuxt.jsを使った開発・デプロイ環境
 ◦ SSG（静的サイトジェネレーター） 
 理解度や複雑度に応じて段階的に取り組める！
 （逆にいろいろなやり方があって初学者は混乱するかも？）

6. SampleコードはGitHubにもあります https://github.com/chinen-octtn/VueSample
7. 1. scriptタグを使って読み込み
 これはCDN。ローカルにダウン ロードしたJSでもOK
8. こんな感じ
 app.js

9. Vue.jsでリアクティブに切り替わる
 画面を作れた

10. 2. Vue CLIやViteを使ったビルド環境
 Vite
 

11. HTML/JS/CSSがひとつのファイルに→SFC
 HelloWorld.vue
 .vueファイルが一つのコンポーネントになってい る。
 複数のコンポーネントを組み合わせてページを 作っていく。
 コンポーネントの中で
 別のコンポーネントを呼び出す
 こともある。

12. index.htmlの中はこれしかない

13. ローカルサーバーで開発できる

14. コンポーネント開発
 完全に理解した

15. 3. Nuxt.jsを使った開発・デプロイ環境

16. ルールがある
 ディレクトリ
 • コンポーネントは components に入れる
 • 表示したいページは pages に入れる
 • 静的ファイルや画像などは static に入れる
 etc
 nuxt.config.js
 → meta情報やファイル生成の設定等
 

17. ローカル開発環境

18. 静的サイトジェネレーター

19. 細かくて見えないけどHTMLできてる

20. netlify等のHostingサービスで自動buildしてくれる
 https://www.netlify.com/

21. Jamstackもいける

22. 最初は簡単にscriptタグで
 ↓
 コンポーネント開発ならViteやCLI
 ↓
 サイト制作やJamstackならNuxt

23. ちなみに
 コスパ計算アプリはscriptタグ版で公開中
 ※PWAにも対応してるよ
 https://chi-memo-app.firebaseapp.com/whicheaper/
 現在、Nuxt版にするため制作中！
 （今週Nuxt 3のベータ版がリリースされたね！）
 
 個人サイトはVite版で公開中
 https://karachoco-code.netlify.app/

24. Vue.jsはいいぞ

25. ありがとうございました！！！
 Twitter @chocodogmagic
 まぁし
 フォローしてね！！
 PWA Night
 毎月第3水曜
 オンライン開催