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
カジュアルなフロントエンドでこの先生きのこるには
Search
Ayumu Sato
October 18, 2014
Programming
5
1.4k
カジュアルなフロントエンドでこの先生きのこるには
Frontrend in KANAZAWA
http://labo.dmm.com/frontrend/
で使用したスライドです。本編40分。
Ayumu Sato
October 18, 2014
Tweet
Share
More Decks by Ayumu Sato
See All by Ayumu Sato
なぜ「無責任な横軸」がうまくいかないのか 〜 組織の生産性にインパクトを与える振る舞いを考える
ahomu
7
2.5k
Web 開発の長距離走と持続可能性 - TechFeed Experts Night#31 〜 フロントエンドアーキテクチャの現状と未来
ahomu
1
210
控えめな App Router と持続可能な開発 - PWA Night vol.59
ahomu
11
3k
GPT 生成物の評価、運用 toC 企画でのハードルと勘所
ahomu
0
300
副業をきっかけに 切り拓くキャリア形成
ahomu
1
160
Webフロントエンドと アーキテクチャ事情の持論を喋る
ahomu
2
1.7k
SPA/MPA 議論の俯瞰と 現代における設計のポイント - #tfcon 2022 フロントエンド設計
ahomu
5
3.7k
#TECHPLAY Talk - 理想的な Web のため MUST 駆動で主語が大きくなったキャリア
ahomu
0
290
最近の Web パフォーマンス改善について知っておきたいコト
ahomu
50
20k
Other Decks in Programming
See All in Programming
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
120
Discover Metal 4
rei315
2
110
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
320
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
170
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1.2k
Result型で“失敗”を型にするPHPコードの書き方
kajitack
4
560
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
240
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
620
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
590
GoのGenericsによるslice操作との付き合い方
syumai
3
720
Deep Dive into ~/.claude/projects
hiragram
10
2.2k
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
72
4.9k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Facilitating Awesome Meetings
lara
54
6.4k
Music & Morning Musume
bryan
46
6.6k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
17
950
RailsConf 2023
tenderlove
30
1.1k
Balancing Empowerment & Direction
lara
1
390
For a Future-Friendly Web
brad_frost
179
9.8k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
230
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Transcript
ΧδϡΞϧͳ ϑϩϯτΤϯυͰ ͜ͷઌੜ͖ͷ͜Δʹ "ZVNV4BUP 0DU 'SPOUSFOE*O,BOB[BXB QIPUPIUUQTXXXGMJDLSDPNQIPUPT!/
ࠤ౻า ͞ͱ͏ ͋ΏΉ
ϋϯυϧωʔϜ BIPNV !
IUUQ BIPNV ؒҡ࣋අˇ
None
1SPGJMF גࣜձࣾαΠόʔΤʔδΣϯτ Ξϝʔόࣄۀຊ෦ 8FCϑϩϯτΤϯυΤϯδχΞ 'SPOUFOE /PEF "OESPJE "84 )5.-&YQFSUTKQ༓ྶ෦һ
ϑϩϯτΤϯυͷதͰ ςΫχΧϧͳ໘ʹ ภ͓ͬͨͰ͢
"HFOEB ϑϩϯτΤϯυͷྲྀߦΓഇΓͱڑײ ݱࡏͷτϨϯυͱબఆͷࢹ ϑϩϯτΤϯμͷऔࣺબ
ϑϩϯτΤϯυͷ ྲྀߦΓഇΓͱڑײ QIPUPIUUQTXXXGMJDLSDPNQIPUPTLJULBQIPUPHJSM
ϑϩϯτΤϯυք۾ͷ ϓϩμΫτ
(SVOUʁ(VMQʁ :FPNBOʁCSPDDPMJʁ
TUZMFEPDDPʁ,44ʁ IPMPHSBNʁ
4BTTʁ-&44ʁ 4UZMVTʁ3FXPSLʁ
#BDLCPOFKTʁ ,OPDLPVU+4ʁ &NCFSKTʁ "OHVMBS+4ʁ 3FBDUʁ
͘Β͍લ͔Β ٸʹ૿Ճͯ͠ ೖΕସΘΓଓ͚͍ͯΔ ˞ݸਓͷײͰ͢
ೖΕସΘΓ͕ ૣ͗͢ͳ͍͔
None
None
ރΕΔલʹ࣍ͷٕज़ Γ͍͑ͯ͘ ࠓ·ͰͷܦݧΛશࣺͯͯΔΘ͚Ͱͳ͍͕ ͍͘Β͔ͷֶशίετඞཁʹͳΔ
ͳͥʁ ʮރΕٕͨज़ʯͷϝϦοτΛ͋·Γ׆͔ͦ͏ͱ͠ͳ͍ͷ͔ʁ
࣮ߦڥͷଟ༷Խ σόΠεͷੑೳ্ ߴੑೳʹͳΕදݱ͕͕Γɺ࡞Δ͕มΘΕ࡞ΓํมΘΔ
ྲྀߦΓഇΓͱ ্खʹ͖߹͍͍ͨ
ݱࡏͷτϨϯυͱ બఆͷࢹ QIPUPIUUQTXXXGMJDLSDPNQIPUPTHOJMFOLPW
λεΫϥϯφʔ $44ϓϩηοα +BWB4DSJQUϥΠϒϥϦ ύοέʔδཧ ඪ४༷
)5.-$44+BWB4DSJQU
! ࠷ॏཁͳͷ ࢹ ͲΜͳϝϦοτΛڗड͢ΔͨΊʹɺͲΜͳΞϓϩʔνΛબͿͷ͔ ࢹ͓͑͑͞͞ΕɺࣗͰஅͰ͖Δ
λεΫϥϯφʔ ք۾
None
ΤίγεςϜͷൃల۩߹ ઃఆϑΝΠϧͬΆ͍ʁ εΫϦϓτͬΆ͍ʁ
(SVOU IUUQHSVOUKTDPN
grunt.initConfig({ sass: { // task dist: { // target options:
{ // options style: 'expanded' }, files: { // dest: source 'main.css': ‘main.scss’ } } } }); grunt.loadNpmTasks('grunt-contrib-sass');
grunt.initConfig sass: dist: options: style: 'expanded' files 'main.css': ‘main.scss’ !
grunt.loadNpmTasks 'grunt-contrib-sass'
(VMQ IUUQHVMQKTDPN
8FC4UBSUFS,JU IUUQTEFWFMPQFSTHPPHMFDPNXFCTUBSUFSLJUJOEFY
var gulp = require('gulp'); var sass = require(‘gulp-ruby-sass') ! gulp.task('sass',
function () { gulp.src(‘./main.scss’) // source .pipe(sass({ // task style : ‘expanded' // options })) .pipe(gulp.dest(‘./‘));// dest });
grunt.initConfig({ coffeehint: { src: [‘main.coffee’] }, coffeescript: { files: {
'main.js': ‘main.coffee’ } }, uglify: { files: { ‘main.min.js': ‘main.js’ } } }); λεΫOରͷؔ ϑΝΠϧʹରͯ͠ద༻͞Ε͍ͯΔ ෳͷλεΫ͕ࢄཚͯ͠ྲྀΕΛ͍ͮΒ͍
! gulp.task(‘jsbuild', function () { gulp.src(‘./main.coffee’) .pipe(coffeelint()) .pipe(coffee()) .pipe(uglify()) .pipe(gulp.dest(‘./‘));
}); OιʔεOλεΫͷؔ ࢦఆͨ͠ιʔε͋Γ͖ͰλεΫΛ ྲྀΕΔΑ͏ʹద༻Ͱ͖ͯݟ௨͕͠ྑ͍ ͔͠͠ɺ+BWB4DSJQUͬΆ͍
$44ϓϩηοα ք۾
None
͍͍ͨݴޠػೳ $44͔ΒͷҠߦɾֶशίετ ϓϦϓϩηεPSϙετϓϩηε
" " " DTT TBTT MFTT TUZM DTT ϓϦ ϓϩηε
ϙετ ϓϩηε
ϓϦϓϩηε
4"44 IUUQTBTTMBOHDPN
-JC4BTT IUUQMJCTBTTPSH
-FTT IUUQMFTTDTTPSH
4UZMVT IUUQMFBSOCPPTUHJUIVCJPTUZMVT
SFXPSL IUUQTHJUIVCDPNSFXPSLDTTSFXPSL
TUZM IUUQTHJUIVCDPNWJTJPONFEJBTUZM
ϙετϓϩηε
1PTU$44 IUUQTHJUIVCDPNQPTUDTTQPTUDTT
"VUPQSFGJYJFS IUUQTHJUIVCDPNQPTUDTTBVUPQSFGJYFS
/* Sass with Compass */ * { @include box-sizing(border-box); }
! /* CSS (compiled) */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
/* CSS */ * { box-sizing: border-box; } ! /*
CSS (autoprefixed) */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
+BWB4DSJQUϥΠϒϥϦ ք۾
None
ʊਓਓਓਓਓਓਓਓਓਓʊ ʼɹ͍·࠷༏Εͨɹʻ ʉ:?:?:?:?:?:?:?:?:ʉ
ʊਓਓਓਓਓਓਓਓਓਓਓਓਓʊ ʼɹ8FCΞϓϦ։ൃͷఆ൪ߏɹʻ ʉ:?:?:?:?:?:?:?:?:?:?:?:ʉ
ղܾ͠Α͏ͱ͍ͯ͠Δൣғ ΞʔΩςΫνϟϞσϧ %0.ςϯϓϨʔςΟϯά %BUB#JOEJOH 7JSUVBM%0.
એݴతPS໋ྩత
#BDLCPOF+4 IUUQCBDLCPOFKTPSH
<div> <button class=“js-ouch”><%= foo %></button> </div> ! Backbone.View.extend({ initialize: function()
{ this.render(); }, events: { ‘click .js-ouch’: ‘onOuch’ }, onOuch: function() { alert(‘ouch!!’); }, render: function() { var newHtml = ejsTmpl({foo: ‘bar’}); return this.$el.html(newHtml); } });
"OHVMBS+4 IUUQTBOHVMBSKTPSH
<div ng-contoller=“OuchCtrl”> <button ng-click=“onOuch()”>{{foo}}</button> </div> ! angular .module(‘app’) .controller(‘OuchCtrl’, function($scope)
{ ! $scope.foo = ‘bar’; ! $scope.onOuch = function() { alert(‘ouch!!’); }; });
3FBDU IUUQGBDFCPPLHJUIVCJPSFBDU
<script type="text/jsx"> /** @jsx React.DOM */ var OuchComponent = React.createClass({
onOuch: function() { alert('ouch!!'); }, getInitialState: function() { return {foo: 'bar'}; }, render: function() { return ( <div> <button onClick={this.onOuch}> {this.state.foo}</button> </div> ); } }); </script>
/** @jsx React.DOM */ var HelloMessage = React.createClass({ render: function()
{ return <div>Hello {this.props.name}</div>; } }); ! ! var HelloMessage = React.createClass({ displayName: 'HelloMessage', render : function() { return React.DOM.div(null, "Hello ", this.props.name); } });
ύοέʔδཧˍ ϞδϡʔϧγεςϜ ք۾
None
৭ʑ͋Δ͚Ͳɺׂͷҧ͏πʔϧ͕ଟ͍ ύοέʔδͷΠϯετʔϧิॿʁ ϥϯλΠϜPSϏϧυ࣌ͷґଘղܾʁ ඪ४༷ͱͷޓੑʁ ͦΕͱ྆ํͷׂΛͰ͖Δͷʁ
ύοέʔδཧ
OQN IUUQTXXXOQNKTPSH
#PXFS IUUQCPXFSJP
ϞδϡʔϧγεςϜ
3FRVJSF+4 IUUQSFRVJSFKTPSH
# html <script src="require.js" data- main="main.js" async></script> ! # main.js
define([‘module’], function(module) { alert(module.foo); // ‘bar’ }); ! # module.js define(function() { return {foo: ‘bar’} });
CSPXTFSJGZ IUUQCSPXTFSJGZPSH
#index.js ! // from node_modules var htmlparser = require(‘htmlparser’); //
from local var module = require(‘./module’); // from bower ( recommend: debowerify ) var jquery = require(‘./bower_components/jquery/ dist/jquery.js’) ! - - - - - - - - - - - - - - - - - - - - - - - - ! #module.js ! module.exports = { foo: ‘bar’ };
XFCQBDL IUUQXFCQBDLHJUIVCJP
var path = require("path"); var CommonsChunkPlugin = require("../../lib/ optimize/CommonsChunkPlugin"); module.exports
= { entry: { pageA: "./pageA", pageB: "./pageB" }, output: { path: path.join(__dirname, "js"), filename: "[name].bundle.js", chunkFilename: "[id].chunk.js" }, plugins: [ new CommonsChunkPlugin("commons.js") ] }
ඪ४༷ͷք۾
͚ͩ͜͜ ී௨ʹ࣌ͷͰ͢
None
)5.-/JHIUMZ IUUQXXXXPSHIUNMXHESBGUTIUNMNBTUFS
ϨεϙϯγϒɾΠϝʔδɿ Ϣʔεέʔεͱೖ༻ͷίʔυαϯϓϧ IUUQTEFWPQFSBDPNBSUJDMFTKBSFTQPOTJWFJNBHFT
EJBMPHFMFNFOU.PEBMTNBEFFBTZ IUUQVQEBUFTIUNMSPDLTDPNEJBMPHFMFNFOU.PEBMTNBEFFBTZ
4FMFDUPST-FWFM IUUQEFWXPSHDTTXHTFMFDUPST
$4441&$*'*$"5*0/4 IUUQXXXXPSH4UZMF$44DVSSFOUXPSL
"MM4UBOEBSETBOE%SBGUT IUUQXXXXPSH53
None
None
5FNQMBUFT $VTUPN&MFNFOUT )5.-*NQPSUT 4IBEPX%0. <template></template> Document#registerElement() <link rel=“import” href=“…”> Element#createShadowRoot()
None
&4 &4OFYU IBSNPOZ IUUQXJLJFDNBTDSJQUPSHEPLVQIQ JEIBSNPOZTQFDJGJDBUJPO@ESBGUT
USBDFVSDPNQJMFS IUUQTHJUIVCDPNHPPHMFUSBDFVSDPNQJMFS
UP IUUQTHJUIVCDPNTFCNDLUP
⏱ ͜ΕΒͷຯظݶ͕͍ τϨϯυͱͷ͖߹͍ํ հͨ͠༰࣋ͨͳ͍Α͏ͳτϨϯυ͕΄ͱΜͲ Ͳ͏͖͔͢ʁ
ϑϩϯτΤϯμͷ औࣺબ QIPUPIUUQTXXXGMJDLSDPNQIPUPTKNW
ٕज़ٕज़Ͱ͔͠ͳ͘ ͦΕΛҎͯͳʹΛ͢Δ͔
τϨϯυͷऔࣺબ
ϩʔϧϞσϧʹ߹ͬͨ τϨϯυΛֶͼଓ͚Δ
ಘҙͷΞχϝʔγϣϯͰ ήʔϜΛ࡞Δͻͱʁ
σβΠϯͷཱҊ͔Β ࣮·ͰϫϯετοϓͰ ߦ͑Δͻͱʁ
શମͷΞʔΩςΫτΛ ౿·͑ͯϑϩϯτྖҬΛ ཧͰ͖Δͻͱʁ
ΞΫηγϏϦςΟ࣮ͷ ઐՈʁ
ٕज़ɾσβΠϯɾϏδωεͷ ؒΛऔΓ࣋ͬͯ σΟϨΫγϣϯͰ͖Δͻͱʁ
ֶश͖͢ ٕज़τϨϯυ͚ͩͰ ͳ͍ͷ͔͠Εͳ͍
ແҙࣝʹ͍ͯ͠ΔஅΛ ໌֬Խ͢Δ͚ͩͰ ීஈͷֶͼ͕มΘΔ
·ͱΊ
ϑϩϯτͷྲྀߦ͘Β͍લ͔Βɹɹɹ ٸʹมԽ͢ΔΑ͏ʹͳ͍ͬͯΔ ࣗΒͷࢹͱஅΛ࣋ͬͯτϨϯυʹɹɹɹ ྲྀ͞Εͯ͠·Θͳ͍Α͏ʹ͢Δ ϩʔϧϞσϧ͔Βٯࢉͯࣗ͠ʹͱͬͯ ຊʹඞཁͳٕज़τϨϯυΛֶͿ
ઌͷͨΊ ࠓʹ͚͍ͭͨ͜ͱ
ࣗͷϩʔϧϞσϧ͔Β ٯࢉֶͯ͠ͼଓ͚Δ͜ͱ
ઌੜ͖ͷ͜Δʂ ϩʔϧϞσϧͷؒʹΞοϓσʔτ͠ଓ͚Α͏ʂ
2VFTUJPOT IUUQBIPNV !BIPNV HJUIVCDPNBIPNV ! ⌂ QIPUPIUUQTXXXGMJDLSDPNQIPUPTHOJMFOLPW