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
Leveling Up Your Front-end skills
Search
Yuya Saito
January 25, 2014
Programming
6
1.4k
Leveling Up Your Front-end skills
Links:
https://gist.github.com/studiomohawk/8610173
Yuya Saito
January 25, 2014
Tweet
Share
More Decks by Yuya Saito
See All by Yuya Saito
Design System as a Product @ Frontrend Vol.8
studiomohawk
2
4.9k
It’s All About DevTools
studiomohawk
0
120
Pragmatic Front-end Developer: From Artisan to Expert
studiomohawk
10
2.1k
Guiding Through The JavaScript Frameworks
studiomohawk
8
1.1k
CSSI: CSS Investigation
studiomohawk
21
9.7k
Performance in CSS
studiomohawk
5
390
Refactoring: What, Why and When
studiomohawk
5
300
Refactoring CSS
studiomohawk
9
570
A Recipe for Modern Mobile Front-end Development
studiomohawk
16
5.6k
Other Decks in Programming
See All in Programming
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
980
RailsGirls IZUMO スポンサーLT
16bitidol
0
210
フロントエンドのパフォーマンスチューニング
koukimiura
6
2.2k
CDK引数設計道場100本ノック
badmintoncryer
2
520
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
24
9.9k
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
2
240
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
180
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
150
PHPカンファレンス関西2025 基調講演
sugimotokei
5
870
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
12k
構造化・自動化・ガードレール - Vibe Coding実践記 -
tonegawa07
0
120
Yes, You Can Work on Rails & any other Gem
kaspth
0
110
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
710
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Statistics for Hackers
jakevdp
799
220k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
How STYLIGHT went responsive
nonsquared
100
5.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Designing Experiences People Love
moore
142
24k
4 Signs Your Business is Dying
shpigford
184
22k
Thoughts on Productivity
jonyablonski
69
4.7k
Transcript
Leveling Up Front-end Skills Yuya Saito @ Frontrend in Fukuoka
#frontrend_ff
None
Hands On Multi Tracks &
Yuya Saito Frontend Developer @ CyberAgent
None
None
Agenda Front-end Development is Easy!? ϑϩϯτΤϯυ։ൃ؆୯ No, it’s not! ϑϩϯτΤϯυ
ɾ εΩϧΛϨϕϧΞοϓ͠Α͏ There are actually more… ͞ΒͳΔਂʜ How to learn all this? ϑϩϯτΤϯυ ɾ εΩϧͷֶͼํ
Front-end Development is Easy!? ϑϩϯτΤϯυ։ൃ؆୯
ͭͷڞ௨͕͋Δ HTML, CSS & JavaScript
ͷߴ͞ Learnability
WWW is Only 20 Years Old
HTML
< > TAG NAME
TAG NAME About 100 of
CSS
selector { property: value; }
selector { color: red; }
JavaScript
JavaScript ؆୯Ͱͳ͍ͷͰ
function if var for {} while [] try {} catch
(e) {}
JavaScript γϯϓϧͰ༰ͳݴޠ
JavaScript ϒϥβ͑͋͞Ε࣮ߦͰ͖Δ
Learnability ͕ٕज़ͷ͕ΓΛੜΈग़ͨ͠ɻ
No, it’s not! ϨϕϧΞοϓ͠Α͏ ϑϩϯτΤϯυ ɾ εΩϧΛ
None
ϒϥβͷ෦ߏΛΔ Browser Learn:
Browser։ൃڥ
BrowserϓϥοτϑΥʔϜ
BrowserιϑτΣΞ
html5rocks.com/en/tutorials/internals/howbrowserswork
Google Chrome Developer Relations Paul Irish
❞ As a web developer, learning the internals of browser
operations helps you make better decisions and know the justifications behind development best practices. While this is a rather lengthy document, we recommend you spend some time digging in; we guarantee you'll be glad you did. - Paul Irish
❞ ϒϥβ෦ͷಇ͖ΛֶͿࣄ 8FC։ൃऀʹͱͬͯΑΓΑ͍ղܾΛߦ͏͜ͱɺ ͦͯ͠։ൃʹ͓͚ΔϕετϓϥΫςΟεͷഎޙʹ͋Δ ࠜڌΛཧղ͢Δ͜ͱʹͭͳ͕Γ·͢ɻ ͜ͷهࣄ͍ͷͰ͋Γ·͕͢ɺ গ࣌ؒ͠Λׂ͍ͯಡΜͰΈ͍ͯͩ͘͞ɻ ͦͷ͕࣌ؒແବʹͳΒͳ͍͜ͱอূ͠·͢ɻ - Paul
Irish
chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome
ۜͷؙଘࡏ͠ͳ͍ɻ ؙ͔ͦ͠͠ͷͷଘࡏ͍ͯ͠Δɻ ؙͷબͼํΛֶͿ͜ͱ͕େɻ Learn:
ߏઃܭͷํ๏ΛΔ JavaScript Learn:
jQuery͚ͩͰेͰͳ͍ɻ Not Just jQuery
jQueryͲΜͳΛղܾ͠Α͏ͱ What jQuery is? ͍ͯ͠Δͷ͔
JavaScriptʹ͓͚ΔΞϓϦͷઃܭ Architecture
ׂ୲ΛͲ͏ɾ݁߹͢Δͷ͔ MV*
Backbone.js Angular.js Ember.js ͦΕͧΕʹརͱ͕ܽ͋Δɻ
ίϝϯτΛؚΊͯ1,600ߦఔ Read: Backbone.js
TODOΞϓϦҎ֎ͷαϯϓϧΛ ࡞ͬͯΈΔɻ with Backbone.js
Angular.jsͰॻ͖͑ͯΈΔɻ
MV*͕ͲΜͳΛ ղܾ͠Α͏ͱ͍ͯ͠Δͷ͔ Learn:
Fail Fast Fail Often
ߏઃܭͷํ๏ΛΔ CSS Learn:
CSS: Style Layout Animation
CSS needs Architecture, too ͦͷͨΊͷػೳଘࡏ͠ͳ͍ͱ͍͏ໃ६
Learn: CSS Preprocessor
CSS Preprocessor Learn: Doesn’t Solve it! CSSͷઃܭΛ༰қʹͯ͘͠ΕͨΓ͠ͳ͍
OOCSS SMACSS BEM by Nicole Sullivan by Jonathan Snook by
Yandex
They’re just An Example. ͜ΕΒͷํ๏͋͘·Ͱྫɻ
ͳΜͲ܁Γฦ͞ΕΔɺ ͋Δ͍܁Γฦ͢͜ͱ͕Ͱ͖Δɺ ύλʔϯΛͲͷΑ͏ʹ ൃݟ͠ɺ ࣮͠ɺ ໋໊͢Δͷ͔ɻ
by ୩ थ 15:30~ @ ձٞࣨ5 Goal of Better CSS
Architecture
youtu.be/BlSFXdnuq5E
Modularity Learn: ϞδϡϥʔԽΛΔ
More Than A Few Thousand Lines of Codes ઍߦʹٴͿίʔυ͘͠ͳ͍ɻ
ͳΜͷσβΠϯઃܭͳ͘ɺ ୯७ʹϑΝΠϧΛׂͯ͠࡞ۀΛߦ͑ ϖʔδϩʔυͷ࠷దԽͷجຊݪଇͰ͋Δɺ HTTPϦΫΤετΛ ૿͢͜ͱʹͳͬͯ͠·͏ɻ
CSSͳΒ·ͩ͠ɺ JavaScriptʹղফ͠ͳ͚ΕͳΒͳ͍ ґଘ࣮ؔ֬ʹଘࡏ͢ΔͰ͠ΐ͏ɻ
Modular Design
None
Module Design JavaScriptʹCSSʹݱ࣌Ͱ ͜ͷϒϩοΫ๏Λ࣮ݱ͢ΔͨΊͷ ػೳݴޠͱͯ͠༻ҙ͞Ε͍ͯͳ͍ɻ
There are Tools (a lot)
Require.js by James Burke
Learn: Asynchronous Module Definition
Require.js is Good But... Require.jsʹ͋Δ...
Node.js IS JavaScript But... Node.jsͰฉ͔ͳ͍...?
CommonJS
Browserify.js by James Holiday AKA substack
ES6 import / export
CSS?
Testing Learn: ϢχοτςετΛΔ
Linting is First Step to Test ·ͣLint͔Β࢝ΊΔ
ࣗ৴Λ࣋ͬͯؒҧ͍Λਖ਼͢ ϫʔΫϑϩʔΛ࣋ͭɻ
Refactoring
Learn: Jasmine Mocha or
CSS?
CSS needs Testing
Not Yet
speakerdeck.com/studiomohawk/testable-javascript
speakerdeck.com/studiomohawk/unit-testing-with-jasmine
Performance Learn: ύϑΥʔϚϯεΛΔ
ύϑΥʔϚϯεػೳ
Tools, not Rules. - Paul Lewis
ϕετ͕ৗʹϕετͱݶΒͳ͍ɻ
-webkit-transform: translate3d(0,0,0);
What we can measure, we can optimize! - Ilya Grigorik
None
Network Panel
Timeline Panel
Profile Panel
developers.google.com/chrome-developer-tools/
There are actually more… ͞ΒͳΔਂʜ
Quick Peek ͘͝؆୯ʹɻ
Cross Brower Platform Device
Test Early
$49, Mac Only GhostLab
github.com/shakyShane/browser-sync
Progressive Enhancement
ৗʹ৽͍ٕ͠ज़Λ࠾༻͢Δ͜ͱΛ ظ͞Εͳ͕Βɺ աڈͷϒϥβͷରԠΛഭΒΕΔໃ६ɻ
Progressive Enhancement ϑϩϯτΤϯυ։ൃऀͷಠஃɻ
ϒϥβσόΠεͰ੍ݶΛ ߟ͑ΔͷͰͳ͘ɺ ίϯϙʔωϯτ୯ҐͰઓུΛߟ͑Δɻ
!lamentgroup.com/lab/grade_components/
Template
HTMLΛͦͷ··هड़͢Δ͜ͱ͕ ݮ͖͍ͬͯͯΔɻ
No Choice on Server Side αʔόαΠυͷςϯϓϨʔτʹ͍ͭͯ զʑʹબࢶ͕༩͑ΒΕΔ͜ͱͳ͍ɻ
CMSΛؚΊͯɺ ϝδϟʔͳϑϨʔϜϫʔΫͰ ࠾༻͞Ε͍ͯΔςϯϓϨʔτݴޠʹ͍ͭͯ ͓͖֮͑ͯ͘ɻ
Too Many on Client Side ΫϥΠΞϯταΠυʹ બ͢Δ͜ͱ͕͍͠΄Ͳଘࡏ͢Δɻ
Handlebars.js Underscore.js
Research
Advocate for the Open Web Molly Holzschlag
❞ If you want to be doing the same things
for the next 10 years, you're in the wrong job. - Molly Holzschlag
❞ ࣍ͷؒɺ ಉ͜͡ͱΛ͍͍ͯͨ͠ͱ ࢥ͏ͳΒɺ ͜ͷۀք͍͍ͯͳ͍ɻ - Molly Holzschlag
Web will be always Changing.
Inovation
Self Learning
Πϊϕʔγϣϯʹରͯ͠ ৗʹහײͰ͋Γ͚ͭͮΔ͜ͱ ϑϩϯτΤϯυ։ൃऀͷɻ
ใऩूश׳Խ͕伴ɻ
How to learn all this? ϑϩϯτΤϯυ ɾ εΩϧͷֶͼํ
֫ಘͰ͖Δͷ͔ Ͳ͏ͨ͠Β͜ΕΒͷεΩϧΛ
ਫ਼௨͍ͯ͠Δͷ͔ ࢲࣗͯ͢ͷεΩϧʹ Better Question
No.
͋ΔͣͰ͢ɻ օ͞Μʹಘҙͳδϟϯϧ ूத͢Δ͖ɻ ·ͣͦ͜Λ৳͍ͯ͘͜͠ͱʹ
T ❌
I
None
None
ଞͷεΩϧʹֶ͍ͭͯͿඞཁੑ͕ Կ͔ͭͷεΩϧΛਂߞ͢Δ্Ͱɺ ඞͣग़͖ͯ·͢ɻ
None
None
Homework Կ͕ಘҙͳͷ͔ Կʹڵຯ͕͋Δͷ͔
What’s your Goal?
Apple CEO Steve Jobs
❞ You can't connect the dots looking forward; you can
only connect them looking backwards. So you have to trust that the dots will somehow connect in your future. - Steve Jobs
❞ ઌΛಡΜͰͱΛͭͳ͙͜ͱͰ͖·ͤΜɻ ޙ͔ΒৼΓฦͬͯॳΊͯͰ͖ΔͷͰ͢ɻ ͦΕΒͷඞͣͲ͔͜ͷະདྷͰ ͭͳ͕Δ͜ͱΛ৴͡ͳ͚ΕͳΒͳ͍ͷͰ͢ɻ - Steve Jobs
One More Thing...
Ask Why, Not How.
Thank You! Follow me @ cssradar