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.2k
サーバーサイドから見るChatworkの現状と未来 / Now and future of Chatwork from server side perspective
shmurakami
3
1.1k
php grpc-client in phpcon2018
shmurakami
0
1.5k
lumen e2e test
shmurakami
0
1k
decoded_php.pdf
shmurakami
3
730
良心的にまじめに開発するための心構え
shmurakami
0
150
TypeScriptでKnockoutを書いてみた
shmurakami
3
1.2k
社内勉強会資料 PHPプロジェクトでのJavaScript
shmurakami
0
610
Other Decks in Programming
See All in Programming
上手な探索的テストとその上達方法について
matsu802
1
430
Microsoft Fabricを7ヶ月使ってわかったこと
shun_oshidari
2
450
PHP8の機能を使って堅牢にコードを書く
fendo181
6
2k
Deep Dive 大規模システムアーキテクチャ/開発組織エンジニアリング / Deep Dive Large-Scale System Architecture, Development Organization Engineering
nrslib
4
430
Не учите алгоритмы
hellsquirrel
1
700
sbt-assemblyにハマってDB接続できず時間が溶けた話
wakye5815
1
660
ここ1~2年くらいで 使えるようになった(主要ブラウザーの最新版 がすべて対応した ) ウェブの新機能について ランダムに喋る!
myzkyy
7
5.8k
ファイル先頭の use の意味、説明できますか? 〜PHP の namespace と autoloading の関係を正しく理解しよう〜 / namespace and autoloading in php
okashoi
2
400
軽率にVue 3で リアルタイム3Dアプリを作れる ライブラリを作ってみた/vue-with-3d-app
drumath2237
3
1.1k
Laravel OpenAPIによる"辛くない"スキーマ駆動開発
kentaroutakeda
2
1.4k
ADRを一年運用してみた/our_story_about_adr
hanhan1978
3
1.1k
20240301_cocone_EMゆるミートアップvol6_LT資料
cocone
0
250
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
319
20k
YesSQL, Process and Tooling at Scale
rocio
160
13k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
153
14k
Designing the Hi-DPI Web
ddemaree
275
33k
How to Ace a Technical Interview
jacobian
272
22k
How GitHub Uses GitHub to Build GitHub
holman
467
290k
Design by the Numbers
sachag
274
18k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
272
12k
The Invisible Side of Design
smashingmag
293
49k
Into the Great Unknown - MozCon
thekraken
10
810
Dealing with People You Can't Stand - Big Design 2015
cassininazir
355
22k
Fantastic passwords and where to find them - at NoRuKo
philnash
35
2.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ϑΝΠϧ ͱͯ͠هड़͢Δ