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 #2
Chinen
October 25, 2019
Programming
0
110
Vue.jsの基礎 / v-okinawa meetup #2
v-okinawa meetup #2の紹介資料です。
初回#1と同じ内容です。
Chinen
October 25, 2019
Tweet
Share
More Decks by Chinen
See All by Chinen
個人開発から学ぶVue.js開発環境 / v-okinawa Meetup #5
chinen
0
35
エンジニア目線での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
500
FirebaseとVue.jsでWebアプリモック速攻開発 / v-okinawa #4
chinen
1
330
ポートフォリオ作る話 / PWA Night vol.12
chinen
0
49
Vue.js初級編 / v-okinawa meetup #1
chinen
0
240
Other Decks in Programming
See All in Programming
heyにおけるSREの大切さ~マルチプロダクト運用の「楽しさ」と「難しさ」および今後の展望~
fufuhu
3
1.3k
Angular's new Standalone Components: How Will They Affect My Architecture? @iJS London 2022
manfredsteyer
PRO
0
380
Milestoner
bkuhlmann
1
200
ゴーファーくんと学ぶGo言語の世界/golang-world-with-gopher
iwasiman
1
140
Let's make a contract: the art of designing a Java API
mariofusco
0
150
ゼロから作る Protocol Buffer のパーサーとレキサー / Writing Protocol Buffer Parser/Lexer in Go from scratch
yoheimuta
1
160
iOSアプリの技術選択2022
tattn
6
1.9k
C言語でメモリ管理を考えた話
hkawai
0
180
Develop your CI tools
xgouchet
2
180
型パラメータが使えるようになったのでLINQを実装してみた
makki_d
2
500
Micro Frontends with Module Federation: Beyond the Basics
manfredsteyer
PRO
0
300
확장 가능한 테라폼 코드 관리 (Scalable Terraform Code Management)
posquit0
1
290
Featured
See All Featured
Writing Fast Ruby
sferik
612
57k
Principles of Awesome APIs and How to Build Them.
keavy
113
15k
Bootstrapping a Software Product
garrettdimon
294
110k
What's in a price? How to price your products and services
michaelherold
229
9.3k
Designing for humans not robots
tammielis
241
23k
Design by the Numbers
sachag
271
17k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
125
8.5k
Code Reviewing Like a Champion
maltzj
506
37k
Learning to Love Humans: Emotional Interface Design
aarron
261
37k
How to train your dragon (web standard)
notwaldorf
57
3.8k
Facilitating Awesome Meetings
lara
29
3.9k
Designing for Performance
lara
596
63k
Transcript
Vue.jsの基礎 株式会社TAM 知念昌史 2019/10/25
知念 昌史 / まぁし@chocodogmagic(Twitter) • 株式会社TAMのフロントエンドエンジニア(CSS、Vue.jsが好き) • 東京オフィスに所属しつつ、2019年6月から沖縄でリモートワーク • 沖縄出身、大学卒業後に上京して美容師として就職、その後未経験から
Web業界に転職。 • 得意分野:HTML / CSS設計 / JavaScript / Vue.js / PWA / Movable Type / WordPress • 技術コミュニティ運営(沖縄 v-okinawa / 東京 PWA Night)
Vue.jsとは ユーザーインターフェイスを構築するためのプログレッシブフレームワークで す。(公式ドキュメント参照) https://jp.vuejs.org/
Vue.jsとよく比較されるもの React Angular Vue.js (Facebook) (Google) (Evan You)
Vue.jsの特徴 1. 親しみやすい HTML・CSS・JavaScriptを知っていたらすぐに使える。 jQueryを使っていた人なら導入のハードルは高くない。 2. 融通が効く サイト内で1ページだけの導入もOK。ページ内の1部分だけの導入も可能。 SPAフレームワークとしても使える。 3.
高性能 20kb(min+gzip)・・・ちなみにjQueryは88kb DOMの切り替えが早い。
実際にコードを見てみよう HTMLにscriptタグでVue.jsを読み込む シンプルに使いたい場合は、 CDNやダウンロードしたVue.js本体を読み込めばOK CDNで、 <script src="https://cdn.jsdelivr.net/npm/vue"></script> もしくはローカルにダウンロードして、 <script src="js/vue.js"></script>
GitHub サンプル
Vue.jsに向いているもの • リアルタイム絞り込み検索 • 管理画面 • 社内システム などなど画面内で要素が切り替わるようなWebサイト、Webアプリ コーポレートサイトやブランドサイトなど静的な画面であれば Vue.jsじゃなくてもjQueryで十分な場合もある!
さらにVue.jsを本格的に使う • シングルファイルコンポーネント(SFC)・・・1つのファイルにHTML・CSS・JSを記述 してコンポーネントとして管理する(〇〇.vue) • ルーティング・・・Vue-router • 状態管理・・・Vuex • サーバーサイドレンダリング(SSR)
Vue.jsを使ったフレームワーク Nuxt.js・・・SSR、SPA、PWAなどの対応を簡単にしてくれる
まずは簡単なものから導入! どんどん試していくのがおすすめ!
ありがとうございました!!! Twitter 良かったらフォローしてね! まぁし@chocodogmagic PWAに興味ある人も 声かけてください!! 技術書典の共著本も持っ てきたよ!