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 #2
Search
Chinen
October 25, 2019
Programming
0
180
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
MTDDC Meetup TOKYO 2024 / フロントエンドエンジニアの成長に繋がるCMS設計
chinen
0
110
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
2.6k
MTDDC Meetup TOKYO 2023
chinen
2
380
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
2k
WWDC2023-Recap-LT
chinen
1
160
Web Push対応状況2023
chinen
0
580
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
210
Three.jsで3Dぷわんを動かす / PWA Night vol.46
chinen
0
220
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.5k
Other Decks in Programming
See All in Programming
PicoRuby on Rails
makicamel
2
130
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
12
4.5k
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
1
10k
Hack Claude Code with Claude Code
choplin
4
2.1k
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
760
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
200
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
220
生成AI時代のコンポーネントライブラリの作り方
touyou
1
220
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
820
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
550
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
320
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Adopting Sorbet at Scale
ufuk
77
9.5k
Producing Creativity
orderedlist
PRO
346
40k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Embracing the Ebb and Flow
colly
86
4.7k
Speed Design
sergeychernyshev
32
1k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
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に興味ある人も 声かけてください!! 技術書典の共著本も持っ てきたよ!