jQueryを使った怖い話

kanazawa.rb #40 の発表です。 #kzrb

Transcript

1. 1 jQuery を使った怖い話
2. 2 who are you 石倉 昇 株式会社モンスター・ ラボ所属 受託でアプリとかWEB サー ビスとか作ってます 富山県の自宅でリモー トワー ク中 Twitter : @noboru_i
3. 個人活動 http://noboru-i.github.io/
4. 3 4 本題
5. 5 注意 このスライドに出てくる出来事はフィクションです。 実在の人物や団体などとは関係ありません。
6. 昔々、 あるところに動画共有サー ビスを受託した会社がありました。 （ 話を単純化するため、PC 限定とします）
7. 6 7 天の声（ お客様） １つの動画終わったら、 次の動画に自動で切り替わってね。
8. 8 エンジニア わかりました！ （ 次の動画ペー ジに遷移したらいいんだろ？ 簡単だな）
9. video タグのID はv i d e o だから・・・ v a r v = d o c u m e n t . g e t E l e m e n t B y I d ( ' v i d e o ' ) ; v . a d d E v e n t L i s t e n e r ( ' e n d e d ' , f u n c t i o n ( ) { l o c a t i o n . h r e f = ' h t t p s : / / h o g e . c o m / v i d e o / 2 ' } , f a l s e ) ;
10. 9 10 エンジニア 出来ました！ 見てください！
11. 11 天の声 いや、 こー ゆー んじゃ無いんだよ。 ニコ動とか見てみてよ。 切り替わるときに真っ白にならないでしょ？ そんな感じによろしく。
12. 12 エンジニア そうですね。。。 わかりました。 少々 お待ち下さい。 （ そういうことは先に言って欲しいなー）
13. ってことは、DOM を書き換えれば良いんだろ。 v a r v = d o c u m e n t . g e t E l e m e n t B y I d ( ' v i d e o ' ) ; v . a d d E v e n t L i s t e n e r ( ' e n d e d ' , f u n c t i o n ( ) { v . s r c = n e x t _ v i d e o . u r l ; } , f a l s e ) ;
14. 13 14 エンジニア 出来ました！
15. 15 天の声 あー、 そうそう。 こんな感じ。 ただ、 タイトル切り替えるの忘れてない？
16. 16 エンジニア あ・・・ 直します！
17. さっきのに追加して、 タイトルも変えればいいんだろ？ 忘れてただけで簡単簡単。 v a r v = d o c u m e n t . g e t E l e m e n t B y I d ( ' v i d e o ' ) ; v . a d d E v e n t L i s t e n e r ( ' e n d e d ' , f u n c t i o n ( ) { v . s r c = n e x t _ v i d e o . u r l ; $ ( ' . v i d e o _ t i t l e ' ) . t e x t ( n e x t _ v i d e o . t i t l e ) ; } , f a l s e ) ;
18. 17 18 エンジニア 出来ました！
19. 19 天の声 そうそう。 これでいい。 んじゃ次、 メタデー タいろいろあるから、 それ表示して。
20. 20 エンジニア そうなんですね。 対応します。 （ それ、 仕様追加じゃ。。。）
21. < d i v c l a s s = " v i d e o _ t i t l e " > < % = @ v i d e o . t i t l e % > < / d i v > < v i d e o s r c = " < % = @ v i d e o . u r l % > " > < / v i d e o > < d i v > < d i v c l a s s = " v i d e o _ d e s c r i p t i o n " > < % = @ v i d e o . d e s c r i p t i o n % > < / d i v > < d i v c l a s s = " v i d e o _ l e n g t h " > < % = @ v i d e o . l e n g t h % > < / d i v > < d i v c l a s s = " v i d e o _ p o s i t i o n " > < % = @ v i d e o . p o s i t i o n % > / < % = @ v i d e o . m a x _ p o s i t i o n % > < / d i v > < / d i v >
22. 21 22 エンジニア 出来ました！
23. 23 天の声 はいはい。 ありがと。 ただ、 次に切り替わった時もちゃんと変えてね。
24. 24 エンジニア あ、 はい。 今やります！
25. デー タはあるから、 それを適用したらいいだけだし。 簡単簡単。 v a r v = d o c u m e n t . g e t E l e m e n t B y I d ( ' v i d e o ' ) ; v . a d d E v e n t L i s t e n e r ( ' e n d e d ' , f u n c t i o n ( ) { v . s r c = n e x t _ v i d e o . u r l ; $ ( ' . v i d e o _ t i t l e ' ) . t e x t ( n e x t _ v i d e o . t i t l e ) ; $ ( ' . v i d e o _ d e s c r i p t i o n ' ) . t e x t ( n e x t _ v i d e o . d e s c r i p t i o n ) ; $ ( ' . v i d e o _ l e n g t h ' ) . t e x t ( n e x t _ v i d e o . l e n g t h ) ; $ ( ' . v i d e o _ p o s i t i o n ' ) . t e x t ( n e x t _ v i d e o . p o s i t i o n + ' / ' + n e x t _ v i d e o . m a x _ p o s i t i o n ) ; } , f a l s e ) ;
26. 25 26 エンジニア 出来ました！
27. 27 天の声 はい、 ありがとー。 次は、 前後の動画を出してね。
28. 28 天の声 じゃぁ、 関連動画も出そうか。
29. 29 天の声 動画にコメント付けれるようにしといて。
30. 30 天の声 あ、 もちろん、 次の動画に行くときは、 それらも変えてね。
31. 31 エンジニア え、 あ、 はい。 やります。
32. v a r v = d o c u m e n t . g e t E l e m e n t B y I d ( ' v i d e o ' ) ; v . a d d E v e n t L i s t e n e r ( ' e n d e d ' , f u n c t i o n ( ) { v . s r c = n e x t _ v i d e o . u r l ; $ ( ' . v i d e o _ t i t l e ' ) . t e x t ( n e x t _ v i d e o . t i t l e ) ; $ ( ' . v i d e o _ d e s c r i p t i o n ' ) . t e x t ( n e x t _ v i d e o . d e s c r i p t i o n ) ; $ ( ' . v i d e o _ l e n g t h ' ) . t e x t ( n e x t _ v i d e o . l e n g t h ) ; $ ( ' . v i d e o _ p o s i t i o n ' ) . t e x t ( n e x t _ v i d e o . p o s i t i o n + ' / ' + n e x t _ v i d e o . m a x _ p o s i t i o n ) ; f o r ( i n t i = 0 ; i < 4 ; i + + ) { $ s e r i e s _ b o x = $ ( ' . v i d e o _ s e r i e s _ ' + i ) ; $ ( ' . t i t i l e ' , $ s e r i e s _ b o x ) . t e x t ( s e r i e s [ i ] . t i t l e ) ; $ ( ' . t h u m b n a i l ' , $ s e r i e s _ b o x ) . s r c ( s e r i e s [ i ] . t h u m b n a i l ) ; } f o r ( i n t i = 0 ; i < 4 ; i + + ) { $ r e l a t e d _ b o x = $ ( ' . v i d e o _ r e l a t e d _ ' + i ) ; $ ( ' . t i t i l e ' , $ r e l a t e d _ b o x ) . t e x t ( r e l a t e d [ i ] . t i t l e ) ; $ ( ' . t h u m b n a i l ' , $ r e l a t e d _ b o x ) . s r c ( r e l a t e d [ i ] . t h u m b n a i l ) ; } $ ( ' . c o m m e n t _ b o x ' ) . e m p t y ( ) ; f o r ( i n t i = 0 ; i < 2 0 ; i + + ) { $ c o m m e n t = $ ( ' < d i v / > ' ) ; $ c o m m e n t . a p p e n d ( $ ( ' < d i v / > ' ) . a d d C l a s s ( ' c o m m e n t _ n a m e ' ) . t e x t ( c o m m e n t s [ i ] . n a m e ) ) ; $ c o m m e n t . a p p e n d ( $ ( ' < d i v / > ' ) . a d d C l a s s ( ' c o m m e n t _ c o n t e n t ' ) . t e x t ( c o m m e n t s [ i ] . c o n t e n t ) ) ; } } , f a l s e ) ;
33. 32 ・・・
34. 33 おわかりいただけただろうか
35. 34 こうやってDOM 操作が大量に増えていくのである。
36. 35 そして、 仕様変更によって表示項目が変わり、 さらに複雑化していくのである。
37. 36 ・・・
38. 37 まぁ、 バグも出ますよねぇ。
39. 38 39 解決策 1. テンプレー トエンジンを使う 2. vue.js とかReact とかを使う
40. jQuery は簡単に見た目を変えれますが、 使いすぎにはご注意を。
41. 40 41 ありがとうございました。