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.8k
It’s All About DevTools
studiomohawk
0
100
Pragmatic Front-end Developer: From Artisan to Expert
studiomohawk
10
2k
Guiding Through The JavaScript Frameworks
studiomohawk
8
1.1k
CSSI: CSS Investigation
studiomohawk
21
9.6k
Performance in CSS
studiomohawk
5
370
Refactoring: What, Why and When
studiomohawk
5
290
Refactoring CSS
studiomohawk
9
540
A Recipe for Modern Mobile Front-end Development
studiomohawk
16
5.6k
Other Decks in Programming
See All in Programming
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
120
DROBEの生成AI活用事例 with AWS
ippey
0
130
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
300
テストをしないQAエンジニアは何をしているか?
nealle
0
130
Immutable ActiveRecord
megane42
0
130
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
670
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
210
Honoをフロントエンドで使う 3つのやり方
yusukebe
5
2.2k
WebDriver BiDiとは何なのか
yotahada3
1
140
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
4
370
Open source software: how to live long and go far
gaelvaroquaux
0
620
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
660
Featured
See All Featured
Code Review Best Practice
trishagee
66
17k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
Making Projects Easy
brettharned
116
6k
Designing for Performance
lara
604
68k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Typedesign – Prime Four
hannesfritz
40
2.5k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Writing Fast Ruby
sferik
628
61k
Thoughts on Productivity
jonyablonski
69
4.5k
Bash Introduction
62gerente
610
210k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
8
270
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
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