Spells and Charms

プログラミング(呪文学)の学習記録。

ES6とかES2015とか・・・の理解

ES6をやりましょう、と自分の中でなっているのだけど、
ES6というのはES2015とどうやら同義らしくすっかりこんがらがりました。

 

 

( ・∇・)? ES2015の短縮系はES6じゃないの??

 

 

答えはNoです。

 

 

ということでシェアしていきます。 

 

 

こちらウィキペディアのコンテンツです。

f:id:ahochauyo:20190726104220p:plain

ECMAScript - Wikipedia

 

 

 

 

ES6もES2015も、ECMAScriptと呼ばれるものをさしています。

ECMAScriptを略してESと表記しています。

 

 

JavaScriptもたまにJSと見かけたりしますので、同じことかなと私は理解しました。

 

 

 

( ・∇・)

 

 

 

 

で、ES6とかES7とかES8という表記は、Edition name。

リリースされるたびに1追加されていく仕組み。

 

第何版、ってことです。

 

 

 

そして、ES2015とかES2016とかES2017というのはOfficial nameの短縮系。

リリースされた年がかかれる仕組み。

ECMAScript2015、とかが正式な名称になります。

 

 

Edition と Official nameの末尾の数字が微妙に1違うから何かを示唆しているようにおもってしまうのですが、そういうった関係性はないみたいです。

 

 

2019年7月時点での最新バージョンは、

10th Edition.

でもって2019年にリリースされているので、ES2019。

 

 

 

 

謎がとけました〜

 

 

 

 

( ・∇・)!

 

this についての理解(1)

前回の記事で自分が次になにをすべきか確認したので早速thisからとりかかりました。

 

ahochauyo.hatenablog.com

 

 

( ・∇・)!

 

 

 

日本語の記事でわかりやすかったのはこちら。

takkyunさんという方の記事です。takkyun - Qiita

qiita.com

 

 

英語はこれがわかりやすかった。

Understanding Binding and 'this' in Javascript · GitHub

 

 

 

youtubeだとこちらわかりやすかったです。(英語)


WTF is THIS: Understanding the "this" keyword in JavaScript

 

 

 

 

 

thisのvalueは、シチュエーションによって変わるそうです。

 

( ・∇・)

 

 

 

ひとつめ。

Implicit Binding: dot notation is used to invoke a function

関数実行時に「 .  (ドット) 」がつかわれるパターン

 

→ 「 .  (ドット) 」の左側にあるものがthisのvalueになる。

 

 

 

先ほど紹介した英語の記事では

In implicit binding, whatever is to the left of the dot becomes the context for this in the function. 

Understanding Binding and 'this' in Javascript · GitHub

と大胆に書かれています。

 

 

 

 

dot notation で関数が呼ばれその中にthisがはいっているときはこのパターン。

冒頭で紹介したtakkyunさんの記事では、「this と function の関係」という章で書かれています。

 

サンプルコードをのせておきます。

 

例1

const student1 =
{
name : "Joe",
age: 20,
sayHello: function(){
console.log("Hello, " + this.name);
}
};

const student2 = {
name : "Elen",
age: 24,
sayHello: function(){
console.log("Hello, " + this.name);
}
};

const student3 = {
name : "Alex",
age: 19,
sayHello: function(){
console.log("Hello, " + this.name);
}
};


student1.sayHello(); // Hello, Joe
student2.sayHello(); // Hello, Elen
student3.sayHello(); // Hello, Alex

 

 

( ・∇・)

 

 

 

 

次。

 

 

 

Explicit Binding

関数実行時に.call( ), .apply( ), or .bind( )のいずれかが使われている場合。

これらは関数のメソッドです。

 

→ .call( ), .apply( ), .bind( )のカッコ内にある引数がthisのvalueになります。 

 

callとapplyの違いは、

call はargument listを受け入れるのに対して、applyは一つのarrayを受け入れる点だそうです。

Note: While the syntax of this function is almost identical to that of call(), the fundamental difference is that call() accepts an argument list, while apply() accepts a single array of arguments.

Function.prototype.apply() - JavaScript | MDN

 

 

冒頭で紹介したYouTubeの06:40以降でわかりやすく解説されています。

 

 

 

( ・∇・)

 

 

 

関数実行時に、別スコープにあるオブジェクトの情報をつかいたい。

そんな時にこの方法をつかうんですね。

 

explicit は明確にとか率直にという意味なので、
使いたいオブジェクトを明確に引数として渡す、みたいなイメージなのかもしれませんね。

 

 

 

サンプルコードです。
先ほどは、オブジェクト内のメソッドとしてfunctionが存在していましたが、今回は外側にあります。

 

 

例2


const sayHello = function(){
console.log("Hello, " + this.name);
}

const student1 =
{
name : "Joe",
age: 20
};

const student2 = {
name : "Elen",
age: 24
};

const student3 = {
name : "Alex",
age: 19
};

 

 

ここで仮に、先ほどと同様に、student1.sayHello(); と関数を呼び出してみたとします。

 

 


Uncaught TypeError: student1.sayHello is not a function

 

 

( ・∇・)?

 

 

エラーになりました。

 

 

 

sayHelloはfunctionではないと。。
sayHelloはfunctionで一番頭で宣言してるんですけど。。。

 

 

 

ただしい表現ではないかもしれないのですが、
student1.sayHello();というのは、student1のsayHelloを実行してという指示になります。

 

 

 

例2のコードをみていただくとstudent1 はメソッドをもっておりません。
なのでstudent1の中にsayHelloは存在していないため、エラーになるという理解を私はしました。

 

 

では、どうやったらsayHelloを実行できるのかとなりますが、
ここでメソッドをつかうんですね。

 

 

 

 

 ( ・∇・)!

 

 

 

 

sayHello.call(student1); // Hello, Joe
sayHello.call(student2); // Hello, Elen
sayHello.call(student3); // Hello, Alex

call をapply に変えても、この例の場合は同じ結果でした。

 

 

このときのthisは、引数として渡されたオブジェクトになってますね。

 

 

 

そして、.bind() ですが、これはちょっとややこしく、 .call()とほぼ同じなのですが、新しい関数を返してくるものになるそうです。

 

 

 

( ・∇・)?

 

 

 

 では試しに、先ほど試したcallをそのままbindに変更してみます。

 

 


sayHello.bind(student1); //


 

何もコンソールに表示されません。

エラーもなしです。

 

 

( ・∇・)?

 

 

 

無理やりコンソールしてみました。


console.log(sayHello.bind(student1));


 

t

 

f:id:ahochauyo:20190725162755p:plain

 

たしかに新しい関数になっています。

 

関数なので実行には()が必要ですよね。
ということでこちらで試してみます。

const sayHello = function(){
console.log("Hello, " + this.name);
}

const student1 =
{
name : "Joe",
age: 20
};

const student2 = {
name : "Elen",
age: 24
};

const student3 = {
name : "Alex",
age: 19
};



sayHello.bind(student1)();
sayHello.bind(student2)();
sayHello.bind(student3)();

 

 

これはどうなるでしょう?

 

 

 

 

 

( ・∇・)

 

 

 

f:id:ahochauyo:20190725163727p:plain

 

 

ででーん!
いけましたね。

 

 

 

ちなみに、多くの場合は変数に代入して使うみたいです。

const helloJoe = sayHello.bind(student1);
const helloElen = sayHello.bind(student2);
const helloAlex = sayHello.bind(student3);

helloJoe();
helloElen();
helloAlex();

 

 実行結果は同じです。

 

 

 

 

 

最後です。

 

thisにはデフォルトがあるらしいです。

 

Default Binding:

thisを含む関数を実行するけれども、dot notation もつかわず、call(), apply(), bind()もつかっていないとき。

 

 

→ デフォルトでWindowオブジェクトがthisのvalue。もしstrict modeが適用されているなら、undefined。

 

 

ためしにコンソールでthisとうってみました。

 

f:id:ahochauyo:20190725162038p:plain

 

 

 

 

( ・∇・)!

 

 

 

 

 

これがめちゃくちゃわかりやすいので、そのままはっておきます。

 

  1. Is there a dot? Look to the left. That's this.
  2. Do you see .call() or .apply()? What's passed in before the first comma? Thats this.
  3. Does the function stand alone when it's invoked? Then what's your global context? That's this.

Understanding Binding and 'this' in Javascript · GitHub

 

 

だいぶ長くなりました。
読んでいただきありがとうございます。

 

 

JavaScript ある程度基礎ができたら次はどうする?

Hello, world!

 

今後Node.jsやReactを学んでいきたいのですが、自分がそのステップに進むにあたりどれくらいJavaScriptの理解が足りていないかわからなかったので、調べてみました。

 

 

私の場合はthis, Template Literals, Semicolons, Strict Mode, ECMAScript 6, 2016, 2017 がまだだなというかんじです。

 

加えて、ブートキャンプが始まるまでに Eloquent JavaScript を仕上げたいのですが、ES6がわかっていないのでまずはそちらのチュートリアルをみつつ、上記をカバーしていきたいとおもいます。

【プログラミング学習】はじめての模写のやり方とお役立ち便利ツールと参考にした動画【独学】

 

 

 

 

模写したいのにやり方がわからないという問題。

( ・∇・;)

 

 

 

 

 

模写がいいと聞くけどどうやったらいいの?

 

ネットで検索したけどやり方らしいやり方がわからない!

 

( ・∇・;)

 

 

 

 

 

そうなんです。
やり方がわからない問題に結構苦しみました。

 

 

 

 

そして昨日どうにかこうにかひとつのサイト模写を終えました。
元ソースはみないということを徹底して、ゼロからコードをかきました。



もちろんコピペもなしです。
( ・∇・) !! 

 

 

 

 

 

 

 

 

 

 

私の場合あまりにも初心者すぎて、段取りがわからないままにはじめました。
効率悪すぎです。

 

 

 

( ・∇・;)

 

 

 

 

ということでサイト模写のやり方と使ってよかったツールをまとめておきたいと思います。

 

  • 準備するもの
  • やり方
  • 便利ツール
  • 参考サイトと動画

 

の順番で書いていきますね。

 

 

 

 

 

 

 

 

準備するもの

 

ではさっそく準備するものから。

  • ブラウザ
  • テキストエディタ
  • 紙と鉛筆

 

 

 

わたしの場合はGoogle Chromeと Visual Studio Codeとホワイトボードでやりました。
他のエディタだろうが裏紙とペンとか、なんでもいいと思います。

 

 

 

( ・∇・) ♪

 

 

 

サイト模写のやり方(超初心者)

 

  1. 模写するサイトを選ぶ
  2. サイトを上から下まで一回全部みる
  3. 見た目でサイト全体を枠で分割。メモなどに大きな四角を書く。
  4. 各枠内に、細かい要素をたしていく
  5. テキストエディタに新規HTMLファイル作成
  6. 先ほど書き出した枠と要素を盛り込みつつHTMLを書く
  7. まずHTMLを完成させる
  8. テキストエディタで新規CSSファイルを作成
  9. 枠ごとにCSSを完成させていく。枠内の小さい要素から順番に書く。
  10. ひと枠書くごとに元サイトと動きを確認してから次の枠にうつる
  11. 9と10を繰り返し最後までいく

 

 

ひとつひとつみていきます。

 

 

1.模写するサイトを選ぶ

 

自分の場合はこちらのサイトを選びました。

現地の人から借りる家、体験&スポット - Airbnb

 

理由はマナブさんという方のブログで発見したからです。

manablog.org

 

ちなみに、模写をするまでに必要な基礎学習などものせてくださっているので参考にされたらいいのかなと思います。

超膨大な情報を提供してくださっています。

 

私は時間がかかりすぎて、模写にたどり着く前に挫折するな、、、と思ったのでいきなり模写からはじめました。

 

 

その辺りは個人の性格かなと思います。

 

 

( ・∇・)

 

 

 

2.サイトを上から下まで一回全部みる

 

特にコツなどはないです。上から下まで全部をみて、ふむふむと思ってください。

 

( ・∇・)

 

 

3. 見た目でサイト全体を枠で分割。メモなどに大きな四角を書く。
4.各枠内に、細かい要素をたしていく

 

ツイートにも掲載しましたがこんなかんじです。

さきほどのAirbnbのページとみくらべてみます。

 

f:id:ahochauyo:20190716082240j:plainf:id:ahochauyo:20190716091235p:plain

 

 

 

すみません、枠という表現が、かなり自己流なので、わかりにくいかもしれないのですが、サイト全体を分割するいちばん大きな要素、というのが伝わると幸いです。

 

 

 

 ( ・∇・;)

 

 

 

 

大枠がかけたら、他の要素もたしていってください。

 

これをつくると、サイトの構成が頭にはいります。
雑なものでいいので、つくるのがおすすめです。

 

 

 

 

5. テキストエディタに新規HTMLファイル作成
6. 先ほど書き出した枠と要素を盛り込みつつHTMLを書く

 

さきほど書き出した枠をみつつ、HTMLをかいていきます。
枠のとなりにメモしてあるのはクラス名です。

 

 

コードを書くときに、元サイトでソースをみたり、ディベロッパーツールをひらいて構造を確認してはいけません。

 

 

 

 

( ・∇・)

 

 

7. まずHTMLを完成させる

 

書いているうちに、CSSのことが頭に浮かんだり、なにかアイディアがでるかもしれませんが、どこかにメモするにとどめ、まずはHTMLだけを完成させてください。

 

 

おめでとうございます!半分完成です。

 

 

( ・∇・) ☆

 

 

8. テキストエディタで新規CSSファイルを作成
9. 枠ごとにCSSを完成させていく。枠内の小さい要素から順番に書く。

つづいてCSSにうつります。

 

枠や要素をメモに書き出していたかと思うので、
それをみつつCSSをつけていきましょう。

 

コツは内側の要素から順にひとつひとつ完成させてくことです。

 

一言でいえば、そうなのですが一応一つ例をあげて、細かめに書きますね。

 

 

( ・∇・)⤵︎⤵︎

 

 

 

サイトの真ん中あたりにこういう枠があります。
私のメモでいうと右側にfeaturesとメモされているところです。

 

f:id:ahochauyo:20190716092858p:plain

 

f:id:ahochauyo:20190716093430p:plain

 

ここでのいちばん小さな要素は、

アイコン、
キャッチコピー(簡単に使える、有効期限なし、忘れられない旅)

その下の説明文です。

 

 

大きいタイトル「いつも完璧な贈りもの」は、気になるのですが無視してください。
あとでやります。

 

 

この枠内での配置などもまず無視してください。

 


いちばん小さい要素からやっていきますので、
アイコンの色や大きさ、キャッチコピーの色や大きさ、説明文の色や大きさなどを最初にいじります。

 

このとき並び方が破滅していても大丈夫です。
自分がいじったところが反映されているかだけ気にしてください。

 

 

( ・∇・)

 

 

 

それぞれのCSSが概ねサイトと等しくなったら、次はアイコン、キャッチコピー、説明文が縦に並ぶところまでやります。

 

縦にならんだら、次はその「アイコン・キャッチコピー・説明文」のセットが横並びになるようにしてください。

 

 

それが終わったら、ひとつ外側に移動しますて、
「いつも完璧な贈りもの」の大きさ、色などを整えます。

 

 

先ほどつくったその3セットの塊と、「いつも完璧な贈りもの」が

縦に並ぶようにしてください。

 

 

いちばん最後に全体が真ん中に来るようにします。

 

 

伝わりますかね・・
重要なのは内側から内側から調整していうということです。

 

 

 

10. ひと枠書くごとに元サイトと動きを確認してから次の枠にうつる
11. 9と10を繰り返し最後までいく

 

 

ここはもう文字通りですね。
時間はかかりますが、無心で繰り返していると完成します。

 

 

 

( ・∇・) ♪

 

 

 

 

 

 

お役立ち便利ツール 

Font Awesome

アイコンはFont Awsomeというところのものをつかいました。

フォントとして認識されるので、大きさを変えたり色を変えるときは文字と同じようにfont-sizeやcolorのプロパティが使えて便利です。

 

サイトにあるアイコン全てつかいたい場合は有料会員になる必要がありますが、無料で十分です。

 

fontawesome.com

 

 

クローム拡張機能

 

Page Ruler Redux

選択範囲の幅、高さがわかります。

chrome.google.com

 

 

Image Downloader

サイトで使われている画像を一括でダウンロードできます。

chrome.google.com

 

 

Width and Height Display

ブラウザの幅と高さの実寸がわかります。

chrome.google.com

 

 

ColorPick Eyedropper

選択箇所の色がわかります。簡単にコピーできるので貼り付けるだけ。

chrome.google.com

 

 

 

おまけ

Website Blocker (Beta)

ついついTwitterやFacebookをみてしまう、、なんてことはありませんか?
指定のページに設定した時間帯はアクセスできなくなります。

chrome.google.com

 

 

 

参考にしたサイトや動画

 

Wes Bos

このウェスボスさん、すごすぎ。メールアドレスで登録するだけ。全部無料です。

しかも公式サイトのほうはCMなし。Youtubeの方はCMあります。

( ・∇・) !!!

wesbos.com

 

たくさんコースあるのですが、おすすめはWhat The Flexbox!? です。

動画1本あたりがそこまで長くないのがいいです。

flexbox.io


Youtubeは広告ありですが字幕もできました。ただ自動字幕なのでちょっと変かもしれないですが。でもそこまで差し支えなさそうかなと思います。

www.youtube.com

f:id:ahochauyo:20190716101148p:plain

 

 

 

全部で20ある動画ですが15までやればサイト模写はできます。
コツは一回チュートリアルをみてやったあと、ゼロから自分でやることです。

 

 

コードはGithubにはいっています。

github.com


私は、html とanswerとかかれているファイルをローカルにおとして、自分のブラウザで表示させつつ、コード自体はみずに表示だけをみてゼロから模写しました。

 

サイト模写ほど難しくないので、ひとつひとつの作業の理解が捗りおすすめです。

 

 

Flexbox Froggy

ゲームです。flexboxの練習ができます。

flexboxfroggy.com

 

 

CSS- the clearfix hack 

シンプルにまとまっているサイト。
詳細がかかれているわけではないのですが、概要を掴むにはいいかなとおもいます。

英語ですが、グーグル翻訳とかでいけると思います。

learnlayout.com

Hello world!

 

 

レイアウトで一番大事なのはdisplayプロパティらしいよ。

 

( ・∇・)

 

 

各どういった挙動をするのか解説しているサイトが山のようにありますよね。

 

 

なのでかいつまんでやってけばどうにかこうにか、アウトプットがつくれないものかと、まずはサイト模写からスタートしたのですが、なかなかうまくいかず。

 

 

 

( ・∇・; )

 

 

 

ということで、ちょっとサイト模写とかは脇に置いて勉強してます。

 

 

 

 

 

で、さっそくですがdisplay。

フレックスボックスの時に、親要素に指定するだけのものと思ってました。

 

 

 

( ・∇・)

 

 

 

でもちがくて、実際はすべての要素はデフォルトでなにかしらのdisplayの値がわりふられているみたいです。

 

 

 

 

 

( ・∇・) ?

 

 

 

 

 

 

そのデフォルトっていうのはたいていの場合  display: block;  もしくは  display: inline;   。
blockはblock-level elementと呼ばれることが多いらしいです(英語では)。

 

 

display:  block; がデフォルトで設定されているタグは、

HTML5ではdiv, p, form, header, footer, sectionなどが。

 

 

display: inline; がデフォルトで設定されているタグは、
span や a など。

 

 

 

( ・∇・) !

 

 

 

 

CSSが空っぽであっても、
divに子要素としていれるかむき出しかで、行間の幅とか違ったりしますもんね。

 

 

 

 

 

もっと他にもあるみたいですが、もう一つ覚えておくとしたら display: none; かなと。

これはscriptタグなどにデフォルトであてられている値だそう。

 

 

 

 

なるほど。

 

 

 

 

display: none; を指定すると、完全にページに存在していないものとして扱われるそうで、別のプロパティでは、存在はしているけど見えないようにするだけ、というものもあるそうです。今回はそこまで踏み込みません。

 

 

 

width: 500px; とかにしているのになぜかぴったり500pxにならない。

だからそれを避けるために、marginやpadding の値を計算しつつ width heightを決めたり、微調整したりしてたんですけども、

 

そんなことをしなくても、自分がかいたwidth height内におさまってくれるプロパティがありました!

 

 

 

box-sizing: border-box;

 

 

 

 

( ・∇・) 神

 

 

 

実際こんなかんじです。 

 

 

 

 

主に参考にしたおすすめサイト2つはっときます。

 

 

短いので一番最初から読んだ方が流れがわかりやすいです。

learnlayout.com

 

実際コードを実行したときのページがわかりやすいのでぜひそちらもクリックしてみてください。

www.w3schools.com

 

 

ではー!

flexbox 垂直と水平の話

Hello, world!

 

( ・∇・)

 

 

数日前からflexboxをやりはじめたのですがある一点がわかっておらず苦戦しました。

 

 

( ・∇・;)

 

 

 

それは、flex-directionの方向ありきで他のプロパティを考えないといけないところ! 

それがわかってやっとスッキリ。

赤字部分が抜けているとまったく思い通りに動かせないので注意が必要です。

この数日間はなんだったのか。。

 

 

専門用語とかはわからないのですが以下のように考えるとわかりやすいんじゃないでしょうか。

 

 

 

( ・∇・)

 

 

 

 

justify-contentはよく水平方向と表現されますが、

flex-direction方向で、どのようにitemをレイアウトするか、と理解したほうがわかりやすい。

 

同様に、

align-itemsはよく垂直方向と表現されますが、

flex-direction方向に対して垂直方向でどのようにitemをレイアウトするか、と理解したほうがわかりやすい。

 

 

 

 

 

( ・∇・) !!

 

 

 

 

flex-direction と justify-contentがあたかも同列のプロパティのように考えてしまうと、こんがらがります。flex-directionは別格

その下にjustify-contetn alogn-itemsなどがあり、flex-direction方向ありきでitemiのレイアウトをいじれる、と覚えて置くといいんじゃないでしょうか。

 

 

こちらのサイトでは、そういった軸に対してという話がきちんと言及されており、説明がシンプルなのではっておきます。

css-tricks.com

 

 

 

では〜!

 

( ・∇・)

クロージャ | 割と詳細に書いてある記事がわかりやすかったのでシェア

Hello World!

 

前回の記事でクロージャについて紹介したのですが、理解に一役かってくれた記事があるので今回はそちらの記事のざくっとしたまとめを残しておきたいと思います。 

ahochauyo.hatenablog.com

 

 

 

 

( ・∇・)

 

 

 

JavaScriptにおけるLexical Environmentとは、変数や関数をストックしているオブジェクトのこと。

 

 

  • スクリプトができた段階では、空のオブジェクト(global Lexical Environment)。
  • 関数宣言(fuction declaration)がある場合は、まずは関数がセットされる。
  • 全てのローカル変数名がキー名、その値がバリューとしてストックされていく
  • 内側のオブジェクトから検索をはじめ、見つかるまで外側に参照する範囲をひろげていくことができる。
  • 関数が実行されるたびに(function invocation)新しくつくられる
  • 関数実行後も、使われるか可能性のある関数があるかぎりLexical Environmentは存在する

 

ゆえに、クロージャを内臓している関数は、実行のたびに前回の計算値をひきついだまま、次の計算ができる、ということのようです。

 

クロージャが特別、というよりもJavaScriptそのものがオブジェクトベースでなりたっていて、どのタイミングでどのオブジェクトが発生し、内部のローカル変数がなければ、外部に参照できる変数があるかどうかで、挙動がかわってくる。

 

ということなのかなとおもいました。

 

詳しくは元記事をご参照ください。

 

 

 

javascript.info

 

 

 

( ・∇・)!