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
2k
あらゆる人のためのフロントエンド #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
290
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
1
2k
Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11
potato4d
9
4.7k
終わりゆく Vue 2.x 時代の状態設計のアンサー - Vue 3 の Provider への期待 / The Last Architecture of the Vue 2.x
potato4d
25
6.7k
Web Worker を使ってブラウザ上でポケモンの画像を解析したい! / Pokemon recognition from screenshots in browser using web worker
potato4d
0
1.1k
Firebase & Google Cloud によるサーバーレス帳票管理 #FJUG / Serverless Architecture in Candy
potato4d
8
3.5k
NestJS meetup Tokyo Opening Talk / What is NestJS? #nestjs_meetup
potato4d
11
3.8k
私たちはなぜ SPA で開発するのか / Why you choose SPA
potato4d
39
26k
Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo
potato4d
6
3.3k
Other Decks in Technology
See All in Technology
エンジニア向け会社紹介資料
caddi_eng
14
270k
Azure App Service on Linux の Sidecar に Phi-3 を配置してインテリジェントなアプリケーションを作ってみよう/jazug-anniv14
thara0402
0
550
怖くないオフライン機能開発 〜基本的な技術で実現する現場向けオフライン機能 / Developing offline functions without fear ~ Offline functions for the field realized with basic technology
kaminashi
1
120
Kubernetes Meetup Tokyo #67 - KEP-3619: Fine-grained SupplementalGroups Control / k8sjp67-kep-3619
everpeace
0
170
これはPerl? それともRuby? クイズ〜〜〜〜〜!!!- Perl or Ruby Quiz
moznion
2
2k
【完全版】Dify - LINE Bot連携 考え方と実用テクニック
uezo
2
620
Efficient zero-copy networking using io_uring
ennael
PRO
0
410
From naive to advanced RAG: the complete guide
glaforge
0
290
データ分析基盤のためにS3を深堀りする~アーキテクチャ設計の考え方のヒントに~
nrinetcom
PRO
1
110
JAWS PANKRATION 2024 配信システムの紹介
yoshimi0227
0
100
Deno Deploy で Web Cache API を 使えるようになったので試した知見
toranoana
1
120
令和最新版 Perlコーディングガイド
anatofuz
5
4k
Featured
See All Featured
Side Projects
sachag
452
42k
[RailsConf 2023] Rails as a piece of cake
palkan
49
4.8k
How to Ace a Technical Interview
jacobian
275
23k
Documentation Writing (for coders)
carmenintech
65
4.4k
How To Stay Up To Date on Web Technology
chriscoyier
787
250k
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
What the flash - Photography Introduction
edds
67
11k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.5k
Building an army of robots
kneath
302
42k
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!