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
130
ブロックテーマでサイトリニューアルした話 / Toro_Unit / 2025.04.12 @ Shinshu WordPress Meetup
torounit
1
220
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
株式会社ログラス - 会社説明資料【エンジニア】/ Loglass Engineer
loglass2019
4
65k
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
260
Evolución del razonamiento matemático de GPT-4.1 a GPT-5 - Data Aventura Summit 2025 & VSCode DevDays
lauchacarro
0
210
これでもう迷わない!Jetpack Composeの書き方実践ガイド
zozotech
PRO
0
1k
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
sh_fk2
3
260
なぜテストマネージャの視点が 必要なのか? 〜 一歩先へ進むために 〜
moritamasami
0
230
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
570
20250912_RPALT_データを集める→とっ散らかる問題_Obsidian紹介
ratsbane666
0
100
DroidKaigi 2025 Androidエンジニアとしてのキャリア
mhidaka
2
380
dbt開発 with Claude Codeのためのガードレール設計
10xinc
2
1.3k
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
470
5年目から始める Vue3 サイト改善 #frontendo
tacck
PRO
3
230
Featured
See All Featured
Building Applications with DynamoDB
mza
96
6.6k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Balancing Empowerment & Direction
lara
3
620
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Rails Girls Zürich Keynote
gr2m
95
14k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Docker and Python
trallard
46
3.6k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
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