JavaScriptの変遷/TypeScriptとは.pptx

フロントエンド開発入門
動くwebに欠かせないJavaScript/TypeScriptを学ぶ！〜初級〜

目次
1. 発表者紹介
1. 発表の概要

発表者紹介
趣味：高校野球観戦・映画鑑賞・パワプロくん
マイブーム：モルック・栄冠ナイン
目標：田舎に引っ越して犬(複数？)と生活
Wantedlyのプロフィール

発表の概要
● ブラウザの動きの基本を抑えよう
● JavaScriptの辿った変遷からJavaScriptを学ぶ上で知ってお
くと良いこと・注意することに触れる
● TypeScriptとは何か・なぜ必要か

発表の注意点
● 発表の都合上説明を大きく省いている箇所がございます。
各所に関して詳細を確認いただけるリンクを記載したので
そちらを読んでいただけると良いかと思います。
● JavaScriptの細かい文法というよりも、JavaScriptをとり囲
む状況や適切なバージョン・書き方を理解するのがメイン
になります

ブラウザの動きの基本を抑えよう

ブラウザでのレンダリング
普段何気なく使っているブラウザはどうやって情報を表示してるのでしょうか？

ブラウザの中身をざっくり
ブラウザの中身をざっくり見てみると
● 見た目を表示するためのレンダリングエンジン
● JavaScriptを実行するためのJavaScriptエンジ
ンが存在する

各ブラウザの中身
ブラウザの対応状況を確認

ブラウザでのレンダリングの流れ

ブラウザの動きをもっと詳しく学びたい
● How browsers work
● Webフロントエンドハイパフォーマンスチ
ューニング

JavaScriptで何ができる？

JavaScriptで何ができる？
● DOMを介して動的にコンテンツの変更が可能
○ まずはブラウザで使われるJavaScriptに焦点を置いてみる
● Node.jsを使用することでWebサーバーの構築も可能
○ こちらはまた後半で触れられれば
● etc…..

DOMとは？？？
● ざっくり：DOMはDocument Object Modelの頭文字を取った言
葉で、HTML等のリソースをツリー状の構造で表現して
JavaScript等で操作可能にした物
○ getElementById()
● レンダリングエンジンがHTMLからDOMツリーを作る
DOM実例
DOMとは(mdn)
何度調べてもわからないDOMに決着をつける

JavaScriptはなぜブラウザで実行可能？
０１０１
０１００
１０１....

JS Engineについてもっと知りたい
● V8 JavaScript Engine
● ちいさなWebブラウザを作ろう

ここまではブラウザで使われる
JavaScriptの話
● なんでサーバーで使えるようになったの？
● クライアントで使うJavaScriptとサーバーで使うJavaScript
は何か違うの？
● JavaScriptのバージョンごとの違いとは？
● ECMAScriptて何？
● etc…..

JavaScriptの変遷
JavaScriptを歴史から理解しよう

JavaScriptの誕生(1995 ~ 1997)
1994年
Netscape CommunicationsがWebブラウザのNetscape Navigatorを発表(翌年1995にMicrosoftがInternet
Explorerを発表)
1995年
Netscape Communicationsのブレンダン・アイク(Brendan Eich) さんがJavaScriptを作成
Netscape Navigatorに搭載される
(当時注目を浴びていたプログラミング言語Javaの名前に影響を受ける)
1996年
Internet Explorer(Webブラウザ)のMicrosoftがJScriptを開発しIE3に搭載(JScriptはJavaScriptの非互換性
が多くあった)
● JavaScriptはIEでは動かない
● JScriptはNetscape Navigatorでは動かない

JavaScriptの標準化(1997~)
1997年
非互換性問題解決のためにecma internatinal(European Computer Manufacturers Association)に標準化を
申請、コア機能部分がECMAScriptとして標準化される(ECMA-262 初版)
その後、標準化仕様を巡って各派閥の対立
● ECMAScript: ECMAによって決められた標準規格
● JavaScript: 標準規格に準拠した言語
概要はこちら
より詳しくはこちらが分かりやすかった

JavaScriptの発展(2009~)
2009年
JavaScriptでサーバーサイドも作りたいな〜
でも他の言語では基本的に備わっているコードをモジュールに分けることもできないな〜
● MozillaのKevin Dangoorさん主導でウェブブラウザ環境外におけるJavaScriptの各種仕様を定める
ことを目標としたプロジェクト(CommonJS)がはじまる
● Ryan Dahl(ライアン・ダール)さんがサーバーサイドのJavaScriptのランタイム環境Node.jsを作成
し、JavaScriptがサーバーサイドでも広く使われ出す
2015年
ECMAScript2015(通称ES6)の策定
● モジュールシステムの導入(ESModules)
● スコープを持つ変数の宣言方法(const/let)
● class構文の導入(class)

JavaScriptを勉強する上で個人的に注意す
べき点まとめ
● CommonJSの存在を認識する。また、ECMAScript2015の違いを理解する(モ
ジュール使用方法)
● JavaScriptの標準規格でECMAScriptがある。また、ECMAScriptのES2015前後
の書き方の違いを認識・理解する。

CommonJSとESModulesの比較
● クライアントサイドのコードを書いている際はES Modulesのみ
● Node.jsを使用している場合でも基本的にはES Modulesを使うと良い
a. 必要に応じてCommonJSが必要になることも
We can’t use import or export outside ES modules.

ES5とES2015(ES6)の比較
W3 School Javascript ES6

ES5とES2015(ES6)の比較①
JavaScript Primer

ES5とES2015(ES6)の比較②
【JavaScript】var / let / const を本
気で使い分けてみたより

ES5とES2015(ES6)の比較③
W3 School Javascript ES6より

TypeScriptとは？なんで人気なの？

TypeScript誕生の背景
サバイバルTypeScriptより
2010年
JavaScriptで大規模開発を行うために、クラス記法・モジュール・型をもつ言語として作られた。
2015年
ECMAScript2015(通称ES6)の策定
● モジュールシステムの導入(ESModules)
● class構文の導入(class)

TypeScriptは根強い人気をもつ
静的型付けの利点
TypeScriptの人気
ECMAScript2015(通称ES6)にモジュールやクラス構文は盛り込まれたが、型は入っていない。
● TypeScriptは大規模開発に最適な言語
● JavaScriptの知識があれば使い始められる

参考
● CommonJS公式
○ https://www.commonjs.org/specs/modules/1.0/
● ECMAScriptの標準化
○ https://azu.github.io//slide/2017/node/ecmascript-
specification-suite.html
● JavaScriptの歴史
○ http://www.kogures.com/hitoshi/history/javascript/index.html
● A Brief History of JavaScript
○ https://auth0.com/blog/a-brief-history-of-javascript/
● JavaScriptのモジュール管理
○ https://tsuchikazu.net/javascript-module
● [基礎知識]JavaScriptの歴史
○ https://zenn.dev/antez/books/568dd4d86562a1/viewer/bc8ac
9

JavaScriptの変遷/TypeScriptとは.pptx

More Related Content

Similar to JavaScriptの変遷/TypeScriptとは.pptx (20)

JavaScriptの変遷/TypeScriptとは.pptx