タグ別アーカイブ: JavaScript芸人

javascript

【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】Reflectの使い方「Reflect | Metaprogramming in ES6: Part 2 – Reflect」の記事概要

【JavaScript】Reflectの使い方「Reflect | Metaprogramming in ES6: Part 2 - Reflect」の記事概要

【JavaScript】Reflectの使い方「Reflect | Metaprogramming in ES6: Part 2 – Reflect」の記事概要

以下ここの記事の概要

続きを読む

【JavaScript】Generatorを非同期処理

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

generatorの基本

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

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

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

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

並列処理の書き方

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

参考

JavaScript問題集にgenerator関数を追加

こちらのJavaScript問題集
263問目からgenerator関数の問題を多めに追加しました。
redux-sagaでここの理解は必須のようなので強化した。

あと随時、Proxy、Symbol、Reflect、Promise、async/await などを追加したい。

一旦この辺でーー
でわまたーーー

わたしもみている| 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

Chrome (DeveloperTools)デベロッパーツールでJavaScript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

実際にデバッグを覚えたい方への記事です。
こちらを使って。

環境
Mac、chromeです。

モチベーション
JS入りたての頃のわたしはデバッグ記事の少なさとそれをハンズオンで教えてくれる記事があまりないことに弱っていました。その頃英語記事アレルギーもありました。
実際デバッグの方法を細かく教えてもらえたらなぁ。っていう過去の自分みたいな方多いのではないかと思いました。
(今回の記事はデバッグの方法を全く知らない人向けではありませんが。。)

デバッグができるようになるとエラーに尻込みしなくなるし、時間が短縮されますよね。

今回は表題の通り
「chrome (developerTools)デベロッパーツールでJavaScript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法」
です。

やること
こちらをクリックしてください。gifアニメが動きます。(約2分, PC奨励)
1

こちら何をしているか写真で説明しますので先ほどのコードをご用意してブラウザ上でindex.htmlを表示させてみてください。

ハンズオン
コード上のここ
にエラーを発生させています。

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

1

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

・ファイルをロードするとコンソールにエラーが出ています。(yが未定義のようです)

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

2
・ここでshift + cmd + p押してください

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

で「sou」まで打ってパーーンっとしてみてください。

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

ソースパネルまで飛んだと思います。

3
そのソースパネル上で、
option + o 。をしてください。

ファイル検索できます。(いちいち左のツリーをクリックして探さなくていいってことです。)

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

余裕があったらソースパネル上で、
shift + cmd + o を押してみてください。
関数が出てくると思います。もしあらかじめffがおかしいと疑えてたらff()のところまでジャンプできます。

main.jsのエラーでしたのでmainまで打てば行けます

赤くなっています。。秋ですね。。

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

つまり1 + xと加算したかったのを
yを記述したせいで、
スコープ内にもyがない、、
辿っていったスコープ内にもない、、
グローバルスコープにもyがない、、
yは未定義。
とされてここで処理がとまっているのです。
ここをどうにか直したい。
どう直せばいいか分かっている場合、
ファイルに戻ってxと書き直すのもいいですが、

こちらが直ってもこの先にもし、
なんらかのエラーがあった場合また処理が止まります。

ここで編集して実行、反映させることで

・その先のエラーがあるかないかまで見れる。
・違う変数や処理を追加 or 削除などその場で試せる。
・ここでの修正をローカルファイルに反映することができる。

のですね。

4
ブレイクポイントを仕込んでください。赤くなっている箇所に行番号をクリックです

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

ブレイクポイントはその行で実行を止めて、スコープの範囲の変数に何が代入されているか、何を参照しているか確認できます。
※実際コンソールタブまで移動してcondole.log(y)とすればundefinedが返ってくると思います

話戻して、

5

yをxと書き換えます。このように
※リロードしないでくださいね。

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

6

編集し終わったらsaveしてください(cmd + s)
するとファイルの背景がピンクになります(gifアニメーションではなりませんでしたが)

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

7

でここ押してください。(したの方で青くなっている矢印の横にある「step into next function」「関数の中に入って行って、一行一行処理を進めるボタン」です)chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

すると処理が進んでscopeの変数が7を返しているのがパネルからわかります。ローカル変数がxを参照して期待する通り、1 + x として加算されたのですね。

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

8

実際ホーバーしてみてください。代入されていることが確認できます。

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

先ほどのボタンを推し進めていくとconsole.logを実行する箇所がありますね。
先ほどまではここまでたどり着きませんでした。
なぜならエラーで処理がとまっていたからです。

このように処理を正しく記述、ブラウザ編集することで
その実行を止めないで進めることができます。

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

9

consoleタブに移動してコンソール出力をみてください。
7とあるはずです。

その先もエラーがなく処理を終えたみたいです。

10

先ほどの編集したJSファイルをセーブしましょう。

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

エディターの該当箇所もそれを反映しているはずです。
6_13

11
リロードすると。。

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

エラーが消えました。(ブラウザ上の編集がエディタのコードに反映されて)

※ローカルで編集しているファイルと実際の実行ファイルが同じ参照先にあれば同期されます。
※ミニファイやwebpackで書き出したファイルは大元のファイルを修正する必要が有るかもしれませんね。

Chrome (DeveloperTools)デベロッパーツールでJavaScript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法
でしたーー

実際のコード(エラーがでるコード)をこちらにあげておきますので、
ローカルにダウンロードして、確かめてみてくださいー。

ありがとうございましたーーー

ではーーー

【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"}

でわーーー