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
130
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
2.8k
MTDDC Meetup TOKYO 2023
chinen
2
390
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
2k
WWDC2023-Recap-LT
chinen
1
160
Web Push対応状況2023
chinen
0
590
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
220
Three.jsで3Dぷわんを動かす / PWA Night vol.46
chinen
0
230
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.5k
Other Decks in Programming
See All in Programming
Improving my own Ruby thereafter
sisshiki1969
1
160
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
470
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
1.9k
私の後悔をAWS DMSで解決した話
hiramax
4
210
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
170
rage against annotate_predecessor
junk0612
0
170
アルテニア コンサル/ITエンジニア向け 採用ピッチ資料
altenir
0
110
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
1.8k
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
110
print("Hello, World")
eddie
2
530
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
10
4.3k
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
500
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
920
Git: the NoSQL Database
bkeepers
PRO
431
66k
Statistics for Hackers
jakevdp
799
220k
Into the Great Unknown - MozCon
thekraken
40
2k
Fireside Chat
paigeccino
39
3.6k
Building an army of robots
kneath
306
46k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Building Applications with DynamoDB
mza
96
6.6k
Why Our Code Smells
bkeepers
PRO
339
57k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
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水曜 オンライン開催