狠狠撸

フロント作業の
効率化@y_yoshinari

簡単に自己紹介
@y_yoshinari
? フロントエンドエンジニアです
? 2013年度新卒入社です (そろそろ入社して1年半)
? なぞってピグキッチンというサービスを制作しています

奥别产でこんなの作れるんだー的な感じで、后で游んでみてもらえると嬉しいです（という宣伝）

突然ですが、
このインターンの開発期間は何日でしょう！

そうですね
５日間ですね

フロント作業の
効率化@y_yoshinari
もう１度テーマを確認

Agenda
? HTMLの効率化
? CSSの効率化
? JavaScriptの効率化
? Grunt
? Yeoman

Emmet
? Zen-Codingの次期バージョン
? HTML, CSSの入力を簡略化出来る
? プラグインをインストールするだけで使える

例１
nav>ul#menu>li*5>a[href=#]{Item $}

例１
nav>ul#menu>li*5>a[href=#]{Item $}
<nav>
<ul id="menu">
<li><a href="#">Item 1</a></li>
</ul>
</nav>
Ctrl + e

例２
!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

</body>
</html>
Ctrl + e

テンプレートによる効率化

テンプレートエンジン
? HTMLのひな形を元にプログラムで加工し、
画面に出力するためのライブラリ

フロント作业の効率化

例
<ul>
<li>太郎：25歳</li>
<li>次郎：23歳</li>
<li>花子：22歳</li>
</ul>
var value = {
“userlist”: [
{ “name”: “太郎”, “age”: 25 },
{ “name”: “次郎”, “age”: 23 },
{ “name”: “花子”, “age”: 22 }
]
}
こんな形式にしたい

var value = {
“userlist”: [
{ “name”: “太郎”, “age”: 25 },
{ “name”: “次郎”, “age”: 23 },
{ “name”: “花子”, “age”: 22 }
]
}

<ul>
{{#each userlist}}
{{/each}}
</ul>
</script>
var value = {
“userlist”: [
{ “name”: “太郎”, “age”: 25 },
{ “name”: “次郎”, “age”: 23 },
{ “name”: “花子”, “age”: 22 }
]
}
var template = Handlebars.compile($('#input').html());

<ul>
{{#each userlist}}
{{/each}}
</ul>
</script>
var values = {
“userlist”: [
{ “name”: “太郎”, “age”: 25 },
{ “name”: “次郎”, “age”: 23 },
{ “name”: “花子”, “age”: 22 }
]
}
var template = Handlebars.compile($('#input').html());
$('#output').html(template(value));

Handlebarsに関する＋α
? ループ文だけでなく、if 文も使える
? ヘルパー関数を自作することも出来る
? コードの中でコンパイルしなくても、予めコ
ンパイルしておくことも出来る（早くなる）

また贰尘尘别迟の绍介です

例
db => display: block;
tac => text-align: center;
tdn => text-decoration: none;
poa => position: absolute;
m:a => margin: auto;
w50 => width: 50px;
bg+ => background: #fff url() 0 0 no-repeat;
-bdrs10 =>
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

チーム开発における効率化

プロパティの並び順を決める
? 複数人がコードを触る際に触りやすくなる
? gzip圧縮の効率が上がる
display
float, clear
position
top left right....
width height
margin
padding
border
color
background
font-size font-weight text-align
z-index overflow

CSSの設計手法を用いる
? 予測、再利用、保守、拡張がしやすくなる
? OOCSS, SMACSS, MCSSなどが存在する
? また、クラス名などの付け方の考え方として
BEMという考え方も存在する

この本で详しく説明されてます

プリプロセッサによる効率化

CSSプリプロセッサ
? コンパイルをするとCSSに変換される
? ネイティブなCSSが持たない機能を提供

Stylusの思想
body {
font: 12px Helvetica, Arial, sans-serif;
}
a.button {
border-radius: 5px;
}

ブレス({})は省略できる？
body
font: 12px Helvetica, Arial, sans-serif;
a.button
border-radius: 5px;

セミコロン(;)も省略できる？
body
font: 12px Helvetica, Arial, sans-serif
a.button
-webkit-border-radius: 5px
-moz-border-radius: 5px
border-radius: 5px

コロン(:)も省略できる？
body
font 12px Helvetica, Arial, sans-serif
a.button
-webkit-border-radius 5px
-moz-border-radius 5px
border-radius 5px

同じ事を繰り返し書かないように
border-radius()
-webkit-border-radius arguments
-moz-border-radius arguments
border-radius arguments
body
a.button
border-radius(5px)

自然なmixinに
border-radius()
-webkit-border-radius arguments
-moz-border-radius arguments
border-radius arguments
body
a.button
border-radius 5px

便利な機能は外出ししよう
@import ‘vendor’
body
a.button
border-radius 5px

独自に関数を定義する事もできます
sum(nums...)
sum = 0
sum += n for n in nums
sum(1 2 3 4)
// => 10

それらは全てオプションです
fonts = helvetica, arial, sans-serif
body {
padding: 50px;
font: 14px/1.4 fonts;
}

ちなみに、
今の例は公式サイトにそのまま載っています
http://learnboost.github.io/stylus/

CSSへの変換方法
/* style.styl */
body
color red
p
color black

stylus ファイル名.styl => ファイル名.cssが生成される
/* style.styl */
body
color red
p
color black

stylus ファイル名.styl => ファイル名.cssが生成される
/* style.styl */
body
color red
p
color black
/* style.css */
body {
color: #f00;
}
body p {
color: #000;
}

车轮の再発明をしない効率化

jQuery, Zepto
? DOMアクセスなどを簡略化
// class名がnameのp要素に太郎を挿入
$( "p.name" ).html( “太郎" );

jQuery, Zepto
? DOMアクセスなどを簡略化
// class名がnameのp要素に太郎を挿入
$( "p.name" ).html( “太郎" );
// id名がbutton-containerのボタンをクリックした際に、
// id名がbanner-messageの要素を表示
var hiddenBox = $( "#banner-message" );
$( "#button-container button" ).on( "click", function( event ) {
hiddenBox.show();
});

Underscore, Lo-Dash
? ユーティリティライブラリ
// イテレーター
_.each([1, 2, 3], function (element, index, list) {
console.log(element + ‘ ’);
});
//=> 1 2 3
_.each({one: 1, two: 2, three: 3}, function (value, key, list) {
console.log(value + ‘ ’);
});
//=> 1 2 3

Underscore, Lo-Dash
? ユーティリティライブラリ
// イテレーター
_.each([1, 2, 3], function (element, index, list) {
console.log(element + ‘ ’);
});
//=> 1 2 3
_.each({one: 1, two: 2, three: 3}, function (value, key, list) {
console.log(value + ‘ ’);
});
//=> 1 2 3
// マッピング
_.map([1, 2, 3], function (num) {
return num * 3;
});
//=> [3, 6, 9]

RequireJS
? コードをモジュール化して分割出来る
? 読み込みを非同期に出来る
? 依存関係を明示化出来る
? WebPackやBrowserifyなども見てみると良いかも
// モジュールaを読み込む
var a = require('a');

Bucks.js
? フロー制御系ライブラリ
? 逐次実行(直列)も非同期実行(並列)も出来る
? 入れ子地獄にならないコードが書ける！
? 他にasync, jQuery.Deferred, Q, Whenなども存
在する

Bucks.js
? 逐次実行(直列)
var bucks = new Bucks();
bucks
.add(function (err, res, next) {
setTimeout(function () {
next();
}, 1000);
})
.add(function (err, res, next) {
next();
}, 1000);
})
.end();

Bucks.js
? 非同期実行(並列)
var bucks = new Bucks();
bucks
.parallel([
function (err, res, next) {
next();
}, 1000);
},
function (err, res, next) {
next();
}, 1000);
}
])
.end();

ゲーム作る人向け
? enchant.js, createJS, Pixi.js

コードを顽健化する効率化

MV*アーキテクチャ
? AngularJS, Backbone.js, Knockout.js, Vue.js
? JavaScriptフレームワーク
? 使いこなせれば強力です

MV*アーキテクチャ
? ちなみにうちのチームではbeezという社内開
発のフレームワークを使っています
https://github.com/CyberAgent/beez

AltJS
? Dart, CoffeeScript, TypeScript
? コンパイルしてJavaScriptに変換される言語
#import('dart:html');
void main() {
final String s = 'Hello, Dart!’;
updateText(s);
}
void updateText(String s) {
var elem = query('#text');
elem.text = 'message: ${s}';
} Dart

いろいろ見てきたけど、
? handlebarsのプリコンパイル
? stylusのコンパイル
? AltJSのコンパイル
とかとか、やることいっぱい

それぞれコンパイルするの
面倒くさい

Grunt
? タスクランナー
? 予め設定しておいたタスクをまとめて走らせ
ることが出来る
? 自动化することも出来る

例：stylus + CoffeeScript
module.exports = function(grunt) {
grunt.initConfig({
stylus: {
compile: {
files: { 'path/to/result.css': 'path/to/source.styl' }
}
},
coffee : {
compile: {
files: { 'path/to/result.js': 'path/to/source.coffee' }
}
}
});
grunt.loadNpmTasks('grunt-contrib');
grunt.registerTask('default', ['stylus', 'coffee']);
};

例：stylus + CoffeeScript
grunt.initConfig({
stylus: {
compile: {
files: { 'path/to/result.css': 'path/to/source.styl' }
}
},
coffee : {
compile: {
files: { 'path/to/result.js': 'path/to/source.coffee' }
}
}
});
grunt.registerTask('default', ['stylus', 'coffee']);
};
grunt

でも毎回 grunt を叩くのすら
面倒くさい

ファイルの変更を監視させる
grunt.initConfig({
stylus: { … },
coffee: { … },
watch: {
stylus: {
files: ['path/to/source.styl'],
tasks: 'stylus'
},
coffee: {
files: ['path/to/source.coffee'],
tasks: 'coffee'
}
}
});
grunt.registerTask('default', 'watch');
};

ファイルの変更を監視させる
grunt
grunt.initConfig({
stylus: { … },
coffee: { … },
watch: {
stylus: {
files: ['path/to/source.styl'],
tasks: 'stylus'
},
coffee: {
files: ['path/to/source.coffee'],
tasks: 'coffee'
}
}
});
grunt.registerTask('default', 'watch');
};

他にもいろいろ出来ます
? スプライトシートの作成
? WebFontの作成
? ファイルのminify
? ファイルのgzip圧縮
とかとか、他にもいっぱい

後継でgulpってのもあります
? こっちの方が設定ファイルが短く書ける
? しかも早い
? Gruntも使ったことなかったら、こっちの方が
取っ付きやすいかもです

新しいプロジェクトを作るとき
? ライブラリとか、gruntの設定ファイルとか、
前に使ったプロジェクト構成と同じ構成でや
りたい

毎回環境構築をするのも
面倒くさい

Yeoman
? スキャフォールディング(足場組み)ツール
? 自身の環境を使い回すことが出来る

いろいろ見てきたけど
5日間しか期間が無いので
自分たちでどこまで使えるのか
本当に自分たちのサービスに合っていのるかを考えて
取捨選択して使ってみると良いと思います。

あとメッチャ浅くしか説明していないので
興味があるものは自分で調べてみてください。
調べてみて分からなかったら
メンター陣に質問してもらえると！

今回话した技术は大体これに书いてあります

ではでは、
5日間頑張っていきましょう！

狠狠撸

フロント作业の効率化

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to フロント作业の効率化 (20)

フロント作业の効率化