aoma blog

エンジニアの日常とか技術とか

昨今のJavaScriptをレビューしたら全くわからなかった話

はじめに

最近JavaScriptのプルリクが来たので「よーしやったるでー」って感じでレビューしたんですが、まったく理解できずレビューになりませんでした。

その時疑問に思ったことをメモします。。
誰かの助けになれば幸いです。。

これはもう引退やな。。

classの中で function って書くの省略してるの?

class TestClass {
    test() {
        処理
    }
}

function を省略して書けるのかなと思ったらそうではない。むしろ書いてはいけない。 下記はエラーになる。

class TestClass {
    function test() {
        処理
    }
}

PHPに慣れてるからか、もやもやする。

(a, b) => は無名関数なのはわかったけど function(a, b) じゃダメなの?

(a, b) => は無名関数で function(a, b) と同じ。

好みの問題だがthisに違いがある。

this.hoge;
function(a, b) {
   this.hoge; ←違うもの
}
this.hoge;
(a, b) => {
   this.hoge; ←同じ!こっちのほうがthisが何を指してるかわかりやすい!(外と同じthisになってる)
}

... ってなんや...

... はスプレッド演算子
中身バラす(展開する)やつ。
こんな感じで使う。

var parts = ['shoulders', 'knees']; 
var lyrics = ['head', ...parts, 'and', 'toes']; 
// ["head", "shoulders", "knees", "and", "toes"]

Arrayだったりオブジェクトだったりいろいろあるらしい。。詳しくはこちら

{} は処理書き忘れ?

{} は空のオブジェクト宣言。 function の処理の中身ないやつかと思ったらオブジェクトだった。なるほど、、まぁたしかに。。

reduce 関数とかで出てくる。

var countedNames = names.reduce(function (allNames, name) { 
  if (name in allNames) {
    allNames[name]++;
  }
  else {
    allNames[name] = 1;
  }
  return allNames;
}, {});

copy2clipboard = copy; って何してるんや...

copyクリップボードにコピーする関数。 https://blog.leko.jp/post/copy-function-of-developer-tools/

小技として、 promiseの中とかで使おうとすると名前解決できなかったりするので、

copy2clipboard = copy;

のように、事前にクローンしておいて、

this.copy2clipboard("logloglog");

みたいな感じで使える。

Mapって何や...

new Map(kvArray);

Mapは配列を連想配列にするクラス。Mapは型。
{} とは別。{} はキーに数値を使えないじゃん、ちゃんとした連想配列作ろうよ!ってことでMapができた。

詳しくはこちら

await 恐怖症や...

awaitはasyncが指定されてるときに使える。処理が終わるまで待つ。

awaitがないとthis.usersValidnesにプロミスが入って、this.usersValidnes自体にthenがないのでプロミスのまま生き続ける。処理は終わるけど結果が取れない。

hensu;
hoge().then(e => {
   hensu = e;
})

hensu;
hensu = await hoge()

は一緒。

awaitをなくすと

hensu= hoge()

となり、thenがないことになるので、

hensu.then(e=>~~~~)

してあげる必要がある。

hoge()は5秒くらいで"A"という文字列を返すプロミスだとする。

hensu = hoge();
await hensu; // 処理が終わるまで待つ
console.log(hensu) // 終わったプロミスが表示されるだけ

下記ならば値が取れる

hensu = hoge();
hensu2 = await hensu; 5秒かかる
console.log(hensu2) // "A"
hensu = hoge();
await hensu; // 処理が終わるまで待つ
console.log(await hensu) // ”A”
console.log(await hensu) // ”A”
console.log(await hensu) // ”A”
console.log(await hensu) // ”A”

とかはできる。 awaitは「プロミスを結果に変換する関数」だと考えるとわかりやすい!

async*アスタリスクは何なんや!

* はジェネレータになる。ふつうはfuctionにつく。classだとfunction書けないのでasyncに付いたりする。

yield (いーるど)って何やねん!

ジェネレータ用のキーワードreturn みたいなもの。

yieldreturn する。次呼ばれると yield の下から処理が始まる。

では yield* は一体何なのか...

yield を返すときは yield* としなければいけない。 return ではダメらしい。

function* func1() {
  yield 42;
}

function* func2() {
  yield* func1();
}

ややこしい。。詳しくはこちら

const って上書きできるの?

for await (const record of recordsGenerator) {
    処理
}

constを上書きしてるように見えるが、そうではない。

constは上書きできないので下記は当然エラーになる。

const a = 1;
const a = 2;

が、ここでは下記のような事になるので、スコープが違うのでエラーにならない。

{
   const a=1;
}
{
   const a=1;
}
// constを上書きしているのではなく別モノを定義している。

さいごに

近年のJSはぼくの知ってるJSちゃんじゃなかった。。大人になってた。。

GKEのpodに入るコマンドメモ

Cloud Shellにて、よく忘れるのでメモ。

podを探す(pod一覧)

kubectl get pod

podに入る

kubectl exec -it {pod名} /bin/bash

オプションの意味

  • -i:コンテナへ標準入力(STDIN)を渡す
  • -t:標準入力(STDIN)をTTY(コンソール入力)とする

詳しくはこちら

Googleスライドでプレゼンする時に使えるオススメの技 1選!

こんばんはaomaです!

今日は金曜ですね!このあと勉強会でプレゼンする人もいるのではないでしょうか?

そんなあなたにオススメする技の紹介です!

よく〇〇のオススメ13選とか、△△のオススメ70選とかあったりしますが、多すぎるだろと。2桁いったらもう覚えきれないです。その中から真のオススメに絞ってくれよと。なーんて思ったりするわけです。

なので1選!

Googleスライドでプレゼンする方は是非試してみてください!

オススメ1選!その技とは!!?

プレゼンテーション中にwまたはbを押してみてください。

これで画面が真っ白、または真っ黒になります。

ええ、これだけです。

G Suite アップデート ブログ: Google スライドのプレゼンテーションでの空白画面への切り替えと、自動再生の切り替わり時間オプションの設定

これ地味に良くないですか!?
開始前に真っ黒にしておいて、話し始めてから表紙見せたりとか、話に集中して欲しい時とかに画面真っ黒にして集中させたり。
使い方は無限大です!水陸空無限大!

プレゼンに戻る時は適当なキーを押せば復帰します。 ちなみにwはwhite、bはblackの略ですね!

是非使ってみてくださいー。

【ブログ運営報告】祝!脱ビギナー!

8月は毎日ブログを更新し続けました!

そしたら奥さん、月間3000PV、、超えられましたよ。

ebloger.net

ということで!やりました!ついに脱ビギナー!いえーい!

目標はやっぱり口に出すべきですね!(ブログだったけど)

aoma23.hatenablog.jp

心が折れそうなとき、誰かに見られてる(応援してくれてる)と思えたことで、毎日ブログ更新という目標を達成する事ができました!(クソ記事ばかりですがしかも良記事ばかり!)

ここ最近のアクセス数を載せておきます。

平均100超えてる!マンモスうれCー!

結論

継続はチカラなり。

これからもよろしくお願いしますー。

【目標達成!】8月毎月ブログ更新できたよ!

8月は毎日ブログ更新することが目標でした!

aoma23.hatenablog.jp

アクセス数とか1ヶ月更新し続けてどうなったかは後日報告しますね!

まずは...やりました!頑張りました!すごい!エライ!

ということで褒めてほしいw

UNIQLOよ...

ユニクロよ。

キミに言いたいことがある。

今日キミのところに服を買いに行ったよ。

なのにキミときたらどうだい。

長袖ばかりラインナップして、おまけにパーカーだって!?

確かにファッション業界は季節を先取りしなきゃいけないのかもしれない。

確かに今日は8月の最終日だ。

でもまだまだ暑いんだぜ?

お店に来てる客たちを見てくれよ。みんな半袖だ。

たしかに猛暑日は過ぎたけどきっと来週もずっと半袖で過ごすよ。

夏服を買いに来たのは僕だけじゃないはずだ。 今日も汗だくさ。

なのにキミときたらどうだい。

ダウンジャケットなんて並べるのはよしてくれ!気が狂いそうだよ。

秋冬物で9割埋めるのはまだ早すぎるんじゃないか?

目立たない陳列棚の一角で申し訳ない程度に売られている半袖ポロシャツを見つけたよ。

売れ残りで色のバリエーションもほとんどない。

信じられるかい?まだ夏なんだぜ?

でもこの際わがままなんて言ってられない。

僕は好みの色を手に取ったよ。

XL。。

残り5,6枚すべてXLじゃないか。さすがに大きすぎるよ。

思い出した。キミは去年もそうだったね。

僕がおかしいのかい?

明日着る服を買いに服屋に来るのはおかしいことなのかい?

来年はもう少し在庫用意しといてくれよ。9月も絶対夏服売れるから。

ユニクロさんマジで頼んます。ロッケンロール

I Love Goグッズ作りました!

大好評の I Love シリーズ!
Golang バージョンがついに登場です!
今回は POP な感じ!

Tシャツ

suzuri.jp

I Love GO がいい感じ!

フルグラフィックTシャツ

suzuri.jp

デッカくなっちゃった!

マグカップ

suzuri.jp

スタイ

suzuri.jp

他にもステッカーなどなど取り揃えております!

ぜひご購入あれ!