「web備忘録」カテゴリーアーカイブ
普段はwebのほうの仕事も多いのでそちらのお勉強の際のちょっとしたメモ書きです。
FunctionalPrograming, To abstract
【ECMAScript2015(ES6)】後で猫に教えてあげたいES6の「Generators(ジェネレーター)とIterator(イテレータ)」
昨日はSymbol(シンボル)でしたが、今日はGeneratorsとIterator。
babel立ち上げてコード確認しながらやりました。
ジェネレータってなにかって再帰処理を簡単にしてくれるものなんですね。
そのイテレータオブジェクトを返す関数がジェネレータ
ジェネレータを扱うにはイテレータを理解する必要があるようです。
続きを読む
ES6 static menber
【ECMAScript2015(ES6)】後で猫に教えてあげたいES6の「Symbol(シンボル)」
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
【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がチェーン役をするんだけど、ここらへんも「にゃーちゃんに教えなきゃ」
【Immutable.jsの使い方】Immutable.js超入門~ReactでsetStateのプロパティ値に直接代入避ける~
続きを読む
【React】babelでbabel-preset-stage-0や使う方法「ES7 Property Initialiazers for Default Props and Prop 」を使いたい方へ
英語文しかなかったので自分のようなReactにおいて「ES7 Property Initialiazers for Default Props and Prop」を使いたい方へ記事書きました
参照 https://babeljs.io/blog/2015/10/29/6.0.0 https://egorsmirnov.me/2015/06/14/react-and-es6-part2.html
babelは6系からそれぞれプラグインをインストールすることになったみたいです。
具体的には これらを適当にインストールしてください(適当です)
"babel-core": "^6.7.6",
"babel-loader": "^6.2.4",
"babel-plugin-syntax-class-properties": "^6.5.0",
"babel-plugin-transform-class-properties": "^6.6.0",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"babelify": "^6.1.3",
その後 package.jsonに下のようにpresetsを設定(使いたいpresetのプラグインです)上のならbebel-plugin-[ここ] 「ES7 Property Initialiazers for Default Props and Prop 」はstage-0として設定すればOK .babelrcだったらpackage.jsonと同じ階層に置けばいいみたいです。今回はjsonに記述します。
"babel": {
"presets" : ["es2015", "react", "stage-0"
]
},
"devDependencies": {
//some
}
で gulpfileのtransformのところに
.transform("babelify", {presets: ["es2015", "react", "stage-0"]})
でok
ちょっとエラーが出たり分からなかった場合下記リンク先に playgroundあげてありますので余計なソースを削って使ってください。 ミニマムでReact,ES6の最新が動作できるようにされています。
https://github.com/kenmori/React-ES6-Flux-Playground/tree/master/playground
【 併せて読みたい 】
【REACT】REACTの動きを理解したい人の為の最小サンプル
【REACT入門】過去のREACT初心者の自分にREACTのPROPSとSTATEの違いを簡単に説明してあげたい
【REACT × ES6 × FLUX】を手っ取り早く学びたい人の為にサンプル作ったよ【3の倍数と3が付くときだけ猫になるCOUNTER】
:scope https://developer.mozilla.org/ja/docs/Web/CSS/:scope
reference https://css-tricks.com/saving-the-day-with-scoped-css/
support https://caniuse.com/#feat=style-scoped
![【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]]](https://kenjimorita.jp/wp-content/uploads/2016/03/761121c882839411b65e3c59064635c5-108x108.png)
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](https://kenjimorita.jp/wp-content/uploads/2016/03/761121c882839411b65e3c59064635c5.png)
上のようなエラーが出た場合
com.example.Appとcom.example.app.Applicationどっちをmainとして実行していいか分からなくなっているので片方削除してビルドをcleanしてください
【Spring-Boot】mvn spring-boot: runを実行したらCould not find goal '' in plugin org.springframework.boot:と出た場合
mvn spring-boot: run を mvn spring-boot:run
で実行してみてください
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);