f:id:MDaiki:20200801214559j:plain

はじめに

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 スケッチにも導入されているとのこと。とても簡単に実装ができるのですごいと思いました。

f:id:MDaiki:20200802003325p:plain

上記の画像は実際にiPadとMacでビデオ通話接続をした画像です！すごい！

ビデオ通話をしようしたアプリの拡張

今日作成したビデオ通話アプリを拡張しようというのが今週の課題です。私が考えている拡張としては、

reactに書き換える
typescriptに書き換える
テキストチャットルームの作成
相手から送られてきたコメントをニコニコ動画のようなコメントが右から左に流れるようにする

この機会に、typescriptやreactを触り始めようと思います！

終わりに

Treasure2020初日お疲れ様でした！謎の滋賀県ガチ勢がいてクソ笑った笑かなり面白そうなメンバーがたくさんいてこれからのTreasure2020が楽しみです。頑張ろー！

SUPTREE

【インターン体験記】Treasure2020