はじめに
2020年8月1日 Voyage Groupが開催するTreasure2020が始まりました。今年はTreasureはオンライン開催ですが、初日からかなり内容の濃いことをさせていただきました!!!
講義自体の回数は少ないですが、講義がない日でも質問対応していただけるみたいでとても充実した1ヶ月が過ごせそうです!日記がてらTreasure2020で得た知見や面白かったことを書いていこうと思います。
javascriptのプリミティブ型とオブジェクト型
javascriptのデータ型には大きく分けてプリミティブ型とオブジェクト型の2種類があります。
プリミティブ型とは
プリミティブ型とは、簡単に言うとプロパティとメソッドを持たないただのデータのことです。また、プリミティブ型は 値渡し
でオブジェクト型は 参照渡し
になります。
プリミティブ型のデータ型
プリミティブ型の中に7種類のデータ型があります。
- Boolean ・・・ 「true」or 「false」
- Null ・・・ 「null」のみ
- Undefined ・・・ 値を代入していない変数の値は、「undefined」
- Number ・・・ 「整数」、「浮動小数点値」だけでなく「+Infinity」、「-Infinity」、「NaN」などの記号的値も保持している
- BigInt ・・・ 末尾にnがついている「整数」. ただしBigIntは、Numberと同時に使用することはできない
- String ・・・ 「"Hello"」など。ただし、jacascriptの文字列は不変 (immutable) です
- Symbol ・・・ ユニークかつ不変なプリミティブ値で、オブジェクトのプロパティ識別子として使用する
プリミティブラッパーオブジェクト
プリミティブ型として、プロパティやメソッドを呼び出したとき、一時的にラッパーオブジェクトに変換される。
let today = "土曜日"; console.log(today.length); // 3
プリミティブ型のtodayは、プリミティブ型なのでプロパティやメソッドと一切持ちません。しかし、lengthというプロパティを持っているかのような挙動を示します。これは、ラッパーオブジェクトへの自動変換のおかげでプロパティが呼び出されています。
下記のようなラッパーオブジェクトの変換が行われています。
let today = "土曜日"; console.log(new String(today).length); // 3
この自動変換により、todayはlengthプロパティを呼び出すことができます。
function関数とarrow関数
function関数とarrow関数の大きな違いは、thisの関わり方 です。 function関数のthisは実行時に決定されて、arrow関数のthisは定義時に決定される。
<script> this.name = "Daiki"; const obj = { name: "unk", function: function() { console.log(this.name); }, arrow : () => { console.log(this.name); } } obj.function(); // unk obj.arrow(); // Daiki </script>
上記のコードでは、function関数が呼び出されたときのthisはobjを指すので、objの中のnameが出力される。そして、arrow関数で呼び出されたときのthisは、定義時のthisなので2行目のthis.nameの値が出力される.
async / await
ECMAScript2017で追加された非同期の処理をする機能。結構波が来ているらしくおすすめの機能!!
(async function(){ try { const result = await downloadData(); } catch(error) { console.log(error); } })();
上記のように使用することができます。 async が非同期処理をする関数ということを示していて、awaitで非同期処理を結果が帰ってくるまでストップします。
skyway
skywayとは、ビデオ通話やチャット機能を提供してくれるSDKです。導入事例をみてみるとレアジョブ英会話やPixiv スケッチにも導入されているとのこと。とても簡単に実装ができるのですごいと思いました。
上記の画像は実際にiPadとMacでビデオ通話接続をした画像です!すごい!
ビデオ通話をしようしたアプリの拡張
今日作成したビデオ通話アプリを拡張しようというのが今週の課題です。 私が考えている拡張としては、
- reactに書き換える
- typescriptに書き換える
- テキストチャットルームの作成
- 相手から送られてきたコメントをニコニコ動画のようなコメントが右から左に流れるようにする
この機会に、typescriptやreactを触り始めようと思います!
終わりに
Treasure2020初日お疲れ様でした!謎の滋賀県ガチ勢がいてクソ笑った笑 かなり面白そうなメンバーがたくさんいてこれからのTreasure2020が楽しみです。頑張ろー!
参考文献
- トレジャーの講義スライド
- JavaScript のデータ型とデータ構造
- アロー関数
- async function
- skyway サンプルコード