フロント作業の効率化

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

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

Webでこんなの作れるんだー的な感じで、後で遊んでみてもらえると嬉しいです（という宣伝）

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

そうですね
５日間ですね

フロント作業の
効率化@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日間頑張っていきましょう！

フロント作業の効率化

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à フロント作業の効率化

Similaire à フロント作業の効率化 (20)

Dernier

Dernier (7)

フロント作業の効率化