Tweet
Tweet

Slide 1

Slide 1 text

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


Slide 2

Slide 2 text

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


Slide 3

Slide 3 text

こんなの作ってます


Slide 4

Slide 4 text

Vue.jsで開発しよう


Slide 5

Slide 5 text

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


Slide 6

Slide 6 text

SampleコードはGitHubにもあります https://github.com/chinen-octtn/VueSample

Slide 7

Slide 7 text

1. scriptタグを使って読み込み
 これはCDN。ローカルにダウン ロードしたJSでもOK

Slide 8

Slide 8 text

こんな感じ
 app.js


Slide 9

Slide 9 text

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


Slide 10

Slide 10 text

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


Slide 11

Slide 11 text

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


Slide 12

Slide 12 text

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


Slide 13

Slide 13 text

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


Slide 14

Slide 14 text

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


Slide 15

Slide 15 text

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


Slide 16

Slide 16 text

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


Slide 17

Slide 17 text

ローカル開発環境


Slide 18

Slide 18 text

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


Slide 19

Slide 19 text

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


Slide 20

Slide 20 text

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


Slide 21

Slide 21 text

Jamstackもいける


Slide 22

Slide 22 text

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


Slide 23

Slide 23 text

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


Slide 24

Slide 24 text

Vue.jsはいいぞ


Slide 25

Slide 25 text

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