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
MobileActOsaka_250704.pdf
akaitadaaki
0
130
AI専用のリンターを作る #yumemi_patch
bengo4com
5
4.3k
B2C&B2B&社内向けサービスを抱える開発組織におけるサービス価値を最大化するイニシアチブ管理
belongadmin
1
7.1k
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
2
16k
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
130k
OSSのSNSツール「Misskey」をさわってみよう(右下ワイプで私のOSCの20年を振り返ります) / 20250705-osc2025-do
akkiesoft
0
170
Enhancing SaaS Product Reliability and Release Velocity through Optimized Testing Approach
ropqa
1
230
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
480
Getting to Know Your Legacy (System) with AI-Driven Software Archeology (WeAreDevelopers World Congress 2025)
feststelltaste
1
130
MUITにおける開発プロセスモダナイズの取り組みと開発生産性可視化の取り組みについて / Modernize the Development Process and Visualize Development Productivity at MUIT
muit
1
17k
LLM時代の検索
shibuiwilliam
2
180
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
4
3.9k
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Embracing the Ebb and Flow
colly
86
4.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Documentation Writing (for coders)
carmenintech
72
4.9k
Speed Design
sergeychernyshev
32
1k
How to Ace a Technical Interview
jacobian
278
23k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
300
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!