SlideShare una empresa de Scribd logo
1 de 73
Descargar para leer sin conexión
Vue.jsに、	
  
ありがとう	
@carotene4035
自己紹介	
  	
•  サーバ(時々フロント)エンジニア	
  
•  Qiitaが好き	
  
	
  
•  最近、詐欺にあいかけた
Qiita
Qiita
詐欺	
•  最近、詐欺にあいかけました	
  
•  仲良くなった女性から	
  
マンション買わされそうになりました	
  
•  皆も気をつけようね(有楽町/御徒町ヤバイ)
本題
最近のフレームワークは	
  
便利だな〜
双方向データバインディング
リアクティブシステム
こちらがあまり書かなくても、	
  
勝手にやってくれる
すごい楽
だだ………
大体の人にとって、ブラックボックス
別にいいや	
  
Vueがよしなにやってくれるし
そう、	
  
信じてた
しかし最近、
身の回りのことが	
  
いろいろ	
  
信じられなくなってきた
そう、きっかけは
だまされたこと
何も信じられなく	
  
なってしまった
「自分が今まで書いてきた	
  
ソースコード」
果たして	
  
正しかったのか?
「只今	
  
サーバメンテナンス中です」
本当に	
  
メンテナンスしているのか?
何もかもが、	
  
信じられなくなり、
ついに矛先はVue.jsへ
双方向データバインディング
リアクティブシステム
「これ、	
  
本当にVueが	
  
やっているのか?」
「ぜんぜん違うやつ	
  
(Reactとか)に	
  
仕事ぶんなげてるんじゃ?」
イメージ
錯乱する僕の頭の中で	
  
1つの説が生まれた
Vue.js、サボってる説
検証
リアクティブシステム
data	
  objectから、	
  
算出プロパティに	
  
	
  
「値が変わったよ」と	
  
通知する必要がある
本当にVueが	
  
通知しているのか?
ソースコードを読むと…
してた……	
  
	
  
h;ps://github.com/vuejs/vue/blob/dev/src/core/observer/index.js	
  
(170行目付近)
data	
  object	
  は	
  
ge;erとse;erをもっている
そして、自身と依存関係にある	
  
算出プロパティを知っている
ただ、はじめは	
  
依存関係を知らない	
  
	
  
空っぽ
つまり、この状態
これを
こうしたい
依存関係、	
  
だれが解決してるの?
ソースコードを読むと…
やっぱり	
  
Vueが解決してた…	
  
	
  
h;ps://github.com/vuejs/vue/blob/dev/src/core/observer/index.js	
  
(190行目付近)
すでに依存関係の解決が	
  
できているから、	
  
通知ができる
時系列	
依存関係解決	
 通知
結論
Vue.js、サボってなかった
それどころか、	
  
ほんとうにいろいろ	
  
やってくれていた
文句も言わずに…
疑ってごめんな…
Vue.js	
  …
ご清聴、	
  
ありがとうございました

Más contenido relacionado

La actualidad más candente

AssetBundle (もどき) の作り方
AssetBundle (もどき) の作り方AssetBundle (もどき) の作り方
AssetBundle (もどき) の作り方Mori Tetsuya
 
MySQLの系譜について少々
MySQLの系譜について少々MySQLの系譜について少々
MySQLの系譜について少々yoku0825
 
Rubyで始めるWebスクレイピング
Rubyで始めるWebスクレイピングRubyで始めるWebスクレイピング
Rubyで始めるWebスクレイピングTakuro Sasaki
 
今日からはじめるリファクタリング
今日からはじめるリファクタリング今日からはじめるリファクタリング
今日からはじめるリファクタリングJunya Shimazu
 
React+fluxを導入した話
React+fluxを導入した話React+fluxを導入した話
React+fluxを導入した話Yuki Ishikawa
 
サーバを運用する時代は終わった
サーバを運用する時代は終わったサーバを運用する時代は終わった
サーバを運用する時代は終わったYuki Ishikawa
 
リアルタイムweb入門
リアルタイムweb入門リアルタイムweb入門
リアルタイムweb入門Hiromu Shioya
 
WordPressの構造を理解しよう
WordPressの構造を理解しようWordPressの構造を理解しよう
WordPressの構造を理解しようKanako Kobayashi
 

La actualidad más candente (9)

AssetBundle (もどき) の作り方
AssetBundle (もどき) の作り方AssetBundle (もどき) の作り方
AssetBundle (もどき) の作り方
 
MySQLの系譜について少々
MySQLの系譜について少々MySQLの系譜について少々
MySQLの系譜について少々
 
Rubyで始めるWebスクレイピング
Rubyで始めるWebスクレイピングRubyで始めるWebスクレイピング
Rubyで始めるWebスクレイピング
 
今日からはじめるリファクタリング
今日からはじめるリファクタリング今日からはじめるリファクタリング
今日からはじめるリファクタリング
 
React+fluxを導入した話
React+fluxを導入した話React+fluxを導入した話
React+fluxを導入した話
 
サーバを運用する時代は終わった
サーバを運用する時代は終わったサーバを運用する時代は終わった
サーバを運用する時代は終わった
 
gulp芸
gulp芸gulp芸
gulp芸
 
リアルタイムweb入門
リアルタイムweb入門リアルタイムweb入門
リアルタイムweb入門
 
WordPressの構造を理解しよう
WordPressの構造を理解しようWordPressの構造を理解しよう
WordPressの構造を理解しよう
 

Más de Kamimura Taichi

ruby 関数化のメリット
ruby 関数化のメリットruby 関数化のメリット
ruby 関数化のメリットKamimura Taichi
 
わからないことがわからないときにどうしたらよいのか。
わからないことがわからないときにどうしたらよいのか。わからないことがわからないときにどうしたらよいのか。
わからないことがわからないときにどうしたらよいのか。Kamimura Taichi
 
Session管理とRailsのcookie store
Session管理とRailsのcookie storeSession管理とRailsのcookie store
Session管理とRailsのcookie storeKamimura Taichi
 
Ruby - オブジェクト指向入門
Ruby - オブジェクト指向入門Ruby - オブジェクト指向入門
Ruby - オブジェクト指向入門Kamimura Taichi
 
Ansible roleとinventoryの書き方
Ansible roleとinventoryの書き方Ansible roleとinventoryの書き方
Ansible roleとinventoryの書き方Kamimura Taichi
 
What is git commit? - git commitって何なの?
What is git commit? - git commitって何なの?What is git commit? - git commitって何なの?
What is git commit? - git commitって何なの?Kamimura Taichi
 

Más de Kamimura Taichi (11)

ruby 関数化のメリット
ruby 関数化のメリットruby 関数化のメリット
ruby 関数化のメリット
 
ajaxってなんなの
ajaxってなんなのajaxってなんなの
ajaxってなんなの
 
わからないことがわからないときにどうしたらよいのか。
わからないことがわからないときにどうしたらよいのか。わからないことがわからないときにどうしたらよいのか。
わからないことがわからないときにどうしたらよいのか。
 
Session管理とRailsのcookie store
Session管理とRailsのcookie storeSession管理とRailsのcookie store
Session管理とRailsのcookie store
 
git addの解説
git addの解説git addの解説
git addの解説
 
Ruby - オブジェクト指向入門
Ruby - オブジェクト指向入門Ruby - オブジェクト指向入門
Ruby - オブジェクト指向入門
 
Ansible roleとinventoryの書き方
Ansible roleとinventoryの書き方Ansible roleとinventoryの書き方
Ansible roleとinventoryの書き方
 
vim入門
vim入門vim入門
vim入門
 
Ansible超入門
Ansible超入門Ansible超入門
Ansible超入門
 
What is git commit? - git commitって何なの?
What is git commit? - git commitって何なの?What is git commit? - git commitって何なの?
What is git commit? - git commitって何なの?
 
angularJS vs angular2
angularJS vs angular2angularJS vs angular2
angularJS vs angular2
 

Vuejs meetup