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
Scaffold for Read and Debug JavaScript
Search
Koji Saiki
September 24, 2019
Programming
0
69
Scaffold for Read and Debug JavaScript
Introduction information for javascript rookie, reader, debugger, javascript product supporter
Koji Saiki
September 24, 2019
Tweet
Share
More Decks by Koji Saiki
See All by Koji Saiki
Angular で PCF した話
kojisaiki
0
500
Why is the subject of the story about Java support JDK?
kojisaiki
0
110
いまどきのSIer的品質向上
kojisaiki
0
130
誰も教えてくれなかったSEとしてただ一つ必要なこと
kojisaiki
0
410
真・なぜ誰もこう書いてくれないDependency Injection入門
kojisaiki
0
650
なぜ誰もこう書いてくれない Dependency Injection
kojisaiki
5
1.7k
Other Decks in Programming
See All in Programming
PHPカンファレンス 2024|共創を加速するための若手の技術挑戦
weddingpark
0
120
ISUCON14感想戦で85万点まで頑張ってみた
ponyo877
1
440
KMP와 kotlinx.rpc로 서버와 클라이언트 동기화
kwakeuijin
0
290
ドメインイベント増えすぎ問題
h0r15h0
2
550
Findy Team+ Awardを受賞したかった!ベストプラクティス応募内容をふりかえり、開発生産性向上もふりかえる / Findy Team Plus Award BestPractice and DPE Retrospective 2024
honyanya
0
140
PHPUnitしか使ってこなかった 一般PHPerがPestに乗り換えた実録
mashirou1234
0
400
テストコードのガイドライン 〜作成から運用まで〜
riku929hr
6
1.4k
短期間での新規プロダクト開発における「コスパの良い」Goのテスト戦略」 / kamakura.go
n3xem
2
220
PHPで作るWebSocketサーバー ~リアクティブなアプリケーションを知るために~ / WebSocket Server in PHP - To know reactive applications
seike460
PRO
2
750
テストケースの名前はどうつけるべきか?
orgachem
PRO
1
290
令和7年版 あなたが使ってよいフロントエンド機能とは
mugi_uno
3
1.1k
情報漏洩させないための設計
kubotak
5
1.3k
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.1k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Code Review Best Practice
trishagee
65
17k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
The Pragmatic Product Professional
lauravandoore
32
6.4k
We Have a Design System, Now What?
morganepeng
51
7.3k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The World Runs on Bad Software
bkeepers
PRO
66
11k
GraphQLとの向き合い方2022年版
quramy
44
13k
Transcript
Scaffold for Read and Debug JavaScript KOJI SAIKI@SAIKOU9901 2019/09/24
Who am I ? 佐伯紘二(サイキ コウジ) Now: Support Engineer@Microsoft for
Dynamics C&E / PowerApps / Flow Old: Application Engineer with Typescript / Java etc. Twitter: @saikou9901 Github: @kojisaiki
Preface 社内のサポートエンジニア仲間向けの勉強会資料を公開用に調整したものです。 JavaScript を読んだりデバッグしたりする際に参考になれば。 特に大切な内容は↓マーク。
Line-up Background Use Case How JS Works Tips
Background 技術背景
Netscape で誕生 1995 年に Netscape Communications の Brendan Eich が開発した。
1996 年に Internet Explorer 3.0 に搭載された後、普及率アップ。
Java とは技術的な関係なし Java が当時流行っていた。 Sun Microsystems と Netscape Communications が業務提携していた。
JSは「実装」。「仕様」は “ECMAScript” 標準仕様は “ECMAScript” (エクマスクリプト)。実装ごとに独自拡張がある。 開発者 Brendan Eich を中心とした標準化団体 Ecma
International がメンテナンスしている。 http://ecma-international.org/
Use Case どのように 使用されているか
WEBページにアクションをつける HTML は文書構造、 CSS は Look and Feel 、 JavaScript
は Action (Behavior) を定義する。
Node.js によるサーバサイド開発 2009 年に Ryan Dahl により開発された。
普及により汎用スクリプト言語化 モバイルネイティブアプリや、Unityによるゲーム開発も行われる。
TypeScriptによりさらに使いやすく Microsoft が 2012 年に公開した TypeScript は JavaScript へのトランスパイル言語。 型推論などにより開発が超便利に。
How JS Works どうやって 動いてるのか
JavaScriptのエンジン ブラウザごとに JavaScript エンジンが搭載されている。
エンジンがスクリプトを順番に実行 スクリプトの上から順番に実行される。 「巻上げ」という特殊な仕様があり、 関数宣言は後ろに書いてもOK。 https://developer.mozilla.org/ja/docs/Web /JavaScript/Reference/Statements/functio n#Function_declaration_hoisting
イベントによる処理実行 よくある OnClick や OnSubmit はこれ。 Event は ECMAScript ではなく、W3C
の DOM Standardでインタフェースだ け決まっている。 https://www.w3.org/TR/domcore/ ブラウザ間の互換性問題はこの辺で よく起きる。
Tips JSを捌くための
リファレンスは Mozilla でおk 仕様はとにかくこのサイト。ブラウザごとの取り扱いや ECMAScript 対応表もある。 https://developer.mozilla.org/ja/docs/Web/JavaScript
動作見るなら F12 のコンソール コンソールでスクリプトを試せる。 ウィンドウごとにエンジンが動いているので、変数宣言範囲はウィンドウごと。
特殊な値 null, undefined, NaN null: プロパティが宣言されているが、値なし。 undefined: プロパティの宣言なし。 NaN: 数値に変換できなかった結果。この値は
Number 型にしか出現しない。
HTMLで宣言=実行開始 HTMLで読み込み宣言される箇所でスクリプ トが実行される。 HTMLのロードが途中で止まっている場合は、 その直前のスクリプトを疑う。 JS ファイルのロードを body 末尾にするという プラクティスがある。
https://allabout.co.jp/gm/gc/380498/2/
とにかくシングルスレッド setTimeout 等はタスクキューに詰める。処理が終わらないと次のタスクは処理されない。 https://qiita.com/Kikulin/items/3e980d00102c5c7cf600
Line-up Background Use Case How JS Works Tips
Thank you! References: https://ja.wikipedia.org/wiki/JavaScript https://github.com/tc39/ecma262 https://dom.spec.whatwg.org/ https://developer.mozilla.org/ja/docs/Web https://allabout.co.jp/gm/gc/380498/2/ https://christina04.hatenablog.com/entry/2017/03/13/190000 https://qiita.com/Kikulin/items/3e980d00102c5c7cf600