2015年09月26日

ES6の基本 - let

BabelでES6を始めるにあたってES6の基本文法とBabelがどのようにコンパイルするかを理解するためにまとめておきます。

let



letは局所的変数宣言でブロクスコープ内のみで有効な変数を宣言できます。
ブロック外で利用した場合は単純にvarと同じ機能を提供しますのでBabelはvarに変更してコンパイルを行います

let foo0 ="bar0";
console.log(foo0);//bar0
if(true){
foo0 = "bar00";
console.log(foo0);//bar00
}


var foo0 = "bar0";
console.log(foo0); //bar0
if (true) {
foo0 = "bar00";
console.log(foo0); //bar00
}


以下のようにブロック内でlet宣言をおこなってみましょう。Babelは大幅な変更を行います。

if(true){
let foo1 = "bar1";
console.log(foo1);//bar1
}
foo1 ="bar11";
console.log(foo1);//foo1 is not defined


if (true) {
var _foo1 = "bar1";
console.log(_foo1); //bar1
}
foo1 = "bar11";
console.log(foo1); //foo1 is not defined


このようにしてletを擬似的に再現しております。

また、以下のように同一ブロックで同じ変数をletした場合はBabelはエラーを返しコンパイルを行いません。

let foo0 ="bar0";
let foo0 ="bar00";


ブロックの階層が異なれば同一変数名でもlet宣言で定義が可能です。

let foo0 ="bar0";
if(true){
let foo0 ="bar00";
}


var foo0 = "bar0";
if (true) {
var _foo0 = "bar00";
}

タグ:ES6 BABEL Let
posted by ねこまんま at 05:09 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2015年08月11日

JavaScriptにおけるsetter/getter

JavaScriptにおけるsetter/getterはECMAScript5で追加されIE9以降の主要なブラウザで利用できる機能です。

続きを読む
posted by ねこまんま at 08:03 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

プロパティの存在確認

以下のようにif分内に直接プロパティを指定して存在確認をするのはあまり上手な方法ではない。

var huga = {};
huga.hoge = "foo"
if(huga.hoge){
console.log("ok");
}else{
console.log("ng");
}
続きを読む
posted by ねこまんま at 07:38 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2013年02月08日

a要素のhashプロパティ

ページ内スクロールを実装する以下のようなサンプルスクリプトをどっかでみかけました。ここで注目は「this.hash」、domオブジェクトのa要素はhrefのハッシュ値を簡単に取り出せるっぽいです。

$(function(){
$('a[href^=#]').on('click', function(){
//クリックした要素の#を変数に入れる
var Target = $(this.hash);
//行き先までの画面上の高さの数値を変数に入れる
var TargetOffset = $(Target).offset().top;
//アニメーション時間ミリ秒
var Time = 700;
//集めた情報を元にアニメーション
$('html, body').animate({
scrollTop: TargetOffset
}, Time);
return false;
});
});
タグ:hash
posted by ねこまんま at 11:12 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2013年01月31日

カタカナかどうかチェックする正規表現

■カタカナかどうかチェックする正規表現

/^[ァ-ンァ-ン゙゚]*$/


■全角カタカナかどうかチェックする正規表現

/^[ァ-ン]*$/


■半角カタカナかどうかチェックする正規表現

/^[ァ-ン゙゚]*$/
タグ:正規表現
posted by ねこまんま at 23:17 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2012年08月30日

特定のオブジェクトがグローバルに存在するかどうかをチェック

特定のオブジェクトがグローバルに存在するかどうかをチェック

in演算子を利用します。

var hoge;
if("hoge" in window){
console.log("ok")
}else{
console.log("ng")
}
タグ:in
posted by ねこまんま at 12:44 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2012年07月15日

Backborn.js入門

とりあえずBackborn.jsを触ってみた感想

Backborn.jsは単体では動作せず、Underscore.jsとjQuery、json2.jsと合わせて利用する。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>


まずは以下のような基本コードを実行「hello world」を表示してみる

(function($){
var ListView = Backbone.View.extend({
el: $('body'),
initialize: function(){
_.bindAll(this, 'render');
this.render();
},
render: function(){
$(this.el).append("<ul> <li>hello world</li> </ul>");
}
});
var listView = new ListView();
})(jQuery);


initializeメソッドはインスタンス生成時に自動で呼び出されるメソッド、renderはページのレンダリング時に利用するメソッド、_.bindAllはイベント性実行時のthisを固定化するメソッド。

つぎはボタンをクリックした際に「hello world1」、「hello world2」と連番で出力するサンプル。

(function($){
var ListView = Backbone.View.extend({
el: $('body'),
events: {
'click button#add': 'addItem'
},
initialize: function(){
_.bindAll(this, 'render', 'addItem');
this.counter = 0;
this.render();
},
render: function(){
$(this.el).append("<button id='add'>Add list item</button>");
$(this.el).append("<ul></ul>");
},
addItem: function(){
this.counter++;
$('ul', this.el).append("<li>hello world"+this.counter+"</li>");
}
});
var listView = new ListView();
})(jQuery);


renderメソッドでボタンとul要素を出力して、eventsではイベントを生成しておきます。addItemは数値をアップしながらli要素を追加していきます。

つぎもボタンをクリックした際に「hello world1」、「hello world2」と連番で出力するサンプル。ただ、文字列をハードコーディングせず、modelで管理

(function($){
var Item = Backbone.Model.extend({
defaults: {
part1: 'hello',
part2: 'world'
}
});
var List = Backbone.Collection.extend({
model: Item
});

var ListView = Backbone.View.extend({
el: $('body'),
events: {
'click button#add': 'addItem'
},
initialize: function(){
_.bindAll(this, 'render', 'addItem', 'appendItem');
this.collection = new List();
this.collection.bind('add', this.appendItem);
this.counter = 0;
this.render();
},
render: function(){
var self = this;
$(this.el).append("<button id='add'>Add list item</button>");
$(this.el).append("<ul></ul>");
_(this.collection.models).each(function(item){
self.appendItem(item);
}, this);
},
addItem: function(){
this.counter++;
var item = new Item();
item.set({
part2: item.get('part2') + this.counter
});
this.collection.add(item);
},
appendItem: function(item){
$('ul', this.el).append("<li>"+item.get('part1')+" "+item.get('part2')+"</li>");
}
});

var listView = new ListView();
})(jQuery);


新たにmodelを追加、modelはBackbone.Collectionに渡すことでviewとの連携が可能になります。モデルはthis.collectionに保存。addというイベントとしてappendItemメソッドにバインドします。

次はViewをItemとList2つに分けて管理
(function($){
var Item = Backbone.Model.extend({
defaults: {
part1: 'hello',
part2: 'world'
}
});

var List = Backbone.Collection.extend({
model: Item
});

var ItemView = Backbone.View.extend({
tagName: 'li',
initialize: function(){
_.bindAll(this, 'render');
},
render: function(){
$(this.el).html('<span>'+this.model.get('part1')+' '+this.model.get('part2')+'</span>');
return this;
}
});

var ListView = Backbone.View.extend({
el: $('body'),
events: {
'click button#add': 'addItem'
},
initialize: function(){
_.bindAll(this, 'render', 'addItem', 'appendItem');

this.collection = new List();
this.collection.bind('add', this.appendItem);

this.counter = 0;
this.render();
},
render: function(){
var self = this;
$(this.el).append("<button id='add'>Add list item</button>");
$(this.el).append("<ul></ul>");
_(this.collection.models).each(function(item){
self.appendItem(item);
}, this);
},
addItem: function(){
this.counter++;
var item = new Item();
item.set({
part2: item.get('part2') + this.counter
});
this.collection.add(item);
},

appendItem: function(item){
var itemView = new ItemView({
model: item
});
$('ul', this.el).append(itemView.render().el);
}
});

var listView = new ListView();
})(jQuery);


最後は削除や編集を取り入れたバージョン

(function($){
Backbone.sync = function(method, model, success, error){
success();
}

var Item = Backbone.Model.extend({
defaults: {
part1: 'hello',
part2: 'world'
}
});

var List = Backbone.Collection.extend({
model: Item
});

var ItemView = Backbone.View.extend({
tagName: 'li',
events: {
'click span.swap': 'swap',
'click span.delete': 'remove'
},
initialize: function(){
_.bindAll(this, 'render', 'unrender', 'swap', 'remove');
this.model.bind('change', this.render);
this.model.bind('remove', this.unrender);
},
render: function(){
$(this.el).html('<span style="color:black;">'+this.model.get('part1')+' '+this.model.get('part2')+'</span>     <span class="swap" style="font-family:sans-serif; color:blue; cursor:pointer;">[swap]</span> <span class="delete" style="cursor:pointer; color:red; font-family:sans-serif;">[delete]</span>');
return this;
},
unrender: function(){
$(this.el).remove();
},
swap: function(){
var swapped = {
part1: this.model.get('part2'),
part2: this.model.get('part1')
};
this.model.set(swapped);
},
remove: function(){
this.model.destroy();
}
});

var ListView = Backbone.View.extend({
el: $('body'),
events: {
'click button#add': 'addItem'
},
initialize: function(){
_.bindAll(this, 'render', 'addItem', 'appendItem');
this.collection = new List();
this.collection.bind('add', this.appendItem);

this.counter = 0;
this.render();
},
render: function(){
var self = this;
$(this.el).append("<button id='add'>Add list item</button>");
$(this.el).append("<ul></ul>");
_(this.collection.models).each(function(item){
self.appendItem(item);
}, this);
},
addItem: function(){
this.counter++;
var item = new Item();
item.set({
part2: item.get('part2') + this.counter
});
this.collection.add(item);
},
appendItem: function(item){
var itemView = new ItemView({
model: item
});
$('ul', this.el).append(itemView.render().el);
}
});
var listView = new ListView();
})(jQuery);


参考:Hello Backbone.js
タグ:Backborn.js
posted by ねこまんま at 04:21 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2012年05月22日

Safariかどうか判別する

Google ChromeとSafariで日本語のlocation.hashの違い(参考:ブラウザごとのlocation.hashの挙動のまとめ - ?D of K)から条件分岐して対応しなくてはいけなくなったので簡単なメモ。

$.browser.safariだと$.browser.webkitと同じ意味でGoogleChromeも検出してしまいます。

つぎのようにUserAgentにSafariをふくんでChromeを含まない場合のみに処理を行うとよい。

if( navigator.userAgent.indexOf("Safari") > 0 &&
navigator.userAgent.indexOf("Chrome") < 0 ){
location.hash = "#"+encodeURIComponent(”ほげ”)
}else{
location.hash = "#"+”ほげ”
}

posted by ねこまんま at 16:42 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2012年03月02日

JavaScriptやCSSを圧縮する

JavaScriptやCSSを圧縮するにはYUI Compressorがあるけどオンラインでサクっと圧縮したい場合は以下のサイト使えばいいかも。

Online JavaScript/CSS Compression Using YUI Compressor
タグ:javascript CSS YUI
posted by ねこまんま at 18:13 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2012年02月19日

AmazonWebサービスのエラーを修正

作成したツールが動かなくなったので色々と修正。

まず、2012年2月22日で2011-08-01バージョンを除くバージョンが停止してしまったらしいのでVersionを「2011-08-01」に変更。

それでも動かず、どうもAssociateTagが必須になったらしくAssociateTagを追加すると動き出すようになりました。

Amazon Product Advertising APIの利用方法は「Amazon Product Advertising API」や「hash_hmac をPHP4で利用するライブラリ」を参照。
posted by ねこまんま at 17:29 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2012年02月12日

keyframesをJavaScriptで制御

createElementでstyle要素を作成することでkeyframesのアニメーションをJavaScriptで動的に生成できる。

var main01main = [
"0% {left:100px}",
"50% {left:200px}",
"100% {left:300px}"
];
var cssAnimation = document.createElement('style');
cssAnimation.type = 'text/css';
var rules = document.createTextNode('@-webkit-keyframes main01main {'+
main01main.join(" ")+
'}');
cssAnimation.appendChild(rules);
document.getElementsByTagName("head")[0].appendChild(cssAnimation);
posted by ねこまんま at 01:34 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2012年02月06日

JavaScriptでランガムに画象を表示する

JavaScriptで配列に画象を入れておいてランガムに表示する方法

var images = ["dummy01.png","dummy02.png","dummy03.png"];
var i = Math.ceil(Math.random() * images.length | 0);
document.write("<img
タグ:javascript
posted by ねこまんま at 14:17 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

JavaScriptでcookieの書き出しを行う

JavaScriptでcookieの書き出しを行う関数

function setCookie(key, val, tmp) {
tmp = key + "=" + escape(val) + "; ";
tmp += "expires=Tue, 31-Dec-2030 23:59:59; ";
document.cookie = tmp;
console.log(document.cookie)
}
function getCookie(key, tmp1, tmp2, xx1, xx2, xx3) {
tmp1 = " " + document.cookie + ";";
xx1 = xx2 = 0;
len = tmp1.length;
while (xx1 < len) {
xx2 = tmp1.indexOf(";", xx1);
tmp2 = tmp1.substring(xx1 + 1, xx2);
xx3 = tmp2.indexOf("=");
if (tmp2.substring(0, xx3) == key) {
return(unescape(tmp2.substring(xx3 + 1, xx2 - xx1 - 1)));
}
xx1 = xx2 + 1;
}
return("");
}


jQuery 使ってる場合はjQuery Cookieとか使うとよさげ

via:Cookie(JavaScript版)のソースコード

via
タグ:Cookie
posted by ねこまんま at 14:14 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2011年12月17日

jQueryで画像の縦横を揃える

画像の縦横を揃える、横幅が多い場合は168pxいないで表示して、高さがあふれる場合は111px以下に縮小する方法

<img src="products.gif" width="168" />


画像には属性をつけて横幅を縮小しておく。その上で以下のjQueryスクリプトを実行する

$(window).load(function(){
$(".hoge img").each(function(){
if($(this).height()>111){
$(this).removeAttr("width").height(111)

}
})
});


そうすると画象の縦横比を崩さずに縦が111px以内、横が168px以内に縮小できる。
タグ:jquery
posted by ねこまんま at 17:52 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2011年10月28日

Firefoxでスクロール位置がリセットされる現象に対応する

Firefoxでhtml要素にoverflow:hiddenを指定しているとscrollToメソッドなどでスクロール位置の制御ができない。

overflow:hiddenなどを指定しておいてscrollToメソッドなどでスクロール位置を変更することは可能だがその後html要素をoverflow:hiddenに変更すると初期値の戻ってしまう。

document.defaultViewで対応可能で、色々試したところクロスブラザを考えると次のようなコードになる

window.scrollTo(0,0);
$("html").css("overflow","hidden");
if(document.defaultView)document.defaultView.scrollTo(0,0);


via:スクロール位置を維持しつつ web ページ全体のスクロールをできないようにする方法 (web ページのスクロール位置固定) - vivid memo
posted by ねこまんま at 11:45 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2011年10月13日

テキストフィールドでエンターを押されてもsubmitしないようにする

テキストフィールドでエンターを押されてもsubmitしないようにする方法。

$(document).delegate("input.hoge","keypress",function(e){
if(e.keyCode==13){
return false;
}
}):


タグ:keypress
posted by ねこまんま at 01:50 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

blur時のfocus()

blur時にfocusを設定しようとしたらうまくいかなかった。Firefoxで

$(document).delegate("#hoge","blur",function(){
if(isNaN($(this).val())){
alert("数値を入力してください");
$(this).get(0).focus();
}
});


こう言った場合はsetTimeoutでだいたいどうにかなる。

$(document).delegate("#hoge","blur",function(){
if(isNaN($(this).val())){
alert("数値を入力してください");
var self = this;
setTimeout(function(){
$(self).get(0).focus();
},100);
}
});


こういう細かいはまりどころがめんどくさい。
タグ:Blur FOCUS
posted by ねこまんま at 01:22 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2011年08月27日

画像の読み込みが終ったあとにスクリプトを実行する

要素の高さを求めたい場合に要素内に画像などが含まれていたら正確な高さが取得できない。デフォルトのHTMLならwindow.onloadで良いけどJSで追加した要素の場合どうするのよ。

コンテンツにheight属性のない画像が含まれていると正しい高さが取れない :: 5509

これで取れそうな気もするけどなんか上手くいかない。

$("#mainContent").html(mainContent);
var imgSize = $("img",mainContent).size();
$("img",mainContent).load(function(){
--imgSize;
if(imgSize==0){
//実行したい命令
}
})


これでうまくいった。

とおもったら駄目だったので「画像の読み込みが終ったあとにスクリプトを実行する2」に続く。
posted by ねこまんま at 04:30 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2011年05月20日

CocProxyで簡単コーディング

CocProxyってのはサーバーのファイルをローカルのファイルと差し替えて表示できるプロキシー、本番環境で動かない!なんてさいにJavaScriptやCSSをローカルでゴニョゴニョできて便利なんですよ。

Macの利用方法は以下のサイトを参照
OSXにCocProxy(置換プロキシ)を設定してみる | 技術部 | TAC部Log

WindowsはRubyをインストールしたりしなくていろいろめんどくさかった記憶、次のサイトを見て頑張ってインストールしてください。
「CocProxy」という便利なツールを知っていますか? - livedoor ディレクターブログ




タグ:CocProxy
posted by ねこまんま at 21:03 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2011年04月16日

XMLを正規表現を利用してパース

XMLをDOMパースしようとした所、Android2.1で異常に遅かったので正規表現を利用してパース。

data = data.replace(/\n/g, "");
var regexp = new RegExp(/<\/name>/g),m;
while (m = regexp.exec(data)) {
console.log(m[1]);
}


複数の項目を取得したい場合は次のような正規表現

data = data.replace(/\n/g, "");
var regexp = new RegExp(/<\/name>.+?
(.+?)<\/address>/g),m;
while (m = regexp.exec(data)) {
console.log(m[1]);
console.log(m[2]);
}


nodeの出現順番に依存するけどDOMを利用するより当社比、数百倍高速。

あとは、配列に入れて煮るなり焼くなりしてください。
タグ:xml
posted by ねこまんま at 04:16 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする