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 | 更新情報をチェックする

2015年10月02日

Ionic Framewark 入門

Ionic FramewarkはHTML5でモバイルアプリが作成できるnodeのフレームワーク。

利用方法としてはnpmでionic、cordova、ios-simをインストール。

sudo npm install -g ionic cordova ios-sim


ionicコマンドでプロジェクトを開始します

ionic start myproject blank


途中で「Create an ionic.io account to send Push Notifications and use the Ionic View app?」と聞かれるのでひとまずnoで。

作成が終了したらプロジェクト内に移動してionic serveで起動するとブラザでプロジェクトが確認できる。

cd myproject
ionic serve


初期表示画面のHTMLは「/myproject/www/index.html」にあるのでこちらを修正してリロードすれば修正内容が反映されている。

MacではiOSシミュレータで確認ができる。初回のみ「ionic platform add ios」でビルドすれば以下のコマンドでiOSシュミレータで確認出来ます。

ionic platform add ios//(初回のみ)
ionic build ios
ionic emulate ios


では、Ionic Framewarkを利用してTODO アプリを作っていきましょう。(参考:Ionic Book: Table of Contents - Ionic Framework)

index.htmlは初期時は以下のようになっています。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>

<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">

<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
</ion-content>
</ion-pane>
</body>
</html>


サイドメニューを表示する



まずは、body要素の内側を以下のように変更します。

<ion-side-menus>
<ion-side-menu-content></ion-side-menu-content>
<ion-side-menu side="left"></ion-side-menu>
</ion-side-menus>


そうするとドラッグ(スワイプ)でサイドメニューが表示されるようになります。

ヘッダーを表示する



更に以下のように変更します。

<ion-side-menus>

<!-- Center content -->
<ion-side-menu-content>
<ion-header-bar class="bar-dark">
<h1 class="title">Todo</h1>
</ion-header-bar>
<ion-content>
</ion-content>
</ion-side-menu-content>

<!-- Left menu -->
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
<h1 class="title">Projects</h1>
</ion-header-bar>
</ion-side-menu>

</ion-side-menus>


メインコンテツ、サイドメニューそれぞれにヘッダーが表示されます。

リストを表示する



次に<ion-content>内を以下のように変更し、

<ion-content>
<ion-list>
<ion-item ng-repeat="task in tasks">
{{task.title}}
</ion-item>
</ion-list>
</ion-content>


body要素を以下のように変更し、

<body ng-app="starter" ng-controller="TodoCtrl">


app.jsを以下のように変更するとメインコンテツにリストが表示されます。

&angular.module('starter', ['ionic'])

.controller('TodoCtrl', function($scope) {
$scope.tasks = [
{ title: 'Collect coins' },
{ title: 'Eat mushrooms' },
{ title: 'Get high enough to grab the flag' },
{ title: 'Find the Princess' }
];
});


TODOを登録できるようにする



次にページ内のモーダルでTODOを登録できるように修正しましょう。index.html上に以下のHTMLをついきます。

<script id="new-task.html" type="text/ng-template">

<div class="modal">

<!-- Modal header bar -->
<ion-header-bar class="bar-secondary">
<h1 class="title">New Task</h1>
<button class="button button-clear button-positive" ng-click="closeNewTask()">Cancel</button>
</ion-header-bar>

<!-- Modal content area -->
<ion-content>

<form ng-submit="createTask(task)">
<div class="list">
<label class="item item-input">
<input type="text" placeholder="What do you need to do?" ng-model="task.title">
</label>
</div>
<div class="padding">
<button type="submit" class="button button-block button-positive">Create Task</button>
</div>
</form>

</ion-content>

</div>

</script>


更に<ion-header-bar>のh1の次に以下の様な<button>を追加します。

<ion-header-bar class="bar-dark">
<h1 class="title">Todo</h1>
<button class="button button-icon" ng-click="newTask()">
<i class="icon ion-compose"></i>
</button>
</ion-header-bar>


最後にapp.jsのcontroller('TodoCtrl')を以下のように変更しましょう。

angular.module('starter', ['ionic'])

.controller('TodoCtrl', function($scope, $ionicModal) {
// No need for testing data anymore
$scope.tasks = [];

// Create and load the Modal
$ionicModal.fromTemplateUrl('new-task.html', function(modal) {
$scope.taskModal = modal;
}, {
scope: $scope,
animation: 'slide-in-up'
});

// Called when the form is submitted
$scope.createTask = function(task) {
$scope.tasks.push({
title: task.title
});
$scope.taskModal.hide();
task.title = "";
};

// Open our new task modal
$scope.newTask = function() {
$scope.taskModal.show();
};

// Close the new task modal
$scope.closeNewTask = function() {
$scope.taskModal.hide();
};
});


こうすることで右上にボタンが表示され、そのボタンタップ時にモーダルが表示されモーダル内でTODOが登録できるようになります。

プロジェクトの追加



では、最後にプロジェクトで管理できるようにしましょう。

<ion-side-menu-content>を以下のように変更

<!-- Center content -->
<ion-side-menu-content>
<ion-header-bar class="bar-dark">
<button class="button button-icon" ng-click="toggleProjects()">
<i class="icon ion-navicon"></i>
</button>
<h1 class="title">{{activeProject.title}}</h1>
<!-- New Task button-->
<button class="button button-icon" ng-click="newTask()">
<i class="icon ion-compose"></i>
</button>
</ion-header-bar>
<ion-content scroll="false">
<ion-list>
<ion-item ng-repeat="task in activeProject.tasks">
{{task.title}}
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu-content>


<ion-side-menu>を以下のように変更

 <!-- Left menu -->
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
<h1 class="title">Projects</h1>
<button class="button button-icon ion-plus" ng-click="newProject()">
</button>
</ion-header-bar>
<ion-content scroll="false">
<ion-list>
<ion-item ng-repeat="project in projects" ng-click="selectProject(project, $index)" ng-class="{active: activeProject == project}">
{{project.title}}
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>


最後にapp.jsを以下のように変更しましょう。

angular.module('starter', ['ionic'])
/**
* The Projects factory handles saving and loading projects
* from local storage, and also lets us save and load the
* last active project index.
*/
.factory('Projects', function() {
return {
all: function() {
var projectString = window.localStorage['projects'];
if(projectString) {
return angular.fromJson(projectString);
}
return [];
},
save: function(projects) {
window.localStorage['projects'] = angular.toJson(projects);
},
newProject: function(projectTitle) {
// Add a new project
return {
title: projectTitle,
tasks: []
};
},
getLastActiveIndex: function() {
return parseInt(window.localStorage['lastActiveProject']) || 0;
},
setLastActiveIndex: function(index) {
window.localStorage['lastActiveProject'] = index;
}
}
})

.controller('TodoCtrl', function($scope, $timeout, $ionicModal, Projects, $ionicSideMenuDelegate) {

// A utility function for creating a new project
// with the given projectTitle
var createProject = function(projectTitle) {
var newProject = Projects.newProject(projectTitle);
$scope.projects.push(newProject);
Projects.save($scope.projects);
$scope.selectProject(newProject, $scope.projects.length-1);
}


// Load or initialize projects
$scope.projects = Projects.all();

// Grab the last active, or the first project
$scope.activeProject = $scope.projects[Projects.getLastActiveIndex()];

// Called to create a new project
$scope.newProject = function() {
var projectTitle = prompt('Project name');
if(projectTitle) {
createProject(projectTitle);
}
};

// Called to select the given project
$scope.selectProject = function(project, index) {
$scope.activeProject = project;
Projects.setLastActiveIndex(index);
$ionicSideMenuDelegate.toggleLeft(false);
};

// Create our modal
$ionicModal.fromTemplateUrl('new-task.html', function(modal) {
$scope.taskModal = modal;
}, {
scope: $scope
});

$scope.createTask = function(task) {
if(!$scope.activeProject || !task) {
return;
}
$scope.activeProject.tasks.push({
title: task.title
});
$scope.taskModal.hide();

// Inefficient, but save all the projects
Projects.save($scope.projects);

task.title = "";
};

$scope.newTask = function() {
$scope.taskModal.show();
};

$scope.closeNewTask = function() {
$scope.taskModal.hide();
}

$scope.toggleProjects = function() {
$ionicSideMenuDelegate.toggleLeft();
};


// Try to create the first project, make sure to defer
// this by using $timeout so everything is initialized
// properly
$timeout(function() {
if($scope.projects.length == 0) {
while(true) {
var projectTitle = prompt('Your first project title:');
if(projectTitle) {
createProject(projectTitle);
break;
}
}
}
});

});


これで、完成。

Angularを触れるのが大前提のフレームワークですね。
posted by ねこまんま at 17:23 | Comment(0) | TrackBack(0) | Tool | 更新情報をチェックする

2015年09月30日

ES6の基本 - Generator

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

Generator



function名の前に*(アスタリスク)をつけると実行時にGenerator Objectを生成します。Generator Objectのnextメソッドを実行するとyield宣言した箇所まで関数を実行します。yieldの値はvalueプロパティで取得できます。

// ジェネレータを返す関数を定義する
function *func(){
console.log(1,"in");
yield 1;
console.log(2,"in");
yield 2;
console.log(5,"in");
yield 5;
console.log("foo","in");
yield "foo";
console.log("last","in");
}

// ジェネレータを取得する
var gen = func();

console.log(gen.next().value,"out");
console.log(gen.next().value,"out");
console.log(gen.next().value,"out");
console.log(gen.next().value,"out");
console.log(gen.next().value,"out");


var marked0$0 = [func].map(regeneratorRuntime.mark);
function func() {
return regeneratorRuntime.wrap(function func$(context$1$0) {
while (1) switch (context$1$0.prev = context$1$0.next) {
case 0:
console.log(1, "in");
context$1$0.next = 3;
return 1;

case 3:
console.log(2, "in");
context$1$0.next = 6;
return 2;

case 6:
console.log(5, "in");
context$1$0.next = 9;
return 5;

case 9:
console.log("foo", "in");
context$1$0.next = 12;
return "foo";

case 12:
console.log("last", "in");

case 13:
case "end":
return context$1$0.stop();
}
}, marked0$0[0], this);
}

// ジェネレータを取得する
var gen = func();

console.log(gen.next().value, "out");
console.log(gen.next().value, "out");
console.log(gen.next().value, "out");
console.log(gen.next().value, "out");
console.log(gen.next().value, "out");


以下のように無名関数を利用して一気にGenerator Objectを生成することも可能です。

// ジェネレータを取得する
var gen = (function *(){
console.log(1,"in");
yield 1;
console.log(2,"in");
yield 2;
console.log(5,"in");
yield 5;
console.log("foo","in");
yield "foo";
console.log("last","in");
})();
タグ:BABEL ES6 generator
posted by ねこまんま at 13:27 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2015年09月28日

ES6の基本 - Class

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

Class



これまでnew functionなどを利用してclassを利用してきたがES6で他の言語と同等のclassが追加されました。

class Person{
//コンストラクタ
constructor(name) {
this.name = name;
}
//メソッド
say() {
return 'My Name is ' + this.name;
}
//静的メソッド
static say2(name) {
return '私の名前は' + name;
}
}
var taro = new Person('太郎');
console.log(taro.say());//My Name is 太郎
console.log(Person.say2("taro "));//私の名前はtaro

class Man extends Person{
isMan() {
return true;
}
}
class Woman extends Person{
isMan() {
return false;
}
}

var taro = new Man('太郎');
console.log(taro.isMan());//true
var hanako = new Woman('花子');
console.log(hanako.isMan());//false


var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }

var Person = (function () {
//コンストラクタ

function Person(name) {
_classCallCheck(this, Person);

this.name = name;
}

//メソッド

_createClass(Person, [{
key: 'say',
value: function say() {
return 'My Name is ' + this.name;
}

//静的メソッド
}], [{
key: 'say2',
value: function say2(name) {
return '私の名前は' + name;
}
}]);

return Person;
})();

var taro = new Person('太郎');
console.log(taro.say()); //My Name is 太郎
console.log(Person.say2("taro ")); //私の名前はtaro

var Man = (function (_Person) {
_inherits(Man, _Person);

function Man() {
_classCallCheck(this, Man);

_get(Object.getPrototypeOf(Man.prototype), 'constructor', this).apply(this, arguments);
}

_createClass(Man, [{
key: 'isMan',
value: function isMan() {
return true;
}
}]);

return Man;
})(Person);

var Woman = (function (_Person2) {
_inherits(Woman, _Person2);

function Woman() {
_classCallCheck(this, Woman);

_get(Object.getPrototypeOf(Woman.prototype), 'constructor', this).apply(this, arguments);
}

_createClass(Woman, [{
key: 'isMan',
value: function isMan() {
return false;
}
}]);

return Woman;
})(Person);

var taro = new Man('太郎');
console.log(taro.isMan()); //true
var hanako = new Woman('花子');
console.log(hanako.isMan()); //false


このようにconstructorで簡単にコンストラクタの設定ができ、staticで静的メソッドが定義できます。
タグ:ES6 BABEL class
posted by ねこまんま at 19:23 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

ES6の基本 - concise methods

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

concise methods



ES6ではメソッドの定義が簡潔になりました。以下のように「:function」を省略できるようになっています。

var bar = {
fuga : "ok",
foo() {
console.log(this.fuga);
}
};

bar.foo();//ok


var bar = {
fuga: "ok",
foo: function foo() {
console.log(this.fuga);
}
};

bar.foo(); //ok
posted by ねこまんま at 18:30 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする