• Like
  • Save
フロント作業の効率化
Upcoming SlideShare
Loading in...5
×
 

フロント作業の効率化

on

  • 413 views

サイバーエージェント、フロントエンドCAMP第一日程の技術講義資料です

サイバーエージェント、フロントエンドCAMP第一日程の技術講義資料です

Statistics

Views

Total Views
413
Views on SlideShare
411
Embed Views
2

Actions

Likes
5
Downloads
1
Comments
0

1 Embed 2

http://localhost 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    フロント作業の効率化 フロント作業の効率化 Presentation Transcript

    • フロント作業の 効率化@y_yoshinari
    • 簡単に自己紹介 @y_yoshinari • フロントエンドエンジニアです • 2013年度新卒入社です (そろそろ入社して1年半) • なぞってピグキッチンというサービスを制作しています
    • Webでこんなの作れるんだー的な感じで、後で遊んでみてもらえると嬉しいです（という宣伝）
    • 突然ですが、 このインターンの開発期間は何日でしょう！
    • そうですね ５日間ですね
    • 時間がないですね
    • ってことで
    • フロント作業の 効率化@y_yoshinari もう１度テーマを確認
    • Agenda • HTMLの効率化 • CSSの効率化 • JavaScriptの効率化 • Grunt • Yeoman
    • HTML
    • 入力の効率化
    • Emmet • Zen-Codingの次期バージョン • HTML, CSSの入力を簡略化出来る • プラグインをインストールするだけで使える
    • Ctrl + e
    • 例１ 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> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> <li><a href="#">Item 5</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 } ] }
    • <script id="input" type="text/x-handlebars-template"> <ul> {{#each userlist}} <li>{{name}}：{{age}}歳</li> {{/each}} </ul> </script> <div id=“output”></div> var value = { “userlist”: [ { “name”: “太郎”, “age”: 25 }, { “name”: “次郎”, “age”: 23 }, { “name”: “花子”, “age”: 22 } ] }
    • <script id="input" type="text/x-handlebars-template"> <ul> {{#each userlist}} <li>{{name}}：{{age}}歳</li> {{/each}} </ul> </script> <div id=“output”></div> var value = { “userlist”: [ { “name”: “太郎”, “age”: 25 }, { “name”: “次郎”, “age”: 23 }, { “name”: “花子”, “age”: 22 } ] } var template = Handlebars.compile($('#input').html());
    • <script id="input" type="text/x-handlebars-template"> <ul> {{#each userlist}} <li>{{name}}：{{age}}歳</li> {{/each}} </ul> </script> <div id=“output”></div> var values = { “userlist”: [ { “name”: “太郎”, “age”: 25 }, { “name”: “次郎”, “age”: 23 }, { “name”: “花子”, “age”: 22 } ] } var template = Handlebars.compile($('#input').html()); $('#output').html(template(value));
    • Handlebarsに関する＋α • ループ文だけでなく、if 文も使える • ヘルパー関数を自作することも出来る • コードの中でコンパイルしなくても、予めコ ンパイルしておくことも出来る（早くなる）
    • CSS
    • 入力の効率化
    • またEmmetの紹介です
    • 例 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 { -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;
    • セミコロン(;)も省略できる？ 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 font 12px Helvetica, Arial, sans-serif a.button border-radius(5px)
    • 自然なmixinに border-radius() -webkit-border-radius arguments -moz-border-radius arguments border-radius arguments body font 12px Helvetica, Arial, sans-serif a.button border-radius 5px
    • 便利な機能は外出ししよう @import ‘vendor’ body font 12px Helvetica, Arial, sans-serif 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
    • CSSへの変換方法 stylus ファイル名.styl => ファイル名.cssが生成される /* style.styl */ body color red p color black
    • CSSへの変換方法 stylus ファイル名.styl => ファイル名.cssが生成される /* style.styl */ body color red p color black /* style.css */ body { color: #f00; } body p { color: #000; }
    • JavaScript
    • 車輪の再発明をしない効率化
    • 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) { setTimeout(function () { next(); }, 1000); }) .end();
    • Bucks.js • 非同期実行(並列) var bucks = new Bucks(); bucks .parallel([ function (err, res, next) { setTimeout(function () { next(); }, 1000); }, function (err, res, next) { setTimeout(function () { 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
    • Grunt
    • いろいろ見てきたけど、 • 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 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']); }; grunt
    • でも毎回 grunt を叩くのすら 面倒くさい
    • ファイルの変更を監視させる module.exports = function(grunt) { grunt.initConfig({ stylus: { … }, coffee: { … }, watch: { stylus: { files: ['path/to/source.styl'], tasks: 'stylus' }, coffee: { files: ['path/to/source.coffee'], tasks: 'coffee' } } }); grunt.loadNpmTasks('grunt-contrib'); grunt.registerTask('default', 'watch'); };
    • ファイルの変更を監視させる grunt module.exports = function(grunt) { grunt.initConfig({ stylus: { … }, coffee: { … }, watch: { stylus: { files: ['path/to/source.styl'], tasks: 'stylus' }, coffee: { files: ['path/to/source.coffee'], tasks: 'coffee' } } }); grunt.loadNpmTasks('grunt-contrib'); grunt.registerTask('default', 'watch'); };
    • 他にもいろいろ出来ます • スプライトシートの作成 • WebFontの作成 • ファイルのminify • ファイルのgzip圧縮 とかとか、他にもいっぱい
    • 後継でgulpってのもあります • こっちの方が設定ファイルが短く書ける • しかも早い • Gruntも使ったことなかったら、こっちの方が 取っ付きやすいかもです
    • Yeoman
    • 新しいプロジェクトを作るとき • ライブラリとか、gruntの設定ファイルとか、 前に使ったプロジェクト構成と同じ構成でや りたい
    • 毎回環境構築をするのも 面倒くさい
    • Yeoman • スキャフォールディング(足場組み)ツール • 自身の環境を使い回すことが出来る
    • 最後に
    • いろいろ見てきたけど 5日間しか期間が無いので 自分たちでどこまで使えるのか 本当に自分たちのサービスに合っていのるかを考えて 取捨選択して使ってみると良いと思います。
    • あとメッチャ浅くしか説明していないので 興味があるものは自分で調べてみてください。 調べてみて分からなかったら メンター陣に質問してもらえると！
    • 今回話した技術は大体これに書いてあります
    • ではでは、 5日間頑張っていきましょう！