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
「ホームページ屋さん」とJavaScriptの未来。
Search
Toro_Unit (Hiroshi Urabe)
October 15, 2016
Technology
4
5.5k
「ホームページ屋さん」とJavaScriptの未来。
秋のJavaScript祭 in mixi 〜秋のJavaScript収穫祭〜 の当男子寮です。
https://javascript-fes.doorkeeper.jp/
Toro_Unit (Hiroshi Urabe)
October 15, 2016
Tweet
Share
More Decks by Toro_Unit (Hiroshi Urabe)
See All by Toro_Unit (Hiroshi Urabe)
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
torounit
0
180
ブロックテーマでサイトリニューアルした話 / Toro_Unit / 2025.04.12 @ Shinshu WordPress Meetup
torounit
1
230
Cloudflare Meetup Nagano Vol.3
torounit
1
110
僕が考える 「HTML サイトを WordPress にする」話 / 2023-11-05 Kansai WordPress Meetup
torounit
9
7.7k
Cloudflare Pages に入門してみた / 2023-10-14 Cloudflare Meetup Nagano Vol.2
torounit
2
1.9k
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
torounit
15
10k
ブロックエディターカスタマイズことはじめ #wpshinshu / 2023-06-17 Shinshu WordPress Meetup vol.24
torounit
1
420
FSE時代におけるWEBサイト制作の研究 #wpshinshu / 2023-05-20 Shinshu WordPress Meetup vol.23
torounit
0
470
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
580
Other Decks in Technology
See All in Technology
Click A, Buy B: Rethinking Conversion Attribution in ECommerce Recommendations
lycorptech_jp
PRO
0
100
業務効率化をさらに加速させる、ノーコードツールとStep Functionsのハイブリッド化
smt7174
2
150
現場データから見える、開発生産性の変化コード生成AI導入・運用のリアル〜 / Changes in Development Productivity and Operational Challenges Following the Introduction of Code Generation AI
nttcom
0
270
Findy Team+ QAチーム これからのチャレンジ!
findy_eventslides
0
450
20251007: What happens when multi-agent systems become larger? (CyberAgent, Inc)
ornew
1
440
Digitization部 紹介資料
sansan33
PRO
1
5.6k
やる気のない自分との向き合い方/How to Deal with Your Unmotivated Self
sanogemaru
1
520
能登半島災害現場エンジニアクロストーク 【JAWS FESTA 2025 in 金沢】
ditccsugii
0
900
プロダクトのコードから見るGoによるデザインパターンの実践 #go_night_talk
bengo4com
1
2.6k
Codexとも仲良く。CodeRabbit CLIの紹介
moongift
PRO
1
250
Geospatialの世界最前線を探る [2025年版]
dayjournal
1
240
なぜAWSを活かしきれないのか?技術と組織への処方箋
nrinetcom
PRO
5
980
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Being A Developer After 40
akosma
91
590k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Embracing the Ebb and Flow
colly
88
4.9k
Statistics for Hackers
jakevdp
799
220k
Speed Design
sergeychernyshev
32
1.2k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
RailsConf 2023
tenderlove
30
1.3k
Side Projects
sachag
455
43k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Documentation Writing (for coders)
carmenintech
75
5.1k
Transcript
ʮϗʔϜϖʔδ͞Μʯ ͱJavaScriptͷະདྷɻ Toro_Unit / 2016.10.15 @ ळͷJavaScriptࡇɹin mixi ʙळͷJavaScriptऩ֭ࡇʙ 1
ݝদຊࢢ͔Β͖·ͨ͠ɻ1 Ͱग़܈അɻ 1 https://commons.wikimedia.org/wiki/File: 130608_Matsumoto_Castle_Matsumoto_Nagano_pref_Japan02bs4.jpg Author: 663highland. License: CC BY
2.5 2
3
$ whoami ͜͡͠ΐ͏͔͍ 4
Toro_Unit / ෦ ߛ Freelance Frontend Engineer / Web Designer
WordPress plugin and theme developer 27 years old. I love sake and OSS! Github: @torounit Twitter: @Toro_Unit 5
ͭ·Γ 6
ํͷϗʔϜϖʔδ͞ΜͰ͢ɻ 7
ࠓ·Ͱͷ͓ࣄ ओʹݝͷ੍࡞ձࣾ࣌ ( 2009.09 ~ 2015.12 ) 8
͖ͬͯͨ͜ͱ • HTML&CSS ։ൃ / ͨ·ʹWebσβΠϯ • JavaScriptjQueryͰΰϦΰϦܥɻ • CMS
ςʔϚ੍࡞ • ( 9ׂํ WordPress or MovableType / ͨ·ʹDrupalͱ͔...etc ) • CMS ΧελϚΠζɾϓϥάΠϯ੍࡞ • ( ΧελϜϑΟʔϧυΊͬͪΌ࡞ͬͨΓɺPHPΊͬͪΌॻ͍ͨΓ ) • ڥ΄ͱΜͲϨϯλϧαʔόʔ (LAMP) 9
ͬͯͳ͍͜ͱ • γϯάϧϖʔδΞϓϦέʔγϣϯ • WEBαʔϏε։ൃ • εϚϗΞϓϦ։ൃ • γεςϜ։ൃ 10
ʮϗʔϜϖʔδ͞Μʯʹͱͬͯͷ JavaScriptͱɻ 11
ͪΐͬͱͨ͠ΞχϝʔγϣϯΛͭ͘ΔͨΊͷͷʂ GoogleMap ʹϐϯΛཱͯͨΓ͢ΔͨΊͷͷʂ 12
ͭ·Γ 13
14
ϗʔϜϖʔδ͞Μ͜͏ࢥͬͯΔΜ͡Ό... ͋͘·ͰͷײͰ͢ɻ • ʮReact/Angular/riot/Vue.js ͱ͔࠷໊ۙલݟΔ͚Ͳͳʹͦ Εඒຯ͍͠ͷʁʯ • ʮΞϓϦ͞Μ͕͔ͭ͏ͷͩΑͶʔʯ • ʮ͋Μ·Γؔͳ͍ΑͶʔʯ
15
...Ͱ΄Μͱʹ͍͍ͷʁ ʮͦΜͳඋͰେৎ͔ʁʯ 16
ͪΐͬͱ͜͜10ऑͷUIͷมભΛৼΓฦͬͯΈ·͠ΐ͏ɻ 17
࡞ͬͨ͜ͱ͋Δਓ݁ߏډΔΜ͡Όແ͍Ͱ͠ΐ͏͔ʁ • υϩϫʔϝχϡʔɾλϒɾΞίʔσΟΦϯɾίϯςϯπεϥΠμʔ • ແݶεΫϩʔϧ • ϦΞϧλΠϜͳϑΥʔϜͷόϦσʔγϣϯ • ՄมάϦου •
Ϩεϙϯγϒ • ...etc 18
WEBαΠτͰJavaScriptΛͨΓલʹར༻͢ΔΑ͏ʹɻ • JSΛແޮʹ͢Δͷ͕ਈ࢜ɾ॔ঁͷᅂΈͩͬͨ࣌Կॲ Βɻ • Flashશͷ͋ͷࠒ͕ջ͔͍͠ɻ • JS͕ແޮͳڥͳͨΊͰແ͘ɺΞΫηγϏϦςΟͷͨΊʹ ͪΌΜͱHTMLΛॻ࣌͘ʹɻ 19
͜ͷͰ͍Ζ͍ΖਐԽͯ͠·͢ΑͶ 20
• ͜Ε͔ΒUIͷཁٻ͖ͬͱ্͕Γଓ͚Δɻ • σβΠφʔ͔Βɾސ٬͔Βͷཁٻ্͕Γଓ͚ΔΑͶɻ(ԕ͍ ) 21
ͨͱ͑͜Μͳͷ 22
23
Good Morning Sunshine • gms.life • new barlance ͷWEBϚΨδϯ •
CMS͕ग़ྗͨ͠JSONΛAjaxͰऔ͖ͬͯͯɺReactͰϨϯμϦ ϯάɻ 24
΄͔ʹ͜Μͳͷ • ustwo.com • άϩʔόϧల։͍ͯ͠Δւ֎ͷσβ ΠϯελδΦɻ • όοΫΤϯυWordPressɻϑϩϯ τΤϯυɺReact +
SSRɻ • github.com/ustwo/ustwo.com- frontend 25
WEBαΠτ্ʹΞϓϦΈ͍ͨͳͷ͕ ͋ΔΑ͏ͳࣄྫ૿͖͑ͯͨɻ 26
27
dressup-navi.net https://dressup-navi.net/parts/8039/ • WordPressͰͷهࣄ্ʹɺ4ͷΫΠζɻ • WP REST API + React
+ Redux 28
jQuery͚ͩͰؤுΕΔɾɾɾʁ ͓ΕΉΓ 29
ϝδϟʔͳCMSREST APIΛࡌ͢ΔΑ͏ʹ • WP REST API • Movable Type Data
API • ...etc 30
͜͏͍ͬͨදݱ͕ͨΓલʹͳΔ͔͠Εͳ͍ɻ ɹͳΒͳ͍͔͠Εͳ͍ɻ 31
ͦΕͰWEBͰͷදݱਐԽ͠ଓ͚Δͣɻ ཁ...ʢԕ͍ʣ 32
ͦΕΛ࣮ݱ͢ΔͷɺHTMLŋCSS ͦͯ͠ɺJavaScirpt 33
jQuery is not evil. • jQueryͰेͳ͜ͱແཧͯ͠ؤுΔඞཁແ͍ɻ • ͪΐͬͱͨ͜͠ͱΛΔͷʹjQueryຊʹ࠷ߴɻ • ͰɺjQuery͕ແ͍ͱԿग़དྷͳ͍͍ͬͯ͏ͷͨͿΜͭΒ
͍ɻ 34
·ͱΊ • WEBαΠτͰJSϑϨʔϜϫʔΫΛ͏͜ͱ͋ΔΑɻ • ΞϓϦΈ͍ͨͳදݱ૿͑Δ͔Αɻ • ͦ͏ͳͬͨͱ͖ɺjQuery͔͠ث͕ແ͍ͱͭΒ͍͔Αɻ 35
ͱΓ͋͑ͣɺTodoΞϓϦͱ͔ͷࣸܦ͔Β࢝ΊΔɻ ͜ΕҎ্ઌӶԽ͢Δલʹ৮ͬͱ͜͏ͥɻ 36
͋Δબࢶͷத͔ΒjQueryΛʮબग़དྷΔʯΑ͏ʹͳΖ͏ɻ 37
͓ΘΓɻ ࠙ձͰ·͓ͨ͠·͠ΐ͏ɻ Thanks! Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit WEB
Site: https://torounit.com 38