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
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
290
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
820
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
130
5つのアンチパターンから学ぶLT設計
narihara
1
170
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
220
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
690
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.3k
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
510
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
530
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
260
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Fireside Chat
paigeccino
37
3.5k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Done Done
chrislema
184
16k
How GitHub (no longer) Works
holman
314
140k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
4 Signs Your Business is Dying
shpigford
184
22k
Why Our Code Smells
bkeepers
PRO
336
57k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Optimizing for Happiness
mojombo
379
70k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
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に興味ある人も 声かけてください!! 技術書典の共著本も持っ てきたよ!