Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
個人開発から学ぶVue.js開発環境 / v-okinawa Meetup #5
Chinen
September 17, 2021
Programming
0
35
個人開発から学ぶ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
エンジニア目線でのShifter / Shifter Meetup 2021-09-08
chinen
1
160
Shifter Staticのサイトを PWAにしよう / PWA Night Conference 2021
chinen
0
780
Shifter staticでREST APIしたい / Shifter Meetup 2020-12-02
chinen
0
440
実践PWA 2020 / charitycon_oki2020
chinen
0
370
Shifterを選定するまでに検討したこと / shifter-meetup0603
chinen
0
510
FirebaseとVue.jsでWebアプリモック速攻開発 / v-okinawa #4
chinen
1
330
ポートフォリオ作る話 / PWA Night vol.12
chinen
0
49
Vue.jsの基礎 / v-okinawa meetup #2
chinen
0
110
Vue.js初級編 / v-okinawa meetup #1
chinen
0
240
Other Decks in Programming
See All in Programming
Reinventing the wheel ... as a service
mariofusco
3
250
roadmap to rust 2024
matsu7874
1
710
Explore Java 17 and beyond
josepaumard
3
640
Microsoft Teams の 会議アプリ開発のはじめかた / How to start Microsoft Teams app development
karamem0
0
1.5k
Micro Frontends with Module Federation: Beyond the Basics @jax2022
manfredsteyer
PRO
1
280
偏見と妄想で語るスクリプト言語としての Swift / Swift as a Scripting Language
lovee
2
250
職場にPythonistaを増やす方法
soogie
0
290
あなたの会社の古いシステム、なんとかしませんか?~システム刷新から考えるDX化への道筋とバリエーション~/webinar20220420-grapecity
grapecity_dev
0
130
Android入門
hn410
0
300
Get Ready for Jakarta EE 10
ivargrimstad
0
2.2k
Monadic Java
mariofusco
4
260
UI State Modeling 어떤게 좋을까?
laco2951
1
220
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
157
12k
Pencils Down: Stop Designing & Start Developing
hursman
112
9.8k
The Power of CSS Pseudo Elements
geoffreycrofte
46
3.9k
BBQ
matthewcrist
74
7.9k
Bash Introduction
62gerente
596
210k
Designing on Purpose - Digital PM Summit 2013
jponch
106
5.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
151
12k
Embracing the Ebb and Flow
colly
73
3.3k
A Modern Web Designer's Workflow
chriscoyier
689
180k
Documentation Writing (for coders)
carmenhchung
48
2.5k
GraphQLの誤解/rethinking-graphql
sonatard
24
6.2k
A better future with KSS
kneath
225
15k
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水曜 オンライン開催