tech talk about JS #0

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

1

SCIVONE Tech Talks #0 マルチデバイス対応を踏まえたフロントエンド開発事情

本日のアウトライン

実務面でのオープンソースライブラリの課題
コーディング戦略
JavaScript の特徴を活かそう



1

継続的なブラウザの更新に対応できない

初期開発時

時間経過

2011, IE9, jQuery 1.3

2013, IE10, jQuery 1.9
jQuery を更新する
API の不一致、変更が原因で、
サイト全体を見直す必要が出てくる

jQuery を更新しない
新しいブラウザの特性に対応しておらず、
パフォーマンスとセキュリティの問題が発生



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



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


コーディング戦略
ラッピング　ライブラリを包括するレイヤーを構成して使用
$( ‘#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 );

実際の具現化には
オープンソースの課題
ライセンス問題、技術サポート、機能の追加、制御されていない開発チーム
自前で実装する場合の課題
膨大な開発コスト、深い知識、メンテナンスコスト



1

DOM Wrapper

2

Hash Map

3

Prototype

4

Scope

7



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


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



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



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,
parent:??
}



4

Scope
EC 生成をコンパイラが処理するための設計図 ― 関数の Scope
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;


test.call( {k:3}, 3, 4, 5 );
testEC1 = {
this:{k:3},
arguments:[3,4,5],
a:3, b:4,
parent:??
}



4

Scope
Parent ― 環境関数の EC
var c, d;
}
function global(){
var c, d;
}
}
global();


function environmentalFunction(){
function concreateFunction(){
}
concreateFunction.scope.parent = environmentalFunction_EC1;
}
environmentalFunction();
environmentalFunction_EC1 = {...};



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

tech talk about JS #0

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to tech talk about JS #0

Similar to tech talk about JS #0 (20)

tech talk about JS #0