「Web技術」タグアーカイブ

ES6, JavaScript, web備忘録

【ECMAScript2015(ES6)】ES6の「Generators(ジェネレーター)とIterator(イテレータ)」をしばく！

【ECMAScript2015(ES6)】後で猫に教えてあげたいES6の「Generators(ジェネレーター)とIterator(イテレータ)」

昨日はSymbol(シンボル)でしたが、今日はGeneratorsとIterator。
babel立ち上げてコード確認しながらやりました。

ジェネレータってなにかって再帰処理を簡単にしてくれるものなんですね。
そのイテレータオブジェクトを返す関数がジェネレータ

ジェネレータを扱うにはイテレータを理解する必要があるようです。
続きを読む →

Vagrant, web備忘録, 環境構築

【Vagrant】vagrant upしたら An error occurred while downloading the remote file. The error message, if any, is reproduced below. Please fix this error and try again.

vagrant upしたら An error occurred while downloading the remote file. The error message, if any, is reproduced below. Please fix this error and try again.

Couldn't open file /Users/**/base

続きを読む →

React.js

【babelエラー対応】Error : [BABEL] Unknown option: direct.presets while parsing file

Error : [BABEL] /Users//index.js: Unknown option: direct.presets while parsing file: /Users//index.js

1__gulp__node_

事象 watchされているjsの更新がbundleされたapp.jsで生成されない。更新の度に上記のような

``` Error : [BABEL] /Users//index.js: Unknown option: direct.presets while parsing file: /Users//index.js

``` でる。

Unknown option: direct.presets while parsing file

解決方法 babelfyのバージョン上げてください

僕はそれでいけました

フロントエンド系の話

github

qiita

JavaScript, web備忘録

【 JavaScript】レシカルスコープ芸人

【JavaScript】レシカルスコープ芸人

今日レシカルスコープってなんだっけって思い、ぐぐったら わたしの書いたgithubが出てきた。

過去の自分に教わった。。 んで思い出した。

例えると

部屋があります。

庭があります(部屋は当然庭の中の家にあります。)

部屋で宣言したローカル変数(var)があり、

さらに部屋の中で宣言した関数fがそのvarを参照していたら、

同じ名前の変数が庭に既に宣言されていたとして、(グローバル変数)

庭で返り値とされた関数fが実行されてもfは部屋で宣言されたvarを参照する

これが 「関数は実行された時のスコープではなく、宣言時のスコープを参照する」の意味かな。。

var x = '庭';
var f = function(){ var x = '部屋';
return function(){return x}
//宣言した時のスコープは’部屋’を参照している
};
var f1 = f();
x -> '庭'
f1()
->'部屋'//関数実行時は一番上の'庭'もあるけど宣言時の'部屋'を参照する

でその関数宣言時のスコープがレシカルスコープ。

違いますか？？過去のわし。。

スコープは部屋から庭へと変数を探す。

庭になければundefined

でも庭から部屋の変数は見えない

内から外へは辿っていける(スコープチェーン)けど外からはできない。

ここの理屈が以前本当に分からなかった。。

prototypeがチェーン役をするんだけど、ここらへんも「にゃーちゃんに教えなきゃ」

フロントエンドの話 github qiita

immutableJS, web備忘録, 使い方

【Immutable.jsの使い方】Immutable.js超入門~ReactでsetStateのプロパティ値に直接代入避ける~

【Immutable.jsの使い方】Immutable.js超入門~ReactでsetStateのプロパティ値に直接代入避ける~

【Immutable.jsの使い方】Immutable.js超入門~ReactでsetStateのプロパティ値に直接代入避ける~
【Immutable.jsの使い方】Immutable.js超入門~ReactでsetStateのプロパティ値に直接代入避ける~

続きを読む →

web備忘録

【Spring-Boot】Error対処[Failed to execute goal org.springframework.boot:spring-boot-maven-plugin:1.3.3.RELEASE:run (default-cli) on project moriboot: Execution default-cli of goal org.springframework.boot:spring-boot-maven-plugin:1.3.3.RELEASE:run failed: Unable to find a single main class from the following candidates [com.example.App, com.example.app.Application] -> [Help 1]]

Failed to execute goal org.springframework.boot:spring-boot-maven-plugin:1.3.3.RELEASE:run (default-cli) on project moriboot: Execution default-cli of goal org.springframework.boot:spring-boot-maven-plugin:1.3.3.RELEASE:run failed: Unable to find a single main class from the following candidates [com.example.App, com.example.app.Application] -> [Help 1]

Spring-Boot[Error]console
Spring-Boot[Error]

上のようなエラーが出た場合
com.example.Appとcom.example.app.Applicationどっちをmainとして実行していいか分からなくなっているので片方削除してビルドをcleanしてください

ES6, JavaScript, web備忘録

ES6 Tagged template strings(タグテンプレートストリング)

Tagged template strings(タグテンプレートストリング)

Tagged template strings(タグテンプレートストリング)が多分便利なので 理解したことを書いておく コードはコチラ

もしも下記のように呼び出した場合、

[code language="javascript"] tag'もりた${kenji}です' [/code]

ES5でいうこのようなものとして呼び出している tag(["もりた","です"], kenji)

tagの第一引数に["もりた","です"]という変数として展開されない文字列が要素となる配列を受け取る それ以外のkenjiは第二引数以降受け取れる。 上記が

tag'もりた${kenji}です${yeah}' だとした場合 引数の数が増える

下記のように受け取った第一引数の配列のインデックスを参照することも可能(もちろん)

function tag(strings, ...values){ console.log(strings[0]) //もりた console.log(strings1) //です }

具体的な使用例

var long = '30px'; var weight = '40px';

function tag(strings, ...values){ return m:${values[0]}、p:${values[1]}; };

var str1 = tag身長${long}で、体重は${weight}です;

console.log(str1);

JavaScript, React.js, web備忘録

【React × ES6 × Flux】を手っ取り早く学びたい人の為にサンプル作ったよ【3の倍数と3が付くときだけ猫になるCounter】

【React × ES6 × Flux】を手っ取り早く学びたい人の為にサンプル作った【3の倍数と3が付くときだけ猫になるCounter】 Cat comes out when that contains the multiples of 3 and the string to 3

AWS11-5

なかなかミニマムでこれらを学べるプロジェクトがみつからなくて、勉強も兼ねて作りました。 なるべく小さい部品だと分かりやすいですしね。 この【React × ES6 × Flux】を手っ取り早く学びたい人の為にサンプル作ったよ【3の倍数と3が付くときだけ猫になるCounter】(Cat comes out when that contains the multiples of 3 and the string to 3)は clickすると値が増えるだけの本当に簡素なものですが、 中身はFluxで管理しているのでコードリーディングするのに動きがわかりやすくなっています。 component内でeventを感知すると状態を更新し、更新されたstateは予めリスナー登録していたメソッドをactionTypeによって振り分けてstore内で更新して、状態を子componentに伝えます。

プロジェクトをダウンロードして gulp立ち上げるとローカルサーバー立ち上がります。 jsが変更される度にbrowserifyでまとめてbabelifyでES6をES5に変換後bundleしてくれます。 ReactをClass構文で書きたい方、ES6も勉強したい方にはいいと思います。(僕も奮闘中です)

Fluxに関してはいろいろな書き方があるのですが、今実務でやっているような書き方でやっています。 (EventEmitterはライブラリではありません。)

プロジェクトはこちらです

Fluxに関して言えば前にも理解深めるためにこんなの作りました React × Flux × ES6 [WIP]LINE風チャット

ここからはわたしの今後。 わたしはAngular2もReactもマスターすると決めました。 「RactのこれはAngularでいうところのこれかぁ」、とか「AngularでいうところのtemplateってReactでこーなんだー」って結びつきが強くなるんですよね。 5年後残らないかもしれない技術でも学んだ意欲と「あれとどこか似ているぞ」というはどんなものが資産になるしね。 フロントは多分これからも過渡期ですよね。 ずーーと。 止まらない電車が止まったら乗るのではなく、動いている電車に飛び込んで、しがみつかないといけないと思っています。

こんどはおんなじものをAngular2 × TypeScriptで作ってみたい

ではみなさんいい週末を！！

フロントエンド系の話

github

qiita

もりたけんじ

楽しいローカル生活

楽しいローカル生活

Macproと5sがシンクロしています。コードを変えたら両方のデバイスに即時反映されます。つまりlocalでの修正がどちらにもすぐ反映されて、即時に実機確認ができるということです。
こんなローカル生活楽しい

こちらとどうにかmergeして開発すすめたい
GitHub