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
社内勉強会資料 PHPプロジェクトでのJavaScript
Search
shmurakami
April 28, 2014
Programming
0
660
社内勉強会資料 PHPプロジェクトでのJavaScript
社内勉強会でJSについて話した時の資料
jQueryについてのちょっろとした話と
JSの中にPHPのタグを入れざるを得ない時の対処法を考えてみた
shmurakami
April 28, 2014
Tweet
Share
More Decks by shmurakami
See All by shmurakami
レガシーなPHPの限界とレガシーからの脱却 / phpcon2019
shmurakami
2
3.6k
サーバーサイドから見るChatworkの現状と未来 / Now and future of Chatwork from server side perspective
shmurakami
3
1.3k
php grpc-client in phpcon2018
shmurakami
0
1.7k
lumen e2e test
shmurakami
0
1.1k
decoded_php.pdf
shmurakami
3
790
良心的にまじめに開発するための心構え
shmurakami
0
180
TypeScriptでKnockoutを書いてみた
shmurakami
3
1.3k
社内勉強会資料 JavaScriptの基本 その1
shmurakami
5
1.8k
Other Decks in Programming
See All in Programming
AIのメモリー
watany
12
1.2k
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
780
Amazon Q CLI開発で学んだAIコーディングツールの使い方
licux
3
150
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
240
What's new in Adaptive Android development
fornewid
0
130
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
6
1k
Quality Gates in the Age of Agentic Coding
helmedeiros
PRO
1
120
Vibe coding コードレビュー
kinopeee
0
390
Strands Agents で実現する名刺解析アーキテクチャ
omiya0555
1
110
Flutterと Vibe Coding で個人開発!
hyshu
1
200
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
730
MCP連携で加速するAI駆動開発/mcp integration accelerates ai-driven-development
bpstudy
0
240
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
For a Future-Friendly Web
brad_frost
179
9.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Side Projects
sachag
455
43k
Thoughts on Productivity
jonyablonski
69
4.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
540
Designing Experiences People Love
moore
142
24k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
KATA
mclloyd
31
14k
Transcript
ࣾษڧձ͚ࢿྉ jQueryͱ͔ PHPϓϩδΣΫτͰͷJavaScriptʹ͍ͭͯͱ͔
Twitter: @sk_mrkm ࠷ۙgolang+AngularJS+TypeScriptͰ ͳΜ͔࡞Ζ͏ͱͯ͠·͢ 自己紹介 (公開時用)
今日話すこと ݸਓతʹϝϯς͕·ͩϚγʹͳΔjQuery ͷॻ͖ํ PHPͷϓϩδΣΫτͰJSΛॻ͘ͱ͖ʹΔ ͖͜ͱ
jQuery
jQuery使ってますよね
jQueryの導入 ࠓߋΔඞཁͳ͍Ͱ͢ΑͶ CPXFSͱ͔ͬͨΓదʹམͱ͖ͯͨ͠Β ͍͍ͱࢥ͍·͢
jQueryのオブジェクト jQueryΛಡΈࠐΉͱwindow.$ɹͱ window.jQuery͍ͬͯ͏ΦϒδΣΫτ͕ੜ ͞Ε·͢ ͍ͭ͜Βಉ͡ͷͰ͢ ($ === jQuery)
jQueryの使い方 $(‘’)ͰηϨΫλࢦఆͯ͠ॲཧॻ͚OK $(‘#hoge’).css(‘color’, ‘#ff0000’); $(‘.piyo’).hide(); $===jQueryͳͷͰ͜͏͍͏ॻ͖ํ jQuery(‘#hoge’).css(‘color’, ‘#ff0000’);
jQueryの使い方 jQueryͷॲཧେମ $(ducument).ready(function()); ͱ͔Ͱғ·Ε·͢ $(function(){})ͬͯͷͨ·ʹݟ·͢Ͷ
$(document).ready(...); $(function() {}); この2つの意味は同じです。 実行タイミングに違いがあると思ってたorz
$(document).ready() って?
ready(handler) Description: Specify a function to execute when the DOM
is fully loaded. DOMͷಡΈࠐΈ͕ྃͨ͠λΠϛϯάͰ handler͕࣮ߦ͞ΕΔ
ready(handler) Description: Specify a function to execute when the DOM
is fully loaded. DOMͷಡΈࠐΈ͕ྃͨ͠λΠϛϯάͰ handler͕࣮ߦ͞ΕΔ
$(document).ready(function(){}) $().ready(function() {}) この2つも同じ挙動になる。 (けれども下の方は非推奨の模様)
K2VFSZͷ෦ͰԿ͕ߦΘΕͯ ͍Δ͔͍ͬͯ·͔͢ʁ
$(‘#hoge’).show(); $(‘#hoge’).hide(); ͬͨ͜ͱ͕͋Δͱࢥ͍·͢ɻ ͍ͭ͜ΒԿΛͯ͠ΔͰ͠ΐ͏ʁ
$(‘#hoge’).show(); ! $(‘#hoge’).css(‘display’, ‘block’) $(‘#hoge’).hide(); ! $(‘#hoge’).css(‘display’, ‘none’) styleΛॻ͖͑ͯදࣔඇදࣔΛͯ͠Δ ͚ͩɻDOM͔Βফ͑ΔΘ͚Ͱͳ
͍ɻ
jQuery͕ԿΛͯ͘͠Ε͍ͯΔ͔ ͓͖ͬͯ·͠ΐ͏
jQueryの所感とか評判 ϑΝΠϧαΠζ͕Ͱ͔͍(minifyͰ100KB) HTML͕ԚΕΔ (IDͱ͔classͱ͔͍ͬͺ͍) େମϝϯςͰ͖ͳ͘ͳͬͯٽ͘ ຊମͷιʔεқߴ͍
一方で AngularJSͷதʹjQueryͷܰྔ൛͕͍Δ BackbonejQuery͕ඞཁ KnockoutjQueryΛར༻͢Δͷ͕Ұൠత ͡Όͳ͍͔ͱࢥ͏(ݸਓͷײͰ͢)
ѱධ͋Δ͚ͲjQuery͏ΑͶ
ଟϝϯς͕·ͩϚγ ͳॻ͖ํΛߟ͑ͯΈͨ
メンテがしんどい理由 JSͷ࣮ߦϧʔϧ͕͔Βͳ͍ ॲཧ͕σβΠϯʹґଘ͗͢͠ ԿΛͲ͏͍ͨ͠ͷ͔Θ͔Βͳ͍هड़͕ଟ͍
方針 Ͱ͖Δ͚ͩࡉ͔͍୯ҐͰؔԽ͔ͯ͠Γ͍͢ ໊લΛ͚ͭΔ ηϨΫλΛͨͬͱΘͳ͍Ͱมʹ͔ͯ͠Γ ໊͍͢લ(ry parentͱ͔childͱ͔ґଘ͕ߋʹ૿͔ͯ͠Γͮ Β্͍ʹॏ͍ͷͰͳΔ͘Θͳ͍ (ͦͦfindͬͨ΄͏͕͍)
(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); });
݁ہϝϯς͠ΜͲ͍ɻ ϑϨʔϜϫʔΫΛ͍·͠ΐ͏
フレームワーク νʔϜͰ͏ʹ͖ͪͬͱϧʔϧΛܾΊͳ͍ͱίʔυ͕ࢄΒ͔Δ ػೳগͳ͍͚ͲϑΝΠϧαΠζখ͍͍͍͢͞͠ɻখ ͍͞نͩͱඞཁेͳײ͡ ϞόΠϧͩͱͪΐͬͱॲཧ͕ॏ͍ؾ͕͢Δ େن͚ɻͳΜͱͳ͘ආ͚ͯΔ
PHPͰੜ͢ΔϖʔδͰ JSΛॻ͘ͱ͖ʹࢥ͏͜ͱ
PHPʹݶΒͣαʔόଆͰ HTMLΛੜ͢Δ໘Ͱ ى͜Γ͏Δ
PHPでJSを書く <?php $hoge = true; ?> <script> var hoge; if
(‘<?php echo $hoge ?>’) { hoge = ‘hoge’; } else { hoge = ‘fuga’; } console.log(hoge); // hoge </script>
ؾ࣋ͪѱ͍
やるべきじゃない理由 JS͕PHPʹґଘ͍ͯ͠Δ ςετ͕ॻ͚ͳ͍ ݟ௨͕͠ѱ͍ ͖ͪΘΔ(ry
ରॲ๏ʁ
対処法 αʔόαΠυͷॲཧΛAPIԽͯ͠AjaxͰ JSONΛड͚औΔ PHPΛೖΕ͟ΔΛಘͳ͍ॴΛ·ͱΊΔ
JSONを受け取る αʔόαΠυͰϨϯμϦϯάجຊ͠ͳ͍ ͰJSONΛు͔ͤΔ ରॲ๏ͱ͍͏͔Ή͠Ζ͜Ε͕ݱͷ࡞Γํ ͡Όͳ͍͔ͳ͊ͱࢥ͏ αʔϏεͷ࡞ΓํΛࠜຊ͔Βม͑Δඞཁ͕ ͋ΔͷͰίετେ
PHPが絡む場所をまとめる PHPͱJSΛ͢Δ ͱΓ͋͑ͣͷରॲ๏͚ͩͲΒͳ͍ΑΓ ͣͬͱϚγ ͦΜͳʹ͍͜͠ͱͰͳ͍ͷͰΓ͍ͨ
コード 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);
// Bridge໊ͬͯલదͳͷ͔͔ΒΜ // PHPͷهड़͕ඞཁͳͷΛ୯ҰͷΦϒδΣΫτʹ͍Δ App.Bridge = { hoge: '<?php echo
$hoge ?>', fuga: '<?php echo $fuga ?>' };
Կ͕خ͍͠ͷʁ
<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
<script> // ͦΕͧΕgetterͱ͔ஔ͍͓͚ͯ ɹɹApp.Bridge.getHoge()ͰΛऔΕΔ // ͜ͷؔΛmockʹͯ͠ςετॻ͘ͱ͔Ͱ͖Δ App.Bridge = { getHoge:
function() { return ‘<?php echo $hoge ?>’; } }; </script>
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);
+4ͷதʹαʔόଆͷίʔυ ͕ೖͬͯΔͱ ςετ͕ॻ͚ͳ͍ ϑϩϯτΤϯυ / όοΫΤϯυ͕ᐆດʹͳ ͬͯอकੑ͕ѱ͍ ͳͲσϝϦοτͩΒ͚
まとめ jQueryͷ෦ͰԿΛͬͯΔ͔ͬͱ͘ jQueryΛ͏ͳΒɺͤΊͯϝϯς͍͢͠ॻ ͖ํΛ৺͕͚Δ JSϑϨʔϜϫʔΫ͍͍ͨσεω PHPͱJSΛͬͪ͝Όʹͯ͠ॻ͘ͱྑ͍͜ͱ͕ ແ͍ͷͰͤ͞Δ