社内勉強会資料 PHPプロジェクトでのJavaScript

社内勉強会でJSについて話した時の資料

jQueryについてのちょっろとした話と
JSの中にPHPのタグを入れざるを得ない時の対処法を考えてみた

Transcript

1. ࣾ಺ษڧձ޲͚ࢿྉ jQueryͱ͔ PHPϓϩδΣΫτͰͷJavaScriptʹ͍ͭͯͱ͔
2. Twitter: @sk_mrkm ࠷ۙ͸golang+AngularJS+TypeScriptͰ ͳΜ͔࡞Ζ͏ͱͯ͠·͢ 自己紹介 (公開時用)
3. 今日話すこと ݸਓతʹϝϯς͕·ͩϚγʹͳΔjQuery ͷॻ͖ํ PHPͷϓϩδΣΫτͰJSΛॻ͘ͱ͖ʹ΍Δ ΂͖͜ͱ
4. jQuery
5. jQuery使ってますよね
6. jQueryの導入 ࠓߋ΍Δඞཁ΋ͳ͍Ͱ͢ΑͶ CPXFSͱ͔࢖ͬͨΓద౰ʹམͱ͖ͯͨ͠Β ͍͍ͱࢥ͍·͢
7. jQueryのオブジェクト jQueryΛಡΈࠐΉͱwindow.$ɹͱ window.jQuery͍ͬͯ͏ΦϒδΣΫτ͕ੜ ੒͞Ε·͢ ͍ͭ͜Β͸ಉ͡΋ͷͰ͢ ($ === jQuery)
8. jQueryの使い方 $(‘’)ͰηϨΫλࢦఆͯ͠ॲཧॻ͚͹OK $(‘#hoge’).css(‘color’, ‘#ff0000’); $(‘.piyo’).hide(); $===jQueryͳͷͰ͜͏͍͏ॻ͖ํ΋ jQuery(‘#hoge’).css(‘color’, ‘#ff0000’);
9. jQueryの使い方 jQueryͷॲཧ͸େମ $(ducument).ready(function()); ͱ͔Ͱғ·Ε·͢ $(function(){})ͬͯͷ΋ͨ·ʹݟ·͢Ͷ
10. $(document).ready(...); $(function() {}); この2つの意味は同じです。 実行タイミングに違いがあると思ってたorz
11. $(document).ready() って？
12. ready(handler) Description: Specify a function to execute when the DOM is fully loaded. DOMͷಡΈࠐΈ͕׬ྃͨ͠λΠϛϯάͰ handler͕࣮ߦ͞ΕΔ
13. ready(handler) Description: Specify a function to execute when the DOM is fully loaded. DOMͷಡΈࠐΈ͕׬ྃͨ͠λΠϛϯάͰ handler͕࣮ߦ͞ΕΔ
14. $(document).ready(function(){}) $().ready(function() {}) この2つも同じ挙動になる。 (けれども下の方は非推奨の模様)
15. K2VFSZͷ಺෦ͰԿ͕ߦΘΕͯ ͍Δ͔஌͍ͬͯ·͔͢ʁ
16. $(‘#hoge’).show(); $(‘#hoge’).hide(); ࢖ͬͨ͜ͱ͕͋Δͱࢥ͍·͢ɻ ͍ͭ͜Β͸ԿΛͯ͠ΔͰ͠ΐ͏ʁ
17. $(‘#hoge’).show(); ! $(‘#hoge’).css(‘display’, ‘block’) $(‘#hoge’).hide(); ! $(‘#hoge’).css(‘display’, ‘none’) styleΛॻ͖׵͑ͯදࣔඇදࣔΛͯ͠Δ ͚ͩɻDOM͔Βফ͑ΔΘ͚Ͱ͸ͳ ͍ɻ
18. jQuery͕ԿΛͯ͘͠Ε͍ͯΔ͔͸ ஌͓͖ͬͯ·͠ΐ͏
19. jQueryの所感とか評判 ϑΝΠϧαΠζ͕Ͱ͔͍(minifyͰ100KB) HTML͕ԚΕΔ (IDͱ͔classͱ͔͍ͬͺ͍) େମϝϯςͰ͖ͳ͘ͳͬͯٽ͘ ຊମͷιʔε͸೉қ౓ߴ͍
20. 一方で AngularJSͷதʹ͸jQueryͷܰྔ൛͕͍Δ Backbone͸jQuery͕ඞཁ Knockout΋jQueryΛར༻͢Δͷ͕Ұൠత ͡Όͳ͍͔ͱࢥ͏(ݸਓͷײ૝Ͱ͢)
21. ѱධ΋͋Δ͚ͲjQuery͸࢖͏ΑͶ
22. ଟ෼ϝϯς͕·ͩϚγ ͳॻ͖ํΛߟ͑ͯΈͨ
23. メンテがしんどい理由 JSͷ࣮ߦϧʔϧ͕෼͔Βͳ͍ ॲཧ͕σβΠϯʹґଘ͗͢͠ ԿΛͲ͏͍ͨ͠ͷ͔Θ͔Βͳ͍هड़͕ଟ͍
24. 方針 Ͱ͖Δ͚ͩࡉ͔͍୯ҐͰؔ਺Խͯ͠෼͔Γ΍͍͢ ໊લΛ͚ͭΔ ηϨΫλΛ΂ͨͬͱ࢖Θͳ͍Ͱม਺ʹͯ͠෼͔Γ ΍໊͍͢લ(ry parentͱ͔childͱ͔͸ґଘ͕ߋʹ૿ͯ͠෼͔Γͮ Β্͍ʹॏ͍ͷͰͳΔ΂͘࢖Θͳ͍ (ͦ΋ͦ΋find࢖ͬͨ΄͏͕଎͍)
25. (function(App){ var Edit = (function(){ return { isText: function(type){return type === Hoge.TypeText; }, isImage: function(type) {return type === Hoge.TypeImage; }, toggleImage: function($selector, $imageRow) { if (this.isText($selector.val())) {$imageRow.hide();} else {$imageRow.show();} }};! })(); ! App.nEdit = Edit; })(App); $(document).ready(function(){ ! var $checkedType = $('.typeSelector:checked'); ! var $imageRow = $('.questionImageRow'); ! $('.typeSelector').change(function(){ ! ! App.Edit.toggleQuestionImage($(this), $imageRow); ! }); ! App.Edit.toggleQuestionImage($checkedType, $imageRow); });
26. ݁ہϝϯς͸͠ΜͲ͍ɻ ϑϨʔϜϫʔΫΛ࢖͍·͠ΐ͏
27. フレームワーク νʔϜͰ࢖͏ʹ͸͖ͪͬͱϧʔϧΛܾΊͳ͍ͱίʔυ͕ࢄΒ͔Δ ػೳ͸গͳ͍͚ͲϑΝΠϧαΠζ΋খ͍͞͠࢖͍΍͍͢ɻখ ͍͞ن໛ͩͱඞཁे෼ͳײ͡ ϞόΠϧͩͱͪΐͬͱॲཧ͕ॏ͍ؾ͕͢Δ େن໛޲͚ɻͳΜͱͳ͘ආ͚ͯΔ
28. PHPͰੜ੒͢ΔϖʔδͰ JSΛॻ͘ͱ͖ʹࢥ͏͜ͱ
29. PHPʹݶΒͣαʔόଆͰ HTMLΛੜ੒͢Δ৔໘Ͱ ى͜Γ͏Δ
30. PHPでJSを書く <?php $hoge = true; ?> <script> var hoge; if (‘<?php echo $hoge ?>’) { hoge = ‘hoge’; } else { hoge = ‘fuga’; } console.log(hoge); // hoge </script>
31. ؾ࣋ͪѱ͍
32. やるべきじゃない理由 JS͕PHPʹґଘ͍ͯ͠Δ ςετ͕ॻ͚ͳ͍ ݟ௨͕͠ѱ͍ ͖΋ͪΘΔ(ry
33. ରॲ๏͸ʁ
34. 対処法 αʔόαΠυͷॲཧΛAPIԽͯ͠AjaxͰ JSONΛड͚औΔ PHPΛೖΕ͟ΔΛಘͳ͍৔ॴΛ·ͱΊΔ
35. JSONを受け取る αʔόαΠυͰϨϯμϦϯά͸جຊ͠ͳ͍ ͰJSONΛు͔ͤΔ ରॲ๏ͱ͍͏͔Ή͠Ζ͜Ε͕ݱ୅ͷ࡞Γํ ͡Όͳ͍͔ͳ͊ͱࢥ͏ αʔϏεͷ࡞ΓํΛࠜຊ͔Βม͑Δඞཁ͕ ͋ΔͷͰίετେ
36. PHPが絡む場所をまとめる PHPͱJSΛ෼཭͢Δ ͱΓ͋͑ͣͷରॲ๏͚ͩͲ΋΍Βͳ͍ΑΓ ͣͬͱϚγ ͦΜͳʹ೉͍͜͠ͱͰ͸ͳ͍ͷͰ΍Γ͍ͨ
37. コード var App = App || {}; (function(App){ // ςετͰ͖ͳ͍͠෼͔ΓͮΒ͍ if ('<?php echo $hoge; ?>') ... else ... App.Bridge = { hoge: '<?php echo $hoge ?>', fuga: '<?php echo $fuga ?>' }; if (App.Bridge.hoge) ... else ... })(App);
38. // Bridge໊ͬͯલ͸ద੾ͳͷ͔෼͔ΒΜ // PHPͷهड़͕ඞཁͳ΋ͷΛ୯ҰͷΦϒδΣΫτʹ௥͍΍Δ App.Bridge = { hoge: '<?php echo $hoge ?>', fuga: '<?php echo $fuga ?>' };
39. Կ͕خ͍͠ͷʁ
40. <script> // PHP͕ඞཁͳͱ͜Ζ͸HTML಺ʹهड़͢Δ App.Bridge = { hoge: '<?php echo $hoge ?>' }; </script> <script src=”app.js”></script> (function() { // PHPͱ෼཭Ͱ͖Δ if (App.Bridge.hoge) { // doSomething } })() HTML app.js
41. <script> // ͦΕͧΕgetterͱ͔ஔ͍͓͚ͯ͹ ɹɹApp.Bridge.getHoge()Ͱ஋ΛऔΕΔ // ͜ͷؔ਺Λmockʹͯ͠ςετॻ͘ͱ͔Ͱ͖Δ App.Bridge = { getHoge: function() { return ‘<?php echo $hoge ?>’; } }; </script>
42. var App = App || {}; (function(App){ // ςετͰ͖ͳ͍͠෼͔ΓͮΒ͍ if ('<?php echo $hoge; ?>') // doSomething else // doSomething App.Bridge = { hoge: '<?php echo $hoge ?>', fuga: '<?php echo $fuga ?>' }; if (App.Bridge.hoge) // doSomething else // doSomething })(App);
43. +4ͷதʹαʔόଆͷίʔυ ͕ೖͬͯΔͱ ςετ͕ॻ͚ͳ͍ ϑϩϯτΤϯυ / όοΫΤϯυ͕ᐆດʹͳ ͬͯอकੑ͕ѱ͍ ͳͲσϝϦοτͩΒ͚
44. まとめ jQueryͷ಺෦ͰԿΛ΍ͬͯΔ͔஌ͬͱ͘ jQueryΛ࢖͏ͳΒɺͤΊͯϝϯς͠΍͍͢ॻ ͖ํΛ৺͕͚Δ JS΋ϑϨʔϜϫʔΫ࢖͍͍ͨσεω PHPͱJSΛͬͪ͝Όʹͯ͠ॻ͘ͱྑ͍͜ͱ͕ ແ͍ͷͰ෼཭ͤ͞Δ