SlideShare a Scribd company logo
フロントエンド
実装

グロースの
ポイント
CSS、JS、画像ファイルの
リクエスト数は
少ない方がいい?
CSS、JS、画像ファイルの
ファイル容量は
少ない方がいい?
http2 ?
all
you
need
is
control
controllable
uncontrollablecontrollable
uncontrollablecontrollable
git
grunt
jenkins
uncontrollablecontrollable
concat minify
uglify optimize
autoprefix sprite
and more…
git
grunt
jenkins
uncontrollablecontrollable
concat minify
uglify optimize
autoprefix sprite
and more…
no compile
no rule
git
grunt
jenkins
no compile
no rule
git
grunt
jenkins
uncontrollablecontrollable
concat minify
uglify optimize
autoprefix sprite
and more…
a.css
b.css
c.js
d.js
d.png
e.jpg
f.css
g.js
h.png
i.jpg
no compile
no rule
git
grunt
jenkins
uncontrollablecontrollable
concat minify
uglify optimize
autoprefix sprite
and more…
a.css
b.css
c.js
d.js
d.png
e.jpg
f.css
g.js
h.png
i.jpg
refactoring
no compile
no rule
git
grunt
jenkins
uncontrollablecontrollable
concat minify
uglify optimize
autoprefix sprite
and more…
a-b.css
c-d.js
d-e.png
f.css
g.js
h.png
i.jpg
no compile
no rule
git
grunt
jenkins
uncontrollablecontrollable
concat minify
uglify optimize
autoprefix sprite
and more…
a-b.css
c-d.js
d-e.png
f.css
g.js
h.png
i.jpg
add
k.jpg
i.css
j.js
git
grunt
jenkins
uncontrollablecontrollable
concat minify
uglify optimize
autoprefix sprite
and more…
a-b.css
c-d.js
d-e.png
refactoring
k.jpg
i.css
j.js
no compile
no rule
f.css
g.js
h.png
i.jpg
no compile
no rule
git
grunt
jenkins
uncontrollablecontrollable
concat minify
uglify optimize
autoprefix sprite
and more…
a-b-i.css
c-d-j.js
d-e-k.png
f.css
g.js
h.png
i.jpg
goal setting
リクエスト数 : 150 → 100 ?
control
css
sass
autoprefixer
csscomb
csso
etc…
.hoge{height:
282px;margin:-240p
x auto 100px}
// hoge
.hoge {
margin: -240px
auto 100px;
height: 282px;
}
JS
concat
uglify
etc…
a.Utility={console:fu
nction(a){a=a¦¦
null,console.log(a)}}
WIN.Utility = {
console:
function(value) {
value = value ¦¦ null;
console.log(value);
}
};
sprite
spritesmith
etc…
$a: (0px, 0px, 0px,
0px, 38px, 49px,
73px, 107px, '../
img/sprite-
sample.png', 'a', );
image
imageAlpha
imageOptim
etc…
※ 一部マニュアル作業を含む
operation
css
SMACSS
壊れにくいCSS運用
: モジュール構造
OOCSS : レイアウト
BEM : 命名規則
repository
statserverside
.editorconfig
.gitignore
Gruntfile.js
package.json
/dist
/tmp
/src
build process
/src

開発コード
/dist

出力コード
flow
Server-side
Front-end
Designer
Director
Server-side
Front-end
Designer
Director
全職域が動作状態のクオリティを担保
sekiyaeiji2015/08

More Related Content

What's hot

Passportでサクッと外部認証を組み込もう
Passportでサクッと外部認証を組み込もうPassportでサクッと外部認証を組み込もう
Passportでサクッと外部認証を組み込もうYuusuke Takeuchi
 
JSオジサン openframeworks emscripten
JSオジサン openframeworks emscriptenJSオジサン openframeworks emscripten
JSオジサン openframeworks emscripten
minoru nakanou
 
phpcon2017 LT01 MDD
phpcon2017 LT01 MDDphpcon2017 LT01 MDD
phpcon2017 LT01 MDD
Masahiko Jinno
 
HTML5 開発環境の紹介
HTML5 開発環境の紹介HTML5 開発環境の紹介
HTML5 開発環境の紹介
tomo_masakura
 
RSpec Performance Turning
RSpec Performance TurningRSpec Performance Turning
RSpec Performance Turning
Go Sueyoshi (a.k.a sue445)
 
rdflintのvscode拡張の紹介とその実装方法
rdflintのvscode拡張の紹介とその実装方法rdflintのvscode拡張の紹介とその実装方法
rdflintのvscode拡張の紹介とその実装方法
Takeshi Mikami
 
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
Horiguchi Seito
 
Dgeniで始めるドキュメントジェネレーション
Dgeniで始めるドキュメントジェネレーションDgeniで始めるドキュメントジェネレーション
Dgeniで始めるドキュメントジェネレーション
K Kinzal
 
HTML5 のお話
HTML5 のお話HTML5 のお話
HTML5 のお話
tomo_masakura
 
SpockからRSpecにきたときの気づき #coedorb
SpockからRSpecにきたときの気づき #coedorbSpockからRSpecにきたときの気づき #coedorb
SpockからRSpecにきたときの気づき #coedorb
Youtarou TAKAHASHI
 
HTML5 アプリ開発
HTML5 アプリ開発HTML5 アプリ開発
HTML5 アプリ開発
tomo_masakura
 
【こっそり始める】Javaプログラマコーディングマイグレーション
【こっそり始める】Javaプログラマコーディングマイグレーション【こっそり始める】Javaプログラマコーディングマイグレーション
【こっそり始める】Javaプログラマコーディングマイグレーション
yy yank
 
SEゼミ2015 - 練習
SEゼミ2015 - 練習SEゼミ2015 - 練習
SEゼミ2015 - 練習
Kouhei Sutou
 
Web屋の運用その極意
Web屋の運用その極意Web屋の運用その極意
Web屋の運用その極意
Michihito Shigemura
 
Gws 20141024 gradle_intro
Gws 20141024 gradle_introGws 20141024 gradle_intro
Gws 20141024 gradle_intro
Nobuhiro Sue
 
Blazor 触ってみた
Blazor 触ってみたBlazor 触ってみた
Blazor 触ってみた
Oda Shinsuke
 
Gradle入門
Gradle入門Gradle入門
Gradle入門
orekyuu
 
Gradle handson
Gradle handsonGradle handson
Gradle handson
Nemoto Yusuke
 

What's hot (18)

Passportでサクッと外部認証を組み込もう
Passportでサクッと外部認証を組み込もうPassportでサクッと外部認証を組み込もう
Passportでサクッと外部認証を組み込もう
 
JSオジサン openframeworks emscripten
JSオジサン openframeworks emscriptenJSオジサン openframeworks emscripten
JSオジサン openframeworks emscripten
 
phpcon2017 LT01 MDD
phpcon2017 LT01 MDDphpcon2017 LT01 MDD
phpcon2017 LT01 MDD
 
HTML5 開発環境の紹介
HTML5 開発環境の紹介HTML5 開発環境の紹介
HTML5 開発環境の紹介
 
RSpec Performance Turning
RSpec Performance TurningRSpec Performance Turning
RSpec Performance Turning
 
rdflintのvscode拡張の紹介とその実装方法
rdflintのvscode拡張の紹介とその実装方法rdflintのvscode拡張の紹介とその実装方法
rdflintのvscode拡張の紹介とその実装方法
 
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
 
Dgeniで始めるドキュメントジェネレーション
Dgeniで始めるドキュメントジェネレーションDgeniで始めるドキュメントジェネレーション
Dgeniで始めるドキュメントジェネレーション
 
HTML5 のお話
HTML5 のお話HTML5 のお話
HTML5 のお話
 
SpockからRSpecにきたときの気づき #coedorb
SpockからRSpecにきたときの気づき #coedorbSpockからRSpecにきたときの気づき #coedorb
SpockからRSpecにきたときの気づき #coedorb
 
HTML5 アプリ開発
HTML5 アプリ開発HTML5 アプリ開発
HTML5 アプリ開発
 
【こっそり始める】Javaプログラマコーディングマイグレーション
【こっそり始める】Javaプログラマコーディングマイグレーション【こっそり始める】Javaプログラマコーディングマイグレーション
【こっそり始める】Javaプログラマコーディングマイグレーション
 
SEゼミ2015 - 練習
SEゼミ2015 - 練習SEゼミ2015 - 練習
SEゼミ2015 - 練習
 
Web屋の運用その極意
Web屋の運用その極意Web屋の運用その極意
Web屋の運用その極意
 
Gws 20141024 gradle_intro
Gws 20141024 gradle_introGws 20141024 gradle_intro
Gws 20141024 gradle_intro
 
Blazor 触ってみた
Blazor 触ってみたBlazor 触ってみた
Blazor 触ってみた
 
Gradle入門
Gradle入門Gradle入門
Gradle入門
 
Gradle handson
Gradle handsonGradle handson
Gradle handson
 

Similar to フロントエンド実装 グロースのポイント

業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?Fumio SAGAWA
 
Long Life Web Performance Optimization
Long Life Web Performance OptimizationLong Life Web Performance Optimization
Long Life Web Performance OptimizationKoji Ishimoto
 
Retina対応 CSSスプライトを自動化しよう sprity版(東区フロントエンド勉強会 2015年 第2回) 補足資料
Retina対応 CSSスプライトを自動化しよう sprity版(東区フロントエンド勉強会 2015年 第2回) 補足資料Retina対応 CSSスプライトを自動化しよう sprity版(東区フロントエンド勉強会 2015年 第2回) 補足資料
Retina対応 CSSスプライトを自動化しよう sprity版(東区フロントエンド勉強会 2015年 第2回) 補足資料
Toshimichi Suekane
 
Gitを使ってみませんか
Gitを使ってみませんかGitを使ってみませんか
Gitを使ってみませんか
Atsuhiro Takiguchi
 
Web frontend performance tuning
Web frontend      performance tuningWeb frontend      performance tuning
Web frontend performance tuning
ssuser3c214d
 
スマートフォンWebアプリ最適化”3つの極意”
スマートフォンWebアプリ最適化”3つの極意”スマートフォンWebアプリ最適化”3つの極意”
スマートフォンWebアプリ最適化”3つの極意”
Koji Ishimoto
 
イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱
Fumio SAGAWA
 
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかたAmebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Kazunari Hara
 
Thin Server Architectureでブログ作った #ikam
Thin Server Architectureでブログ作った #ikamThin Server Architectureでブログ作った #ikam
Thin Server Architectureでブログ作った #ikamToshiaki Maki
 
Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~
Kazunari Hara
 
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうんなんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
Hayato Mizuno
 
2012/5/19 Webのパフォーマンスを考える ~WordPressと付き合うために~ @ WB Osaka
2012/5/19 Webのパフォーマンスを考える ~WordPressと付き合うために~ @ WB Osaka2012/5/19 Webのパフォーマンスを考える ~WordPressと付き合うために~ @ WB Osaka
2012/5/19 Webのパフォーマンスを考える ~WordPressと付き合うために~ @ WB Osakatama200x Kobayashi
 
gulp + sass で目指せ倍速コーディング(第2回 gulpfile.jsの分割管理と画像作成の効率化)
gulp + sass で目指せ倍速コーディング(第2回 gulpfile.jsの分割管理と画像作成の効率化)gulp + sass で目指せ倍速コーディング(第2回 gulpfile.jsの分割管理と画像作成の効率化)
gulp + sass で目指せ倍速コーディング(第2回 gulpfile.jsの分割管理と画像作成の効率化)
Toshimichi Suekane
 
jsCafe v13 Grunt
jsCafe v13 GruntjsCafe v13 Grunt
jsCafe v13 Grunt
Shinya Sugo
 
About GStreamer 1.0 application development for beginners
About GStreamer 1.0 application development for beginnersAbout GStreamer 1.0 application development for beginners
About GStreamer 1.0 application development for beginners
Shota TAMURA
 
GruntでJavaScript 前作業の自動化!
GruntでJavaScript 前作業の自動化!GruntでJavaScript 前作業の自動化!
GruntでJavaScript 前作業の自動化!leverages_event
 
ng-mtg#6 AngularJS ディレクティブ・パターン
ng-mtg#6 AngularJS ディレクティブ・パターンng-mtg#6 AngularJS ディレクティブ・パターン
ng-mtg#6 AngularJS ディレクティブ・パターン
Hayashi Yuichi
 
Angular2
Angular2Angular2
Angular2
Kenichi Kanai
 

Similar to フロントエンド実装 グロースのポイント (18)

業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
 
Long Life Web Performance Optimization
Long Life Web Performance OptimizationLong Life Web Performance Optimization
Long Life Web Performance Optimization
 
Retina対応 CSSスプライトを自動化しよう sprity版(東区フロントエンド勉強会 2015年 第2回) 補足資料
Retina対応 CSSスプライトを自動化しよう sprity版(東区フロントエンド勉強会 2015年 第2回) 補足資料Retina対応 CSSスプライトを自動化しよう sprity版(東区フロントエンド勉強会 2015年 第2回) 補足資料
Retina対応 CSSスプライトを自動化しよう sprity版(東区フロントエンド勉強会 2015年 第2回) 補足資料
 
Gitを使ってみませんか
Gitを使ってみませんかGitを使ってみませんか
Gitを使ってみませんか
 
Web frontend performance tuning
Web frontend      performance tuningWeb frontend      performance tuning
Web frontend performance tuning
 
スマートフォンWebアプリ最適化”3つの極意”
スマートフォンWebアプリ最適化”3つの極意”スマートフォンWebアプリ最適化”3つの極意”
スマートフォンWebアプリ最適化”3つの極意”
 
イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱
 
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかたAmebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
 
Thin Server Architectureでブログ作った #ikam
Thin Server Architectureでブログ作った #ikamThin Server Architectureでブログ作った #ikam
Thin Server Architectureでブログ作った #ikam
 
Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~
 
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうんなんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
 
2012/5/19 Webのパフォーマンスを考える ~WordPressと付き合うために~ @ WB Osaka
2012/5/19 Webのパフォーマンスを考える ~WordPressと付き合うために~ @ WB Osaka2012/5/19 Webのパフォーマンスを考える ~WordPressと付き合うために~ @ WB Osaka
2012/5/19 Webのパフォーマンスを考える ~WordPressと付き合うために~ @ WB Osaka
 
gulp + sass で目指せ倍速コーディング(第2回 gulpfile.jsの分割管理と画像作成の効率化)
gulp + sass で目指せ倍速コーディング(第2回 gulpfile.jsの分割管理と画像作成の効率化)gulp + sass で目指せ倍速コーディング(第2回 gulpfile.jsの分割管理と画像作成の効率化)
gulp + sass で目指せ倍速コーディング(第2回 gulpfile.jsの分割管理と画像作成の効率化)
 
jsCafe v13 Grunt
jsCafe v13 GruntjsCafe v13 Grunt
jsCafe v13 Grunt
 
About GStreamer 1.0 application development for beginners
About GStreamer 1.0 application development for beginnersAbout GStreamer 1.0 application development for beginners
About GStreamer 1.0 application development for beginners
 
GruntでJavaScript 前作業の自動化!
GruntでJavaScript 前作業の自動化!GruntでJavaScript 前作業の自動化!
GruntでJavaScript 前作業の自動化!
 
ng-mtg#6 AngularJS ディレクティブ・パターン
ng-mtg#6 AngularJS ディレクティブ・パターンng-mtg#6 AngularJS ディレクティブ・パターン
ng-mtg#6 AngularJS ディレクティブ・パターン
 
Angular2
Angular2Angular2
Angular2
 

More from eiji sekiya

ぐるなびあるあるLt2017
ぐるなびあるあるLt2017ぐるなびあるあるLt2017
ぐるなびあるあるLt2017
eiji sekiya
 
Q&Aで振り返る「Back to Basics」 CSS 2015.08.30
Q&Aで振り返る「Back to Basics」 CSS 2015.08.30Q&Aで振り返る「Back to Basics」 CSS 2015.08.30
Q&Aで振り返る「Back to Basics」 CSS 2015.08.30
eiji sekiya
 
Webサービスにおける
Surface Pro 3 対応とは
Webサービスにおける
Surface Pro 3 対応とはWebサービスにおける
Surface Pro 3 対応とは
Webサービスにおける
Surface Pro 3 対応とは
eiji sekiya
 
マークアップ講座 04 jQuery - JavaScript
マークアップ講座 04 jQuery - JavaScriptマークアップ講座 04 jQuery - JavaScript
マークアップ講座 04 jQuery - JavaScript
eiji sekiya
 
マークアップ講座 03 スマートフォン・デバイス最適化
マークアップ講座 03 スマートフォン・デバイス最適化マークアップ講座 03 スマートフォン・デバイス最適化
マークアップ講座 03 スマートフォン・デバイス最適化
eiji sekiya
 
マークアップ講座 02 CSS
マークアップ講座 02 CSSマークアップ講座 02 CSS
マークアップ講座 02 CSS
eiji sekiya
 
マークアップ講座 01b HTML
マークアップ講座 01b HTMLマークアップ講座 01b HTML
マークアップ講座 01b HTML
eiji sekiya
 
マークアップ講座 01a プロローグ
マークアップ講座 01a プロローグマークアップ講座 01a プロローグ
マークアップ講座 01a プロローグ
eiji sekiya
 

More from eiji sekiya (8)

ぐるなびあるあるLt2017
ぐるなびあるあるLt2017ぐるなびあるあるLt2017
ぐるなびあるあるLt2017
 
Q&Aで振り返る「Back to Basics」 CSS 2015.08.30
Q&Aで振り返る「Back to Basics」 CSS 2015.08.30Q&Aで振り返る「Back to Basics」 CSS 2015.08.30
Q&Aで振り返る「Back to Basics」 CSS 2015.08.30
 
Webサービスにおける
Surface Pro 3 対応とは
Webサービスにおける
Surface Pro 3 対応とはWebサービスにおける
Surface Pro 3 対応とは
Webサービスにおける
Surface Pro 3 対応とは
 
マークアップ講座 04 jQuery - JavaScript
マークアップ講座 04 jQuery - JavaScriptマークアップ講座 04 jQuery - JavaScript
マークアップ講座 04 jQuery - JavaScript
 
マークアップ講座 03 スマートフォン・デバイス最適化
マークアップ講座 03 スマートフォン・デバイス最適化マークアップ講座 03 スマートフォン・デバイス最適化
マークアップ講座 03 スマートフォン・デバイス最適化
 
マークアップ講座 02 CSS
マークアップ講座 02 CSSマークアップ講座 02 CSS
マークアップ講座 02 CSS
 
マークアップ講座 01b HTML
マークアップ講座 01b HTMLマークアップ講座 01b HTML
マークアップ講座 01b HTML
 
マークアップ講座 01a プロローグ
マークアップ講座 01a プロローグマークアップ講座 01a プロローグ
マークアップ講座 01a プロローグ
 

フロントエンド実装 グロースのポイント