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
720
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
500
JavaScript を書き始める前に知っておきたい JavaScript のこと #04
uruha
1
550
JavaScript を書き始める前に知っておきたい JavaScript のこと #03
uruha
1
440
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
万博非公式マップとFOSS4G
barsaka2
0
1.1k
20250611_なんでもCopilot1年続いたぞ~
ponponmikankan
0
170
2025年度春学期 統計学 第9回 確からしさを記述する ー 確率 (2025. 6. 5)
akiraasano
PRO
0
150
American Airlines® USA Contact Numbers: The Ultimate 2025 Guide
lievliev
0
250
RSJ2025 ランチョンセミナー 一歩ずつ世界へ:学生・若手研究者のための等身大の国際化の始め方
t_inamura
0
280
生成AI活用セミナー/GAI-workshop
gnutar
0
110
Linuxのよく使うコマンドを解説
mickey_kubo
1
270
Human-AI Interaction - Lecture 11 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
530
今までのやり方でやってみよう!?~今までのやり方でやってみよう!?~
kanamitsu
0
170
Sponsor the Conference | VizChitra 2025
vizchitra
0
620
2025年度春学期 統計学 第11回 分布の「型」を考える ー 確率分布モデルと正規分布 (2025. 6. 19)
akiraasano
PRO
0
170
Présentation_1ère_Spé_2025.pdf
bernhardsvt
0
250
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Thoughts on Productivity
jonyablonski
70
4.8k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
850
The Art of Programming - Codeland 2020
erikaheidi
56
13k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
How STYLIGHT went responsive
nonsquared
100
5.8k
Optimizing for Happiness
mojombo
379
70k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
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