最近学んだ用語や仕様

#仕様

##mobx

スーパークラスとサブクラスのmakeAutoObservable

スーパークラスとサブクラスではmakeAutoObservableを使えず、makeObservableを使用しなければならない。

##react-router
###Redirect
Routeコンポーネントと同等の扱いをしてよい
以下はどのパスにも当てはまらないものは強制的に/homeに遷移する

    <BrowserRouter>
      <Switch>
        <Route exact path="/home" component={Home} />
        <Route exact path="/about" component={About} />

        <Redirect to="/home" />
      </Switch>
    </BrowserRouter>

以下の使い方しかしてなかったからちょっとびっくりした

<Route exact path="/">
  {loggedIn ? <Redirect to="/dashboard" /> : <PublicHomePage />}
</Route>

firebase

配列中にServer.TimeStampを使用できない

まだ対応していないらしい
どうしても時間を保存したい時はString型とかで保存するしかない

functionsでmomentを返せない

値を返す時は必ずJsonにしないといけないので、StringかNumberで返さないといけない。

ちなみに、Date型を返すとThu Sep 02 2021 18:29:22 GMT+0900 (日本標準時)といったように強制的にStringに変換される。

react、JS、TypeScript

###コメントアウトの切り替え
AとBの処理を切り替えて確認したいときに便利
一番上のスラッシュを増やしたり減らしたりするとa、bの処理が切り替えられる

以下はbが代入される

test = () =>{
  let tmp 

   /*
 
     tmp = a

   /*/

     tmp = b

   //*/
 }

以下はaが代入される

test = () =>{
  let tmp 

   //*
 
     tmp = a

   /*/

     tmp = b

   //*/
 }

React.Fragment

コンポーネントの要素を一つにまとめられず、複数返す時にフラグメント (fragment) を使うことで、DOM に余分なノードを追加することなく子要素をまとめることができる。

const TestComponent = () => {
  return ( 
    <React.Fragment>
      <div />
      <div />
      <div />
    </React.Fragment>
  )
}

##オプショナルチェイニング
undefindかもしれないものを?で無理矢理参照すること

let anumal ={ dog:string }
console.log(animal?.cat)

flatMap

配列の深さを1つ下げてくれる。下の例では['1', '2']が返る。
default: return ''が嫌だったので嬉しい。

  const array = [{type:'type1}, {type:'type2'}, {type:'type3'}]

  const testList = array.flatMap((item) => {
      switch (item.type) {
        case 'type 1':
          return '1'
        case 'type2':
          return '2'
        default:
          return []
      }
    })

   console.log(testList)

void 0

undefindをvoid 0と置き換えることができる
例は、上も下もundefiendになる

const test1 = undefined
const test2 = void 0