Scaffold for Read and Debug JavaScript

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 でおｋ仕様はとにかくこのサイト。ブラウザごとの取り扱いや 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

Scaffold for Read and Debug JavaScript

Scaffold for Read and Debug JavaScript

Koji Saiki

More Decks by Koji Saiki

Other Decks in Programming

Featured

Transcript