タグ別アーカイブ: ECMAScript2015

【JavaScript】JavaScript問題集に追加しました。

フロントエンドエンジニア芸人もりたけんじのJavaScript【JavaScript】JavaScript中級者の為の練習問題集287問(脱初心者へ)2016/11/5更新

フロントエンドエンジニア芸人もりたけんじのJavaScript【JavaScript】JavaScript中級者の為の練習問題集287問(脱初心者へ)2016/11/05更新


こちらの記事も更新しました。

追加したいくつか。

問 location.href’で返す文字の最後が’/’かどうかを判定する関数を定義してください。
答えはこちらの問276のとこ
問 こちら、

var obj = {a : 1}
Reflct.get(obj, "a")
//1

Reflect.getを使って値を取得しています。
obj[“a”]
//1
との違いを教えてください。
ここの282問のとこ

とか。
もうちょっと理解深めて増やしたいと思います。
でわよい週末をーーーー。

https://github.com/kenmori/javascript/blob/master/README.md

【JavaScript】Generatorを非同期処理

redux-sagaの中でよく見かける処理をもうちょっと根本から理解したいために写経してみる。
非同期処理を扱うgenerator。

generatorの基本

非同期時のコールバック地獄の一例

それを避けるためにgeneratorを使う

sleepは非同期処理が終わったらnext()を呼びだす

改善。setTimeout関数を外に切り出す(命令的な書き方)

並列処理の書き方

なるほどですね。。
あしたはもうちょっとgenerator理解進めて、coもみてみますね

参考

わたしもみている| Immutable Javascript using ES6 and beyond(Array)

前回ここのObjectまで読みました。

今回はArray
immutableなArray。
非破壊メソッドを使おう

pushの代わりに、
Spread Operator

let characters = ['a', 'b'];
let newCharactors = [...characters, 'c'];
console.log(newCharactors === characters)
//false
console.log(characters)
//["a", "b"]
newCharactors
//["a", "b", "c"]
//要素b以外の新しい配列を返す
const whithout = characters.filter(char => char !== 'b');
whithout
//["a"]

//要素bとcを入れ替えた新しい配列を返す
const backInTime = characters.map(char => char === 'b' ? 'c' :char);
backInTime
//["a", "c"]

//大文字にした新しい配列を返す
const shoutOut = characters.map( char => char.toUpperCase())
shoutOut
//["A", "B"]

//2つの配列を足した新しい配列を返す
let characters = ['a', 'b'];
const otherCharacters = ['d','e'];
const moreCharacters = [...characters, ...otherCharacters]
moreCharacters
//["a", "b", "d", "e"]

sort()の返り値とオリジナルの参照先は変わらない。要素順だけ入れ替える

const characters2 = ["b", "d", "a", "c"];
const sortedCharacters = characters2.sort()
sortedCharacters
//["a", "b", "c", "d"]
sortedCharacters === characters2
//true

順序を入れ替えた上で新しい配列を返すにはsliceを使う

const sortedCharacters2 = characters2.slice().sort();
sortedCharacters2 === characters2
//false
characters2
//["a", "b", "c", "d"]
sortedCharacters2
//["a", "b", "c", "d"]

なぜ新しいオブジェクトを生成する方がいいのか??
そんなに新しいオブジェクトを生成してメモリは大丈夫なの??

But that disadvantage is very small compared to the advantages.
欠点は利点に比べて非常に小さいです

One of the more complicated operations in Javascript is tracking if an object changed
JSでより複雑な操作の一つはオブジェクトが変更された場合の追跡です

Object.observe(object, callback) are pretty heavy
Object.observeは相当重たいです。
※記事が古いのか、Object.observeは今では廃止されています

if you keep your state immutable you can just rely on oldObject === newObject to check if state changed or not, this is way less CPU demanding.

もしオブジェクトの状態を不変に保てば古いオブジェクトか新しいオブジェクトかどうかのチェックは
oldObjet === newObject だけで可能だし、これはCPUへのダメージが少ない方法です

Second big advantage is code quality. Making sure your state is immutable forces you to think better of your application structure. It encourages programming in a more functional way, makes your code easy to follow and reduces the possibility of nasty bugs. Win, win, right?
第二の大きなアドバンテージはコードの品質です。
状態を確認することは不変オブジェクトがなせることです。
これはアプリケーションの構築への良い考えなのです
It encourages programming in a more functional way, makes your code easy to follow and reduces the possibility of nasty bugs.
より関数型なプログラミングを奨励します。バグを除き、コードを追いやすくするのです

Reference
Immutable Javascript using ES6 and beyond

【JavaScript】問題集を更新しました

以下は問題集に追加した一部です。

元記事はこちら
————————————-
こちら、const myObject = {1: [‘e’, ‘ee’, ‘eee’], 2: [‘f’, ‘ff’,’fff’]};を多次元配列にしてください
期待する結果:[[‘e’,’ee’,’eee’],[‘f’,’ff’, ‘fff’]];

const myObject  = {1: ['e', 'ee', 'eee'], 2: ['f', 'ff','fff']};
const newArr = Object.keys(myObject).map(function(elem){
   return myObject[elem]
})
//[[‘e’,’ee’,’eee’],[‘f’,’ff’, ‘fff’]]

//other
const myObject  = {1: ['ee', 'eee', 'efe'], 2: ['faf', 'fafa','fa']};
const arr = Object.values(myObject);
//※Object.values(ECMAScript2017)を使える環境で(Polyfill: es-shims/Object.values,tc39/proposal-object-values-entries)で

こちら[‘a’,’b’,’c’] → {0: ‘a’, 1: ‘b’, 2: ‘c’}のように、インデックスをキーにして、配列要素をそれぞれの値となるようにしてください

//1
const arry = ['a', 'b', 'c'];
function toObject(arry){
 const obj = {};
 const len =  arry.length;
 for(let i=0; i < len; i++){
  obj[i] = arry[i]
 }
 return obj
}
toObject(arry)
//{0: "a", 1: "b", 2: "c"}

//2
const arry = ['a', 'b', 'c'];
const obj = arry.reduce(function(o, v, i){
 o[i] = v;
 return o;
},{})
obj
//{0: "a", 1: "b", 2: "c"}

でわーーー

【React】ブラウザ間の差異をなくすcore.jsをReact内にimportする方法〜ES6,ES7のメソッドを快適に使う〜

以前の記事でObject.assignがios8で使えなくてpolyfillを使った話をしたのですけど、
core-jsで解決できるようなので試してみた。
ES6でimportして実際使ってみるまでの記事です。

読み込む
npm i -D core-js

//React内に読み込む
使いたいオブジェクト名の階層までのパスを書きメソッドを読み込む

import { findIndex, fill } from 'core-js/library/fn/array/virtual';
import { includes }from 'core-js/library/fn/array/';
import { assign } from 'core-js/library/fn/object';

 const  HelloReact =  React.createClass({
  render() {
      console.log(Array(10)::fill(0).map((a, b) => b * b)::findIndex(it => it && !(it % 8)));
      var obj = {a: "fa"};
      console.log(assign({b: 'ooo'}, obj));
      var array = ["","faf"]
      console.log(array.includes("faf"));


    return (
    <div>
        <div>

////

【React × ECMAScript2015】Object.assign,Array.includesがiOS8.1.1、Androidで使えない!ES6(ECMAScript2015)でのpolyfillの意味と使い方

今日Reactでmodalを作っているとsetStateする値をオブジェクトそのままで保持しておく必要があって、さらにもし他のstateが更新されたら一緒にsetStateをする必要があった。

objectとobjectをマージしなくてはならなかったし、objectを非破壊メソッドでコピーしておかなければならなかった。

この2つができるObject.assign
なのですが、
これがiOS9からで8やAndroidには対応していない。
じゃあJSON.parse(JSON.stringify(obj))でコピー作ろうと思ったんだけど、
調べるとfunctionやundefinedをkey値にしてはいけないなどいろいろあるみたい。そもそもオブジェクトコピーするだけでJSONオブジェクトってなんかあれですよねってことで、
やはりObject.assign使いたい!

polyfillの意味は壁の穴を埋めるための物のようです。まさにブラウザのバージョンの差異を埋めるためのもの。

でES6でどこにどう書くんだと思った。

スクリーンショット 2016-07-05 23.53.09

デモ

 

・constructor内にpolyfillを入れる(初期化時にObjectがもっているかどうか判定して持っていなかったらfunctionを代入している)

 

iphoneをMacにつないでwebインスペクタのコンソールでObject.assignが使えたらOK

よかったね!
でわまたーーーー

【React】react-modalの簡単実装するための9つの手順とハマりポイント

業務でmodalを実装したのですが、ハマったところがありました。
で、それにまつわる記事がなかったので書きます

チュートリアル

作るモーダルは
これ

githubにReact-Sampleとしておいています。ここ
他のサンプルと混在していて見にくいですが。。

作り方
1. npm i -D react-modal
プロジェクトのnode_modulesにインストールしてください

2. 親コンポーネントでreact-modalを読み込む
ここ

import Modal from 'react-modal';

3 トリガーになるidを付与、button設置
※WPエディタがhtmlタグと認識してしまうので画像で表示しています
ここ


<h2 id="modal">react-modal</h2>

			<button className="btn btn-primary" onClick={this.openModal}>open modal</button>
			<Modal><button onClick={this.closeModal}>Close<button></Modal>

//ここでのcloseボタンの位置に注意してください。ここで更に下、子コンポーネントにthis.closeModalを渡すことはできません

4 stateを管理(初期はOpenではないのでfalse)
ここ

this.state = {
	modalIsOpen: false
}

5 constructorでbind
ここ

this.openModal = this.openModal.bind(this);
this.closeModal = this.closeModal.bind(this);

6 this.openModalとthis.closeModalを実装
//setStateでbooleanを渡すだけ
ここ

openModal() {
	this.setState({modalIsOpen: true});
}

closeModal() {
	this.setState({modalIsOpen: false});
}

7.Modalのpropに設定を渡す
ここ

<Modal isOpen={this.state.modalIsOpen} onAfterOpen={this.afterOpenModal} onRequestClose={this.closeModal} shouldCloseOnOverlayClick={true} style={customStyles}>
//ここで最低限必要なのはisOpenだけです。
//あとはご自由に

7_2 スタイルをカスタムしたい場合styleにcustomStyleを渡す
//render内です。
ここら辺

const customStyles = {
	overlay : {//ovelayの色を変える
	background: 'rgba(0,0,0, .4)'
},
content : {
	top : '50%',
	left : '50%',
	right : 'auto',
	bottom : 'auto',
	marginRight : '-50%',
	transform : 'translate(-50%, -50%)',
	width : '72%'//openしているコンテンツの幅を変える
	}
};

8、モーダルを実装しているコンポーネントのclassより外に下記
ここらへん

const appElement = document.getElementById('content');
Modal.setAppElement(appElement);

わかりずらかったらチュートリアルのここ見てね

9 おしまい
おしまいです。どうでしょうか??

はまりポイント
ハマったところは
3の閉じるボタンの位置でした。。
これはModalコンポーネントの直下に置かなくてはならず、、これをModalコンポーネントの子コンポーネントの中で使うことが
できませんでした。
子コンポーネントにpropsで渡しているんですけどいけなかった。
子コンポーネントではいろいろなボタンがあり、そのボタンの状態を管理して、「今の状態でcloseする 」ということが
したかったのですが、そこにはcloseModalは実装できず、

ここにもかいてある「subComponentは持てない」って。

ではModal直下にcloseを置くといろいろなボタンの状態を変えるとモーダル下のrenderが走ってしまう。
(それはshouldComponentUpdateで制御しなくてはだめ)
でした。

また
closeModal内で他の関数を呼べなかった気がする。。これは多くの時間を割いて調査していませんが、、
わかっちゃえば簡単なのですが、地味にやられました。

でわ〜〜〜

【 併せて読みたい 】

【React】Reactの動きを理解したい人の為の最小サンプル

【REACT入門】過去のREACT初心者の自分にREACTのPROPSとSTATEの違いを簡単に説明してあげたい

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

REACT × FLUX × ES6 [WIP]LINE風チャット

他のReact記事

フロントエンド記事

スクリーンショット 2016-07-02 10.28.27

【React】React入門の方が動きを理解したい人の為の最小サンプル(Sample)

こういうのあったらいいなと思って作りました「【React】React入門の方が動きを理解したい人の為の最小サンプル(Sample)」。

【React】React入門の方が動きを理解したい人の為の最小サンプル(Sample)

【React】React入門の方が動きを理解したい人の為の最小サンプル(Sample)

画像をクリックしてみてください。小さいgifですが。。Reactで動きを理解したい人の為の最小サンプルです。
サンプル

※もし「routingNoMatch」と表示されたらキャッシュですので、違うデバイスで訪れるかsafariならプライべートモードでキャッシュをクリアーにしてご覧ください
GitHubはこちら。
https://github.com/kenmori/React-ES6-Flux-Playground/tree/master/playground

githubリプレイスしました。こちらからどうぞ↓
https://github.com/kenmori/React-Sample

npm install

gulp
と叩いてください

Reactのチュートリアル

【 併せて読みたい 】

【REACT入門】過去のREACT初心者の自分にREACTのPROPSとSTATEの違いを簡単に説明してあげたい

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

REACT × FLUX × ES6 [WIP]LINE風チャット

他のReact記事

フロントエンド記事

【JavaScript】JavaScript練習問題集320問(脱初心者/中級者)2016/12/27更新

フロントエンドエンジニア芸人もりたけんじのJavaScript【JavaScript】JavaScript中級者の為の練習問題集320問(脱初心者へ)2016/12/27更新

フロントエンドエンジニア芸人もりたけんじのJavaScript【JavaScript】JavaScript中級者の為の練習問題集320問(脱初心者へ)2016/12/27更新

JavaScript問題集概要

もうちょっとJavaScriptレベルあげたい!ネット上に問題集が意外とない!という想いから初心者だった私が半年以上書きためたJavaScript練習問題集320問です。新しい記述であるECMAScript2015,2016,2017も入っています。

【JavaScript】JavaScript練習問題集320問(脱初心者/中級者)2016/12/25更新情報

一番下のリンク先の更新情報です。
・12/27 GitHub GistでJavaScript問題を表示
・12/25 WIPを修正 (220, 224, 225) →320問
・12/04 async/await、co
・11/18 Promise を追加、Jqueryを必要としない記述を追加
・11/05 Reflect,Symbol, Error 等追加
・10/21 カテゴリごとに問題を表示するため工事中
・10/02 generator関数辺りを追加(261問→273問に)


もともと私自身が「もうちょっとJavaScirpt使いこなしたい。

もうちょっとレベルあげたい。

後で本当に自分のものになったかテストしよう」という想いから半年以上書きためた練習問題。

【JavaScript】JavaScript練習問題集320問(脱初心者/中級者)2016/12/25更新

続きを読む

【ES6】適当に試したり。正規表現とか

全コード


function getKey(k) {
  return `${k}`;
}

const obj = {
  id: 5,
  name: 'San Francisco',
  [getKey('enabled')]: true,
};

console.log(obj)
///////////////////////////


function f(x, ...y) {//ここで受け取らない分が配列の要素としてyになる
  // y is an Array
  console.log(y)//["hello","true"]
  return x * y.length;
}
const r1 = f(3, "hello", true) == 6
console.log(r1);//true

//////////////////////////////

function f(x, y, z, t, p) {//インデックス順に受け取る
  console.log(z);
  return x + y + z;
}
// Pass each elem of array as argument
//const arry = [1,2,3,5,6];
//f(...arry) == 6
//or
f(...[1,2,4]);


///////////////////////////////

let fibonacci = {
  [Symbol.iterator]() {
    let pre = 0, cur = 1;
    return {
      next() {
        console.log([pre, cur] = [cur, pre + cur]);
        return { done: false, value: cur }
      }
    }
  }
}

//////////////////////

let [a, b, c] = []
console.log(a,b,c);
typeof b

function getSomething(){
  return {
    first: 1,
    second: 2,
    third: 3
  }
}

var { first, second, third } = getSomething();
console.log(first)


console.log("repeat".repeat(2));

console.log(["morita","kenji","fafafa"].findIndex(x => x == "fafafa"))

console.log(["A","B","C"].map(x => Array.of(x)));

console.log(['a', 'b', 'c'].fill('kenji', 1, 2));

const i = [3, 0, 6, -1].find(x=> x < 0);
console.log(i)

function* idMaker(){
    var index = 0;
    while(true)
        yield index++;
}

const gen = idMaker();
console.log(gen)
////////////////////////////

const str = "わたしの名前は「もりた」です。あだなは「もりけん」です";

const re = /「.*?」/ig;


const myRe=/ken*/g;
const str2 = "fafakenfafkenji";
let array;
while ((array = myRe.exec(str2)) !== null) {
 let msg = array[0] + " を見つけました。";
  msg += "次のマッチは " + myRe.lastIndex + " からです。";
  console.log(msg);
}



const str3 = "<img src='fafa.com'>"
const str4 = "<p>"
const reg2 = /<(\S+)(\s+.+)?>/;
const reg3 = /<(?:\S+)(?:\s+.+)?>/;
const re2 = str3.match(reg2);
const re3 = str3.match(reg3);
const re4 = str4.match(reg2);
console.log(re2);console.log(re2[0]);
console.log(re3);console.log(re3[0]);
console.log(re4);console.log(re4[0]);


const str222 = "わたしの名前は「もりた」です。あだなは「もりけん」です";

const re222 = /「(.+?)」/ig;


let result;
while ((result = re222.exec(str222)) !== null){
  console.log(result[0],"ここ")
}

const nen = "西暦1980年の3581歳です";
const reg1 = /\d+(?=年)/;
console.log(nen.match(reg1))

const string3 = "washable reasonable accessible assemble answerable";
const reg5 = /\b\w+(?=able\b)/g;
console.log(string3.match(reg5));

const nen1 = "ケンジは昭和55年生まれの35歳であり、ケンジの母は昭和22年生まれの64歳である"
const reg6 = /\d+(?![年\d])/g;
console.log(nen1.match(reg6));

const str5 = "あの客はよく柿食う客だ";
const res5 =str5.match(/あの(.+)はよく柿食う\1だ/);
console.log(res5);

const tag = "<div><h1>kenjimorita.jp</h1></div>";

console.log(/<(\w+)><(\w+)>kenjimorita.jp<\/\2><\/\1>/.test(tag))

// const str6 = "西暦2010年は平成22年です。西暦1980年は昭和55年です。";
// console.log(str6.match(/(?<=昭和|平成)\d+/))

const str7 = "My name is Taro Suzuki and I am a researcher at ABC.";

console.log(str7.match(/\ba\w*\b/g));

var falseValue = new Boolean(false);
console.log(falseValue)//false



var fafa = null;
console.log(typeof fafa)//Object
console.log(fafa == undefined)//等値演算子ではtrueになってしまう
console.log(fafa === null);//true //同値演算子を使う

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

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

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

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

【Reactのstateとpropsの違いが知りたい!(変更・更新の仕方等デモあり)】過去のReact初心者の自分にpropsとstateの違いを説明する

ややわかり始めたReact、1年前にこういう記事かいて、今結構検索でヒットするみたいなので
、過去の自分にちょっと説明したらこんな感じかなと思って書きます。

※ここの記事ではこのコードをできるだけ簡単に説明しています。説明と照らし合わせて確認していただけたら幸いです。(PCでご覧になると表示がわかりやすいです)

propsとstateの簡単な説明

続きを読む

【React】babelでbabel-preset-stage-0や使う方法「ES7 Property Initialiazers for Default Props and Prop 」を使いたい方へ

英語文しかなかったので自分のようなReactにおいて「ES7 Property Initialiazers for Default Props and Prop」を使いたい方へ記事書きました

参照 http://babeljs.io/blog/2015/10/29/6.0.0 http://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】

REACT × FLUX × ES6 [WIP]LINE風チャット

他のReact記事

フロントエンド記事

github

qiita

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

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

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

 tag'もりた${kenji}です' 

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);

知らなかった!AtomでReact×ES6×JSX書くヒトの為のpackage「language-babel」が既にあった

Babel JavaScript ES201x, React JSX & Flow Grammar & Transpiler

Babel JavaScript ES201x, React JSX & Flow Grammar & Transpiler

https://atom.io/packages/language-babel

早速入れた。