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
Swift Concurrency - 状態監視の罠
objectiveaudio
2
450
dynamic!
moro
9
6.5k
XP, Testing and ninja testing ZOZ5
m_seki
2
280
どの様にAIエージェントと 協業すべきだったのか?
takefumiyoshii
2
600
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
0
380
メモリ不足との戦い〜大量データを扱うアプリでの実践例〜
kwzr
1
860
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
450
GraphQL×Railsアプリのデータベース負荷分散 - 月間3,000万人利用サービスを無停止で
koxya
1
1.1k
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
170
Let's Write a Train Tracking Algorithm
twocentstudios
0
220
株式会社 Sun terras カンパニーデック
sunterras
0
220
実践AIチャットボットUI実装入門
syumai
7
2.5k
Featured
See All Featured
Facilitating Awesome Meetings
lara
56
6.6k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Balancing Empowerment & Direction
lara
4
680
Measuring & Analyzing Core Web Vitals
bluesmoon
9
610
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Producing Creativity
orderedlist
PRO
347
40k
Mobile First: as difficult as doing things right
swwweet
224
10k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
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水曜 オンライン開催