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.8k
社内勉強会資料 JavaScriptの基本 その1
社内勉強会用の資料
shmurakami
April 11, 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
社内勉強会資料 PHPプロジェクトでのJavaScript
shmurakami
0
660
Other Decks in Programming
See All in Programming
Ruby Parser progress report 2025
yui_knk
1
450
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
310
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
print("Hello, World")
eddie
2
530
個人開発で徳島大学生60%以上の心を掴んだアプリ、そして手放した話
akidon0000
1
120
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
870
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
400
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
170
AIでLINEスタンプを作ってみた
eycjur
1
230
楽して成果を出すためのセルフリソース管理
clipnote
0
180
私の後悔をAWS DMSで解決した話
hiramax
4
210
旅行プランAIエージェント開発の裏側
ippo012
2
920
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
330
21k
Why Our Code Smells
bkeepers
PRO
339
57k
Navigating Team Friction
lara
189
15k
Making Projects Easy
brettharned
117
6.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The World Runs on Bad Software
bkeepers
PRO
70
11k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
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ϑΝΠϧ ͱͯ͠هड़͢Δ