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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
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.5k
私たちはなぜ SPA で開発するのか / Why you choose SPA
potato4d
38
29k
Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo
potato4d
6
3.7k
Other Decks in Technology
See All in Technology
PHPカンファレンス関西の招待状 / Invitation to PHP Conference Kansai
ykanoh
0
220
Code for Security プロジェクト紹介 2026年10月
yu23ki14
0
120
Temporal 最高!でも改めて「日付」について調べたら人類の負債すぎる件
riyaamemiya
0
210
DGX Spark でどこまでハッキングができるのか?
kash1064
3
1.4k
Let's Change Our World—Again
snoozer05
PRO
2
180
Codex を使った障害対応机上演習の実際
orgachem
PRO
0
140
事業成長とデータ活用を止めないためのマネジメントへ挑戦
hiracky16
0
420
How to Design Configuration for Rails Applications
willnet
1
940
AI時代のGraphQL
joere
1
260
10年後、Engineering 行為を剥奪されるとして、わたしたちは、どう、何を創ればいいだろうか。 / If Engineering Is Taken Away in 10 Years, How and What Should We Create?
bitkey
PRO
1
220
ストレスなくAIと付き合いたい!こんなときどうしてる?
namiki64
4
650
[JAWS-UG彩の国埼玉#12]そろそろ準備する?re:Invent2026をやさしく解説 / reinvent2026-sainokuni
sh_fk2
1
370
Featured
See All Featured
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
1.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
53
4k
The Art of Programming - Codeland 2020
erikaheidi
57
14k
State of Search Keynote: SEO is Dead Long Live SEO
ryanjones
0
320
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
greggifford
PRO
0
370
Game over? The fight for quality and originality in the time of robots
wayneb77
1
310
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1.6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
62k
The Language of Interfaces
destraynor
162
27k
The AI Search Optimization Roadmap by Aleyda Solis
aleyda
2
6.3k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
uxyall
1
3.4k
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
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠