thisの話がおもしろかったって話

やっぱり基礎って大事だよねってことで、また色々おもしろい記事がないか難民してる。 そこでおもしろいなって思ったのが下記の記事。

qiita.com

thisって色々あるんだよって話でわたしもよくthis迷子になってたことがあっておもしろかったんだけど、 一番自分の中でわかりやすいなって思ったのが、applyとcallの話。

applyっていうのはbindしてるんだよっていうのが、なんかわかるけどなんかすっとこなかったけど、 この記事の説明ですごくスッキリした!

どこからでも魔法でthisに変えちゃうぞ!みたいな!(これ説明したけど、人には伝わらなかった) おもしろかったからこの人の記事他のも読んでみよ。

わたしのこころの中のapplyとcallのイメージ↓ f:id:tomo_e:20170103025950p:plain

初めてのTypeScript(の環境設定)

TypeScript使おうと思ったけど、 まずエディタどうしよう(vimは最初から考えてない)

WebStormデビューか!?と考えたけど、 handlebarsが対応してないって聞いたので、 visual studio codeか!?と思ったけど、 ちょっとSublimeで使えるか試してみる (機能的に困ったらあとで考えよう)

qiita.com

Mac+SublimeTextで最強のTypeScript環境を整える | Qaramell Blog

このあたりをみてとりあえずTypeScritptインストールだ! npm install -g TypeScript

typescript-toolsもとりあえずいれとこかな… sudo npm -g install typescript typescript-tools

そしてT3SをPackagesにいれて完成!…

って思ってたらめっちゃはまった(´・ω・`)

TypeScritptを補完するときにSublimeさんがフリーズするという… これはさすがに使えないって思って検索したら同じ状況にはまってる人発見!

【Sublime Text3】TypeScirpt を導入する(T3Sが動作しない場合) | とど。

T3Sを捨ててTypeScript-Sublime-Pluginをいれると…! ちゃんとうごいたよぉぉぉおお!(´艸`) これでちょっと触ってみよう!

github.com

ES2015と友達になりたい

ECMAScript 2015(ES6)の概要と次世代JavaScriptの新たな機能 | HTML5Experts.jp

ECMAScript 2015のブラウザ対応状況と実践投入に向けて | HTML5Experts.jp

JavaScriptにもクラスがやってきた!JavaScriptの新しいclass構文をマスターしよう | HTML5Experts.jp

Promiseで簡単!JavaScript非同期処理入門【前編】 | HTML5Experts.jp

Promiseで簡単!JavaScript非同期処理入門【後編】 | HTML5Experts.jp

とりあえず動かしてみたいので簡易バベル https://babeljs.io/repl/

あとはこっちで細かいのチラチラみてみよ Learn ECMAScript6 by doing it

読んでみた!JavaScript の概要!その21

Predefined Core Objects - JavaScript | MDN functionオブジェクト

正規表現 - JavaScript | MDN


RegExp オブジェクト

正規表現が使えるようになる。

正規表現の作成

正規表現リテラル

var re = /ab+c/;

RegExp オブジェクトのコンストラクタ関数

var re = new RegExp("ab+c"); ※コンストラクタ関数は実行時にコンパイルする。 正規表現パターンに変更があるときや、パターンがわからなかったり、ユーザーが入力したり違うソースからパターンを取得する場合はコンストラクタ関数を使う。

正規表現パターンを書く

単純な文字と特殊な文字の組み合わせ。

(?:x)

xにマッチするけど配列には記録されない。 無視したい塊に使うのね

x(?=y)

先読み x y の文字列の場合にxにマッチする。 /Jack(?=Sprat|Frost)/ だったら、Jack SpratとJack FrostのJackの部分にだけマッチ。

x(?!y)

否定先読み xの次にyが続かなければマッチする。 /\d+(?!.)/、小数点が続かない場合にマッチする。

あとは使いながら覚えよう(´ェ`)

読んでみた!JavaScript の概要!その20

Predefined Core Objects - JavaScript | MDN functionオブジェクト


Number オブジェクト

Numberプロパティ

Number.MAX_VALUE

利用可能な最大値

Number.MIN_VALUE

利用可能な最小値

Number.NaN

非数

Number.NEGATIVE_INFINITY

負の無限大

Number.POSITIVE_INFINITY

正の無限大

Numberメソッド

toExponential

指数表記で表現した文字列で返す var num=77.1234; num.toExponential() //7.71234e+1

toFixed

固定小数点で表現した文字列で返す var num = 12345.6789; num.toFixed(); //12346

toPrecision

指定した精度の固定小数点で表現した文字列で返す var num = 5.123456; num.toPrecision() //5.123456

toSource

非標準

toString

指定したオブジェクトを表現する文字列を返す var num = 20; num.toString() //"20"

toValue

指定されたオブジェクトのプリミティブな値を返す

読んでみた!JavaScript の概要!その19

Predefined Core Objects - JavaScript | MDN functionオブジェクト


Mathオブジェクト

Math.PI

円周率

Math.abs

与えた数値の絶対値を返す Math.abs(-3); //3

Math.ceil

引数以上の最小の整数を返す Math.ceil(5.23); //6

Math.floor

引数以下の最大の整数を返す Math.floor(5.23); //5

Math.min

与えた複数の引数の中で最小の値を返す Math.min(10, 20); //10

Math.max

与えた複数の引数の中で最大の値を返す Math.max(10,20);

Math.pow

累乗、第一引数は底、第二引数は指数 Math.pow(2,2); //4

Math.random

0〜1までの間で乱数を返す Math.random(); //0〜1の乱数

Math.round

四捨五入 Math.round(2.3); //2 Math.round(1.5); //2

Math.aqrt

平方根を返す Math.sqrt(49); //7

このへんはちょっとよくわかんない

Math.sin, Math.cos, Math.tan

標準的な三角関数

Math.acos, Math.asin, Math.atan, Math.atan2

三角関数

Math.exp, Math.log

自然対数

Mathオブジェクトは自分で作らずにかならず定義済のMathオブジェクトを使うこと!

読んでみた!JavaScript の概要!その18

Predefined Core Objects - JavaScript | MDN functionオブジェクト


Function オブジェクト

var functionObjectName = new Function([arg1, arg2], functionBody);

//関数を変数に代入 ''' var setBgColor = new Function("document.bgColor = 'antiquwhite'"); '''

//関数を宣言 ''' function setBgColor () { document.bgColor = 'antiquewhite'; } '''

関数は入れ子にできる。内部の関数は外部の関数に対してプライベート。 内部の関数は外側の関数からしかアクセスできない。 内部の関数は外側の関数の引数や変数を使える!でも外側の関数は内部のかん関数の引数や変数は使えない!