そのコレクション合ってる?

Transcript

1. そのコレクション合ってる? らり
2. コレクションとは コレクションとは、値をまとめて管理するオブジェクトのことである なんとなくで作り、なんとなくで保管する箱ではありません コードの読みやすさや、保守のしやすさにも繋がります
3. 配列の基礎の形 「[]」を使うか、Arrayコンストラクタを作る
4. readonly 型を宣言する際にreadonlyをつけることにより、破壊的変更が出来ない配列を作ること が出来る
5. readonly ただ、多次元配列を用意する際は、各配列の宣言時にreadonlyをつける必要がある
6. as const わざわざreadonlyを付けるのはめんどくさいため、as constというものをつける これにより、ネストがあるものでも全てreadonlyがついた状態と同じにできる
7. as const 型をつける時は、「satisfies」をつける そのまま型注釈を付けちゃうと、as constが抜ける
8. Setを使う 重複した値を使わない時、Setを使うと明示的 例として、何か重複無しの値を宣言するとなった際、宣言ミスを防げる
9. Setを使う もちろんreadonlyは存在する ただ、専用の型がある
10. Setの注意点 「順番」は存在するけど、「順序」は存在しないため、インデックスでアクセスできない (forEachで回すと入れた順に値が出てくる) sortやfilterがないため、毎度配列に直す必要がある そのため、配列操作を沢山行うのであれば、使い方が間違っているか、Setを使うべきで はない場合である
11. 余談 配列のindexは文字列でもアクセス出来る場面がある typescriptではindexが数値でないとエラーを出してくれるが、以下のように出してくれな い時がある これは、元々JSが配列のindexを内部的に文字列にするため、問題ないためである https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array
12. 余談 そのため、for inのようにkeyが文字列で返ってくるものでも受け付ける 以下の例だと、変数iはstring型である
13. 余談2 for inは「キーが文字列であるオブジェクトの列挙可能プロパティすべてに対して、継承さ れた列挙可能プロパティも含めて反復処理を行います」とある通り、indexを0から順に 調べて出力してくれる訳ではない そのため、以下のような結果が返る場面があるため、使うのは控えた方がよい
14. 前提知識 : 連想配列 自動的に割り当てられる数字をキーとして持つかわりに、自由に任意の文字列を割り振 ることができる配列 連想リストや辞書などとも呼ばれる 他言語ではListやHashMapという名前で使われている
15. オブジェクトの基礎の形 「{}」で宣言する キーとバリューが対になったもの(プロパティ)の集合である プロパティへは、ドット記法とブラケット記法の2パターンのアクセス方法がある
16. readonly readonlyは存在する ただ、ネストが下がると効かなくなるため、全てにかけたい場合はas constを使う
17. Mapを使う 実は連想配列はオブジェクトで作るべきではなく、Mapを使った方がいい時が多い というのも、オブジェクトは連想配列を作るためにあるものではないからである https://qiita.com/raccy/items/816a322fb330193e788b
18. Mapを使う また、オブジェクトは連想配列を扱うためとしてはあまり最適化されているわけではない オブジェクトインジェクション攻撃や既定キーがあったりと、オブジェクトの作り方や使い 方をきちんと把握してないと危険な場面があるため、考えることが多い それに比べ、Mapでは上記のような問題はほぼ考えなくてよい https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map
19. Mapを使う もちろんreadonlyは存在する ただ、専用の型がある
20. Mapの注意点 keyがプリミティブ型じゃないと色々とややこしい なので、ちゃんと型をつけることで解決する
21. Mapの注意点 最初の初期値の用意の仕方がjson形式ではないため、直観的でない そのため、可読性を求めるために、json形式で用意したデータをMapに変えてから使う という方法がある
22. 総括 初期宣言して、その後中の値が変更されてほしくないのであれば、readonlyをつける 重複した値を使用しない、配列操作をしないのであれば、Setを用いるという選択肢があ る 連想配列にはオブジェクトを使っても良いが、Mapを使った方が得られる恩恵が大きい
23. 課題 課題1 翻訳用オブジェクトを使用しやすい形にしてください 欲しいものは、翻訳用オブジェクトと、そのkeyの型です 課題2 タイトルのテキストが入った配列を使用しやすい形にしてください 欲しいものは、タイトルのテキストが入った配列と、そのタイトルのunionの型です