2016年04月19日

React+ES6でTODOリスト

React+ES6でTODOリスト作ってみた。続きを読む
タグ:REACT
posted by ねこまんま at 14:37 | Comment(0) | TrackBack(0) | React | 更新情報をチェックする

2016年04月18日

React.ComponentでReact.findDOMNode()がエラーになる

React.ComponentでReact.findDOMNode()を利用しようとすると「Uncaught TypeError: _react2.default.findDOMNode is not a function」というエラーが出てしまいました。続きを読む
posted by ねこまんま at 08:11 | Comment(0) | TrackBack(0) | React | 更新情報をチェックする

2016年04月17日

React+Redux+ES6でカウンター

React+ES6でカウンターのRedux使ったバージョン。続きを読む
タグ:REACT Redux ES6
posted by ねこまんま at 18:11 | Comment(0) | TrackBack(0) | React | 更新情報をチェックする

React+ES6でカウンター

React+ES6でカウンターサンプルを作ってみました。続きを読む
タグ:REACT ES6
posted by ねこまんま at 16:38 | Comment(0) | TrackBack(0) | React | 更新情報をチェックする

2016年04月16日

Webpackでファイル監視

WebpackでReactを使ってみる」の続き。

Webpackでファイル監視を行い自動コンパイルを行うには「webpack --watch」で起動すれば監視が開始します。
タグ:REACT WebPACK
posted by ねこまんま at 16:07 | Comment(0) | TrackBack(0) | React | 更新情報をチェックする

2016年04月13日

WebpackでReactを使ってみる

とりあえずWebpackでReactを使うまでのメモ続きを読む
タグ:WebPACK REACT
posted by ねこまんま at 21:21 | Comment(0) | TrackBack(0) | React | 更新情報をチェックする

2016年02月12日

gulpでエラー

久々にgulpを実行したら以下の様なエラーが。

Error: Cannot find module 'object-assign'


ないらしいのでインストール。

npm install --save-dev object-assign


そんでもってgulpを実行したらまだ以下の様なエラーがbabelがアレらしい。

Error: Cannot find module 'babel-core'


とりあえずないらしいのでインストール。

npm install --save-dev babel-core


これでおk。
タグ:GULP BABEL
posted by ねこまんま at 21:33 | Comment(0) | TrackBack(0) | gulp | 更新情報をチェックする

2016年02月06日

npm init -y

npm initで-yオプションを使っている記事があったのでどういったオプションかメモ。

npm initだとプロンプト(対話)形式でpackage.jsonを作成するが-yオプションを使うと対話せず初期値で作ってくれる。便利

 npm init -y


-yや--yes、-f、--forceなんかでもおk
posted by ねこまんま at 10:08 | Comment(0) | TrackBack(0) | node.js | 更新情報をチェックする

Electronをインストールしようとしたらエラーが出た

Electronをインストールしようとしたらエラーが出たので対応メモ

インストールで利用したコマンド

sudo npm -g install electron-prebuilt


表示されたエラー

Downloading electron-v0.36.7-darwin-x64.zip
[============================================>] 100.0% of 39.52 MB (3.04 MB/s)
/Users/xxxxx/.nodebrew/node/v4.2.6/lib/node_modules/electron-prebuilt/install.js:22
throw err
^

Error: EACCES: permission denied, rename '/Users/xxxxx/.nodebrew/node/v4.2.6/lib/node_modules/electron-prebuilt/electron-tmp-download-5618-1454720022815/electron-v0.36.7-darwin-x64.zip' -> '/Users/xxxxx/.electron/electron-v0.36.7-darwin-x64.zip'


これを参考にした所、.electronのパーミッションを777に変えたら良いらしいので以下のコマンドで変更

chmod 777 ~/.electron


これで無事インストールできました。
タグ:ELECTRON
posted by ねこまんま at 10:03 | Comment(0) | TrackBack(0) | Electron | 更新情報をチェックする

2015年12月20日

AngularJSのng-bindとng-bind-template

AngularJSのng-bindはJS式をng-bind-templateはAngularを属性に記述できます。(下記の記述は共に同じ意味)

<p ng-bind-template="{{name1}}は{{name2}}です"></p>
<p ng-bind="name1+'は'+name2+'です'"></p>
posted by ねこまんま at 22:07 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

AngularJSのng-bind-htmlでHTMLを出力

AngularJSではHTMLのデータバインディングにng-bind-htmlを利用するがそのままでは利用できない。angular-sanitizeをあらかじめ読み込んでおき、依存機能にngSanitizeを含めておく必要がある。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-sanitize.min.js"></script>


<div ng-controller="MyController">
<div ng-bind-html="myData"></div>
</div>


angular.module("myApp",[ 'ngSanitize' ]).controller('MyController',["$scope",function($scope){
$scope.myData = "<b>World</b>";
}]);


もしくは$sce.trustAsHtml()を利用して害がないことを明示的に表現しなくてはいけない。

angular.module("myApp",[]).controller('MyController',["$scope",'$sce',function($scope,$sce){
$scope.myData = $sce.trustAsHtml("World");
}]);

タグ:AngularJS
posted by ねこまんま at 18:44 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

AngularJSのng-cloakとデフォルトCSS

AngularJSは読み込み時に以下のCSSを自動設定します。

ng-cloakはng-bindと同じく初期のチラつき対策に利用され、AngularJSが実行されたタイミングでこの属性が取り除かれて表示することが可能になります。

<style type="text/css">
@charset "UTF-8";
[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}
ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}
</style>
タグ:AngularJS
posted by ねこまんま at 18:31 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

AngularJSの$timeoutで時間差処理

AngularJSではsetTimeoutが利用できないため$timeoutを利用して時間差処理を設定する

angular.module("myApp",[]).controller('MyController',["$scope","$timeout",function($scope,$timeout){
$timeout(function(){
$scope.myName = "World";
},1000);
}]);
タグ:AngularJS
posted by ねこまんま at 18:26 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

AngularJSのng-bindで初期値を設定

ng-bindで要素の初期値を指定しておくとAngularJS実行後に要素の中身が挿入され一瞬のチラツキがなくなります。

angular.module("myApp",[]).controller('MyController',["$scope",function($scope){
$scope.myName = "World";
}]);


<div ng-controller="MyController">
<div ng-bind="'hello '+myName+'!'"></div>
</div>
タグ:Angular
posted by ねこまんま at 18:11 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

2015年12月18日

ng-strict-diと配列アノテーション

AngularJSではng-strict-di属性をng-app属性と同じ要素に付与することで配列アノテーションを強制することができる。

<html lang="en" ng-app="myApp" ng-strict-di>


以下の様なコールバックの引数に名前を指定するのはだめで、

var myApp = angular.module('myApp',[]);
myApp.controller('MyController',function($scope){
$scope.msg = "こんにちは こんにちは こんにんちは";
});


配列アノテーションを利用して引数を固定しておく。

var myApp = angular.module('myApp',[]);
myApp.controller('MyController',["$scope",function($scope){
$scope.msg = "こんにちは こんにちは こんにんちは";
}]);


また、以下のように$injectを利用して配列アノテーションを実行してもよい。

var myApp = angular.module('myApp',[]);
var MyController = function($scope){
$scope.msg = "こんにちは こんにちは こんにんちは";
};
MyController.$inject = ["$scope"];
myApp.controller('MyController',MyController);

posted by ねこまんま at 13:47 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

2015年11月19日

Backbone.jsで永続化時のURLやらmethodを変更

通常Backbone.jsでは以下のメソッドを利用した場合に右に書いたようなAjax通信を行いサーバーとの動機を行おうとする。(Collection.urlが"/api/foo"の場合)






Model.create/api/fooPOST
Model.save/api/fooPUT
Model.destroy/api/fooDELETE
Collection.fetch/api/fooFETCH


ただ、これをAPI仕様に合わせる為に以下のように変更する。






Model.create/api/addPOST
Model.save/api/deditPOST
Model.destroy/api/deletePOST
Collection.fetch/api/readPOST


Collectionはextend時に以下のようなrequestInfoオブジェクトとsyncメソッドを指定。

app.Library = Backbone.Collection.extend({
model : app.Book,
url : "/api/books",
requestInfo : {
'read' : {type: 'POST', url: "/api/books/read"}
},
sync: function(method, model, options){
options.url = this.requestInfo[method].url;
options.type = this.requestInfo[method].type;
Backbone.sync(method, model, options);
}
});


Modelはextend時に以下のようなrequestInfoオブジェクトとsyncメソッドを指定。
(サーバーのせっていによってはemulateJSONの指定は不要)

app.Book = Backbone.Model.extend({
requestInfo : {
'create': {type: 'POST', url: "/api/books/add"},
'update': {type: 'POST', url: "/api/books/edit"},
'delete': {type: 'POST', url: "/api/books/delete"}
},
sync: function(method, model, options){
options.url = this.requestInfo[method].url;
options.type = this.requestInfo[method].type;
options.emulateJSON = true;
if(model)options.data = model.toJSON();
Backbone.sync(method, model, options);
}
});

タグ:Backbone.js
posted by ねこまんま at 02:05 | Comment(0) | TrackBack(0) | Backbron.js | 更新情報をチェックする

MongoDBの対話モード

MongoDBの対話モードに関するメモ。続きを読む
タグ:node.js MongoDB
posted by ねこまんま at 01:53 | Comment(0) | TrackBack(0) | node.js | 更新情報をチェックする

2015年11月17日

続・MacでMongoDBを利用する

MacでMongoDBを利用するで設定したMongoDBを再び起動しようとしるするとエラーが出たので入れ直すメモ。

続きを読む
タグ:MongoDB node.js
posted by ねこまんま at 15:10 | Comment(0) | TrackBack(0) | node.js | 更新情報をチェックする

2015年11月10日

Backbone.jsのvalidateメソッド

Backbone.jsのvalidateメソッドについて詳しく知らんかったのでメモ。

set()やunset()時に{validate:true}というオプションを付与するとvalidateメソッドで定義したバリデーションを行う。何も返さなければそのままそのままモデルに格納されるが何か返した場合にはinvalidイベントを発火させモデルには何も格納しない。

var Bar = Backbone.Model.extend({
initialize:function(){
this.on("invalid",function(){
console.log("invalid");
});
},
defaults:{
name:"Jhon"
},
validate: function(attr){
console.log("validate");
if(!attr.name){
return false;
}
}
});

var bar = new Bar();

console.log(bar.get("name"));//Jhon

bar.set({name:""},{validate:true});//validate,invalid

console.log(bar.get("name"));//Jhon

bar.unset("name",{validate:true});//validate,invalid

console.log(bar.get("name"));//Jhon

bar.set({name:"Ben"},{validate:true});//validate

console.log(bar.get("name"));//Ben

posted by ねこまんま at 18:09 | Comment(0) | TrackBack(0) | Backbron.js | 更新情報をチェックする

2015年11月02日

nodebrew で利用しているnode.jsのバージョンを上げる

現在インストールされているnode.jsのバージョンが「v0.10.12」とかなり昔のなので久々にアップデートしてみました。続きを読む
posted by ねこまんま at 08:54 | Comment(0) | TrackBack(0) | node.js | 更新情報をチェックする