2016年12月06日

ES2015(ES6)のIterator

ES2015(ES6)ではIterableなオブジェクトというのが追加されている。

Iterableなオブジェクトはfor-of文で取得する事ができます、わかりやすいのが配列である。

for (let item of [1,2,3]) {
console.log(item);
}


他にもargumentsオブジェクトやnodeListなどいわゆる配列ライクなオブジェクトもIterableなオブジェクトとして定義されているfor-of文で取得する事ができます。

面白いところではStringオブジェクトなどもIterableなオブジェクトとして定義されておりfor-of文で取得する事ができます。

for (let item of 'abcde') {
console.log(item);
}


Iteratorとは?



Iterableなオブジェクトがそんな感じならIteratorとは何かというと、
Iterableなオブジェクトにnext()メソッドを付与して1個づつ取り出しができるようにしたオブジェクトです。
[Symbol.iterator]()を実行することでIteratorオブジェクトを作成できます。

const items = [1, 2, 3];
const iterator = items[Symbol.iterator]();
iterator.next();//Object {value: 1, done: false}
iterator.next();//Object {value: 2, done: false}
iterator.next();//Object {value: 2, done: false}
iterator.next();//{value: undefined, done: true}


取り出した際にvalueプロパティに値がdoneプロパティに出し切ったかのオブジェクトが出力され、出し切ったらdoneがtrueになります。
タグ:iterator ES6 ES2015
posted by ねこまんま at 13:14 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2016年11月15日

Webpack2を試す

Webpack2を試す

まず、インストールできるバージョンを確認。

npm info webpack versions


今回はWebpack2の最新の2.1.0-beta.26を試します。

まずはパッケージJSONの作成

npm init -y


Webpack2の最新のインストールは

npm i -D webpack@beta


もしくはバージョンを指定したい場合は、

npm i -D webpack@2.1.0-beta.26


package.jsonと同じ階層に以下のwebpack.config.jsを作成

'use strict';

const webpack = require("webpack");

module.exports = {
context: __dirname + "/src",
entry: {
app: "./app.js",
},
output: {
path: __dirname + "/dist",
filename: "[name].bundle.js",
},
};


これでsrc/app.jsのファイルをdist/app.bundle.jsに書き出してくれる。

package.jsonのscriptsを以下のように変更し、

  "scripts": {
"webpack": "webpack -p"
},


コンソールから【npm run webpack】とコマンドを打つとdist/app.bundle.jsが書き出される。

ではimport機能を使ってみましょう、「npm i -D moment」とコマンドをうってapp.jsの内容を以下のように変更しておきます。

'use strict';
import moment from 'moment';
var rightNow = moment().format('MMMM Do YYYY, h:mm:ss a');
console.log( rightNow );


これでmomentの機能を利用できるようになります。

以下のようにするとentryの配列の順にファイルを結合して配列の名前のファイル(app.bundle.js)として書き出してくれます。

'use strict';

const webpack = require("webpack");

module.exports = {
context: __dirname + "/src",
entry: {
app: ["./home.js", "./events.js", "./vendor.js"],
},
output: {
path: __dirname + "/dist",
filename: "[name].bundle.js",
},
};


以下のようにすると結合したり個別に書き出したり設定できます。






Getting Started with Webpack 2 – Thinking in Code

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

2016年10月18日

Reactのcreate-react-appコマンド

Facebook公式のcreate-react-appコマンドを試してみる。

まずはcreate-react-appコマンドのインストール

npm install -g create-react-app


以下のコマンドで初期設定が開始される

create-react-app hello-world


hello-worldディレクトリに移動し、npm startで開始する。

cd hello-world
npm start


http://localhost:3000/とかで立ち上がる

src/App.jsなんかに修正を加えると自動ビルドされブラウザがリロードされる。

ただ、実際の製品に反映させたい場合は以下のコマンドを実行しなくちゃいけない

npm run build

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

2016年10月03日

Vue.js 2でcompiledメソッド

Vue.js 2ではLifecycleメソッドのcompiledメソッドが廃止され、変わりにmountedメソッドが追加されたもよう。続きを読む
posted by ねこまんま at 12:21 | Comment(0) | TrackBack(0) | vue.js | 更新情報をチェックする

2016年09月27日

vue.jsの基本

vue.jsを最初に触ってから、結構たったのでもう一度復習。続きを読む
タグ:vue.js
posted by ねこまんま at 17:37 | Comment(0) | TrackBack(0) | vue.js | 更新情報をチェックする

2016年07月12日

ES2016(ES7)のbind syntax

ES2016(ES7)のbind syntaxでは以下のようにbind()を記述できる、

::this.handleIncrement


Babelの場合以下のように変換を行う。

this.handleIncrement.bind(this);


続きを読む
タグ:ES2016 ES7
posted by ねこまんま at 17:38 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

React/ReduxのMiddleware

React/Reduxで非同期処理やアクションの制御はMiddlewareを介して行うのが良いらしい。続きを読む
posted by ねこまんま at 07:32 | Comment(0) | TrackBack(0) | React | 更新情報をチェックする

ES2015(ES6)の慣れるまで読みにくい記述

React/ReduxのMiddlewareで見かける以下の記述。

const logger = store => next => action => {
next(action);
}


Arrow Functionの特性を活かした感じの記述でBabelでは以下のように変換を行います。

var logger = function logger(store) {
return function (next) {
return function (action) {
console.log("before");
next(action);
console.log("after");
};
};
};
続きを読む
タグ:ES2015 ES6 BABEL
posted by ねこまんま at 07:21 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2016年06月29日

react-router-reduxでTODOリスト

React+Redux でTODOリストで作ったTODOリストの一覧ページと追加ページを分離してreact-router-reduxで管理するサンプル。続きを読む
posted by ねこまんま at 19:09 | Comment(0) | TrackBack(0) | React | 更新情報をチェックする

React+Redux でTODOリスト

React+Redux でTODOリストを作ってみたのでメモ続きを読む
タグ:Redux
posted by ねこまんま at 17:57 | Comment(0) | TrackBack(0) | React | 更新情報をチェックする

Reactでinputを扱う

参考:Reactでinputを扱う - Qiita

Reactではinpuの値を自分で管理しなくちゃいけない。続きを読む
posted by ねこまんま at 09:54 | Comment(0) | TrackBack(0) | React | 更新情報をチェックする

2016年06月22日

イベント処理

メンテナブルJavaScriptを呼んでいて、イベント処理のハンドラ分岐が意識できていなかったのでメモ続きを読む
posted by ねこまんま at 14:58 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2016年05月30日

react-routerの使い方

react-routerの使い方メモ。続きを読む
posted by ねこまんま at 00:34 | Comment(0) | TrackBack(0) | React | 更新情報をチェックする

2016年05月25日

axiosを試してみた。

jQueryを利用せずにAjaxをやりたかったのでaxiosを試してみた。続きを読む
posted by ねこまんま at 12:03 | Comment(0) | TrackBack(0) | Tool | 更新情報をチェックする

2016年05月24日

ReactのshouldComponentUpdateサンプル

ReactのライフサイクルないのshouldComponentUpdate()でfalseを返すとrenderメソッドが走らない。
続きを読む
posted by ねこまんま at 00:09 | Comment(0) | TrackBack(0) | React | 更新情報をチェックする

2016年05月22日

Riot.js入門

Riot.jsが気になるので触ってみる。続きを読む
タグ:Riot.js
posted by ねこまんま at 00:51 | Comment(0) | TrackBack(0) | Riot.js | 更新情報をチェックする

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