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
2016年JavaScriptに どっぷり浸かって学んだこと
Search
potato4d(Takuma HANATANI)
September 24, 2016
Technology
3
1.3k
2016年JavaScriptに どっぷり浸かって学んだこと
(あるいはJavaScript怖くなかった話)
#frontkansai 2016.09
TAKUMA Hanatani(Potato4d)
potato4d(Takuma HANATANI)
September 24, 2016
Tweet
Share
More Decks by potato4d(Takuma HANATANI)
See All by potato4d(Takuma HANATANI)
どうせキレイに書けない処理は逆にAIに書いてもらうほうが良い説 / #kyotojs 22
potato4d
3
270
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
1
1.9k
Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11
potato4d
9
4.7k
終わりゆく Vue 2.x 時代の状態設計のアンサー - Vue 3 の Provider への期待 / The Last Architecture of the Vue 2.x
potato4d
25
6.7k
Web Worker を使ってブラウザ上でポケモンの画像を解析したい! / Pokemon recognition from screenshots in browser using web worker
potato4d
0
1.1k
Firebase & Google Cloud によるサーバーレス帳票管理 #FJUG / Serverless Architecture in Candy
potato4d
8
3.5k
NestJS meetup Tokyo Opening Talk / What is NestJS? #nestjs_meetup
potato4d
11
3.8k
私たちはなぜ SPA で開発するのか / Why you choose SPA
potato4d
39
25k
Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo
potato4d
6
3.3k
Other Decks in Technology
See All in Technology
Functional TypeScript
naoya
10
3.9k
MySQLのあらたしいリリースモデル LTSとIR
sakaik
1
130
Practical GenAI with Go - Elastic and Golang Sydney
adriancole
0
140
EitherT_with_Future
aoiroaoino
1
920
LLM を現場で評価する
asei
4
700
【Λ(らむだ)最近のアプデ情報 / RPALT20240904
lambda
0
170
四国クラウドお遍路 2024 in 高知 オープニング
yukataoka
0
160
バックログを導入し やっぱやめた話
ota42y
0
190
Oracle Autonomous Database:サービス概要のご紹介
oracle4engineer
PRO
1
6.9k
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
2
170
RAGHack: Building RAG apps in Python
pamelafox
0
140
SAVEPOINT α版
savepoint
0
480
Featured
See All Featured
The Invisible Customer
myddelton
119
13k
Making the Leap to Tech Lead
cromwellryan
128
8.8k
Gamification - CAS2011
davidbonilla
79
4.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
34
1.9k
Faster Mobile Websites
deanohume
304
30k
Making Projects Easy
brettharned
113
5.8k
Designing with Data
zakiwarfel
98
5k
No one is an island. Learnings from fostering a developers community.
thoeni
18
2.9k
Building Applications with DynamoDB
mza
89
5.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
663
120k
Why Our Code Smells
bkeepers
PRO
334
56k
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
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠