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
100
個人開発から学ぶ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 2023
chinen
1
280
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
1.1k
WWDC2023-Recap-LT
chinen
1
85
Web Push対応状況2023
chinen
0
420
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
110
Three.jsで3Dぷわんを動かす / PWA Night vol.46
chinen
0
120
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.2k
frontend-conf-okinawa-2022
chinen
0
340
Jamstack導入時の罠/ジャムスタックチョットデキル!! 秋のLT大会2022
chinen
1
300
Other Decks in Programming
See All in Programming
Build with AI 2024 Seoul - 제로부터 시작하는 Flutter with Gemini 생활 - 박제창
itsmedreamwalker
0
200
CQRS/ES avec Symfony, c’est (trop) bien !
jeremyfreeagent
1
630
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
3
490
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
160
Folding Cheat Sheet #2
philipschwarz
PRO
0
110
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
270
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.2k
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
210
Ruby Function Composition
bkuhlmann
1
330
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
210
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
190
pixivアプリでマルチモジュールを実現するまで
gatosyocora
1
130
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
320
20k
The Language of Interfaces
destraynor
151
23k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
Pencils Down: Stop Designing & Start Developing
hursman
116
11k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
Docker and Python
trallard
33
2.7k
Making the Leap to Tech Lead
cromwellryan
123
8.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
355
22k
Principles of Awesome APIs and How to Build Them.
keavy
119
16k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Into the Great Unknown - MozCon
thekraken
10
980
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水曜 オンライン開催