ES6とかES2015とか・・・の理解
ES6をやりましょう、と自分の中でなっているのだけど、
ES6というのはES2015とどうやら同義らしくすっかりこんがらがりました。
( ・∇・)? ES2015の短縮系はES6じゃないの??
答えはNoです。
ということでシェアしていきます。
こちらウィキペディアのコンテンツです。
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からとりかかりました。
( ・∇・)!
日本語の記事でわかりやすかったのはこちら。
takkyunさんという方の記事です。takkyun - Qiita
英語はこれがわかりやすかった。
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.
と大胆に書かれています。
dot notation で関数が呼ばれその中にthisがはいっているときはこのパターン。
冒頭で紹介したtakkyunさんの記事では、「this と function の関係」という章で書かれています。
サンプルコードをのせておきます。
例1
( ・∇・)
次。
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 thatcall()
accepts an argument list, whileapply()
accepts a single array of arguments.
冒頭で紹介したYouTubeの06:40以降でわかりやすく解説されています。
( ・∇・)
関数実行時に、別スコープにあるオブジェクトの情報をつかいたい。
そんな時にこの方法をつかうんですね。
explicit は明確にとか率直にという意味なので、
使いたいオブジェクトを明確に引数として渡す、みたいなイメージなのかもしれませんね。
サンプルコードです。
先ほどは、オブジェクト内のメソッドとしてfunctionが存在していましたが、今回は外側にあります。
例2
ここで仮に、先ほどと同様に、student1.sayHello(); と関数を呼び出してみたとします。
Uncaught TypeError: student1.sayHello is not a function
( ・∇・)?
エラーになりました。
sayHelloはfunctionではないと。。
sayHelloはfunctionで一番頭で宣言してるんですけど。。。
ただしい表現ではないかもしれないのですが、
student1.sayHello();というのは、student1のsayHelloを実行してという指示になります。
例2のコードをみていただくとstudent1 はメソッドをもっておりません。
なのでstudent1の中にsayHelloは存在していないため、エラーになるという理解を私はしました。
では、どうやったらsayHelloを実行できるのかとなりますが、
ここでメソッドをつかうんですね。
( ・∇・)!
call をapply に変えても、この例の場合は同じ結果でした。
このときのthisは、引数として渡されたオブジェクトになってますね。
そして、.bind() ですが、これはちょっとややこしく、 .call()とほぼ同じなのですが、新しい関数を返してくるものになるそうです。
( ・∇・)?
では試しに、先ほど試したcallをそのままbindに変更してみます。
何もコンソールに表示されません。
エラーもなしです。
( ・∇・)?
無理やりコンソールしてみました。
t
たしかに新しい関数になっています。
関数なので実行には()が必要ですよね。
ということでこちらで試してみます。
これはどうなるでしょう?
( ・∇・)
ででーん!
いけましたね。
ちなみに、多くの場合は変数に代入して使うみたいです。
実行結果は同じです。
最後です。
thisにはデフォルトがあるらしいです。
Default Binding:
thisを含む関数を実行するけれども、dot notation もつかわず、call(), apply(), bind()もつかっていないとき。
→ デフォルトでWindowオブジェクトがthisのvalue。もしstrict modeが適用されているなら、undefined。
ためしにコンソールでthisとうってみました。
( ・∇・)!
これがめちゃくちゃわかりやすいので、そのままはっておきます。
- Is there a dot? Look to the left. That's
this
.- Do you see .call() or .apply()? What's passed in before the first comma? Thats
this
.- Does the function stand alone when it's invoked? Then what's your global context? That's
this
.
だいぶ長くなりました。
読んでいただきありがとうございます。
JavaScript ある程度基礎ができたら次はどうする?
Hello, world!
今後Node.jsやReactを学んでいきたいのですが、自分がそのステップに進むにあたりどれくらいJavaScriptの理解が足りていないかわからなかったので、調べてみました。
-
- Lexical Structure
- Expressions
- Types
- Variables
- Functions
- this
- Arrow Functions
- Loops
- Loops and Scope
- Arrays
- Template Literals
- Semicolons
- Strict Mode
- ECMAScript 6, 2016, 2017
私の場合はthis, Template Literals, Semicolons, Strict Mode, ECMAScript 6, 2016, 2017 がまだだなというかんじです。
加えて、ブートキャンプが始まるまでに Eloquent JavaScript を仕上げたいのですが、ES6がわかっていないのでまずはそちらのチュートリアルをみつつ、上記をカバーしていきたいとおもいます。
【プログラミング学習】はじめての模写のやり方とお役立ち便利ツールと参考にした動画【独学】
模写したいのにやり方がわからないという問題。
( ・∇・;)
模写がいいと聞くけどどうやったらいいの?
ネットで検索したけどやり方らしいやり方がわからない!
( ・∇・;)
そうなんです。
やり方がわからない問題に結構苦しみました。
そして昨日どうにかこうにかひとつのサイト模写を終えました。
元ソースはみないということを徹底して、ゼロからコードをかきました。
もちろんコピペもなしです。
( ・∇・) !!
👩🏻💻力づくです。
— Nao | Coding Beginner (@ahochauyo) 2019年7月15日
初サイト模写完了🙌
右: 私
左: 本物
画像伸縮変とか細かいところ変とか課題多め💦ですが今回はこれで😌
模写のやり方本当に不明でググったりもしましたがそれでも不明でした。しかし無理くりながらも元ソース見ずに出来た😆大体ですが😀
実践に近いほど学びは多いですね🌱 pic.twitter.com/8ixKDvt0Y6
私の場合あまりにも初心者すぎて、段取りがわからないままにはじめました。
効率悪すぎです。
( ・∇・;)
ということでサイト模写のやり方と使ってよかったツールをまとめておきたいと思います。
- 準備するもの
- やり方
- 便利ツール
- 参考サイトと動画
の順番で書いていきますね。
👩🏻💻模写からの学びは大きい
— Nao | Coding Beginner (@ahochauyo) 2019年7月15日
1週間前の自分は模写のやり方は完全不明。しかし力づくでもとりあえずやってみたことで「型」ができたかも📋
✅模写するサイトの枠とその中の要素を書き出す
✅枠と要素にクラス名を振りながらHTMLかく
✅枠ごとにCSS。完成してから次の枠に。
✅CSSは内側要素から#模写 pic.twitter.com/xU8Tq6FEjc
準備するもの
ではさっそく準備するものから。
- ブラウザ
- テキストエディタ
- 紙と鉛筆
わたしの場合はGoogle Chromeと Visual Studio Codeとホワイトボードでやりました。
他のエディタだろうが裏紙とペンとか、なんでもいいと思います。
( ・∇・) ♪
サイト模写のやり方(超初心者)
- 模写するサイトを選ぶ
- サイトを上から下まで一回全部みる
- 見た目でサイト全体を枠で分割。メモなどに大きな四角を書く。
- 各枠内に、細かい要素をたしていく
- テキストエディタに新規HTMLファイル作成
- 先ほど書き出した枠と要素を盛り込みつつHTMLを書く
- まずHTMLを完成させる
- テキストエディタで新規CSSファイルを作成
- 枠ごとにCSSを完成させていく。枠内の小さい要素から順番に書く。
- ひと枠書くごとに元サイトと動きを確認してから次の枠にうつる
- 9と10を繰り返し最後までいく
ひとつひとつみていきます。
1.模写するサイトを選ぶ
自分の場合はこちらのサイトを選びました。
理由はマナブさんという方のブログで発見したからです。
ちなみに、模写をするまでに必要な基礎学習などものせてくださっているので参考にされたらいいのかなと思います。
超膨大な情報を提供してくださっています。
私は時間がかかりすぎて、模写にたどり着く前に挫折するな、、、と思ったのでいきなり模写からはじめました。
その辺りは個人の性格かなと思います。
( ・∇・)
2.サイトを上から下まで一回全部みる
特にコツなどはないです。上から下まで全部をみて、ふむふむと思ってください。
( ・∇・)
3. 見た目でサイト全体を枠で分割。メモなどに大きな四角を書く。
4.各枠内に、細かい要素をたしていく
ツイートにも掲載しましたがこんなかんじです。
さきほどのAirbnbのページとみくらべてみます。
すみません、枠という表現が、かなり自己流なので、わかりにくいかもしれないのですが、サイト全体を分割するいちばん大きな要素、というのが伝わると幸いです。
( ・∇・;)
大枠がかけたら、他の要素もたしていってください。
これをつくると、サイトの構成が頭にはいります。
雑なものでいいので、つくるのがおすすめです。
5. テキストエディタに新規HTMLファイル作成
6. 先ほど書き出した枠と要素を盛り込みつつHTMLを書く
さきほど書き出した枠をみつつ、HTMLをかいていきます。
枠のとなりにメモしてあるのはクラス名です。
コードを書くときに、元サイトでソースをみたり、ディベロッパーツールをひらいて構造を確認してはいけません。
( ・∇・)
7. まずHTMLを完成させる
書いているうちに、CSSのことが頭に浮かんだり、なにかアイディアがでるかもしれませんが、どこかにメモするにとどめ、まずはHTMLだけを完成させてください。
おめでとうございます!半分完成です。
( ・∇・) ☆
8. テキストエディタで新規CSSファイルを作成
9. 枠ごとにCSSを完成させていく。枠内の小さい要素から順番に書く。
つづいてCSSにうつります。
枠や要素をメモに書き出していたかと思うので、
それをみつつCSSをつけていきましょう。
コツは内側の要素から順にひとつひとつ完成させてくことです。
一言でいえば、そうなのですが一応一つ例をあげて、細かめに書きますね。
( ・∇・)⤵︎⤵︎
サイトの真ん中あたりにこういう枠があります。
私のメモでいうと右側にfeaturesとメモされているところです。
ここでのいちばん小さな要素は、
アイコン、
キャッチコピー(簡単に使える、有効期限なし、忘れられない旅)
その下の説明文です。
大きいタイトル「いつも完璧な贈りもの」は、気になるのですが無視してください。
あとでやります。
この枠内での配置などもまず無視してください。
いちばん小さい要素からやっていきますので、
アイコンの色や大きさ、キャッチコピーの色や大きさ、説明文の色や大きさなどを最初にいじります。
このとき並び方が破滅していても大丈夫です。
自分がいじったところが反映されているかだけ気にしてください。
( ・∇・)
それぞれのCSSが概ねサイトと等しくなったら、次はアイコン、キャッチコピー、説明文が縦に並ぶところまでやります。
縦にならんだら、次はその「アイコン・キャッチコピー・説明文」のセットが横並びになるようにしてください。
それが終わったら、ひとつ外側に移動しますて、
「いつも完璧な贈りもの」の大きさ、色などを整えます。
先ほどつくったその3セットの塊と、「いつも完璧な贈りもの」が
縦に並ぶようにしてください。
いちばん最後に全体が真ん中に来るようにします。
伝わりますかね・・
重要なのは内側から内側から調整していうということです。
10. ひと枠書くごとに元サイトと動きを確認してから次の枠にうつる
11. 9と10を繰り返し最後までいく
ここはもう文字通りですね。
時間はかかりますが、無心で繰り返していると完成します。
( ・∇・) ♪
お役立ち便利ツール
Font Awesome
アイコンはFont Awsomeというところのものをつかいました。
フォントとして認識されるので、大きさを変えたり色を変えるときは文字と同じようにfont-sizeやcolorのプロパティが使えて便利です。
サイトにあるアイコン全てつかいたい場合は有料会員になる必要がありますが、無料で十分です。
クローム拡張機能
Page Ruler Redux
選択範囲の幅、高さがわかります。
Image Downloader
サイトで使われている画像を一括でダウンロードできます。
Width and Height Display
ブラウザの幅と高さの実寸がわかります。
ColorPick Eyedropper
選択箇所の色がわかります。簡単にコピーできるので貼り付けるだけ。
おまけ
Website Blocker (Beta)
ついついTwitterやFacebookをみてしまう、、なんてことはありませんか?
指定のページに設定した時間帯はアクセスできなくなります。
参考にしたサイトや動画
Wes Bos
このウェスボスさん、すごすぎ。メールアドレスで登録するだけ。全部無料です。
しかも公式サイトのほうはCMなし。Youtubeの方はCMあります。
( ・∇・) !!!
たくさんコースあるのですが、おすすめはWhat The Flexbox!? です。
動画1本あたりがそこまで長くないのがいいです。
Youtubeは広告ありですが字幕もできました。ただ自動字幕なのでちょっと変かもしれないですが。でもそこまで差し支えなさそうかなと思います。
全部で20ある動画ですが15までやればサイト模写はできます。
コツは一回チュートリアルをみてやったあと、ゼロから自分でやることです。
コードはGithubにはいっています。
私は、html とanswerとかかれているファイルをローカルにおとして、自分のブラウザで表示させつつ、コード自体はみずに表示だけをみてゼロから模写しました。
サイト模写ほど難しくないので、ひとつひとつの作業の理解が捗りおすすめです。
Flexbox Froggy
ゲームです。flexboxの練習ができます。
CSS- the clearfix hack
シンプルにまとまっているサイト。
詳細がかかれているわけではないのですが、概要を掴むにはいいかなとおもいます。
英語ですが、グーグル翻訳とかでいけると思います。
■
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;
( ・∇・) 神
実際こんなかんじです。
👩💻はみ出し対策
— Nao | Coding Beginner (@ahochauyo) 2019年7月13日
選択範囲のはみ出しやっと解決💦 揺れてて見にくいですが右サイドの右端がはみ出しているの見えますでしょうか。
左サイド全体にbox-sizing指定
右サイド 指定なし
です🙃
チュートリアルを一通り見た後自分でゼロからやるとバグが沢山でて学び多くなるのでオススメです👍#css pic.twitter.com/B2J5HfmvTh
主に参考にしたおすすめサイト2つはっときます。
短いので一番最初から読んだ方が流れがわかりやすいです。
実際コードを実行したときのページがわかりやすいのでぜひそちらもクリックしてみてください。
ではー!
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のレイアウトをいじれる、と覚えて置くといいんじゃないでしょうか。
こちらのサイトでは、そういった軸に対してという話がきちんと言及されており、説明がシンプルなのではっておきます。
では〜!
( ・∇・)
クロージャ | 割と詳細に書いてある記事がわかりやすかったのでシェア
Hello World!
前回の記事でクロージャについて紹介したのですが、理解に一役かってくれた記事があるので今回はそちらの記事のざくっとしたまとめを残しておきたいと思います。
( ・∇・)
JavaScriptにおけるLexical Environmentとは、変数や関数をストックしているオブジェクトのこと。
- スクリプトができた段階では、空のオブジェクト(global Lexical Environment)。
- 関数宣言(fuction declaration)がある場合は、まずは関数がセットされる。
- 全てのローカル変数名がキー名、その値がバリューとしてストックされていく
- 内側のオブジェクトから検索をはじめ、見つかるまで外側に参照する範囲をひろげていくことができる。
- 関数が実行されるたびに(function invocation)新しくつくられる
- 関数実行後も、使われるか可能性のある関数があるかぎりLexical Environmentは存在する
ゆえに、クロージャを内臓している関数は、実行のたびに前回の計算値をひきついだまま、次の計算ができる、ということのようです。
クロージャが特別、というよりもJavaScriptそのものがオブジェクトベースでなりたっていて、どのタイミングでどのオブジェクトが発生し、内部のローカル変数がなければ、外部に参照できる変数があるかどうかで、挙動がかわってくる。
ということなのかなとおもいました。
詳しくは元記事をご参照ください。
( ・∇・)!