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
2016年JavaScriptに どっぷり浸かって学んだこと
Search
potato4d(Takuma HANATANI)
September 24, 2016
Technology
1.3k
3
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
2016年JavaScriptに どっぷり浸かって学んだこと
(あるいはJavaScript怖くなかった話)
#frontkansai 2016.09
TAKUMA Hanatani(Potato4d)
potato4d(Takuma HANATANI)
September 24, 2016
More Decks by potato4d(Takuma HANATANI)
See All by potato4d(Takuma HANATANI)
どうせキレイに書けない処理は逆にAIに書いてもらうほうが良い説 / #kyotojs 22
potato4d
3
470
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
1
2.6k
Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11
potato4d
9
5.1k
終わりゆく Vue 2.x 時代の状態設計のアンサー - Vue 3 の Provider への期待 / The Last Architecture of the Vue 2.x
potato4d
25
7.2k
Web Worker を使ってブラウザ上でポケモンの画像を解析したい! / Pokemon recognition from screenshots in browser using web worker
potato4d
0
1.4k
Firebase & Google Cloud によるサーバーレス帳票管理 #FJUG / Serverless Architecture in Candy
potato4d
8
3.8k
NestJS meetup Tokyo Opening Talk / What is NestJS? #nestjs_meetup
potato4d
11
4.4k
私たちはなぜ SPA で開発するのか / Why you choose SPA
potato4d
38
29k
Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo
potato4d
6
3.7k
Other Decks in Technology
See All in Technology
1人アドミンな私はAWSアカウント申請をSlackで完結したい!
ysuzuki
0
100
認知負荷を吸収し、プロダクトをまたぐPR Preview基盤の設計事例
taiki45
2
550
Meet AgentCore Identity Consent Portal
hironobuiga
2
140
AIに賢く動いてもらうためのコンテキスト〜Snowflake女子会 vol.8
snowwmn0824
0
200
AIエージェントを安全で速い現場監督にする:Jev・Obsidian・メタハーネス
x5gtrn
PRO
0
140
LT:「このままでいいのかな?」から一歩踏み出した私のデータキャリア選択〜社会人3年目に上京を決意したリアル〜Snowflake女子会 vol.8
snowwmn0824
0
120
【データ横丁主催】AI Agentがコンテキストを使って仕事をした後、何が残るのか― 組織の経験を次の判断に引き継ぐ「Agent Memory」
shisyu_gaku
2
270
猫でもわかるKiro Web
kentapapa
1
160
Azure Copilot Resiliency Agentをいろいろ試してみる
tomokusaba
0
140
AI臭い文章とは何なのか
nasuvitz
36
75k
雪かき部 #7 もう怖くない!SELECT文!
foursue
0
220
BedrockとLambdaで作る リアルタイム進行型推理ゲーム
kawametho
0
120
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
141
35k
How to Talk to Developers About Accessibility
jct
2
560
Building a A Zero-Code AI SEO Workflow
portentint
PRO
0
750
Building the Perfect Custom Keyboard
takai
2
890
Product Roadmaps are Hard
iamctodd
55
13k
HDC tutorial
michielstock
2
930
Facilitating Awesome Meetings
lara
57
7.2k
Optimising Largest Contentful Paint
csswizardry
37
4k
The Spectacular Lies of Maps
axbom
PRO
1
1.1k
Raft: Consensus for Rubyists
vanstee
142
7.7k
Skip the Path - Find Your Career Trail
mkilby
1
240
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
konakalab
0
600
Transcript
2016JavaScriptʹ ͲͬΓਁֶ͔ͬͯΜͩ͜ͱ #frontkansai 2016.09 TAKUMA Hanatani(Potato4d) ͋Δ͍JavaScriptා͘ͳ͔ͬͨ
ࣗݾհ Ֆ୩ຏ(@potato4d) w #frontkansai #wbkyoto ͷਓ w SCOUTER inc.ͰVue.jsͰSPAॻ͍ͨΓ w
དྷ͔ΒࣾձਓʹͳΔͬΆ͍ w εϥΠυSpeakerDeckʹ্͛ΔΑ͏ͷ ςΩετ͕ଟ͍ͷͰจࣈಡ·ͳͯ͘ྑ ͍λΠϓͷͭͰ͢
ࠓ͢͜ͱ • CM w ࢲ͕ϑϩϯτΤϯυʹڵຯΛ࣋ͭ·Ͱͷ w ࢲ͕ϑϩϯτΤϯυʹڵຯΛ͔࣋ͬͯΒͷ w ཁॴཁॴͰͷٕज़ͷมભ •
CM
Ұͷӫཆ͕શʹऔΕΔʂ શ৯COMPൃചதʂ https://comp.jp גࣜձࣾCOMP
͍͑ͨ͜ͱ w ϑϩϯτΤϯυා͘ͳ͔ͬͨ w ϑϩϯτΤϯυͷਓॴʹΑͬͯා͘ͳ͔ͬ ͨ
http://nagashi.me
w جຊతʹPHPϕʔεͰશ෦ղܾ w JavaScriptAjaxٴͼDOMૢ࡞ͷΈʹར༻ w ϚʔΫΞοϓΤϯδχΞ+PHPΈ͍ͨͳঢ়ଶ w Node.jsλεΫϥϯφʔͷศརπʔϧͷར༻ͷ ҝͷར༻͕த৺ ϑϩϯτΤϯυʹؔΘΔલ
2015.12
w ͪͳΈʹ Onsen UI͕͍ͨͯ͘AngularJSΛར༻͢ Δ͏·͍͜ͱ͍͜ͳͤͣྲྀΕʹ w Onsen UIͷαϯϓϧ͔ΒࠓͷߏΛͳΜͱͳ͘ ͬͨͭΓʹͳΔ w
੍࡞ձࣾͷεΩϧϕʔεͰɺࠓޙͭΒ͍͜ͱΛͳ Μͱͳ࢝͘͠ΊΔ ϑϩϯτΤϯυʹؔΘΔલ 2015.12
ͬͯjQuery
ϑϩϯτΤϯυͱͷग़ձ͍ w jQueryഉআͷӡಈ͕֤ͰਐΜͰ͍ͨͷͰ͑ͯ jQueryͰͨ͢ΊͱϐβΛ৯͍ʹ#frontkansai w ͜ͷ࣌ʹϑϩϯτΤϯυΊͬͪΌ͓͠Ζͦ͏Μʂ ͱײͯ͡ϑϩϯτͷҠߦΛܾҙ w ಉ࣌ʹJavaScriptΛଘʹ͔͚Δڥʹ͍͘͜ͱܾ ҙ
2015.12
ϞμϯJavaScriptͷಓ
w গͣͭ͠ݱతͳJavaScriptΛֶͼͩ͢ w ͡ΊNode.jsͰͷQoL্ͱɺHTML5ͷྑ ͍ͯ͘͠ΔྖҬ͔Βͷ֎ງຒΊ྆ํͰਐΊͨ w ݁Ռతʹ͡Ί͔ΒϑϩϯτΤϯυͷJS-FWͰ ਐΊͨ΄͏͕ྑ͔ͬͨͷͰɺ͕࣍ॏཁ ϞμϯJavaScriptͷಓ ʙ2016.03,04
Vue.jsͱͷग़ձ͍
w ϑϩϯτΤϯυʹؔΘΔલ͔ΒTwitterͷΓ߹͍ ʹѪՈ͕͍ͯͳΜ͔ੌ͍ͱࢥ͍ͬͯͨ • PHP͔࣌Β(SymfonyͳͲ େنϑϨʔϜϫʔΫ ͕ۤखͩͬͨͷͰஸखࠒͰར༻͢Δ͜ͱʹ w Vue.jsʹΑͬͯগͣͭ͠JavaScriptͱྑ͘ͳΕͨ Vue.jsͱͷग़ձ͍
2016.04ʙ
w ES2015จ๏ ίϯϙʔωϯτࢥߟ webpackͷ <any>-loaderͳͲɺϞμϯͳٕज़Vue.jsΛ௨͠ ֶͯΜͩ w ࠷ݶ͏ʹϒϥβͰͦͷ··ಡΈࠐΜͰ Πέͯɺ͍͢ʹNodeϕʔεͰ৭ʑग़དྷΔ ؒޱ͕͘Ԟ͕ਂ͍ͷֶ͕Ϳʹ࠷ద
Vue.jsͱͷग़ձ͍ 2016.04ʙ
w ݱঢ়ɺ།ҰݱͰͷಋೖʹઌޭͯͦ͠͏͍ ͏ҙຯͰίετ͕ͯ͘ྑ͔ͬͨ w จ๏ࣗମͷܰ͞ɺ෯͞ɺখ͍͠ઃܭΛ͠ͳ ͯͦ͘ΕͳΓʹடং͕ੜ·ΕΔลΓ͔Βɺ jQueryͷ࣍ͷҰาʹ࠷దͩͱࢥ͍ͬͯΔ Vue.jsͱͷग़ձ͍ 2016.04ʙ
ଓɾϞμϯJavaScriptͷಓ
w ESͷʮStage 0ͰରԠͯ͠Δ͔ΒͦΕͰॻ͍ͯʯͱݴ ΘΕͨΓɺReactΛ ظ͚ͩ ࣮༻͢Δ͜ͱʹͳͬͨΓ w Node.jsͷϞδϡʔϧ͔ΒESͷimport/export w let/const,
Arrow Function, PromiseลΓ͚ͩ͡Όͳ͍ES ͷهड़ ଓɾϞμϯJavaScriptͷಓ 2016.07ʙNow
͜͜·Ͱ͍ͭͯ͜Εͨཧ༝
JavaScriptܥྻͰͷษڧձͰͷొஃ
w ษڧձͰ͢ͱ͍͏͜ͱɺ1ͷՁΛఏڙ͢ Δͱ͍͏͜ͱ w Ͱ͖Δ͔Ͱ͖ͳ͍͔ผͱͯ͠ɺͦ͜ͷͨΊʹ࠷େ ݶΊΑ͏ҙࢤ͕Ұ൪ʹܨ͕ͬͨ w ୯ʹϞνϕ্͕͕Βͳͯ͘5%% ొஃۦಈ։ൃ ͠
ͩ͢ͱઈରΔͱ͍͏͜ͱ͋Δ ษڧձͰ͢ॏཁੑ
w ొஃ͚ͩͰͳ͘ɺQiitaͰेޮՌ͋ͬͯɺͱʹ ͔͘Publish͢Δͷ͕ॏཁ͔ w ਓͷʹͭ͘ͱ͜ΖͰɺͯ͘ɺੌ͘ͳͯ͘ɺ গͣͭ͠֎ʹ͚Δ͜ͱͰɺҙ͕ࣝժੜ͑ͯ͘Δ w ͲΜͲΜ֎͖ʹൃ৴͍͖͍ͯͨ͠͠ɺͦ͏͠ଓ͚ Δ͜ͱ͕ࣗʹͱͬͯͷՁͱͳΔ ษڧձͰ͢ॏཁੑ
2016JavaScriptʹ ͲͬΓਁֶ͔ͬͯΜͩ͜ͱ
Vue.jsͷ༏͠͞
֎͖ͷൃ৴ͷॏཁੑ
࠷ޙʹ
https://javascript-fes.doorkeeper.jp/events/ 52089
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠