Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Javascript勉強会
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
hiro miyagi
September 12, 2014
250
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Javascript勉強会
hiro miyagi
September 12, 2014
More Decks by hiro miyagi
See All by hiro miyagi
テスト自動化勉強会
hiro_miyagi
0
79
CI勉強会
hiro_miyagi
0
110
UX勉強会
hiro_miyagi
0
110
チーム開発とGithub
hiro_miyagi
1
82
Git初心者向け勉強会
hiro_miyagi
0
120
Featured
See All Featured
Marketing to machines
jonoalderson
1
5.9k
State of Search Keynote: SEO is Dead Long Live SEO
ryanjones
0
320
Prompt Engineering for Job Search
mfonobong
0
510
Imperfection Machines: The Place of Print at Facebook
scottboms
270
14k
Optimizing for Happiness
mojombo
378
71k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
62k
Digital Ethics as a Driver of Design Innovation
axbom
PRO
1
460
Kristin Tynski - Automating Marketing Tasks With AI
techseoconnect
PRO
0
550
RailsConf 2023
tenderlove
30
1.6k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
kimpetersen
PRO
0
500
Thoughts on Productivity
jonyablonski
76
5.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
Transcript
JavaScriptษڧձ {}
JavaScriptͱ
None
×
JavaScriptͱ • ΦϒδΣΫτࢦ • ϓϩτλΠϓϕʔε • ϑΝʔετΫϥεؔΛαϙʔτ • ྲྀߦ͍ͬͯΔײ͋Γ·͢
JavaScriptͷྺ࢙
ୈҰষϒϥβઓ૪
NetScape vs Microsoft
NetScape Communications • NetScape Navigator(NN)Λ։ൃ • 90લɺओʹ༻͞Ε͍ͯͨϒϥβ • World Wide
Webͷར༻Λ૿Ճͤ͞Δ • খֶߍͷύιίϯʹೖ͍ͬͯͨؾ͕͢Δ • ৭ʑ͋ͬͯݱࡏͷMozilla
Microsoft • NCSA MosaicͷϥΠηϯεΛऔಘ͠Internet Explorer(IE)Λ։ൃ • IEແঈԽͨ͠ΓͰ৭ʑૌ͑ΒΕΔ
݁Ռ • γΣΞ૪͍ͷͨΊɺ֤ϕϯμʔ͕ࠩผԽ͔Γߦ͍టপʹ • Webඪ४ʁͳʹͦΕʁ
JavaΞϓϨοτࡌ • 1995ɺNNʹJavaΞϓϨοτࡌ • ੩తͳHTMLʹಈతͳϓϩάϥϜʂ͍͢͝ʂ • Java͔ͩΒϓϥοτϑΥʔϜʹґଘ͠ͳ͍ʂ͍͢͝ʂ
͔͠͠… • ىಈ͕ΊͪΌΊͪΌ͔ͬͨ
ୈೋষ+BWB4DSJQUੜ
LiveScript • ωοτεέʔϓ͕Javaʹ͔ΘΔϒϥβͰಈ͘εΫϦϓτݴޠͱ ͯ͠։ൃ • ࡞ऀBrendan Eich(ϒϨϯμϯɾΞΠΫ) • Java͕ྲྀߦ͍ͬͯͨͷ͋ΓʮJavaScriptʯʹ໊শ͕มߋ •
NN2.0Ͱ࣮
ҰํMicrosoft • JScriptΛಠ࣮ࣗ • IE3.0Ͱ࣮༧ఆ͕ͩͬͨ৭ʑ͋ͬͯແ͠ʹ
• ϚεΧʔιϧΛͬͯ͘ΔΩϥΩϥ • ը໘શମʹ߱Δઇ • ϒϥβΫϥογϟʔ • ӈΫϦοΫې(ry JavaScriptͷ͍ಓ
ୈࡾষ'MBTIͷొ
Flashͷੜ • FutureWave Software͕Future Splash PlayerΛ։ൃ • ϑΥʔϚοτSWF(Small Web Format)
• ϕΫτϧϕʔε • ಈ࡞͕͍ܰ • Macromedia͕ങऩ͠ʮFlashʯʹ໊শΛมߋ • SWF(Shockwave Format)
ୈ࢛ষඪ४Խ
ECMAScript • IEͷγΣΞ͕ԆͼͯNN͕ϐϯνʹͳΓɺJavaScriptΛඪ४Խ͢Δ ͜ͱʹ • ϛχϚϜͳݴޠ༷ • DOMECMAScriptͰඪ४Խ͞Ε͍ͯͳ͍ • ͋͘·ͰJavaScriptͱ͍͏ݴޠͷ༷ͱͳΔͷ
ECMAScript 3 • ਖ਼نදݱͷಋೖ • จࣈྻपΓͷڧԽ • ྫ֎ॲཧͷಋೖ • Α͘ݟΔͷ͜ͷลΓͷ༷ͷॻ͖ํ
ECMAScript 4 • ClassInterfaceΛಋೖ͠Α͏ͱͨ͠ͱ͜Ζରʹૺ͏ • ActionScript3ͰҰԠ࣮͞Ε͍ͯΔ
JavaScriptͷٯऻ
ୈޒষ"KBYͷ࠶ൃݟ
GoogleʹΑΔAjaxͷ࠶ൃݟ • Google Maps • AjaxΛ༻͍ͨը໘ͷඳը • ࠓ·Ͱʹͳ͔ͬͨϢʔβʔମݧ • Gmail
• GoogleݕࡧͷαδΣετ
AjaxʹΑͬͯJavaScript࣌ͷ౸དྷ • ͜Ε·ͰͷWebʹແ͔ͬͨૢ࡞ײ • WebΞϓϦέʔγϣϯͷՄೳੑΛ͛ͨ • ϥΠϒϥϦͷॆ࣮ • prototype.js •
jQuery • MochiKit
ୈষαʔόʔαΠυ
Node.jsʹద͍ͯ͠Δͷ • େྔͷϦΫΤετॲཧ͕ඞཁͳͷ • API • ϦΞϧλΠϜੑͷ͋Δͷ • Push௨͕ඞཁͳͷ
࠷ۙͷJavaScriptࣄ
ECMAScript 5 • ͍͍ͩͨͷϞμϯϒϥβͰ࣮͞Ε͍ͯΔ • strictϞʔυ • JSONαϙʔτ • Arrayͷ֦ு
ECMAScript 6 • ΞϩʔϑΝϯΫγϣϯ • Ϋϥε • letɺconst • Ϧετแ
• ࡦఆத
ϑϩϯτΤϯυ։ൃʹ͓͚Δ JavaScriptͷར༻
λεΫϥϯφʔ • Grunt.js • gulp • JSɺCSSͷ݁߹ɾѹॖͳͲϑϩϯτΤϯυʹ͓͚ΔλεΫΛࣗ ಈԽ
Gruntfile.js
AltJS
AltJSͱ • JavaScriptΛସ͢ΔͨΊͷݴޠ • ίϯύΠϧ͢ΔͱJavaScriptʹͳΔ • AltJSઓࠃ࣌
Haxe • 2005(AltJSͰૣΊ) • ੩తܕ͚ɺܕਪ • ύλʔϯϚον • EC4ʹΑ͘ࣅͨจ๏
Hexeαϯϓϧίʔυ
CoffeeScript • ؆ܿͳจ๏ͳͷͰՄಡੑ্͕͢Δ • JavaScriptͷγϯλοΫεγϡΨʔͷ༷ͳͷͳͷͰֶशίετ ͕͍ • ()ɺ{}ɺʀ͕͍Βͳ͍ • RailsͰ࠾༻
CoffeeScriptαϯϓϧίʔυ
JSX • DeNA͕։ൃ • ੩తܕ͚ • Ϋϥε • ໊લۭؒ •
࠷దԽ͕ͯ͘͢͝ૣ͍Β͍͠Ͱ͢
Dart • Google͕։ൃ • ୯ମͷݴޠ༷͍࣋ͬͯΔ͕JavaScriptมͷπʔϧ͍ͭͯ ͍Δ • จ๏͕ JavaͬΆ͍ •
DartVM͍ͭͰ͔͢
TypeScript • Microsoft͕։ൃ • JavaScriptΛܕΫϥεͰߏจ֦ு • ܕਪ
ΫϥΠΞϯταΠυ
ΫϥΠΞϯταΠυͷมԽ • SPA(Single page Applicatoin) • ΫϥΠΞϯταΠυMVC • ΫϥΠΞϯταΠυMVVM •
Facebook, Twitter
ΞʔΩςΫνϟͷมԽ
։ൃʹ͓͚Δݒ೦ • ύϑΥʔϚϯε • αʔόʔαΠυͷΈ • DOMૢ࡞ͱ͔AjaxͭΒ͍ʢjQueryͱ͔ʣ
ΫϥΠΞϯταΠυMVC • ΫϥΠΞϯταΠυͰMVC • backbone.js
ΫϥΠΞϯταΠυMVVM • ΫϥΠΞϯταΠυͰMVVM • vue.js, facebook/react, angularJS • ํσʔλόΠϯσΟϯά •
DOMૢ࡞͕͍Βͳ͍
Vue.jsαϯϓϧ
͋Γ͕ͱ͏͍͟͝·ͨ͠