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

Storybookの諸々の書き方まとめ

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

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

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

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

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

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

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

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

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

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

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>…

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

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

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