Tweet
Tweet

Slide 1

Slide 1 text

ࣾ಺޲͚ษڧձࢿྉ JavaScriptͷجຊͦͷ1

Slide 2

Slide 2 text

Twitter: @sk_mrkm 自己紹介 (公開時用)

Slide 3

Slide 3 text

今日話す内容 JavaScriptΛॻ࣌͘ʹؾΛ͚ͭͯཉ͍͜͠ ͱతͳ಺༰Λ࿩͠·͢ ॳճͳͷͰجૅతͳ಺༰Ͱ͢ɻؒҧͬͯͨ Βποίϛ͍ͩ͘͞ɻ

Slide 4

Slide 4 text

Topic JavaScriptͷม਺είʔϓ ม਺ͷܕ jQueryͷ஫ҙ఺ JavaScriptͷهड़Օॴ

Slide 5

Slide 5 text

JavaScriptの変数スコープ άϩʔόϧ ϩʔΧϧ

Slide 6

Slide 6 text

グローバル ѱͰ͢ ෆ༻ҙʹ࢖Θͳ͍Α͏ʹ͠·͠ΐ͏

Slide 7

Slide 7 text

Ͳ͜Ͱఆٛͯ͠Δͷ͔෼͔Βͳ͍ ༧૝֎ͷڍಈΛ͢ΔՄೳੑ͕͋Δ ͦ΋ͦ΋஗͍ ダメな理由

Slide 8

Slide 8 text

どこで定義してるかわからない if (hoge) {}

Slide 9

Slide 9 text

どこで定義してるかわからない if (hoge) {} ʁ

Slide 10

Slide 10 text

予想外の挙動 var localStorage = 'file'; console.log(localStorage); // Storage{length: 2} // localStorageͱ͍͏໊લͰఆٛͰ͖ͨΓ // ఆٛࡁΈͷม਺Λ্ॻ͖Ͱ͖ͳ͔ͬͨΓ ؀ڥʹΑͬͯڍಈ͕ҟͳΔ

Slide 11

Slide 11 text

var i, l = 0; console.time('global'); for (i=0;i<1000000;i++) {l++} console.timeEnd('global'); (function(){ var m, n = 0; console.time('local'); for (m=0;m<1000000;m++) {n++} console.timeEnd('local'); })(); そもそも遅い ≒2.3ms ≒5ms

Slide 12

Slide 12 text

グローバルスコープの作り方 hoge = ‘hoge’; var fuga = ‘fuga’; function foo() { var bar = ‘bar’; }

Slide 13

Slide 13 text

グローバルスコープの作り方 hoge = ‘hoge’; var fuga = ‘fuga’; function foo() { var bar = ‘bar’; } άϩʔόϧείʔϓ

Slide 14

Slide 14 text

WBSΛ͚ͭͯ΋άϩʔόϧۭؒͰએݴͨ͠ ม਺͸άϩʔόϧม਺ʹͳΔ ؔ਺એݴ΋ಉ༷ ϩʔΧϧม਺ʹ͢Δʹ͸GVODUJPOͰ͘͘Δ ඞཁ͕͋Δ

Slide 15

Slide 15 text

ม਺ͷείʔϓ͸Chrome΍Firefoxͷ Developer ToolsͰݟΔͷ͕൪؆୯ͱࢥ͏

Slide 16

Slide 16 text

JavaScriptείʔϓ͸ؔ਺୯Ґ ϒϩοΫείʔϓΛαϙʔτ͍ͯ͠ͳ͍ είʔϓ಺ͷม਺Λ࣮ߦ࣌ʹר্͖͛Δ (hoisting) スコープの範囲

Slide 17

Slide 17 text

var hoge = 'hoge'; console.log(hoge); if (false) { var fuga = 'fuga'; } console.log(fuga); // undefined console.log(piyo); // ReferenceError: Can't find variable: piyo

Slide 18

Slide 18 text

// ࣮ߦ࣌ͷΠϝʔδ var hoge, fuga; hoge = 'hoge'; console.log(hoge); if (false) { fuga = 'fuga'; } console.log(fuga); // undefined console.log(piyo); // ReferenceError: Can't find variable: piyo var hoge = 'hoge'; console.log(hoge); if (false) { var fuga = 'fuga'; } console.log(fuga); // undefined console.log(piyo); // ReferenceError: Can't find variable: piyo JS実行時のイメージ

Slide 19

Slide 19 text

4USJOH /VNCFS #PPMFBO 0CKFDU "SSBZ /6-- 6OEFpOFE 4ZNCPM &4͔Β 変数の型

Slide 20

Slide 20 text

String จࣈྻ Ͱ݁߹͢Δ bͱlʹҧ͍͸ແ͍ʢ(PPHMF͸౷Ұੑͷ ໰୊Ͱ`Λਪ঑ʣ

Slide 21

Slide 21 text

Number ͢΂ͯഒਫ਼౓ුಈখ਺఺਺ JOUͳΜͯແ͔ͬͨ খ਺ԋࢉΛ͢Δͱ஋͕ͣΕΔ͜ͱ͕͋Δ (1.5 - 1) / 2 = 0.25 (1.4 - 1) / 2 = 0.1999999999999996 ! (((1.4*10) - (1*10)) /10)/2 ͱ͠ͳ͖Ό ͍͚ͳ͍

Slide 22

Slide 22 text

String型の数値の大小比較 10 > 2 // true “10” > “2” // false // numberͷͭ΋ΓͰstringͷେখΛൺֱͯ͠͠·͏ͱ ҙਤ͠ͳ͍ڍಈʹͳΔɻ // ܕΛҙࣝ͢Δ͜ͱ

Slide 23

Slide 23 text

Boolean USVFGBMTF

Slide 24

Slide 24 text

Object \^

Slide 25

Slide 25 text

Array OFX"SSBZ ͔<>Ͱ࡞ΕΔ ͭͷ਺஋Λ࣋ͭ഑ྻΛOFX"SSBZ ͨ͠ Γ͢Δͱڍಈ͕ҟͳΔ ଎౓ͷ༏Ґੑ͸؀ڥʹΑͬͯҟͳΔ <>Ͱఆٛ͢Δํ͕ྑ͍ͱ͍͏ۭؾΛײ͡Δ

Slide 26

Slide 26 text

NULL UZQFPG/6--PCKFDUɹ ؾ࣋ͪѱ͍͚Ͳ&4Ͱ΋͜ͷ··Ͱ͢ 8FC͸ޙํޓ׵ੑΛඇৗʹେࣄʹ͍ͯ͠ Δ͔ΒɹΒ͍͠

Slide 27

Slide 27 text

Undefined άϩʔόϧม਺ʹ΋VOEFpOFE͕͋Δ͕ɺ ॻ͖׵͑ΒΕΔՄೳੑ͕͋Δ͔Βແҋʹ৴ ༻͢Δͱྑ͘ͳ͍Β͍͠ Ͱ΋ॻ͖׵͑Α͏ͱͯ͠΋͏·͍͔͘ͳ͍ ؀ڥʹΑΔʁ

Slide 28

Slide 28 text

Symbol ͍ΘΏΔQSJWBUFͳ஋Λ࡞Γ΍͘͢ͳΔΒ ͍͠Ͱ͢ ·ͩ͠͹Β͘αϙʔτ͠ͳ͖Ό͍͚ͳ͍ *&Ͱ࢖͑ͳ͍ͷͰৄࡉ͸ׂѪ ɹɹʻN ?Ч? ŲƅŝƄŒŖ ※IE6, 7ͳΜͯ΋͏஌Γ·ͤΜ ※ൃද࣌͸·ͩWindows XP͕αϙʔτ͞Εͯ·ͨ͠

Slide 29

Slide 29 text

比較演算子 ݫີԋࢉࢠʢʹʹʹʣ جຊతʹ͸ͬͪ͜Λ࢖͏΂͖ ౳Ձԋࢉࢠʢʹʹʣ

Slide 30

Slide 30 text

暗黙の型変換 ౳ՁԋࢉࢠʢʹʹʣͰ൑ఆͨ࣌͠ʹ࢖ΘΕ Δ JG USVF ͱ͔ ΦϒδΣΫτͷܕʹΑͬͯܕม׵ͷنଇ͕ ҧ͏ͳͲ༧ଌཱ͕ͨͳ͍ͷͰΞςʹ͠ͳ͍ ҉໧ͷܕม׵͕ແ͍෼ɺݫີԋࢉࢠͷํ͕ ౰વ଎͍

Slide 31

Slide 31 text

jQueryの注意点　　 　 　 　 　 　 　 　 　 　 ※とりあえず1番気になっててやめて 欲しいことだけ

Slide 32

Slide 32 text

同じセレクタを 何度も記述しない

Slide 33

Slide 33 text

こういうの

ͺΒ͙Β;

Ϙλϯ $('#btn').click(function() { $('#hoge').css('color', '#f00'); $('#hoge').css('width', '200px'); $('#hoge').text('paragraph'); });

Slide 34

Slide 34 text

こういうの

ͺΒ͙Β;

Ϙλϯ $('#btn').click(function() { $('#hoge').css('color', '#f00'); $('#hoge').css('width', '200px'); $('#hoge').text('paragraph'); }); $('#hoge')͕ݺ͹ΕΔͨͼʹ ಉ͡ॲཧ͕૸Δ

Slide 35

Slide 35 text

対策: 変数に入れる

ͺΒ͙Β;

Ϙλϯ $('#btn').click(function() { var hoge = $(‘#hoge’); hoge.css('color', '#f00'); hoge.css('width', '200px'); hoge.text('paragraph'); });

Slide 36

Slide 36 text

var btn = $('btn'); console.time('var'); for (var i = 0; i < 100000; i++) btn.val('btn'); console.timeEnd('var'); console.time('selector'); for (var i = 0; i < 100000; i++) $ ('#btn').val('btn'); console.timeEnd('selector'); 比較した ≒900ms ≒90ms 変数の方が10倍速い

Slide 37

Slide 37 text

ϝιουνΣʔϯͱม਺͸ Ͳ͕ͬͪ଎͍ͷʁ ͱ͍͏࣭໰͕͋Γ·ͨ͠

Slide 38

Slide 38 text

$(function () { var i; for (i=0; i<10000; i++) { $('#hoge').css('width', '200px').css('color', '#f00').text('p'); } }); $(function () { var i; for (i=0; i<10000; i++) { var hoge = $('#hoge'); hoge.css('width', '200px'); hoge.css('color', '#f00'); hoge.text('p'); } }); メソッドチェーン 変数 610.54ms 624.8 ms

Slide 39

Slide 39 text

ϝιουνΣʔϯͷํ͕एׯ଎͔ͬͨɹ͚Ͳ ؀ڥʹΑͬͯ͸ม਺ͷํ͕଎͍໛༷ ࢖͍ճ͕͠Ͱ͖Δ͠ม਺ͷํ͕࢖͍΍͍͢ͱࢥ͏ ࢀߟ http://dresscording.com/blog/jquery_performance.html

Slide 40

Slide 40 text

JavaScriptの記述箇所

Slide 41

Slide 41 text

HTMLのインラインに書かない // .... // .... // ....

Slide 42

Slide 42 text

HTMLのインラインに書かない // .... // .... // .... ΠϯϥΠϯʹॻ͘ͱ Ωϟογϡ͞Εͣʹ ຖճDL͞ΕΔ

Slide 43

Slide 43 text

HTMLのインラインに書かない ผϑΝΠϧʹग़͢

Slide 44

Slide 44 text

まとめ άϩʔόϧม਺͸ඞཁͳͱ͜ΖҎ֎Ͱ࢖Θͳ͍ ม਺ͷܕΛҙࣝ͢Δ ҉໧ͷܕม׵ʹཔΒͳ͍ jQueryͷηϨΫλ͸ಉ͡΋ͷΛԿ౓΋࢖Θͳ͍ JavaScript͸HTML಺ʹهࡌ͠ͳ͍ͰjsϑΝΠϧ ͱͯ͠هड़͢Δ