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
社内勉強会資料 JavaScriptの基本 その1
Search
shmurakami
April 11, 2014
Programming
5
1.7k
社内勉強会資料 JavaScriptの基本 その1
社内勉強会用の資料
shmurakami
April 11, 2014
Tweet
Share
More Decks by shmurakami
See All by shmurakami
レガシーなPHPの限界とレガシーからの脱却 / phpcon2019
shmurakami
2
3.4k
サーバーサイドから見るChatworkの現状と未来 / Now and future of Chatwork from server side perspective
shmurakami
3
1.2k
php grpc-client in phpcon2018
shmurakami
0
1.6k
lumen e2e test
shmurakami
0
1.1k
decoded_php.pdf
shmurakami
3
740
良心的にまじめに開発するための心構え
shmurakami
0
170
TypeScriptでKnockoutを書いてみた
shmurakami
3
1.2k
社内勉強会資料 PHPプロジェクトでのJavaScript
shmurakami
0
630
Other Decks in Programming
See All in Programming
GrafanaのHTTP API を眺めてみよう
rinchoku
0
150
tsconfig.jsonの最近の新機能 ファイルパス編
uhyo
6
1.7k
型付きで行うVSCode拡張機能開発 / VSCode Meetup #31
mazrean
0
240
Go製CLIツールGatling Commanderによる負荷試験実施の自動化
okmtz
3
700
実践サーバーレスパフォーマンスチューニング ~その実力に迫る~ / Practical Serverless Performance Tuning ~A Close Look at its Power~
seike460
PRO
2
160
メルカリ ハロ アプリの技術スタック
atsumo
2
810
C#および.NETに対する誤解をひも解く
ymd65536
0
300
Cohesion in Modeling and Design
mploed
3
210
【YAPC::Hakodate 2024】TypeScriptエンジニアが感じたPerlのここが面白い
kimitashoichi
1
210
コードレビューと私の過去と未来
jxmtst
0
280
タイミーにおけるデータの利用シーンと データ基盤の挑戦
marufeuille
4
3.2k
デバッグの話 / Debugging for Beginners
kaityo256
PRO
8
600
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
43
13k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
RailsConf 2023
tenderlove
28
850
We Have a Design System, Now What?
morganepeng
49
7.2k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Design by the Numbers
sachag
278
19k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
How GitHub Uses GitHub to Build GitHub
holman
473
290k
Six Lessons from altMBA
skipperchong
26
3.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
Into the Great Unknown - MozCon
thekraken
31
1.4k
Transcript
͚ࣾษڧձࢿྉ JavaScriptͷجຊͦͷ1
Twitter: @sk_mrkm 自己紹介 (公開時用)
今日話す内容 JavaScriptΛॻ࣌͘ʹؾΛ͚ͭͯཉ͍͜͠ ͱతͳ༰Λ͠·͢ ॳճͳͷͰجૅతͳ༰Ͱ͢ɻؒҧͬͯͨ Βποίϛ͍ͩ͘͞ɻ
Topic JavaScriptͷมείʔϓ มͷܕ jQueryͷҙ JavaScriptͷهड़Օॴ
JavaScriptの変数スコープ άϩʔόϧ ϩʔΧϧ
グローバル ѱͰ͢ ෆ༻ҙʹΘͳ͍Α͏ʹ͠·͠ΐ͏
Ͳ͜Ͱఆٛͯ͠Δͷ͔͔Βͳ͍ ༧֎ͷڍಈΛ͢ΔՄೳੑ͕͋Δ ͍ͦͦ ダメな理由
どこで定義してるかわからない <head> <meta charset="UTF-8"> <title></title> <script src="hoge.js"></script> </head> <body> <script>
if (hoge) {} </script> </body>
どこで定義してるかわからない <head> <meta charset="UTF-8"> <title></title> <script src="hoge.js"></script> </head> <body> <script>
if (hoge) {} </script> </body> ʁ
予想外の挙動 <script> var localStorage = 'file'; console.log(localStorage); // Storage{length: 2}
</script> // localStorageͱ͍͏໊લͰఆٛͰ͖ͨΓ // ఆٛࡁΈͷมΛ্ॻ͖Ͱ͖ͳ͔ͬͨΓ ڥʹΑͬͯڍಈ͕ҟͳΔ
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
グローバルスコープの作り方 <script> hoge = ‘hoge’; var fuga = ‘fuga’; function
foo() { var bar = ‘bar’; } </script>
グローバルスコープの作り方 <script> hoge = ‘hoge’; var fuga = ‘fuga’; function
foo() { var bar = ‘bar’; } </script> άϩʔόϧείʔϓ
WBSΛ͚ͭͯάϩʔόϧۭؒͰએݴͨ͠ มάϩʔόϧมʹͳΔ ؔએݴಉ༷ ϩʔΧϧมʹ͢ΔʹGVODUJPOͰ͘͘Δ ඞཁ͕͋Δ
มͷείʔϓChromeFirefoxͷ Developer ToolsͰݟΔͷ͕൪؆୯ͱࢥ͏
JavaScriptείʔϓؔ୯Ґ ϒϩοΫείʔϓΛαϙʔτ͍ͯ͠ͳ͍ είʔϓͷมΛ࣮ߦ࣌ʹר্͖͛Δ (hoisting) スコープの範囲
var hoge = 'hoge'; console.log(hoge); if (false) { var fuga
= 'fuga'; } console.log(fuga); // undefined console.log(piyo); // ReferenceError: Can't find variable: piyo <?php $hoge = 'hoge'; echo $hoge; if (false) { $fuga = "fuga"; } echo $fuga; // Notice: Undefined variable: fuga 変数の巻き上げ PHP JS
// ࣮ߦ࣌ͷΠϝʔδ 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実行時のイメージ
4USJOH /VNCFS #PPMFBO 0CKFDU "SSBZ /6-- 6OEFpOFE 4ZNCPM &4͔Β 変数の型
String จࣈྻ Ͱ݁߹͢Δ bͱlʹҧ͍ແ͍ʢ(PPHMF౷Ұੑͷ Ͱ`Λਪʣ
Number ͯ͢ഒਫ਼ුಈখ JOUͳΜͯແ͔ͬͨ খԋࢉΛ͢Δͱ͕ͣΕΔ͜ͱ͕͋Δ (1.5 - 1) / 2 =
0.25 (1.4 - 1) / 2 = 0.1999999999999996 ! (((1.4*10) - (1*10)) /10)/2 ͱ͠ͳ͖Ό ͍͚ͳ͍
String型の数値の大小比較 10 > 2 // true “10” > “2” //
false // numberͷͭΓͰstringͷେখΛൺֱͯ͠͠·͏ͱ ҙਤ͠ͳ͍ڍಈʹͳΔɻ // ܕΛҙࣝ͢Δ͜ͱ
Boolean USVFGBMTF
Object \^
Array OFX"SSBZ ͔<>Ͱ࡞ΕΔ ͭͷΛ࣋ͭྻΛOFX"SSBZ ͨ͠ Γ͢Δͱڍಈ͕ҟͳΔ ͷ༏ҐੑڥʹΑͬͯҟͳΔ <>Ͱఆٛ͢Δํ͕ྑ͍ͱ͍͏ۭؾΛײ͡Δ
NULL UZQFPG/6--PCKFDUɹ ؾ࣋ͪѱ͍͚Ͳ&4Ͱ͜ͷ··Ͱ͢ 8FCޙํޓੑΛඇৗʹେࣄʹ͍ͯ͠ Δ͔ΒɹΒ͍͠
Undefined άϩʔόϧมʹVOEFpOFE͕͋Δ͕ɺ ॻ͖͑ΒΕΔՄೳੑ͕͋Δ͔Βແҋʹ৴ ༻͢Δͱྑ͘ͳ͍Β͍͠ Ͱॻ͖͑Α͏ͱͯ͠͏·͍͔͘ͳ͍ ڥʹΑΔʁ
Symbol ͍ΘΏΔQSJWBUFͳΛ࡞Γ͘͢ͳΔΒ ͍͠Ͱ͢ ·ͩ͠Β͘αϙʔτ͠ͳ͖Ό͍͚ͳ͍ *&Ͱ͑ͳ͍ͷͰৄࡉׂѪ ɹɹʻN ?Ч? ŲƅŝƄŒŖ ※IE6, 7ͳΜͯ͏Γ·ͤΜ
※ൃද࣌·ͩWindows XP͕αϙʔτ͞Εͯ·ͨ͠
比較演算子 ݫີԋࢉࢠʢʹʹʹʣ جຊతʹͬͪ͜Λ͏͖ Ձԋࢉࢠʢʹʹʣ
暗黙の型変換 ՁԋࢉࢠʢʹʹʣͰఆͨ࣌͠ʹΘΕ Δ JG USVF ͱ͔ ΦϒδΣΫτͷܕʹΑͬͯܕมͷنଇ͕ ҧ͏ͳͲ༧ଌཱ͕ͨͳ͍ͷͰΞςʹ͠ͳ͍ ҉ͷܕม͕ແ͍ɺݫີԋࢉࢠͷํ͕ વ͍
jQueryの注意点
※とりあえず1番気になっててやめて 欲しいことだけ
同じセレクタを 何度も記述しない
こういうの <p id=”hoge”>ͺΒ͙Β;</p> <button id=”btn”>Ϙλϯ</button> $('#btn').click(function() { $('#hoge').css('color', '#f00'); $('#hoge').css('width',
'200px'); $('#hoge').text('paragraph'); });
こういうの <p id=”hoge”>ͺΒ͙Β;</p> <button id=”btn”>Ϙλϯ</button> $('#btn').click(function() { $('#hoge').css('color', '#f00'); $('#hoge').css('width',
'200px'); $('#hoge').text('paragraph'); }); $('#hoge')͕ݺΕΔͨͼʹ ಉ͡ॲཧ͕Δ
対策: 変数に入れる <p id=”hoge”>ͺΒ͙Β;</p> <button id=”btn”>Ϙλϯ</button> $('#btn').click(function() { var hoge
= $(‘#hoge’); hoge.css('color', '#f00'); hoge.css('width', '200px'); hoge.text('paragraph'); });
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倍速い
ϝιουνΣʔϯͱม Ͳ͕͍ͬͪͷʁ ͱ͍͏࣭͕͋Γ·ͨ͠
$(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
ϝιουνΣʔϯͷํ͕एׯ͔ͬͨɹ͚Ͳ ڥʹΑͬͯมͷํ͕͍༷ ͍ճ͕͠Ͱ͖Δ͠มͷํ͕͍͍͢ͱࢥ͏ ࢀߟ http://dresscording.com/blog/jquery_performance.html
JavaScriptの記述箇所
HTMLのインラインに書かない <html> <head> </head> <body> <script> // .... // ....
// .... </script> </body> </html>
HTMLのインラインに書かない <html> <head> </head> <body> <script> // .... // ....
// .... </script> </body> </html> ΠϯϥΠϯʹॻ͘ͱ Ωϟογϡ͞Εͣʹ ຖճDL͞ΕΔ
HTMLのインラインに書かない <html> <head> </head> <body> <script src="hoge.js"></script> </body> </html> ผϑΝΠϧʹग़͢
まとめ άϩʔόϧมඞཁͳͱ͜ΖҎ֎ͰΘͳ͍ มͷܕΛҙࣝ͢Δ ҉ͷܕมʹཔΒͳ͍ jQueryͷηϨΫλಉ͡ͷΛԿΘͳ͍ JavaScriptHTMLʹهࡌ͠ͳ͍ͰjsϑΝΠϧ ͱͯ͠هड़͢Δ