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
JavaScript を書き始める前に知っておきたい JavaScript のこと
Search
Kotaro Chiba
April 25, 2020
Education
1
690
JavaScript を書き始める前に知っておきたい JavaScript のこと
Kanazawa.js Remote Meetup #02
Kotaro Chiba
April 25, 2020
Tweet
Share
More Decks by Kotaro Chiba
See All by Kotaro Chiba
JavaScript を書き始める前に知っておきたい JavaScript のこと #05
uruha
1
490
JavaScript を書き始める前に知っておきたい JavaScript のこと #04
uruha
1
540
JavaScript を書き始める前に知っておきたい JavaScript のこと #03
uruha
1
420
DMM.com のフロントエンド 今・今後 / Think ! FrontEnd #01
uruha
1
1.5k
JavaScript を書き始める前に知っておきたい JavaScript のこと #02
uruha
1
1.4k
JavaScript を書き始める前にやっておきたいこと / Kanazawa.js meetup #1
uruha
1
1.1k
JConf JP Sponsor talk DMM.com / TECH VISION に向けての取り組み
uruha
1
470
Other Decks in Education
See All in Education
SkimaTalk Tutorial for Corporate Customers
skimatalk
0
280
バックオフィス組織にも「チームトポロジー」の考えが使えるかもしれない!!
masakiokuda
0
110
IMU-00 Pi
kanaya
0
360
推しのコミュニティはなんぼあってもいい / Let's join a lot of communities.
kaga
2
1.7k
Virtual and Augmented Reality - Lecture 8 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.7k
SkimaTalk Introduction for Students
skimatalk
0
380
Data Physicalisation - Lecture 9 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
440
i-GIP 2025 中高生のみなさんへ資料
202200
0
480
生成AI
takenawa
0
5.3k
Visualisation Techniques - Lecture 8 - Information Visualisation (4019538FNR)
signer
PRO
0
2.4k
Data Management and Analytics Specialisation
signer
PRO
0
1.4k
予習動画
takenawa
0
5.7k
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Rails Girls Zürich Keynote
gr2m
94
14k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The World Runs on Bad Software
bkeepers
PRO
69
11k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Documentation Writing (for coders)
carmenintech
72
4.9k
The Language of Interfaces
destraynor
158
25k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
What's in a price? How to price your products and services
michaelherold
246
12k
Transcript
JavaScript を書き始める前に知 っておきたい JavaScript のこと Kanazawa.js Remote Meetup #02 千葉
弘太郎 1 1
千葉 弘太郎(ちば こうたろう) Kotaro Chiba Twitter: @ur_uha Github: uruha Work:
DMM.com LLC 2 2
前回 JavaScript を書き始める前にやっておきたいこと 3 3
今回 JavaScript の歴史 JavaScript とは 4 4
JavaScript の歴史 5 5
1995 ~ LiveScript (Brendan Eich from Netscape) 初期は LiveScript として開発された。後にその当時
Java が流⾏っていたことから、現⾏の JavaScript の命名とな る 1996 ~ Internet Explorer 3.0 搭載 これ以降ブラウザによってJSの実装 (仕様) がことなるため ⾮常にこれが問題になる「ブラウザ問題」 6 6
1997 ~ ECMA international 発⾜ JavaScript の標準仕様である ECMAScript (通称ES) が定
義される TC39 (Technical Committee) という専⾨委員会が策定 現在は ES5 がメジャーで最新は ES9 まで標準化が動い ている 7 7
2000 ~ 発展 Google, Amazon が積極的に JavaScript を使⽤したWeb サービスを展開 Ajax
の誕⽣・Google map のサービス開始などで世間に 衝撃を与える 今では当たり前の技術として普及 8 8
最近 ~ より便利なWebの世界に ECMAScript 更新が活発化 (先述) ブラウザの機能を拡張する Web API の提供などが注⽬
されている Web VR Web RTC Web Bluetooth Shape Detection 9 9
JavaScript とは 10 10
JavaScript と ECMAScript の関係 ECMAScript は ECMA International によって標準化されて いる
JavaScript の仕様 を指す ECMA International では ECMAScript を管理番号として 262 と定めており、 ECMAScript と ECMA-262 は同じ 意味になる 11 11
イメージ 仕様 (ECMAScript) => 実装 (JavaScript) 12 12
JavaScript の特徴 軽量なインタープリタ型プログラミング⾔語 または、実⾏時コンパイルされる、第⼀級関数を備えたプロ グラミング⾔語とも⾔える Client でDOMの操作が⾏える 13 13
インタープリタ コードが上から下に実⾏されてコードの実⾏結果がすぐに返 ってくる原理 スクリプトを実⾏する際にコンパイルされてバイナリとし て実⾏される JavaScript は JIT (just-in-time compiling)
という技術を ⽤いて、 実⾏時の最適化を図っている 14 14
エンジン名 ⾔語 その他 Spider Monkey C JS開発当初のエンジン Rhino Java Node.js
より前のサーバサイド側の エンジン V8 C++ Chrome などのブラウザでのJS実⾏ エンジン Node.js C++ サーバサイドでJSが実⾏できるエン ジン 15 15
第⼀級関数 定義した関数が変数 (オブジェクト) として扱うことができる ⾔語仕様 16 16
function sayHello() { return "Hello, "; } function greeting(helloMessage, name)
{ console.log(`${helloMessage()}${name}`); } // `sayHello` を `greeting` 関数の引数として渡す greeting(sayHello, "JavaScript!"); 参考: MDNより 17 17
DOM 操作 DOM (Document Object Model) にアクセスができる テキストの更新 タグ要素の追加・削除・移動 スタイルの更新もできる
jQuery は DOM の操作に特化 etc... 18 18
<!-- 初期状態 --> <div> <p>Hello World !</p> </div> // 上記のDOM
構造に対して以下の処理を実⾏ const paragraph = document.getElementsByTagName('p'); paragraph[0].textContent = 'Hello New Wolrd !!'; <!-- 上記の処理で以下になる --> <div> <p>Hello New Wolrd !!</p> </div> 19 19
まとめ JavaScript そんなに歴史は⻑くない 仕様が乱⽴して、ECMAが今は取り纏めている 最近はクライアント・サーバサイド共によく使われてい る インタープリタ型で第⼀級関数を持つスクリプト⾔語 ⾔語が実⾏される際にコンパイルされる 関数を変数などで扱うことができる DOM
の操作もできる 20 20
次回予告 (参加できたら) 21 21
JavaScript を書き始めたら知っておきたい JavaScript のこと JavaScript についてもう少し詳しく オブジェクト指向 prototype 継承 動的型付け
シングルスレッド 22 22