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で遊んでみよう
Search
ショウノシオリ
June 22, 2017
Programming
0
82
Vue.jsで遊んでみよう
2017/6/22 v-osakaの登壇資料です。
かなり超初心者向けの内容です。
ショウノシオリ
June 22, 2017
Tweet
Share
More Decks by ショウノシオリ
See All by ショウノシオリ
Nuxt / Vue 開発でやりがちな 「読みづらい」「わかりづらい」コード
sshono1210
0
210
開発チームのリーダーとしてどうあるべきか?
sshono1210
3
1.2k
Nuxt.js のディレクトリ
sshono1210
0
2.9k
Nuxt.js で SSR 対応する
sshono1210
1
2.2k
array_merge と array_push の違いについて
sshono1210
0
520
全くデザインを勉強したことのないエンジニアが「なるほどデザイン」を読んで少しだけ勉強した話
sshono1210
0
220
Vue.js の methods と computed
sshono1210
0
100
すぐに使える ES2015 の基本構文3つ
sshono1210
0
74
肌で感じたディレクションとマネジメント
sshono1210
0
65
Other Decks in Programming
See All in Programming
Understanding Kotlin Multiplatform
l2hyunwoo
0
120
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
180
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
490
20250708_JAWS_opscdk
takuyay0ne
2
150
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
4
670
MCPで実現できる、Webサービス利用体験について
syumai
7
1.9k
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
470
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
24
10k
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
4
1.2k
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
3
260
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
480
AI Ramen Fight
yusukebe
0
110
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.7k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
How to train your dragon (web standard)
notwaldorf
96
6.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Gamification - CAS2011
davidbonilla
81
5.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
530
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Docker and Python
trallard
45
3.5k
Transcript
Vue.js で遊んでみよう
自己紹介 ショウノシオリ @shosho_egg ・株式会社 chatbox エンジニア ・フロントやったり、 PHPやったり ・Laravel と
Vue.js で管理画面を作ったりしています ・Qiita:shosho
アジェンダ ▷ 0. Vue.js とは? ▷ 1. 準備をしよう ◦ インストール
▷ 2. 「Hello Vue!」を表示する ◦ 基本的なVueの記法 ▷ 3. ボタンを押してメッセージを変えよう ◦ methodsで関数を登録 ◦ @click で関数を呼び出す ▷ 4. フォーム値をリアルタイムで出力してみよう ◦ 双方向バインディング v-model ▷ 5. 最初にアラートを出してみよう ◦ created ◦ ライフサイクルダイアグラム
0. Vue.js とは?
初心者でも触りやすいJSフレームワーク ▷ 「少しずつ始められて、柔軟に使えるJSフレームワーク」 といった感じ ◦ 「見た目」と「データ」を分けて記述 するので、「見た目だけの変更」など に対応しやすい ◦ モノリシックなフレームワークではなく、部分的に利用可能
▷ 最新 ver. は 2.x ▷ ドキュメントが充実 ◦ 英語 https://vuejs.org/ ◦ 日本語 https://jp.vuejs.org/
シンプルなので組み合わせて使うとよい◎ ▷ APIを叩いたりはできないので、他のライブラリなどを利 用する ◦ superagent を利用したり ◦ データをごっそりAPI経由で送れるので、Laravel のBladeと組み合わ
せて使ってみたりしてます
1. 準備
準備をしよう ▷ ドキュメント通りにすればOK ◦ 日本語ドキュメント https://jp.vuejs.org/v2/guide/installation.html ▷ 開発 / 本番モードがあるので注意
2. 「Hello Vue!」
$(()=>{ var app = new Vue({ el : ‘#app’, data
: { message: ‘Hello Vue!’ } }); }); ▷ 動かし方:new Vue({...}) と書く ▷ 適用範囲:el で指定 ◦ el がないと動かない ◦ 今回は id で指定したが、クラス指定でも動く ▷ データの記述場所:data 「Hello Vue!」を表示する(JS側)
<div id=”app”> <p>{{ message }}</p> </div> ▷ {{ message }}
でデータバインディングができる ▷ el の指定を忘れないこと 「Hello Vue!」を表示する(HTML側)
結果 ▷ ブラウザに「Hello Vue!」と出力される
3. クリックイベント
data : { message: ‘Hello Vue!’ }, methods : {
changeMessage(){ this.message = ‘How are you?’; } } ▷ 関数を登録:methods ◦ this.message で登録した data にアクセスできる ◦ changeMessage 関数を呼び出すと this.message を違うメッ セージで代入 ボタンを押してメッセージを変えよう(JS側)
<div id=”app”> <p>{{ message }}</p> <button @click=”changeMessage”>click Here!!</button> </div> ▷
@click でイベントが発動する ◦ ボタンが押されると methods の changeMessage が実行される ▷ @click は v-on:click の略 ボタンを押してメッセージを変えよう(HTML側)
結果 ▷ 変わります
4. 双方向バインディング
▷ 双方向バインディング:v-model ◦ フォームの値を動的に取得することができる ▷ データが双方向でバインディング(紐付け)されるため、フォーム値を 変更すると、{{ comment }} 内もリアルタイムで変わる
フォーム値をリアルタイムで出力してみよう (HTML側) <input type=”text” v-model=”comment”/> <p>確認:{{ comment }}</p>
▷ JS側で v-model の登録を忘れずに ◦ data で登録 ◦ 初期値が必要(今回は空の ‘’
で) ◦ 登録していないと {{ comment }} がテキストとして認識される フォーム値をリアルタイムで出力してみよう (JS側) data : { message: ‘Hello Vue!’, comment: ‘’ },
結果 ▷ 入力フォームに入れた値が「確認」の右横に表示される ◦ 入力値を変えると表示されるメッセージも変わる
5. ライフサイクルダイアグラム
▷ ブラウザを最初に読み込んだ時にアラート表示を実行 ▷ Vue 生成時に呼ぶ:created ◦ created が呼ばれた時にはまだ data の中身は読み込まれない
最初にアラートを出してみよう(JS側) methods : { changeMessage(){ this.message = ‘How are you?’; } }, created(){ alert(‘Vue.jsをはじめよう!’); }
ライフサイクルダイアグラム ▷ https://jp.vuejs.org/v2/guide/instance.html#ライフサイクルダイアグ ラム ◦ observe data:データがあるのか等のチェックはするが、まだデー タは埋め込まれない ◦ createdの時点にはまだ
data が入らない ◦ 赤字:イベント ◦ 実践:否が応でも進む方向 ◦ 点線:場合によって待ったりする方向 ◦ mountされる:データがはめ込まれる ◦ destroy:コンポーネントとかを読み終わったら。
結果 ▷ created が呼び出された段階ではまだ data が呼び出されていないので {{ message }} {{
comment }} のようになっている
他にもよく使うもの ▷ v-if ▷ v-for ▷ componentに分けたり
Vue.js でつくりたいもの ▷ 個人的に Vue.js で作っていた「持ち物アプリ」を完成 させたい ◦ SPAっぽいやつ
Qiita記事 ▷ Vue.js をちょっと使ってみる http://qiita.com/shosho/items/38273d099a41acd341c2 ▷ Vueにデバッグ関数を追加 http://qiita.com/shosho/items/7960293de6c6663a5a37 ▷ Vue.js
の「ライフサイクルダイアグラム」の見方 http://qiita.com/shosho/items/8a6692e773eb8175498a ▷ Vue.js のデータバインディングとレンダリング http://qiita.com/shosho/items/d2889b2e806d6a756d70 ▷ Vue.js の v-if をつけるとき http://qiita.com/shosho/items/7fa3235ff9cc2dc7b6db
Thanks! Any questions? You can find me at: @username
[email protected]