Scaffold for Read and Debug JavaScript

Slide 1

Slide 1 text

Scaffold for Read and Debug JavaScript KOJI SAIKI@SAIKOU9901 2019/09/24

Slide 2

Slide 2 text

Who am I ? 佐伯紘二（サイキコウジ） Now: Support Engineer@Microsoft for Dynamics C&E / PowerApps / Flow Old: Application Engineer with Typescript / Java etc. Twitter: @saikou9901 Github: @kojisaiki

Slide 3

Slide 3 text

Preface 社内のサポートエンジニア仲間向けの勉強会資料を公開用に調整したものです。 JavaScript を読んだりデバッグしたりする際に参考になれば。特に大切な内容は↓マーク。

Slide 4

Slide 4 text

Line-up Background Use Case How JS Works Tips

Slide 5

Slide 5 text

Background 技術背景

Slide 6

Slide 6 text

Netscape で誕生 1995 年に Netscape Communications の Brendan Eich が開発した。 1996 年に Internet Explorer 3.0 に搭載された後、普及率アップ。

Slide 7

Slide 7 text

Java とは技術的な関係なし Java が当時流行っていた。 Sun Microsystems と Netscape Communications が業務提携していた。

Slide 8

Slide 8 text

JSは「実装」。「仕様」は “ECMAScript” 標準仕様は “ECMAScript” （エクマスクリプト）。実装ごとに独自拡張がある。開発者 Brendan Eich を中心とした標準化団体 Ecma International がメンテナンスしている。 http://ecma-international.org/

Slide 9

Slide 9 text

Use Case どのように使用されているか

Slide 10

Slide 10 text

WEBページにアクションをつける HTML は文書構造、 CSS は Look and Feel 、 JavaScript は Action (Behavior) を定義する。

Slide 11

Slide 11 text

Node.js によるサーバサイド開発 2009 年に Ryan Dahl により開発された。

Slide 12

Slide 12 text

普及により汎用スクリプト言語化モバイルネイティブアプリや、Unityによるゲーム開発も行われる。

Slide 13

Slide 13 text

TypeScriptによりさらに使いやすく Microsoft が 2012 年に公開した TypeScript は JavaScript へのトランスパイル言語。型推論などにより開発が超便利に。

Slide 14

Slide 14 text

How JS Works どうやって動いてるのか

Slide 15

Slide 15 text

JavaScriptのエンジンブラウザごとに JavaScript エンジンが搭載されている。

Slide 16

Slide 16 text

エンジンがスクリプトを順番に実行スクリプトの上から順番に実行される。「巻上げ」という特殊な仕様があり、関数宣言は後ろに書いてもOK。 https://developer.mozilla.org/ja/docs/Web /JavaScript/Reference/Statements/functio n#Function_declaration_hoisting

Slide 17

Slide 17 text

イベントによる処理実行よくある OnClick や OnSubmit はこれ。 Event は ECMAScript ではなく、W3C の DOM Standardでインタフェースだけ決まっている。 https://www.w3.org/TR/domcore/ ブラウザ間の互換性問題はこの辺でよく起きる。

Slide 18

Slide 18 text

Tips JSを捌くための

Slide 19

Slide 19 text

リファレンスは Mozilla でおｋ仕様はとにかくこのサイト。ブラウザごとの取り扱いや ECMAScript 対応表もある。 https://developer.mozilla.org/ja/docs/Web/JavaScript

Slide 20

Slide 20 text

動作見るなら F12 のコンソールコンソールでスクリプトを試せる。ウィンドウごとにエンジンが動いているので、変数宣言範囲はウィンドウごと。

Slide 21

Slide 21 text

特殊な値 null, undefined, NaN null: プロパティが宣言されているが、値なし。 undefined: プロパティの宣言なし。 NaN: 数値に変換できなかった結果。この値は Number 型にしか出現しない。

Slide 22

Slide 22 text

HTMLで宣言＝実行開始 HTMLで読み込み宣言される箇所でスクリプトが実行される。 HTMLのロードが途中で止まっている場合は、その直前のスクリプトを疑う。 JS ファイルのロードを body 末尾にするというプラクティスがある。 https://allabout.co.jp/gm/gc/380498/2/

Slide 23

Slide 23 text

とにかくシングルスレッド setTimeout 等はタスクキューに詰める。処理が終わらないと次のタスクは処理されない。 https://qiita.com/Kikulin/items/3e980d00102c5c7cf600

Slide 24

Slide 24 text

Line-up Background Use Case How JS Works Tips

Slide 25

Slide 25 text

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