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
あらゆる人のためのフロントエンド #frontkansai
Search
potato4d(Takuma HANATANI)
March 18, 2017
Technology
7
2.1k
あらゆる人のためのフロントエンド #frontkansai
FRONTEND CONFERENCE 2017の基調講演のスライドです。
potato4d(Takuma HANATANI)
March 18, 2017
Tweet
Share
More Decks by potato4d(Takuma HANATANI)
See All by potato4d(Takuma HANATANI)
どうせキレイに書けない処理は逆にAIに書いてもらうほうが良い説 / #kyotojs 22
potato4d
3
400
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
1
2.3k
Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11
potato4d
9
4.9k
終わりゆく 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.3k
Firebase & Google Cloud によるサーバーレス帳票管理 #FJUG / Serverless Architecture in Candy
potato4d
8
3.7k
NestJS meetup Tokyo Opening Talk / What is NestJS? #nestjs_meetup
potato4d
11
4.1k
私たちはなぜ SPA で開発するのか / Why you choose SPA
potato4d
39
27k
Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo
potato4d
6
3.5k
Other Decks in Technology
See All in Technology
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
7.7k
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
170
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
1
190
United airlines®️ USA Contact Numbers: Complete 2025 Support Guide
unitedflyhelp
0
310
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
520
AI時代の開発生産性を加速させるアーキテクチャ設計
plaidtech
PRO
3
160
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
390
敢えて生成AIを使わないマネジメント業務
kzkmaeda
2
450
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
130
Beyond Kaniko: Navigating Unprivileged Container Image Creation
f30
0
130
ゼロからはじめる採用広報
yutadayo
3
950
Tokyo_reInforce_2025_recap_iam_access_analyzer
hiashisan
0
190
Featured
See All Featured
BBQ
matthewcrist
89
9.7k
The Invisible Side of Design
smashingmag
301
51k
How GitHub (no longer) Works
holman
314
140k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
For a Future-Friendly Web
brad_frost
179
9.8k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
It's Worth the Effort
3n
185
28k
GitHub's CSS Performance
jonrohan
1031
460k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Transcript
͋ΒΏΔਓͷͨΊͷ ϑϩϯτΤϯυ FRONTEND CONFERENCE 2017 TAKUMA HANATANI
Ֆ୩ຏ • @potato4d • 18 years old • Developer at
pixiv inc. • JavaScript, Production development * ԍ
jQuery → Vue.js SCOUTER at SCOUTER inc.( https://service.scouter.co.jp )
Coffee + Backbone → Vue.js BOOTH at pixiv inc.( https://booth.pm
)
Vue.js SPA GNEX ltd. ( https://globalnet-ex.com )
JavaScriptࠓͳ͓ɺ ʮ୭ʹͰқ͍͠ݴޠʯͰ͋Δ͔ʁ Q.
No
ʮϑϩϯτΤϯυʯ ݱʹ͓͍ͯઐ৬ͱͳͬͨ
͍ͭʹReact͕jQueryͷγΣΞΛൈ͍ͨ npm trendsʹͯ؍ଌՄೳͳϞμϯڥʹݶΔ( http://www.npmtrends.com/jquery-vs-react )
αʔόʔαΠυͷʮ͓·͚ʯͰͳ͘ͳͬͨ Browser Server Browser Server
ઐ༻ͷઃܭύλʔϯ͕ੜ·Εͨ ը૾ɿ10Ͱ࣮͢ΔFlux http://azu.github.io/slide/react-meetup/flux.html
ʮաظʯΛӽ͑ΔͨΊͷπʔϧ૿͑ଓ͚Δ How it feels to learn JavaScript in 2016 https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-
❝ ❞ ʮͳ͊ɻ͏͜ΕͰऴΘΓͩͱࢥ͏Μͩɻ࣮ࡍͷ ͱ͜Ζ͏ेͩɻwebेͩ͠ɺJavaScript ·ͬͨͬͯ͘ेɺ͏͍͍ɻʯ ʲ༁ʳ 2016ʹJavaScriptΛֶΜͰͲ͏ײ͔ͨ͡ http://kikuchi1201.hateblo.jp/entry/2016/10/26/172404
ݱߦIEͷαϙʔτΓ8 https://support.microsoft.com/ja-jp/lifecycle/search/18165 8 years
ݱߦIEͷαϙʔτΓ8 https://support.microsoft.com/ja-jp/lifecycle/search/18165 8 years ʮաظʯ͕ऴΘΔ͜ͱͳ͍
$ npm install -D babel-preset-es2015
$ npm install -D babel-preset-es2016
$ npm install -D babel-preset-es2017
$ npm install -D babel-preset-es20..
$ npm install -D babel-preset-es2023
$ npm install -D babel-preset-es2024
$ npm install -D babel-preset-es2025
2025ʹͳͬͨΒ શ͕ͯٹΘΕΔͷ͔ʁ Q.
No
ະདྷͷ༷Λར༻Ͱ͖ΔڥݶΒΕΔ https://www.infoq.com/jp/news/2017/03/node-76-async-await async/await 2017/02 2017/03 2016/12
Ϟδϡʔϧόϯυϥ͕ແ͘ͳΔ͜ͱͳ͍ ESM/CommonJSͷղܾ ES2015+ͷղܾ ର͕͗͢ΔͨΊ ϒϥβͰͷαϙʔτෆՄ ϑϨʔϜϫʔΫจ๏ͷղܾ bundle.js ϒϥβ࣮ͷน
͔͜͜ΒΘ͔Δ͜ͱ
ݱࡏͷΑ͏ͳελοΫͰͷ։ൃ͘ଓ͘ + + any
͋ΒΏΔਓ͕͜ͷઌੜ͖ΔͨΊʹ
3ͭͷબࢶ
ྲྀߦͷܹ͍͠ք۾ʹ͓͚Δ3ͭͷબࢶ ΠϊϕʔλʔͰ͋Γଓ͚ɺෆ͍ͯ͠ΔʮࣄྫʯΛੜΈग़͢ 1 2 3 ΞʔϦʔΞμϓλʔͱͯ͠ɺࣗΒͷ͍͍ٕͨज़Λڭ͢Δ Stableͳٕज़ҠߦΛਐΊɺ҆ఆͨ͠ڥͰڠۀ͍͢͠ಓΛ୳͢
ΠϊϕʔλʔͰ͋Γଓ͚ɺෆ͍ͯ͠ΔʮࣄྫʯΛੜΈग़͢ •ࠓޙͦͷۀքʹશͯϕοτΛଓ͚Δਓ͕ߦ͏ࢪࡦ •ϑϩϯτΤϯυͰݴ͏ͱɺಛʹෆ͕ͪ͠ͳʮࣄྫʯΛࣗΒ͕ ੜΈग़͢͜ͱʹΑͬͯɺεςʔΫϗϧμʔͷૌٻϋʔυϧΛ Լ͛Δ •࣌ʹ௧ΈΛ͏ͷͷɺઐۀͰ͋ΔͳΒɺࠓޙͷੜଘͷͨΊ ͷࢪࡦͱͯͬ͠ͱ༗ޮ 1
ΞʔϦʔΞμϓλʔͱͯ͠ɺࣗΒͷ͍͍ٕͨज़Λڭ͢Δ •ʮϑϩϯτΤϯυΤϯδχΞʯͱͯ͠ੜ͖Δ߹ʹඞਢͱͳ Δࢪࡦ •ʮΑΓ৽͍͠πʔϧʯͷΈʹڧྗͳิॿπʔϧ͕ఏڙ͞ΕΔੈ քͰ͋ΔͨΊɺશͯΛѲ্ͨ͠Ͱɺ͕ࣗ࠷༏Ε͍ͯΔͱ ࢥ͏πʔϧʹ͍ͭͯͷใΛڞ༗͍ͯ͘͠ 2
Stableͳٕज़ҠߦΛਐΊɺ҆ఆͨ͠ڥͰڠۀ͍͢͠ಓΛ୳͢ •ϑϩϯτΤϯυΛαϒελοΫͱͯ࣋ͭ͠߹ͷ҆ఆࢪࡦ •શମͱͯ͠ΕΛऔΔ͕ɺσϑΝΫτʹ͍ٕۙज़͔ͭࣗʹ ؔͷ͋ΔϨΠϠͷΈΛΥον͢Δͱ͍͏ख๏͋Δ •جຊతʹ৽ͨͳߏΛఏ্ࣔͨ͠Ͱɺϝδϟʔʹͳͬͨޙʹࣗ ͨͪҎ֎͕͍͍͢උΛߦ͏ʹ͋Δ͜ͱΛར༻͢Δ •css-loader/style-loaderͳͲ͕ݦஶʹͦͷΛද͍ͯ͠Δ •ͯ҆ఆखʹೖΔ 3
React୯ମʹ͓͚ΔCSSͷ”ͭΒ͞” // greeting.js const styles = { greeting: { color:
#f00 } }; export default class Greeting extends Component { render() { return (<div className={styles.greeting}>Hello</div>); } };
css-loader͕खʹೖΕͨ҆ఆ // greeting.css :local{ .greeting{ color:#f00; } } // greeting.js
import styles from './greeting.css'; export default class Greeting extends Component { render() { return (<div className={styles.greeting}>Hello</div>); } };
ͯ҆ఆखʹೖΔ
େ͕ٛ͋ΔͳΒΓଓ͚Δ
ফͨ͘͠ͳ͍ͳΒউͪഅʹΔ
ʮΠϚʯͱʮະདྷʯ͕ͭͳ͕Δ FRONTEND CONFERENCE 2017
ʮ10ઓ͑Δج൫ʯ͜͜ʹ͋Δ
Let’s Enjoy!