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

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

06753262e041911692e9a771b1877036?s=47 Chinen
September 17, 2021

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

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

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

06753262e041911692e9a771b1877036?s=128

Chinen

September 17, 2021
Tweet

More Decks by Chinen

Other Decks in Programming

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