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
控えめな App Router と持続可能な開発 - PWA Night vol.59
ahomu
11
1.9k
GPT 生成物の評価、運用 toC 企画でのハードルと勘所
ahomu
0
190
副業をきっかけに 切り拓くキャリア形成
ahomu
0
64
Webフロントエンドと アーキテクチャ事情の持論を喋る
ahomu
2
1.5k
SPA/MPA 議論の俯瞰と 現代における設計のポイント - #tfcon 2022 フロントエンド設計
ahomu
4
3.2k
#TECHPLAY Talk - 理想的な Web のため MUST 駆動で主語が大きくなったキャリア
ahomu
0
150
最近の Web パフォーマンス改善について知っておきたいコト
ahomu
50
19k
Web フロントエンドで大切なことはすべて Audits が教えてくれた
ahomu
1
530
CyberAgent が目指すマスメディアとアクセシビリティ
ahomu
2
2.4k
Other Decks in Programming
See All in Programming
GitHub Copilot Tips and Tricks
yuichielectric
26
7.4k
object-oriented-conference-2024
fuwasegu
6
1.9k
MySQL のインデックスの種類をおさらいしよう! / overviewing indexes in MySQL
okashoi
0
170
ISUCONってなんだか難しそう……!!でも、初めてのISUCONにPHPで挑戦してきました!
kotomin_m
1
300
Open Source Swiftc Workshop
kitasuke
1
180
LPIXEL×CADDi_kaerururu
kaerururu
3
300
C# 大統一理論推進委員会 会員のための Unity Package Manager プロジェクト構成案
monry
PRO
0
580
SwiftUI, Jetpack Composeの導入で変化した「家族アルバム みてね」のアプリ開発体験
hicka04
6
400
Creating Retro-Style Photos Using Swift
ski
1
340
【KMC春合宿2024】実装視点で見るNeural Radiance Fields
runningoutrate
0
150
ファイル先頭の use の意味、説明できますか? 〜PHP の namespace と autoloading の関係を正しく理解しよう〜 / namespace and autoloading in php
okashoi
2
470
WebComponentsで フレームワークを1ページに共存させる
webuilder240
0
150
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
240
1.2M
How to name files
jennybc
62
92k
Ruby is Unlike a Banana
tanoku
95
10k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
11
1.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
644
57k
Infographics Made Easy
chrislema
237
18k
Visualization
eitanlees
135
14k
Reflections from 52 weeks, 52 projects
jeffersonlam
343
19k
The Power of CSS Pseudo Elements
geoffreycrofte
58
4.9k
Rebuilding a faster, lazier Slack
samanthasiow
72
8.2k
Why Our Code Smells
bkeepers
PRO
330
56k
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