SCIVONE Tech Talks #0

マルチデバイス対応を踏まえたフロントエンド開発事情
Hika Maeng　株式会社クイン代表取締役、Bsidesoft CEO

Transcript

1.  ϚϧνσόΠεରԠΛ౿·͑ͨϑϩϯτΤϯυ։ൃࣄ৘ SCIVONE Tech Talks #0 )JLB
   .BFOHɹגࣜձࣾΫΠϯ୅දऔక໾ɺ#TJEFTPGU
   $&0
2. ຊ೔ͷΞ΢τϥΠϯ SCIVONE Tech Talks #0 ϚϧνσόΠεରԠΛ౿·͑ͨϑϩϯτΤϯυ։ൃࣄ৘ ࣮຿໘ͰͷΦʔϓϯιʔεϥΠϒϥϦͷ՝୊ ίʔσΟϯάઓུ +BWB4DSJQUͷಛ௃Λ׆͔ͦ͏
3. ࣮຿໘ͰͷΦʔϓϯιʔεϥΠϒϥϦͷ՝୊ SCIVONE Tech Talks #0 ϚϧνσόΠεରԠΛ౿·͑ͨϑϩϯτΤϯυ։ൃࣄ৘ ܧଓతͳϒϥ΢βͷߋ৽ʹରԠͰ͖ͳ͍ ॳظ։ൃ࣌ ࣌ؒܦա 2011, IE9, jQuery 1.3 2013, IE10, jQuery 1.9 K2VFSZΛߋ৽͢Δ "1*ͷෆҰகɺมߋ͕ݪҼͰɺ αΠτશମΛݟ௚͢ඞཁ͕ग़ͯ͘Δ K2VFSZΛߋ৽͠ͳ͍ ৽͍͠ϒϥ΢βͷಛੑʹରԠ͓ͯ͠Βͣɺ ύϑΥʔϚϯεͱηΩϡϦςΟͷ໰୊͕ൃੜ 1
4. ࣮຿໘ͰͷΦʔϓϯιʔεϥΠϒϥϦͷ՝୊ SCIVONE Tech Talks #0 ϚϧνσόΠεରԠΛ౿·͑ͨϑϩϯτΤϯυ։ൃࣄ৘ ϒϥ΢βͷޓ׵ੑ͕อো͞Εͳ͍ IE8 IE9 IE10 )5.-ඪ४ରԠΛػʹɺ΄ͱΜͲͷݹ͍ϒϥ΢βͷαϙʔτ͕ऴྃ ͨͱ͑͹ɺK2VFSZ͕*OUFSOFU
   &YQMPSFS
   ʙΛαϙʔτ͢Δͷ͸·Ͱɻ ͔͠͠ݱ࣮ʹ͸ɺແࢹͰ͖ͳ͍γΣΞ 12.44% 22.27% 15.67% TUBU$PVOUFSIUUQHTTUBUDPVOUFSDPNCSPXTFS@WFSTJPO+1NPOUIMZCBS 2
5. ࣮຿໘ͰͷΦʔϓϯιʔεϥΠϒϥϦͷ՝୊ SCIVONE Tech Talks #0 ϚϧνσόΠεରԠΛ౿·͑ͨϑϩϯτΤϯυ։ൃࣄ৘ ϞόΠϧϒϥ΢βରԠ 3 1. iPhone - 8 Safari - 5.x, 6.x, 7.x Opera, mini, Chrome, Firefox Facebook 2. iPad – 8 3. Andorid - 30 NativeBrowser – 30over, Chrome 4. smartTV, Android Tablet – 10over 50 over
6. ίʔσΟϯάઓུ SCIVONE Tech Talks #0 ϚϧνσόΠεରԠΛ౿·͑ͨϑϩϯτΤϯυ։ൃࣄ৘ $( ‘#stage’ ).css( ‘width’, 30 ); function css( $selector, $k, $v ){ $( $selector ).css( $k, $v ); } css( ‘#stage’, ‘width’, 30 ); function css( $selector, $k, $v ){ var dom = Sizzle( $selector ); dom.style[$k] = $v + ‘px’; } css( ‘#stage’, ‘width’, 30 ); ϥοϐϯάɹϥΠϒϥϦΛแׅ͢ΔϨΠϠʔΛߏ੒ͯ͠࢖༻ ࣮ࡍͷ۩ݱԽʹ͸ Φʔϓϯιʔεͷ՝୊ ϥΠηϯε໰୊ɺٕज़αϙʔτɺػೳͷ௥Ճɺ੍ޚ͞Ε͍ͯͳ͍։ൃνʔϜ ࣗલͰ࣮૷͢Δ৔߹ͷ՝୊ ๲େͳ։ൃίετɺਂ͍஌ࣝɺϝϯςφϯείετ
7.  +BWB4DSJQUͷಛ௃Λ׆͔ͦ͏ SCIVONE Tech Talks #0 ϚϧνσόΠεରԠΛ౿·͑ͨϑϩϯτΤϯυ։ൃࣄ৘ %0.
   8SBQQFS 1 )BTI
   .BQ 2 1SPUPUZQF 3 4DPQF 4
8. HTML System +BWB4DSJQUͷಛ௃Λ׆͔ͦ͏ SCIVONE Tech Talks #0 ϚϧνσόΠεରԠΛ౿·͑ͨϑϩϯτΤϯυ։ൃࣄ৘ %0.
   8SBQQFS 1 Tag Element Context Object <canvas id=”c1”> <style id=”s1”> c1 = document.getElementById('c1'); context = c1.getContext('2d'); context.draw(..); s1 = document.getElementById('s1'); sheet = s1.sheet; sheet.rules.insertRule(...); HTML System Tag Element Context Object
9. +BWB4DSJQUͷಛ௃Λ׆͔ͦ͏ SCIVONE Tech Talks #0 ϚϧνσόΠεରԠΛ౿·͑ͨϑϩϯτΤϯυ։ൃࣄ৘ )BTI
   .BQ 2 ࣗ༝ʹ,FZɺ7BMVFͷ௥Ճ࡟আ͕Ͱ͖Δ +BWB4DSJQU಺ͷ͢΂ͯͷΦϒδΣΫτ͸ )BTI.BQ ΦϒδΣΫτͰ͸ͳ͍΋ͷɿ1SJNJUJWF ࢀর͞Εͣʹίϐʔ͞ΕΔ TUSJOH
   OVNCFS
   CPPMFBO
   /B/
   VOEFpOFE
   OVMM var temp = {}; temp.newKey = 3; delete temp.newKey; var temp = function(){}; temp.a =3; temp = new Date; temp.b = 3; temp = [3,4,5]; temp.c = 3 keys hash function hashes 00 01 02 03 04 00 IUUQFOXJLJQFEJBPSHXJLJ)BTI@UBCMF John Smith Lisa Smith Sam Doe
10. +BWB4DSJQUͷಛ௃Λ׆͔ͦ͏ SCIVONE Tech Talks #0 ϚϧνσόΠεରԠΛ౿·͑ͨϑϩϯτΤϯυ։ൃࣄ৘ 1SPUPUZQF 3 Ϋϥε͕ͳ͍ ڞ༗ϦιʔεʢϝιουɺϑΟʔϧυʣΛอ؅͢Δ৔ॴ͕ͳ͍ var temp = function(){}; temp.prototype = {}; QSPUPUZQF
    LFZ$IBJO OFXͰΦϒδΣΫτΛ࡞੒͢Δͱɺࢦఆ͞Εͨؔ਺ͷQSPUPUZQFΛڞ༗͢Δ var func = function(){}; func.prototype = { test:function(){} } var a = new func; var a = {}; a.__proto__ = func.prototype; var temp= func.apply( a, arguments ); if( typeof temp == 'object' ) a = temp; a.test(); a['test'] == undefined a.__proto__.test == func.prototype.test ؔ਺ͷಛఆͷΩʔΛڞ༗͢ΔϦιʔεͷΞʔΧΠϒʹ࢖༻
11. +BWB4DSJQUͷಛ௃Λ׆͔ͦ͏ SCIVONE Tech Talks #0 ϚϧνσόΠεରԠΛ౿·͑ͨϑϩϯτΤϯυ։ൃࣄ৘ 4DPQF 4 ؔ਺ͷ࣮ߦ࣌ʹɺ &YFDVUJPO
    $POUFYUʢ&$ʣΛ࡞੒ function test( a, b ){ var c, d; } test( 3, 4, 5 ); testEC1 = { this:window, arguments:[3,4,5], a:3, b:4, c:undefined, d:undefined, parent:?? } test( 6 ); testEC2 = { this:window, arguments:[6,undefined], a:6, b:undefined, c:undefined, d:undefined, parent:?? } &$ɿ
    &YFDVUJPO
    $POUFYUʢ࣮ߦίϯςΩετʣ
12. +BWB4DSJQUͷಛ௃Λ׆͔ͦ͏ SCIVONE Tech Talks #0 ϚϧνσόΠεରԠΛ౿·͑ͨϑϩϯτΤϯυ։ൃࣄ৘ 4DPQF 4 &$ੜ੒ΛίϯύΠϥ͕ॲཧ͢ΔͨΊͷઃܭਤ
    ʕ
    ؔ਺ͷ4DPQF function test( a, b ){ var c, d; } test.call( {k:3}, 3, 4, 5 ); testEC1 = { this:{k:3}, arguments:[3,4,5], a:3, b:4, c:undefined, d:undefined, parent:?? } test.scope = { arguments:['a','b'], locals:['c','d'], parent:?? } arg = scope.arguments; for( i = 0 ; i < arg.length ; i++ ){ key = arg[i]; testEC1[key] = testEC1.arguments[i]; } locals = scope.locals; for( i = 0 ; i < locals.length ; i++ ){ key = locals[i]; testEC1[key] = undefined; } testEC1.parent = scope.parent; &$ɿ
    &YFDVUJPO
    $POUFYUʢ࣮ߦίϯςΩετʣ
13. +BWB4DSJQUͷಛ௃Λ׆͔ͦ͏ SCIVONE Tech Talks #0 ϚϧνσόΠεରԠΛ౿·͑ͨϑϩϯτΤϯυ։ൃࣄ৘ 4DPQF 4 1BSFOU
    ʕ
    ؀ڥؔ਺ͷ
    &$ &$ɿ
    &YFDVUJPO
    $POUFYUʢ࣮ߦίϯςΩετʣ function test( a, b ){ var c, d; } function global(){ function test( a, b ){ var c, d; } } global(); function environmentalFunction(){ function concreateFunction(){ } concreateFunction.scope.parent = environmentalFunction_EC1; } environmentalFunction(); environmentalFunction_EC1 = {...};
14. +BWB4DSJQUͷಛ௃Λ׆͔ͦ͏ SCIVONE Tech Talks #0 ϚϧνσόΠεରԠΛ౿·͑ͨϑϩϯτΤϯυ։ൃࣄ৘ 4DPQF 4 4DPQF
    ,FZ
    $IBJO function ev(){ var data = "hello"; return function c( $data ){ console.log( 'origin:', data, 'new:', $data ); data = $data; } } var c = ev(); c( "aloha" ); c( "bye" ); var c = ev(); ev_EC = { this:window, arguments:[], data:'hello' } = c.scope.parent c( "aloha" ); c_EC1 = { this:window, arguments:["aloha"], $data:'aloha', parent:c.scope.parent } c_EC1.data == undefined c_EC1.parent.data = 'hello' origin: hello, new: aloha c_EC1.parent.data = c_EC1.$data = 'aloha' c( "bye" ); c_EC2 = { this:window, arguments:["bye"], $data:'bye', parent:c.scope.parent }
15.  ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ Enjoy Your Happy Dev Life!