$30 off During Our Annual Pro Sale. View Details »
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
420
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
1
2.4k
Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11
potato4d
9
4.9k
終わりゆく Vue 2.x 時代の状態設計のアンサー - Vue 3 の Provider への期待 / The Last Architecture of the Vue 2.x
potato4d
25
7k
Web Worker を使ってブラウザ上でポケモンの画像を解析したい! / Pokemon recognition from screenshots in browser using web worker
potato4d
0
1.3k
Firebase & Google Cloud によるサーバーレス帳票管理 #FJUG / Serverless Architecture in Candy
potato4d
8
3.7k
NestJS meetup Tokyo Opening Talk / What is NestJS? #nestjs_meetup
potato4d
11
4.3k
私たちはなぜ SPA で開発するのか / Why you choose SPA
potato4d
39
27k
Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo
potato4d
6
3.6k
Other Decks in Technology
See All in Technology
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.3k
Design System Documentation Tooling 2025
takanorip
1
860
Google Stitch 大型アップデートが実現するアイデアとコードの完全なる融合
nekoailab
0
100
生成AI・AIエージェント時代、データサイエンティストは何をする人なのか?そして、今学生であるあなたは何を学ぶべきか?
kuri8ive
0
250
2025 DORA Reportから読み解く!AIが映し出す、成果を出し続ける組織の共通点 #開発生産性_findy
takabow
2
950
[続・営業向け 誰でも話せるOCI セールストーク] AWSよりOCIの優位性が分からない編(2025年11月21日開催)
oracle4engineer
PRO
1
210
Excelデータ分析で学ぶディメンショナルモデリング ~アジャイルデータモデリングへ向けて~ by @Kazaneya_PR / 20251126
kazaneya
PRO
3
800
Capture Checking / Separation Checking 入門
tanishiking
0
110
AI 時代のデータ戦略
na0
8
3k
"'TSのAPI型安全”の対価は誰が払う?不公平なスキーマ駆動に終止符を打つハイブリッド戦略
hal_spidernight
0
210
オープンデータの内製化から分かったGISデータを巡る行政の課題
naokim84
2
1.3k
Data Hubグループ 紹介資料
sansan33
PRO
0
2.3k
Featured
See All Featured
Producing Creativity
orderedlist
PRO
348
40k
Java REST API Framework Comparison - PWX 2021
mraible
34
9k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
The Straight Up "How To Draw Better" Workshop
denniskardys
239
140k
Testing 201, or: Great Expectations
jmmastey
46
7.8k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.5k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
54k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.3k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.8k
We Have a Design System, Now What?
morganepeng
54
7.9k
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
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠