JavaScript関連のことを調べてみた2022年06月13日

[Javascript] awaitは役に立つ

# 今さらだけどawait

**await**は2017年あたりに出てきた機能で新しくもないですが、私は新しい機能が出ても大体の環境にサポートされるまで触らない**意識低い系エンジニア**なので、IEで使えない async/awaitとPromiseは存在を知りつつもスルーしてきたのですが、そろそろIEを切ってもいいと思えたので、解禁してみました。

# 本記事の内容

この記事は**await**がどんな時に役立つかを紹介するものです。
Promiseのことは知っている前提の記事なので、Promiseの使い方を知らない人は、まずそちらを調べてから読むのがおすすめです。

# awaitの使い方

awaitの使い方について簡単におさらいです。
awaitはasyncをつけた非同期関数の中で使え、Promiseを返す関数呼び出しの前に書きます。

“`javascript
async function main() {
await asyncFunction();
}
“`

本記事でawaitを使っているコードは、明示していなくても全て非同期関数内の前提です。

# aw

【JavaScript 関数ドリル】中級編のfromPairs関数の実装アウトプット

## fromPairs関数の課題内容

\_.fromPairs関数を自分で実装する課題。
https://lodash.com/docs/4.17.15#fromPairs

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。

【中級】fromPairs関数の実装

## 課題に取り組む前の状態

– 解答を見ずにできそうだと思った。

## 課題に取り組んだ後の状態

– 解答例は変数への代入が美しく実装されていたので、是非今後は真似したい。

## fromPairs関数の実装コード（答えを見る前）

“`javascript
function fromPairs(pairs) {
const PairedObj = {};

for (let i = 0; i < pairs.length; i++) { PairedObj[pairs[i][0]] = pairs[i][1]; } return PairedObj; } const re

Teachable Machineでラーメン二郎の写真を学習させてみた

## ヤサイマシマシニンニクカラメ
皆さん、ラーメン二郎はお好きでしょうか？
ラーメン二郎は圧倒的なボリュームで人気のラーメン屋さんですね。
自分は以前の記事でも書いたようにラーメンが大好きなのですが、ラーメン二郎はたまに行くレベルです。

https://qiita.com/KendoLab/items/8558095ddcd7e415f20c

でもたまに無性に食べたくなり、食べに行ったら大体冒頭のコールで頼み楽しんでいます。
そんなラーメン二郎ですが、周りにもファンが多く、先日とある同僚が別の同僚に二郎の写真を見せたところ、それがどの店なのか言い当てるというシーンに出くわしました。

そこでふと思いつきました。
**「二郎の写真を機械学習させたらどの店か見分けることができるようになるのか？」**
という訳で、実際にやってみました！

## Teachable Machineで学習させてみた
自分で機械学習の環境を用意するのは大変なので、今回は**Teachable Machine**を使ってみました！
（Teachable Machineについて、詳しくは以下の記事をご覧ください

【機械学習】”にんじん”みじん切りチェックアプリ～Chopped Carrots Challenge?～

## 料理アプリのプロトタイプ作り
料理に関するアプリを作ろうと思っており、
その一環として「料理の過程をチェックする」アプリのプロトタイプを作ってみることにした。

アプリをそれっぽく作ってみたい人は参考になるかも。

料理の工程をチェックするアプリを作ろうと思っているので、今回は、”にんじん”のみじん切りがきちんと出来ているかということに焦点を絞って作ってみる。
名付けて、『Chopped Carrots Challenge』。

↓前に投稿した、LINE×TeachableMachineで作ったアプリ風のもの↓

https://qiita.com/long66tail/items/5a91304007cfa383fdb6

↓料理コーチングアプリ的なものが欲しいと書いたnote記事↓

https://note.com/long66tail/n/n0393de56f5dd

## 動作イメージ

人参のみじん切りチェック！
的なアプリを試作
精度はイマイチだけど、やろうとしてることは出来てる?

にんじんのみじん切りが手元にないので、画像でお試し。#料理#プロトタイプ#protoout pic.twitter.com/znpeXdP2AV

— longtail@美味しい料理を作って料理アプリも作りたい人 (@longtail6666) June 9, 2022

## 完成作品
ぜひ挑戦してみてください?

https://

学び直しのJS ~ var・let・const編 ~

Reactの勉強にあたってES6の仕様をしっかりと理解しておかないと後々つまづきそうなので、
学び直しの第一弾としてやっていこうかなと思います！

## 早見表
| | 再宣言 | 再代入 | スコープ | ホイスティング |
| :—: | :—-: | :—-: | :——: | :————: |
| let | × | ○ | ブロック | × |
| const | × | × | ブロック | × |
| var | ○ | ○ | 関数 | undefined |

基本的には`const`を使って、再代入が必要な時は`let`を使う。
`var`は**非推奨**。

## 再宣言
JavaScriptでは変数を宣言する際に`let` `const`または`var`を変数名の前に付けるのですが,
同じ変数名を使って宣言し直すことを**再宣言**といいます。

varを使って例にするとこ

256文字で書かれたとんでもコード「A City in a Bottle ?」をざっくり読んでみる

# はじめに
以下のツイートをご存知でしょうか。

A City in a Bottle ?

<canvas style=width:99% id=c onclick=setInterval('for(c.width=w=99,++t,i=6e3;i–;c.getContext`2d`.fillRect(i%w,i/w|0,1-d*Z/w+s,1))for(a=i%w/50-1,s=b=1-i/4e3,X=t,Y=Z=d=1;++Z<w&(Y<6-(32<Z&27<X%w&&X/9^Z/8)*8%46||d|(s=(X&Y&Z)%3/Z,a=b=1,d=Z/w));Y-=b)X+=a',t=9)> pic.twitter.com/N3WElPqtMY

— Frank Force ? (@KilledByAPixel) April 22, 2022

以下のたった256文字のコードで街並みの映像が流れるというハイレベルなHTML[^1]です。
“`html:A City in a Bottle

“`

コードゴルフを普段行っているわけではない私からすると、このコードは訳分かんなすぎて面白かったので、一般プログラマなりにできる範囲で読んでみることにしま

【JavaScript/TypeScript】?.・?・|

最近使い始めたTypeScriptで気になったものがあったので調べました。TypeScript固有かと思ったらJavaScriptでも使えるものもありました。

# ?.　オプショナルチェーン
※TypeScript/JavaScriptで使用可能

プロパティの最後に付与することで、プロパティ参照を安全にできる。
目的のオブジェクト・プロパティにアクセスする前に暗黙的に`null` または `undefined`かどうかを確認する。(値が`null`か`undefined`なら`undefined`が返る)

特にネストしたオブジェクト・プロパティの`null`・`undefined`チェックをif文よりも簡潔に書くことができる。
“`ts
interface Contact {
emailAddress: string,
phoneNumber: string,
}

interface Person {
id: number,
name: string,
contact: Contact
}

const person: Person = undefine

【Vue.js】v-forで:keyの指定がなぜ必要なのか

## ぶっちゃけ
keyを指定せずにv-for を使おうとするとエラーになるので、あまり深く理解せずおまじないだと思っていても問題ありません。

## 結論
効率的に描画(レンダリング)をするため。

## 詳細
配列にはインデックスという「どの要素が配列の何番目にあるのかを表すための数字」があるので、このインデックスがあれば”:key”を指定する必要が無いのでは?と思うかもしれません。
しかし実際はこのインデックスだけでは、描画するときにかなり非効率になってしまいます。

v-forは配列の内容を動的に描画するための仕組みなので、配列を並べ替えたり、値を変えたりしてもちゃんと描画をしてくれます。インデックスだけの場合、配列の変更が一部であっても、配列の全要素を再描画することになるためかなり非効率な処理となってしまいます。

そのためインデックスとは別に、”:key”に各要素を一意に表す数字を指定することで、配列の一部変更があった場合、その箇所だけ再描画する様になります。
ちなみに、”:key”は全てのコンポーネントで定義されているため自分で定義する必要はありません。

“`vue

【Vue.js】createdとmountedの違いについて簡単に解説

# はじめに
Vue.jsで開発していて画面の初期表示はmountedを使うと良いと教えてもらったがよくわからなかったので、調べた内容を備忘録としてここに残しておきます。
また、createdとmountedの違いについても少し調べたため簡単にまとめておきます。
もし間違っている箇所があれば優しく指摘していただけると幸いです。

# 結論
– created：Vueインスタンスが生成され、データが初期化された後に実行される
　　　　（DOMはまだ生成されていないので、DOM操作はできない）
– mounted：VueインスタンスがDOMにマウントされた後に実行される
　　　　（DOM生成された後なのでDOM操作ができる）

## created
ここではまだDOMが生成されていないため、DOM操作はまだできない。
ただし、データは初期化されているため、リアクティブデータやメソッド等を参照することは可能。

“`vuejs:App.vue

```

export default って　vueの仕様なのかと思って調べてみたら、JavaScriptの仕様でした。
[MDN Export](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/export)