progLogs 2020/12/20

今日学んだこと

コードのコメントの暗黙の了解

//TODO...修正の必要あり

//FIXME...バグあり

https://wandering-engineer.tech/2018/01/12/program-commentout-xxx/

useStateの型

セッター関数を渡すときに指定した.

ここはVSCodeの補助機能で型が見れるので,あとで「そこ見ろよ」って話であることに気がついた.このVScodeの利点はガンガン使っていきたい.

https://teratail.com/questions/235824

CSSの〇〇以外のセレクタ

:not(selector) {
	// css propety
}

selectorにはいつもどおり,タグ名や.classが来る.

今回は,styled-componentsでの実装だったため,

const StyledBox = styled.div<{ selected: SelectedType }>`
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  i {
    :not(${({ selected }) => "." + selected}) {
      opacity: 0.2;
    }
  }
`

のような実装となった.

styled-componentsの型である<{ selected: SelectedType }>を想起できたのは良き学習に感じた.

注意点としては,上記のコードでは iタグであるもの中で,classNameが.selectedでないものとなる点である.（「iタグの中にある要素の中で」ではないのだ）言葉にすると非常にややこしい...

https://www.sejuku.net/blog/56193

as const

as constというものを始めて知った.これによって型をつけたものは全てreadonlyとなるようだ.

これを使って,配列をunion型にしたのでそれを紹介したい.

const fruits = ["apple", "banana", "cherry"] as const

まずこれで,この配列はreadonlyすなわち書き換え不可となる.

そこで,こうする.

type FruitsType = typeof fruits[number]

これで,

type FruitsType = "apple" | "banana" | "cherry"

と同義になる.

配列を使うときに,型も指定するのはよくあることなので,これはありだと思った.ただ,配列→型の方が実用的に感じたが,その方法はわからない🤤

https://chaika.hatenablog.com/entry/2020/08/28/083000

Storybookにおける画像ファイルなどの読み込みフォルダの設定

Storybookではビルド時に画像などのファイルをどこから読み込むかを決める.絶対パスとするときにどこからなのかを決めるみたいな感じ？.

通常は,

package.jsonに

"storybook": "start-storybook  -s ./public -p 6006"

のように,-s ./publicの記述を加えればOK.ちなみにこのsはstatic-filesのsらしい.（これがわかってなかったのでググるのが大変だった💦）

そして,このstatic-filesに複数のフォルダを設定したいときは,,で区切って

"storybook": "start-storybook  -s ./public,./src -p 6006"

のようにすればOK.スペースで区切ると見せかけて,でしたね.

ググり方がわかったらすぐに公式に書いてあることがわかりました☀️

https://storybook.js.org/docs/react/configure/images-and-assets#serving-static-files-via-storybook

React でSVGをコンポーネント化

import { ReactComponent as Logo } from './logo.svg';

これ廃止になったのですね.VSCodeが親切に教えてくれました.

import Logo from './logo.svg';

これで,svgファイルを判断して,コンポーネントにしてくれるみたい.

楽ちん！

課題に感じたこと

TypeScriptに関して知らないことが多いと思う.本などの内容が列挙された教材で学習した方が良いと思った.

useCallbackとuseReduserを学ばなければ読めないコードがあった.ついにこのときが...（すみませんやります）

所感

自分の作業時間が学びになっているのだろうか？

Chromeのタグを調べっぱなしに蓄積しておいて,帰りの電車で振り返り&まとめをする.これがその答えだ.これは最高の勉強法.平日もやりたい.