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
17
16k
Web 開発の長距離走と持続可能性 - TechFeed Experts Night#31 〜 フロントエンドアーキテクチャの現状と未来
ahomu
1
240
控えめな App Router と持続可能な開発 - PWA Night vol.59
ahomu
12
3k
GPT 生成物の評価、運用 toC 企画でのハードルと勘所
ahomu
0
310
副業をきっかけに 切り拓くキャリア形成
ahomu
1
170
Webフロントエンドと アーキテクチャ事情の持論を喋る
ahomu
2
1.7k
SPA/MPA 議論の俯瞰と 現代における設計のポイント - #tfcon 2022 フロントエンド設計
ahomu
5
3.7k
#TECHPLAY Talk - 理想的な Web のため MUST 駆動で主語が大きくなったキャリア
ahomu
0
310
最近の Web パフォーマンス改善について知っておきたいコト
ahomu
50
20k
Other Decks in Programming
See All in Programming
The state patternの実践 個人開発で培ったpractice集
miyanokomiya
0
150
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
180
LLMOpsのパフォーマンスを支える技術と現場で実践した改善
po3rin
8
990
ECS初心者の仲間 – TUIツール「e1s」の紹介
keidarcy
0
110
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
0
170
オープンセミナー2025@広島「君はどこで動かすか?」アンケート結果
satoshi256kbyte
0
220
為你自己學 Python - 冷知識篇
eddie
1
280
Honoアップデート 2025年夏
yusukebe
1
870
パッケージ設計の黒魔術/Kyoto.go#63
lufia
2
310
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
130
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
190
SOCI Index Manifest v2が出たので調べてみた / Introduction to SOCI Index Manifest v2
tkikuc
1
110
Featured
See All Featured
The Invisible Side of Design
smashingmag
301
51k
The Pragmatic Product Professional
lauravandoore
36
6.8k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
Writing Fast Ruby
sferik
628
62k
Building Applications with DynamoDB
mza
96
6.6k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
570
Done Done
chrislema
185
16k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Embracing the Ebb and Flow
colly
87
4.8k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Agile that works and the tools we love
rasmusluckow
330
21k
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