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
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
290
UbieのAIパートナーを支えるコンテキストエンジニアリング実践
syucream
2
770
Trem on Rails - Prompt Engineering com Ruby
elainenaomi
1
100
Claude Codeで挑むOSSコントリビュート
eycjur
0
180
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
150
サーバーサイドのビルド時間87倍高速化
plaidtech
PRO
0
670
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
17
9.2k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
240
ライブ配信サービスの インフラのジレンマ -マルチクラウドに至ったワケ-
mirrativ
2
270
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
110
【第4回】関東Kaggler会「Kaggleは執筆に役立つ」
mipypf
0
940
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
330
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Documentation Writing (for coders)
carmenintech
73
5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.5k
Git: the NoSQL Database
bkeepers
PRO
431
65k
The Cult of Friendly URLs
andyhume
79
6.6k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
490
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
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ϑΝΠϧ ͱͯ͠هड़͢Δ