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
Web 開発の長距離走と持続可能性 - TechFeed Experts Night#31 〜 フロントエンドアーキテクチャの現状と未来
ahomu
1
180
控えめな App Router と持続可能な開発 - PWA Night vol.59
ahomu
11
2.8k
GPT 生成物の評価、運用 toC 企画でのハードルと勘所
ahomu
0
270
副業をきっかけに 切り拓くキャリア形成
ahomu
1
130
Webフロントエンドと アーキテクチャ事情の持論を喋る
ahomu
2
1.7k
SPA/MPA 議論の俯瞰と 現代における設計のポイント - #tfcon 2022 フロントエンド設計
ahomu
4
3.6k
#TECHPLAY Talk - 理想的な Web のため MUST 駆動で主語が大きくなったキャリア
ahomu
0
250
最近の Web パフォーマンス改善について知っておきたいコト
ahomu
50
20k
Web フロントエンドで大切なことはすべて Audits が教えてくれた
ahomu
1
600
Other Decks in Programming
See All in Programming
仕様変更に耐えるための"今の"DRY原則を考える
mkmk884
8
2.9k
PRレビューのお供にDanger
stoticdev
1
220
技術を改善し続ける
gumioji
0
100
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
830
GAEログのコスト削減
mot_techtalk
0
120
AIプログラミング雑キャッチアップ
yuheinakasaka
10
1.8k
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
53
18k
DROBEの生成AI活用事例 with AWS
ippey
0
140
Unity Android XR入門
sakutama_11
0
170
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
2
250
もう僕は OpenAPI を書きたくない
sgash708
5
1.8k
SwiftUI Viewの責務分離
elmetal
PRO
2
260
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.4k
4 Signs Your Business is Dying
shpigford
182
22k
Speed Design
sergeychernyshev
27
800
Documentation Writing (for coders)
carmenintech
67
4.6k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
How STYLIGHT went responsive
nonsquared
98
5.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
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