note outing React

ES2018

えー、GWひとりもくもく会開催中です。

まだReactまでたどり着けていないのですが、お友達に教えてもらったこの本が素晴らしい！

https://oukayuka.booth.pm/items/1312652

ES2018の解説がわかりやすい！（ES2018の章まで実践した！）

https://qiita.com/shibukawa/items/19ab5c381bbb2e09d0d9

↑この記事と併用してお勉強中です。

ES2018

ES6も含めおさらい。

変数宣言

  • varは使わない（禁止レベル）（関数スコープ）
  • var で定義された変数のスコープは関数単位、制御文のブロックはすり抜ける
  • 多数の言語の変数スコープはブロック単位なので、そのテイでvar使うと危険
  • 代入不要なものは const 使う（ブロックスコープ）
  • どうしても再代入が必要な場合は let を使う（ブロックスコープ）

アロー関数

  • function宣言とアロー式ではthisの挙動が異なる
  • functionは、すぐ前のオブジェクト、オブジェクトがない場合グローバルオブジェクトがthisになる、アロー関数はそれ自身がthisになる
  • functionは切り捨てましょう（闇に葬る）
// ダメ例
function name(引数) {
     本体
}

// こっち使う
const name = (引数) => {
     本体
};

関数にデフォルト引数が使える

const sampleFunc = (n = 0) => n + 1;

オブジェクトにもデフォルトを設定して似たようなことができる
const thinking = {
     name: "Mikke",
     mind: "GoLangと戯れたい",
     reason: "`so` だから"
};
 
const { name="我輩", mind, reason } = thinking;
console.log(`${name}は${reason} ${mind}です`);
$ node collection.js 
Mikkeは`so` だから GoLangと戯れたいです

ショートハンド

const foo = 12345;
const obj = { foo, bar:678 };
console.log(obj);
$ node shorthand.js 
{ foo: 12345, bar: 678 }

クラスの継承

  • コンストラクタは継承されないので、継承したら明示的にコンストラクタを書く必要がある

Template literals - テンプレートリテラル

  • 文字列を"とか' ではなく ` で ${変数名}をくくると、値を展開してくれる
  • ＋で結合とか古い・・

Destructuring Assignment - 分割代入

const [n, m] = [1, 2];
console.log(n, m);
 
const obj = { name: 'Mikke', hight:141 };
const { name, hight } = obj;
console.log(name, hight);

Reactのばあい、 const name = obj.nameってやるとエラー

スプレッド演算子

const ary1 = ['A','B','C'];
const ary2 = [...ary1, 'D','E'];
console.log(ary2);
 
const obj1 = {a:1, b:2, c:3};
const obj2 = {...obj1, d:4,e:5};
console.log(obj2);
$ node collection.js 
[ 'A', 'B', 'C', 'D', 'E' ]
{ a: 1, b: 2, c: 3, d: 4, e: 5 }

非同期処理

JSは前の処理待たずに次へ進んじゃう
const greeting = am => {
     setTimeout(() => { console.log('起きましょう') }, am);
};
 
const greet = () => {
     console.log('おやすみね？');
     greeting(2000);
     console.log('おはお');
};
 
greet();

$ node sync-test.js 
おやすみね？
おはお
起きましょう

起きましょう、おはお、の順で実行されたいの〜

非同期処理 - Promises構文
const sleep = am => new Promise(resolve => setTimeout(resolve, am));
 
const greet = () => {
     console.log('おやすみね？');
     //greeting(2000);
     sleep(2000)
         .then(() => {
           console.log('起きましょう');
           console.log('おはお');
     })
     .catch(err => {
       console.error('error!:', err);
     })
};
 
greet();
$ node sync-test.js 
おやすみね？
起きましょう
おはお

Promise関数の書き方がいまいちわからん。。

非同期処理 - async/await（エイシンク・アウェイト）
const sleep = am => new Promise(resolve => setTimeout(resolve, am));
 
const greet = async () => {
     console.log('おやすみね？');
     //greeting(2000);
     try {
       await sleep(2000);
       console.log('起きましょう');
       console.log('おはお');
     } catch (err) {
       console.error('error!:', err);
     }
};
 
greet();
$ node sync-test.js 
おやすみね？
起きましょう
おはお

疲れた〜。GW前半終了しちゃう〜・・GOもやりたい〜

 

-note, outing, React