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

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

コレクションとはコレクションとは、値をまとめて管理するオブジェクトのことであるなんとなくで作り、なんとなくで保管する箱ではありませんコードの読みやすさや、保守のしやすさにも繋がります

配列の基礎の形「[]」を使うか、Arrayコンストラクタを作る

readonly 型を宣言する際にreadonlyをつけることにより、破壊的変更が出来ない配列を作ることが出来る

readonly ただ、多次元配列を用意する際は、各配列の宣言時にreadonlyをつける必要がある

as const わざわざreadonlyを付けるのはめんどくさいため、as constというものをつけるこれにより、ネストがあるものでも全てreadonlyがついた状態と同じにできる

as const 型をつける時は、「satisfies」をつけるそのまま型注釈を付けちゃうと、as constが抜ける

Setを使う重複した値を使わない時、Setを使うと明示的例として、何か重複無しの値を宣言するとなった際、宣言ミスを防げる

Setを使うもちろんreadonlyは存在するただ、専用の型がある

Setの注意点「順番」は存在するけど、「順序」は存在しないため、インデックスでアクセスできない (forEachで回すと入れた順に値が出てくる) sortやfilterがないため、毎度配列に直す必要があるそのため、配列操作を沢山行うのであれば、使い方が間違っているか、Setを使うべきではない場合である

余談配列のindexは文字列でもアクセス出来る場面がある typescriptではindexが数値でないとエラーを出してくれるが、以下のように出してくれない時があるこれは、元々JSが配列のindexを内部的に文字列にするため、問題ないためである https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array

余談そのため、for inのようにkeyが文字列で返ってくるものでも受け付ける以下の例だと、変数iはstring型である

余談2 for inは「キーが文字列であるオブジェクトの列挙可能プロパティすべてに対して、継承された列挙可能プロパティも含めて反復処理を行います」とある通り、indexを0から順に調べて出力してくれる訳ではないそのため、以下のような結果が返る場面があるため、使うのは控えた方がよい

前提知識 : 連想配列自動的に割り当てられる数字をキーとして持つかわりに、自由に任意の文字列を割り振ることができる配列連想リストや辞書などとも呼ばれる他言語ではListやHashMapという名前で使われている

オブジェクトの基礎の形「{}」で宣言するキーとバリューが対になったもの(プロパティ)の集合であるプロパティへは、ドット記法とブラケット記法の2パターンのアクセス方法がある

readonly readonlyは存在するただ、ネストが下がると効かなくなるため、全てにかけたい場合はas constを使う

Mapを使う実は連想配列はオブジェクトで作るべきではなく、Mapを使った方がいい時が多いというのも、オブジェクトは連想配列を作るためにあるものではないからである https://qiita.com/raccy/items/816a322fb330193e788b

Mapを使うまた、オブジェクトは連想配列を扱うためとしてはあまり最適化されているわけではないオブジェクトインジェクション攻撃や既定キーがあったりと、オブジェクトの作り方や使い方をきちんと把握してないと危険な場面があるため、考えることが多いそれに比べ、Mapでは上記のような問題はほぼ考えなくてよい https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map

Mapを使うもちろんreadonlyは存在するただ、専用の型がある

Mapの注意点 keyがプリミティブ型じゃないと色々とややこしいなので、ちゃんと型をつけることで解決する

Mapの注意点最初の初期値の用意の仕方がjson形式ではないため、直観的でないそのため、可読性を求めるために、json形式で用意したデータをMapに変えてから使うという方法がある

総括初期宣言して、その後中の値が変更されてほしくないのであれば、readonlyをつける重複した値を使用しない、配列操作をしないのであれば、Setを用いるという選択肢がある連想配列にはオブジェクトを使っても良いが、Mapを使った方が得られる恩恵が大きい

課題課題1 翻訳用オブジェクトを使用しやすい形にしてください欲しいものは、翻訳用オブジェクトと、そのkeyの型です課題2 タイトルのテキストが入った配列を使用しやすい形にしてください欲しいものは、タイトルのテキストが入った配列と、そのタイトルのunionの型です

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

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

akatsuki1910

More Decks by akatsuki1910

Featured

Transcript