Scaffold for Read and Debug JavaScript

Introduction information for javascript rookie, reader, debugger, javascript product supporter

Transcript

1. Scaffold for Read and Debug JavaScript KOJI SAIKI@SAIKOU9901 2019/09/24
2. Who am I ? 佐伯紘二（サイキ コウジ） Now: Support Engineer@Microsoft for Dynamics C&E / PowerApps / Flow Old: Application Engineer with Typescript / Java etc. Twitter: @saikou9901 Github: @kojisaiki
3. Preface 社内のサポートエンジニア仲間向けの勉強会資料を公開用に調整したものです。 JavaScript を読んだりデバッグしたりする際に参考になれば。 特に大切な内容は↓マーク。
4. Line-up Background Use Case How JS Works Tips
5. Background 技術背景
6. Netscape で誕生 1995 年に Netscape Communications の Brendan Eich が開発した。 1996 年に Internet Explorer 3.0 に搭載された後、普及率アップ。
7. Java とは技術的な関係なし Java が当時流行っていた。 Sun Microsystems と Netscape Communications が業務提携していた。
8. JSは「実装」。「仕様」は “ECMAScript” 標準仕様は “ECMAScript” （エクマスクリプト）。実装ごとに独自拡張がある。 開発者 Brendan Eich を中心とした標準化団体 Ecma International がメンテナンスしている。 http://ecma-international.org/
9. Use Case どのように 使用されているか
10. WEBページにアクションをつける HTML は文書構造、 CSS は Look and Feel 、 JavaScript は Action (Behavior) を定義する。
11. Node.js によるサーバサイド開発 2009 年に Ryan Dahl により開発された。
12. 普及により汎用スクリプト言語化 モバイルネイティブアプリや、Unityによるゲーム開発も行われる。
13. TypeScriptによりさらに使いやすく Microsoft が 2012 年に公開した TypeScript は JavaScript へのトランスパイル言語。 型推論などにより開発が超便利に。
14. How JS Works どうやって 動いてるのか
15. JavaScriptのエンジン ブラウザごとに JavaScript エンジンが搭載されている。
16. エンジンがスクリプトを順番に実行 スクリプトの上から順番に実行される。 「巻上げ」という特殊な仕様があり、 関数宣言は後ろに書いてもOK。 https://developer.mozilla.org/ja/docs/Web /JavaScript/Reference/Statements/functio n#Function_declaration_hoisting
17. イベントによる処理実行 よくある OnClick や OnSubmit はこれ。 Event は ECMAScript ではなく、W3C の DOM Standardでインタフェースだ け決まっている。 https://www.w3.org/TR/domcore/ ブラウザ間の互換性問題はこの辺で よく起きる。
18. Tips JSを捌くための
19. リファレンスは Mozilla でおｋ 仕様はとにかくこのサイト。ブラウザごとの取り扱いや ECMAScript 対応表もある。 https://developer.mozilla.org/ja/docs/Web/JavaScript
20. 動作見るなら F12 のコンソール コンソールでスクリプトを試せる。 ウィンドウごとにエンジンが動いているので、変数宣言範囲はウィンドウごと。
21. 特殊な値 null, undefined, NaN null: プロパティが宣言されているが、値なし。 undefined: プロパティの宣言なし。 NaN: 数値に変換できなかった結果。この値は Number 型にしか出現しない。
22. HTMLで宣言＝実行開始 HTMLで読み込み宣言される箇所でスクリプ トが実行される。 HTMLのロードが途中で止まっている場合は、 その直前のスクリプトを疑う。 JS ファイルのロードを body 末尾にするという プラクティスがある。 https://allabout.co.jp/gm/gc/380498/2/
23. とにかくシングルスレッド setTimeout 等はタスクキューに詰める。処理が終わらないと次のタスクは処理されない。 https://qiita.com/Kikulin/items/3e980d00102c5c7cf600
24. Line-up Background Use Case How JS Works Tips
25. 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