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
360
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
1
2.2k
Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11
potato4d
9
4.8k
終わりゆく Vue 2.x 時代の状態設計のアンサー - Vue 3 の Provider への期待 / The Last Architecture of the Vue 2.x
potato4d
25
6.9k
Web Worker を使ってブラウザ上でポケモンの画像を解析したい! / Pokemon recognition from screenshots in browser using web worker
potato4d
0
1.2k
Firebase & Google Cloud によるサーバーレス帳票管理 #FJUG / Serverless Architecture in Candy
potato4d
8
3.6k
NestJS meetup Tokyo Opening Talk / What is NestJS? #nestjs_meetup
potato4d
11
4k
私たちはなぜ SPA で開発するのか / Why you choose SPA
potato4d
39
26k
Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo
potato4d
6
3.5k
Other Decks in Technology
See All in Technology
1行のコードから社会課題の解決へ: EMの探究、事業・技術・組織を紡ぐ実践知 / EM Conf 2025
9ma3r
12
4.3k
サイト信頼性エンジニアリングとAmazon Web Services / SRE and AWS
ymotongpoo
7
1.7k
OPENLOGI Company Profile for engineer
hr01
1
20k
アジャイルな開発チームでテスト戦略の話は誰がする? / Who Talks About Test Strategy?
ak1210
1
660
"TEAM"を導入したら最高のエンジニア"Team"を実現できた / Deploying "TEAM" and Building the Best Engineering "Team"
yuj1osm
1
230
4th place solution Eedi - Mining Misconceptions in Mathematics
rist
0
150
データモデルYANGの処理系を再発明した話
tjmtrhs
0
160
Amazon Aurora のバージョンアップ手法について
smt7174
2
180
ExaDB-XSで利用されているExadata Exascaleについて
oracle4engineer
PRO
3
280
Snowflake ML モデルを dbt データパイプラインに組み込む
estie
0
110
リクルートのエンジニア組織を下支えする 新卒の育成の仕組み
recruitengineers
PRO
1
140
What's new in Go 1.24?
ciarana
1
110
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
69
10k
Music & Morning Musume
bryan
46
6.4k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
520
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
51k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Writing Fast Ruby
sferik
628
61k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
Building an army of robots
kneath
303
45k
How to Ace a Technical Interview
jacobian
276
23k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
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
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠