青いやつの進捗日記。

メモとしてべんきょうのしんちょくをかいていきます。あとで自分が検索しやすいもん

TypeScript

TypeScript で使うタグの属性一覧を取得し、propsとして流す

qiita.com type InputProps = JSX.IntrinsicElements['input'] たぶんReact.ComponentPropsWithRefでもいける? ginpen.com で、例えばInputコンポーネントを作っていたとして、inputタグに標準で指定できる属性以外にもpropsあるとすると、コンポーネントへ…

TypeScript、型の条件分岐、色々ある ConditionalTypeとかts-xorってライブラリ使うとか

TypeScriptで型の条件分岐が色々方法あるの知らなかった… 1つ目、特定のPropsに応じて条件分岐させる。 そもそも、TypeScriptにはConditionalTypeっていうのがある qiita.com こういう例で一番出てくるのはボタンコンポーネントがaタグかbuttonタグか、で指…

TypeScriptでArrayをTypeに変換する

qiita.com const englishList = ["aaa", "bbb"] as const type English = typeof englishList[number] こうするとenglishList自体も配列としてfilterとかでチェックするとかに使える ところでtypeof englishList[number]って書き方ってなんなのだろう…ちょっ…

配列から任意の要素を取得する際に配列のindexで指定はしないで条件一致で取得しよう

と、レビューで言われまして。 例えば const List = ['first', 'second', 'third'] ['a','b','c'].map((item, index) => ( <Text>List[index]</Text> ) みたいな。 で、これはなぜか。 理由としては 堅牢性が低い 保守性が低い 静的解析しにくい だと。 つまるところ、ind…

JavaScriptで高さを小数点まで含めて取得したいときに

qiita.com 上記の記事が参考になります。 qiita.com のように、高さ取得したかったらoffsetHeightとか使うと思いますが、これ丸めちゃって整数になるんですね。まあだいたい計算出来れば良いならそれで良いのですが、 tech.motoki-watanabe.net でparseFloat…

getComputedStyleでスタイルを取得し、parseIntやparseFloatで数字にする

qiita.com const elm = document.querySelector('.elm'); const style: CSSStyleDeclaration = window.getComputedStyle(elm); const lineHeight = style.lineHeight; のように、して、実際に計算された後のCSSの値をとってこれます。 こちらの結果は21pxの…

TypeScriptでinstallしたのにパッケージが見つからない…→型定義ファイルを入れる必要

www.npmjs.com これを入れたのにTypescriptで import ScrollBooster from 'scrollbooster' としても、そもそも'scrollbooster'が見つからない。 どうやら、型定義ファイルがなかったから、でした。 qiita.com www.npmjs.com 今回は@typesから入れられたので…

scrollboosterでドラッグで横スクロールする機能を実装。IE11にも対応。

一番ありそうな場面は、 テーブルで、左列がstickyで固定されていて、2列目以降がスクロール出来るやつ。縦に長いテーブルだと横スクロール出来る入力デバイスを持っていないとスクロールバーをクリックしないとスクロール出来ないので操作がかなりめんどく…

Storybookの諸々の書き方まとめ

index.stories.tsx importする、Metaがいる import { Story, Meta } from '@storybook/react/types-6-0'; descriptionでStorybookの上の方にそのコンポーネントの説明が出る subComponent指定でこのStoryからそのコンポーネントも見れる export default { ti…

Next.jsで特定のディレクトリがPCのみの画面だとしたらSPではその画面ないので同等の画面にリダイレクトさせる

pageディレクトリがあったとして、ただその画面はPCでのみ存在し、SPではルートにリダイレクトさせたい。 react-responsiveとrouterでいけます import { useMediaQuery } from 'react-responsive' import Router from 'next/router' export const page = (pr…

基本肯定文のほうが読みやすいので、分岐の際は肯定から書く

基本肯定文のほうが読みやすいので、 !login ? () : (); ではなく login ? () : (); と書く

typesyncを導入していちいち型定義パッケージを入れないで済むようにする

tech.motoki-watanabe.net とか書いたのですが、逐一入れるのはしんどいので、 qiita.com こういうのがあるらしいと知りました。これでなにかのパッケージ入れたら型定義パッケージも一緒に入ってくれます。いやこれが正解でしたね、逐一入れるのしんどい。 …

react-responsiveでレスポンシブ対応。TypeScriptで使う場合は@types/react-responsiveも必要

www.npmjs.com github.com qiita.com Reactでレスポンシブするときに普通にStyled-Componentで@media〜とか書いてやるのかなーと思っていたらこれよく使うと。便利ですねこれ。画面幅によって要素がそもそも全然違う時とかはこれでコンポーネントごとそもそ…

ESLintの標準だとTypeScriptで型定義にもno-unused-varsのエラーが出てしまうのを直す

.eslintrc.jsonに書いてある設定の "extends": ["eslint:recommended"], で、 onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void に対して 'event' is defined but never used とエラーが出ていました。 TypeScriptで型定義でno-unuse-varsのエラーが出ないよう</htmlbuttonelement>…

ReactでTypeScriptで、propsで?で渡しているときに、?だからなんも渡さないと、定義した型 | undefined としてエラーが出る

type Props = { option?: string; } export const foo: React.FC<Props> = props = { return ( <div>{props.options}</div> ) } foo.defaultProps = { img: 'dummy.jpg', }; で、 型 'string | undefined' を型 'string' に割り当てることはできません。 型 'undefined' を型 '</props>…

論理演算子はboolean以外も返す const = AA || BB みたいなの

JavaScriptの「&&」「||」について盛大に勘違いをしていた件 - Qiita const _perview = Number($body.getAttribute('data-perview')) || 'auto'; えっなにこれ、って思ってた。 Number($body.getAttribute('data-perview'))がtrueであればNumber($body.getAt…