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 #1
Chinen
July 19, 2019
Technology
0
250
Vue.js初級編 / v-okinawa meetup #1
v-okinawa Vue.js/Nuxt.js meetup #1 初心者歓迎のセッション資料です。
Chinen
July 19, 2019
Tweet
Share
More Decks by Chinen
See All by Chinen
個人開発から学ぶVue.js開発環境 / v-okinawa Meetup #5
chinen
0
36
エンジニア目線でのShifter / Shifter Meetup 2021-09-08
chinen
1
180
Shifter Staticのサイトを PWAにしよう / PWA Night Conference 2021
chinen
0
800
Shifter staticでREST APIしたい / Shifter Meetup 2020-12-02
chinen
0
460
実践PWA 2020 / charitycon_oki2020
chinen
0
380
Shifterを選定するまでに検討したこと / shifter-meetup0603
chinen
0
520
FirebaseとVue.jsでWebアプリモック速攻開発 / v-okinawa #4
chinen
1
350
ポートフォリオ作る話 / PWA Night vol.12
chinen
0
53
Vue.jsの基礎 / v-okinawa meetup #2
chinen
0
110
Other Decks in Technology
See All in Technology
【個人的】オブジェクト指向の現在地
toranoana
0
150
JDK Flight Recorder入門
chiroito
1
510
oakのミドルウェアを書くときの技のらしきもの
toranoana
0
130
2024卒_freee_エンジニア職(ポテンシャル採用)_説明資料
freee
0
240
What's Data Lake ? Azure Data Lake best practice
ryomaru0825
2
740
Citizen 개발기
outsider
0
270
【toranoana.deno#7】Denoからwasmを呼び出す基礎
toranoana
0
120
Custom GitHub Actions by Java
kazamori
0
290
PUTとPOSTどっち使う?
hankehly
0
260
ソフトウェアライセンス 2022 / Software License 2022
cybozuinsideout
PRO
1
1.1k
Meet passkeys
satotakeshi
1
120
紙にまつわる苦しみを機能化してきた カミナシの歴史
kaminashi
0
1.1k
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
344
17k
YesSQL, Process and Tooling at Scale
rocio
157
12k
Git: the NoSQL Database
bkeepers
PRO
415
59k
Principles of Awesome APIs and How to Build Them.
keavy
113
15k
Creatively Recalculating Your Daily Design Routine
revolveconf
207
10k
Build The Right Thing And Hit Your Dates
maggiecrowley
19
1.2k
Keith and Marios Guide to Fast Websites
keithpitt
404
21k
Side Projects
sachag
450
37k
Stop Working from a Prison Cell
hatefulcrawdad
261
17k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
655
120k
Music & Morning Musume
bryan
35
4.2k
Docker and Python
trallard
27
1.6k
Transcript
Vue.js初級編 株式会社TAM 知念昌史 2019/7/19
知念 昌史 @TAM inc. • フロントエンドエンジニア(CSS、Vue.jsが好き) • 沖縄出身、大学卒業後に上京。美容師からWeb業界に転職。Web未経験 からスタートしてフロントエンド8年目 6月から沖縄移住(フルリモートワーク)
• 得意分野:HTML / CSS設計 / JavaScript / Vue.js / PWA / Movable Type / WordPress • 新人エンジニアのメンター • 企業向けにGit導入レクチャー
まぁし@chocodogmagic(Twitter) • 技術コミュニティ【PWA Night】自称アンバサダー • 技術書典6でPWA初心者向け本「実践PWA」を共著で頒布 • ポケモンが好き|主に公式ゲーム(ソード欲しい) • 映画も好き|6/28公開スパイダーマン見てきました!
Vue.js 知っている人ー??
Vue.jsとは ユーザーインターフェイスを構築するためのプログレッシブフレームワークです。(公式ド キュメント参照) https://jp.vuejs.org/
Vue.jsとよく比較されるもの React Angular Vue.js (Facebook) (Google) (Evan You)
特徴 1. 親しみやすい HTML・CSS・JavaScriptを知っていたらすぐに使える。 jQueryを使っていた人なら導入のハードルは高くない。 2. 融通が効く ページ内の1部分だけの導入も可能。1ページだけの導入もOK。 SPAフレームワークとしても使える。 3.
高性能 20kb(min+gzip) DOMの切り替えが早い。
実際にコードを見てみよう HTMLにVue.jsを読み込む シンプルに使いたい場合は、 CDNやローカルにダウンロードしたVue.js本体を読み込めばOK CDNで、 <script src="https://cdn.jsdelivr.net/npm/vue"></script> もしくはローカルにダウンロードして、 <script src="js/vue.js"></script>
GitHub サンプル
Vueインスタンスを作成して設定していく 1. new Vue()でVue.jsの設定をしていく “ Vue.jsのコアとなる機能は、データを DOM に描画することを可能にするシステ ムです。(公式ドキュメント参照)” 2.
Vueを適用するエリア(DOM)とデータ(data)の情報を記述する 3. Vue.jsのディレクティブで、if文やfor文も使える(v-if, v-for) DEMO
Vue.jsに向いているもの Webアプリケーション系 • リアルタイム絞り込み • 管理画面 • 社内システム などなど コーポレートサイトやブランドサイトなど静的な画面であれば
Vue.jsじゃなくてもjQueryで十分
Vue.jsを本格的に使う • シングルファイルコンポーネント(SFC) • ルーティング・・・Vue-router • 状態管理・・・Vuex • サーバーサイドレンダリング(SSR) Vue.jsを使ったフレームワーク
Nuxt.js・・・SSR、SPA、PWAなどの対応も簡単にしてくれる
まずは簡単なものから導入! どんどん試していきましょう!
ありがとうございました!!! Twitter 良かったらフォローしてね! まぁし@chocodogmagic PWAに興味ある人も 声かけてください!!