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.3k
「ホームページ屋さん」と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)
僕が考える 「HTML サイトを WordPress にする」話 / 2023-11-05 Kansai WordPress Meetup
torounit
9
7.1k
Cloudflare Pages に入門してみた / 2023-10-14 Cloudflare Meetup Nagano Vol.2
torounit
2
1.2k
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
torounit
14
9.3k
ブロックエディターカスタマイズことはじめ #wpshinshu / 2023-06-17 Shinshu WordPress Meetup vol.24
torounit
1
330
FSE時代におけるWEBサイト制作の研究 #wpshinshu / 2023-05-20 Shinshu WordPress Meetup vol.23
torounit
0
400
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
510
ブロックエディターで変わる、WordPress でのウェブサイト開発 / SaCSS Special 26
torounit
4
820
Block Editor カスタマイズ入門 #WPmeetupOsaka / Get started customize for block editor
torounit
12
3k
本当にだれにでもできる、WordPress をよりよいものにする方法。/ wordcamp tokyo 2019
torounit
2
2.5k
Other Decks in Technology
See All in Technology
ゆめみのアクセシビリティの現在地と今後
ryokatsuse
3
290
楽しくGoを学び合う、LayerXの勉強会文化 / LayerX's study culture of having fun and learning Go together
ar_tama
2
350
VPoEの視点から見た、ヘンリーがサーバーサイドKotlinを使う理由 / Why Server-side Kotlin 2024
cho0o0
1
420
AutomatedLabを使って内部ペンテストを勉強しよう! -やられ社内ネットワークの自動構築-
n_etupirka
1
610
コミュニティサービスに「あなたへ」フィードを リリースするまでの試行錯誤
takapy
1
150
Android研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
100
E2Eテスト自動化プラットフォームにおけるAIの活用
shift_evolve
0
190
20240724_cm_odyssey_hibiyatech
hiashisan
0
110
DDDにおける認可の扱いとKotlinにおける実装パターン / authorization-for-ddd-and-kotlin-implement-pattern
urmot
4
390
OSSコミットしてZennの課題を解決した話
dyoshikawa1993
0
150
累計ダウンロード数1億8000万を超えるアプリケーションプラットフォームのレガシーシステム脱却とモダン化への道
kmitsuhashi
0
120
エンジニアリングマネージャーはどう学んでいくのか #devsumi / How Do Engineering Managers Continue to Learn and Grow?
expajp
4
1.3k
Featured
See All Featured
How to name files
jennybc
67
96k
Building Adaptive Systems
keathley
34
2k
Producing Creativity
orderedlist
PRO
340
39k
Build your cross-platform service in a week with App Engine
jlugia
227
17k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
17
8.7k
Embracing the Ebb and Flow
colly
81
4.3k
Become a Pro
speakerdeck
PRO
15
4.8k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
2.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
GitHub's CSS Performance
jonrohan
1026
450k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
35
6.3k
It's Worth the Effort
3n
181
27k
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