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
700
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
480
Other Decks in Education
See All in Education
データ分析
takenawa
0
9.9k
Open Source Summit Japan 2025のボランティアをしませんか
kujiraitakahiro
0
760
2025年度春学期 統計学 第4回 データを「分布」で見る (2025. 5. 1)
akiraasano
PRO
0
150
2025年度春学期 統計学 第12回 分布の平均を推測する ー 区間推定 (2025. 6. 26)
akiraasano
PRO
0
140
20250625_なんでもCopilot 一年の振り返り
ponponmikankan
0
280
Gaps in Therapy in IBD - IBDInnovate 2025 CCF
higgi13425
0
510
2025年度春学期 統計学 第10回 分布の推測とは ー 標本調査,度数分布と確率分布 (2025. 6. 12)
akiraasano
PRO
0
200
Constructing a Custom TeX Ecosystem for Educational Institutions—Beyond Academic Typesetting
doratex
1
14k
Gamified Interventions for Composting Behavior: A Case Study Using the Gamiflow Framework in a Workplace Setting
ezefranca
1
190
日本の教育の未来 を考える テクノロジーは教育をどのように変えるのか
kzkmaeda
1
220
Human-AI Interaction - Lecture 11 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
480
アウトプット0のエンジニアが半年でアウトプットしまくった話 With JAWS-UG
masakiokuda
2
340
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
370
Faster Mobile Websites
deanohume
308
31k
A better future with KSS
kneath
238
17k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Cult of Friendly URLs
andyhume
79
6.5k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Why Our Code Smells
bkeepers
PRO
337
57k
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