SCIVONE Tech Talks
#0
マルチデバイス対応を踏まえたフロントエンド開発事情
Hika Maeng 株式会社クイン代表取締役、 Bsidesoft CEO
1

SCIVONE Tech Talks #0 マルチデバイス対応を踏まえたフロントエンド開発事情
本日のアウトライン
実務面でのオープンソースライブラリの課題
コーディング戦略
JavaScript の特徴を活かそう

SCIVONE Tech Talks #0 マルチデバイス対応を踏まえたフロントエンド開発事情
実務面でのオープンソースライブラリの課題
1
継続的なブラウザの更新に対応できない
初期開発時
時間経過
2011, IE9, jQuery 1.3
2013, IE10, jQuery 1.9
jQuery を更新する
API の不一致、変更が原因で、
サイト全体を見直す必要が出てくる
jQuery を更新しない
新しいブラウザの特性に対応しておらず、
パフォーマンスとセキュリティの問題が発生

SCIVONE Tech Talks #0 マルチデバイス対応を踏まえたフロントエンド開発事情
実務面でのオープンソースライブラリの課題
2
ブラウザの互換性が保障されない
IE8
IE9
IE10
12.44%
22.27%
15.67%
HTML5 標準対応を機に、ほとんどの古いブラウザのサポートが終了
たとえば、 jQuery が Internet Explorer 6 ～ 8 をサポートするのは 1.9 まで。
しかし現実には、無視できないシェア
statCounter:http://gs.statcounter.com/#browser_version-JP-monthly-201301-201310-bar

SCIVONE Tech Talks #0 マルチデバイス対応を踏まえたフロントエンド開発事情
実務面でのオープンソースライブラリの課題
3
モバイルブラウザ対応
1. iPhone - 8
Safari - 5.x, 6.x, 7.x
Opera, mini,
Chrome, Firefox
Facebook
2. iPad – 8
3. Andorid - 30
NativeBrowser – 30over,
Chrome
4. smartTV, Android Tablet – 10over
50
over
iconfinder.com

SCIVONE Tech Talks #0 マルチデバイス対応を踏まえたフロントエンド開発事情
コーディング戦略
ラッピング ライブラリを包括するレイヤーを構成して使用
$( ‘#stage’ ).css( ‘width’, 30 );
function css( $selector, $k, $v ){
$( $selector ).css( $k, $v );
}
function css( $selector, $k, $v ){
var dom = Sizzle( $selector );
dom.style[$k] = $v + ‘px’;
}
css( ‘#stage’, ‘width’, 30 );
css( ‘#stage’, ‘width’, 30 );
実際の具現化には
オープンソースの課題
ライセンス問題、技術サポート、機能の追加、制御されていない開発チーム
自前で実装する場合の課題
膨大な開発コスト、深い知識、メンテナンスコスト

SCIVONE Tech Talks #0 マルチデバイス対応を踏まえたフロントエンド開発事情
JavaScript の特徴を活かそう
1
DOM Wrapper
2
Hash Map
3
Prototype
4
Scope
7

SCIVONE Tech Talks #0 マルチデバイス対応を踏まえたフロントエンド開発事情
JavaScript の特徴を活かそう
1
DOM Wrapper
HTML System
HTML System
Tag Element
<canvas id=”c1”>
<style id=”s1”>
c1 = document.getElementById('c1');
context = c1.getContext('2d');
context.draw(..);
s1 = document.getElementById('s1');
sheet = s1.sheet;
sheet.rules.insertRule(...);
Tag Element
Context Object
Context
Object

SCIVONE Tech Talks #0 マルチデバイス対応を踏まえたフロントエンド開発事情
JavaScript の特徴を活かそう
keys
2
hash
function
hashes
00
Hash Map
John Smith
01
02
Lisa Smith
Sam Doe
03
04
自由に Key 、 Value の追加削除ができる
00
var temp = {};
temp.newKey = 3;
delete temp.newKey;
JavaScript 内のすべてのオブジェクトは HashMap
オブジェクトではないもの： Primitive
参照されずにコピーされる
string, number, boolean, NaN, undefined, null
var temp = function(){};
temp.a =3;
temp = new Date;
temp.b = 3;
temp = [3,4,5];
temp.c = 3
http://en.wikipedia.org/wiki/Hash_table

SCIVONE Tech Talks #0 マルチデバイス対応を踏まえたフロントエンド開発事情
JavaScript の特徴を活かそう
3
Prototype
クラスがない
共有リソース（メソッド、フィールド）を保管する場所がない
関数の特定のキーを共有するリソースのアーカイブに使用
var temp = function(){};
temp.prototype = {};
prototype keyChain
new でオブジェクトを作成すると、指定された関数の prototype を共有する
var func = function(){};
func.prototype = {
test:function(){}
}
var a = {};
a.__proto__ = func.prototype;
var temp= func.apply( a, arguments );
if( typeof temp == 'object' ) a = temp;
var a = new func;
a.test();
a['test'] == undefined a.__proto__.test == func.prototype.test

SCIVONE Tech Talks #0 マルチデバイス対応を踏まえたフロントエンド開発事情
JavaScript の特徴を活かそう
4
Scope
関数の実行時に、
Execution Context （ EC ）を作成
function test( a, b ){
var c, d;
}
test( 3, 4, 5 );
testEC1 = {
this:window,
arguments:[3,4,5],
a:3, b:4,
c:undefined, d:undefined,
parent:??
}
EC ： Execution Context （実行コンテキスト）
test( 6 );
testEC2 = {
this:window,
arguments:[6,undefined],
a:6, b:undefined,
c:undefined, d:undefined,
parent:??
}

SCIVONE Tech Talks #0 マルチデバイス対応を踏まえたフロントエンド開発事情
JavaScript の特徴を活かそう
4
Scope
EC 生成をコンパイラが処理するための設計図 ― 関数の Scope
function test( a, b ){
var c, d;
}
test.scope = {
arguments:['a','b'],
locals:['c','d'],
parent:??
}
arg = scope.arguments;
for( i = 0 ; i < arg.length ; i++ ){
key = arg[i];
testEC1[key] = testEC1.arguments[i];
}
locals = scope.locals;
for( i = 0 ; i < locals.length ; i++ ){
key = locals[i];
testEC1[key] = undefined;
}
testEC1.parent = scope.parent;
EC ： Execution Context （実行コンテキスト）
test.call( {k:3}, 3, 4, 5 );
testEC1 = {
this:{k:3},
arguments:[3,4,5],
a:3, b:4,
c:undefined, d:undefined,
parent:??
}

SCIVONE Tech Talks #0 マルチデバイス対応を踏まえたフロントエンド開発事情
JavaScript の特徴を活かそう
4
Scope
Parent ― 環境関数の EC
function test( a, b ){
var c, d;
}
function global(){
function test( a, b ){
var c, d;
}
}
global();
EC ： Execution Context （実行コンテキスト）
function environmentalFunction(){
function concreateFunction(){
}
concreateFunction.scope.parent = environmentalFunction_EC1;
}
environmentalFunction();
environmentalFunction_EC1 = {...};

SCIVONE Tech Talks #0 マルチデバイス対応を踏まえたフロントエンド開発事情
JavaScript の特徴を活かそう
4
Scope
Scope Key Chain
function ev(){
var data = "hello";
return function c( $data ){
console.log( 'origin:', data,
'new:', $data );
data = $data;
}
}
var c = ev();
c( "aloha" );
c( "bye" );
var c = ev();
c( "aloha" );
c( "bye" );
ev_EC = {
this:window,
arguments:[],
data:'hello'
} = c.scope.parent
c_EC1 = {
this:window,
arguments:["aloha"],
$data:'aloha',
parent:c.scope.parent
}
c_EC2 = {
this:window,
arguments:["bye"],
$data:'bye',
parent:c.scope.parent
}
c_EC1.data == undefined
c_EC1.parent.data = 'hello'
origin: hello, new: aloha
c_EC1.parent.data = c_EC1.$data
= 'aloha'

ご清聴ありがとうございました。
Enjoy Your Happy Dev Life!
15