Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
個人開発から学ぶVue.js開発環境 / v-okinawa Meetup #5
Search
Chinen
September 17, 2021
Programming
0
110
個人開発から学ぶVue.js開発環境 / v-okinawa Meetup #5
https://v-okinawa.connpass.com/event/223357/
v-okinawa Meetup #5 LT大会の登壇資料です。
Chinen
September 17, 2021
Tweet
Share
More Decks by Chinen
See All by Chinen
MTDDC Meetup TOKYO 2024 / フロントエンドエンジニアの成長に繋がるCMS設計
chinen
0
110
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
2.6k
MTDDC Meetup TOKYO 2023
chinen
2
380
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
2k
WWDC2023-Recap-LT
chinen
1
160
Web Push対応状況2023
chinen
0
580
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
210
Three.jsで3Dぷわんを動かす / PWA Night vol.46
chinen
0
220
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.5k
Other Decks in Programming
See All in Programming
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
4
7.1k
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
380
Team operations that are not burdened by SRE
kazatohiei
1
310
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
440
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
120
生成AI時代のコンポーネントライブラリの作り方
touyou
1
210
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
680
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
780
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
510
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
410
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
95
6.1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Writing Fast Ruby
sferik
628
62k
Embracing the Ebb and Flow
colly
86
4.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Music & Morning Musume
bryan
46
6.6k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Raft: Consensus for Rubyists
vanstee
140
7k
Transcript
個人開発から学ぶ Vue.js開発環境 2021/9/17 まぁし
知念 昌史 / まぁし@chocodogmagic TAM/TAMTOのフロントエンドエンジニア • 沖縄でリモートワーク • 技術コミュニティ運営 ◦
PWA Night(東京)/ v-okinawa(沖縄) ◦ 平日朝9時からTwitter SpacesでWeb雑談 • ものづくりが好き ◦ イラスト、ゲーム、アプリ、漫画、小説 • ベテランポケモントレーナー • スプラトゥーン頑張ってウデマエSめざしてる
こんなの作ってます
Vue.jsで開発しよう
Vue.jsを使った開発手法3選 1. scriptタグを使って読み込み ◦ リアクティブ 2. Vue CLIやViteを使ったビルド環境 ◦ コンポーネント開発
◦ SFC(Single File Component) 3. Nuxt.jsを使った開発・デプロイ環境 ◦ SSG(静的サイトジェネレーター) 理解度や複雑度に応じて段階的に取り組める! (逆にいろいろなやり方があって初学者は混乱するかも?)
SampleコードはGitHubにもあります https://github.com/chinen-octtn/VueSample
1. scriptタグを使って読み込み これはCDN。ローカルにダウン ロードしたJSでもOK
こんな感じ app.js
Vue.jsでリアクティブに切り替わる 画面を作れた
2. Vue CLIやViteを使ったビルド環境 Vite
HTML/JS/CSSがひとつのファイルに→SFC HelloWorld.vue .vueファイルが一つのコンポーネントになってい る。 複数のコンポーネントを組み合わせてページを 作っていく。 コンポーネントの中で 別のコンポーネントを呼び出す こともある。
index.htmlの中はこれしかない
ローカルサーバーで開発できる
コンポーネント開発 完全に理解した
3. Nuxt.jsを使った開発・デプロイ環境
ルールがある ディレクトリ • コンポーネントは components に入れる • 表示したいページは pages に入れる
• 静的ファイルや画像などは static に入れる etc nuxt.config.js → meta情報やファイル生成の設定等
ローカル開発環境
静的サイトジェネレーター
細かくて見えないけどHTMLできてる
netlify等のHostingサービスで自動buildしてくれる https://www.netlify.com/
Jamstackもいける
最初は簡単にscriptタグで ↓ コンポーネント開発ならViteやCLI ↓ サイト制作やJamstackならNuxt
ちなみに コスパ計算アプリはscriptタグ版で公開中 ※PWAにも対応してるよ https://chi-memo-app.firebaseapp.com/whicheaper/ 現在、Nuxt版にするため制作中! (今週Nuxt 3のベータ版がリリースされたね!) 個人サイトはVite版で公開中 https://karachoco-code.netlify.app/
Vue.jsはいいぞ
ありがとうございました!!! Twitter @chocodogmagic まぁし フォローしてね!! PWA Night 毎月第3水曜 オンライン開催