冷房壊れて2週間
2020-08-05
こんにちは
ハローエブリワン!
先日この記事書いてたら割と書き進めたところで下書き保存せずにブラウザ閉じて書いたもの全部消えちゃったので今日になって泣く泣く書き直してます。(他にも泣きたいことはたくさんあるのですが今回は割愛)
冷房が壊れて2週間経ちますが、だいぶきついのでそろそろ大家さんに相談しようと思ってます。
さて、今日の記事はVOYAGE GROUPのサマーインターンのTreasureに参加してるので初日を終えての学んだことと感想を簡単にですがまとめたいと思います。
ではいく!
初日は講義
初日はJavaSctiptの講義がありました。
午前中は歴史や発展の背景について。
午後は実際にコードに触れて理解を深めました。
フロントエンド得意ですとか言い張ってここまでやってきたんですが、見事にボコボコにされました。笑笑
あとはインターン生のレベルが高すぎてこれからが心配です。
講義内容について
具体的には
について学びました。それぞれについて少しずつ掘っていきます。
JavaScriptはちょっと癖のある言語なので頑張って**理解**しないと死ぬということを**理解**しました。あと、僕JavaScript理解してると思ってたんだけどな。。。
プリミティブ型とオブジェクト型
JavaSctiptにはプリミティブ型とオブジェクト型というものがあります。
分類については以下の表にまとめました。
| 型 | 種類 |
| ---- | ---- |
| プリミティブ | string, int(Bidint), boolean, undefined, symbole |
| オブジェクト | その他 |
他の言語だとデータ構造として操作する系がオブジェクト型、その他がプリミティブ型といったところでしょうか。
JavaScriptではそこの違いで代入の挙動が変わってきます。
具体的には、プリミティブ型は値渡し、オブジェクト型は参照渡しになります。
例として以下のようなコードがあります。
// プリミティブ型
var a = 'hogehoge'
var b = a // 代入
b = 'fugafuga'
console.log(a) // => hogehoge (aの値は変わらない)
console.log(b) // => fugafuga
// オブジェクト型
var a = [1,2,3,4,5]
var b = a
b[0] = 10
console.log(a) // => [10,2,3,4,5]
console.log(b) // => [10,2,3,4,5] (bも一緒に変わる)
以上のようにプリミティブ型では代入は値渡しなので直接値が代入されますが、オブジェクト型では参照渡しになるので注意が必要です。
また、プリミティブ型にはラッパーオブジェクトという概念が存在していて、プリミティブ型からプロパティやメソッドにアクセスする場合、一時的にラッパーオブジェクトに変換されます。プリミティブ型はプロパティやメソッドを持たないのですが、ラッパーオブジェクトのおかげであたかもプロパティやメソッドがあるかのような振る舞いをしてくれます。
let name = 'takurinton'
console.log(name.length) // => 10
本来lengthというメソッドは持っていないのですが、なぜかlengthが正しく実行されている。これがラッパーオブジェクトなのです。
これは内部的にはこんな感じで実行されています。
let name = 'takurinton'
console.log(new String(name).length) // => 10
これは意識せずに使えるので便利ですね。分散システムの透過性みたい(黙れ)
event loop
JavaScriptはタスクをひたすら無限ループでこなす言語です。
JavaScriptはWebのフロントでよく使われてるのを見ますが、DOMの更新もJavaScriptのタスクの一つとなっています。
ここで質問、Twitterにいるツヨツヨの人たちは知ってると思うけど、スタックとキューはご存知でしょうか?([QueueQueue車](https://twitter.com/ryusei_ishika/status/1283221811598028803)のツイートが流行りましたね、あれ大好きです)
JavaSctiptのタスクはキューに入れられて実行待ちの状態になります。そのキューからスタックを生成して処理をしていきます。
ここで、実際にブラウザでリアルタイムで更新されるコードを書いていきます。
現在のこのコードでは、1回1回レンダリングをしてくれるわけではないので更新をしてくれません。
ちなみに、loop()という関数の中で再帰的呼び出しているloop()は直接スタックに追加されていきます。一番外側(?)loop()1つのタスクですので。
event loop
0