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)
ブロックテーマでサイトリニューアルした話 / Toro_Unit / 2025.04.12 @ Shinshu WordPress Meetup
torounit
1
220
Cloudflare Meetup Nagano Vol.3
torounit
1
100
僕が考える 「HTML サイトを WordPress にする」話 / 2023-11-05 Kansai WordPress Meetup
torounit
9
7.6k
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
460
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
570
ブロックエディターで変わる、WordPress でのウェブサイト開発 / SaCSS Special 26
torounit
4
890
Other Decks in Technology
See All in Technology
ライブサービスゲームQAのパフォーマンス検証による品質改善の取り組み
gree_tech
PRO
0
410
スプリントレトロスペクティブはチーム観察の宝庫? 〜チームの衝突レベルに合わせたアプローチ仮説!〜
electricsatie
1
140
進捗
ydah
2
220
JavaScript 研修
recruitengineers
PRO
6
1.3k
コスト削減の基本の「キ」~ コスト消費3大リソースへの対策 ~
smt7174
2
310
DuckDB-Wasmを使って ブラウザ上でRDBMSを動かす
hacusk
1
140
Function Body Macros で、SwiftUI の View に Accessibility Identifier を自動付与する/Function Body Macros: Autogenerate accessibility identifiers for SwiftUI Views
miichan
2
150
Vault meets Kubernetes
mochizuki875
0
150
Product Management Conference -AI時代に進化するPdM-
kojima111
0
270
allow_retry と Arel.sql / allow_retry and Arel.sql
euglena1215
0
140
実践データベース設計 ①データベース設計概論
recruitengineers
PRO
4
1.9k
【初心者向け】ローカルLLMの色々な動かし方まとめ
aratako
2
170
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Building Applications with DynamoDB
mza
96
6.6k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Bash Introduction
62gerente
614
210k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
20k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Visualization
eitanlees
147
16k
Writing Fast Ruby
sferik
628
62k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
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