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

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水曜
 オンライン開催