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
210
控えめな App Router と持続可能な開発 - PWA Night vol.59
ahomu
11
2.9k
GPT 生成物の評価、運用 toC 企画でのハードルと勘所
ahomu
0
300
副業をきっかけに 切り拓くキャリア形成
ahomu
1
150
Webフロントエンドと アーキテクチャ事情の持論を喋る
ahomu
2
1.7k
SPA/MPA 議論の俯瞰と 現代における設計のポイント - #tfcon 2022 フロントエンド設計
ahomu
5
3.7k
#TECHPLAY Talk - 理想的な Web のため MUST 駆動で主語が大きくなったキャリア
ahomu
0
290
最近の Web パフォーマンス改善について知っておきたいコト
ahomu
50
20k
Web フロントエンドで大切なことはすべて Audits が教えてくれた
ahomu
1
630
Other Decks in Programming
See All in Programming
5つのアンチパターンから学ぶLT設計
narihara
1
120
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.4k
WindowInsetsだってテストしたい
ryunen344
1
200
すべてのコンテキストを、 ユーザー価値に変える
applism118
2
880
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
4
980
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
150
VS Code Update for GitHub Copilot
74th
1
420
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
530
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
330
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
230
エラーって何種類あるの?
kajitack
5
310
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
240
Featured
See All Featured
Building an army of robots
kneath
306
45k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Fireside Chat
paigeccino
37
3.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
What's in a price? How to price your products and services
michaelherold
246
12k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Become a Pro
speakerdeck
PRO
28
5.4k
The Cult of Friendly URLs
andyhume
79
6.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Rails Girls Zürich Keynote
gr2m
94
14k
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