青いやつの進捗日記。

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

Reactで数字入ってるかを条件に&&で出し分けようとすると、0が描画される→なぜなら0はfalseだから…!

どういう状況の話かと言うと、 num && ( <Text>{list[num]}</Text> ) のように、型がnumberの変数numが入っていたらlist[num]を描画したい、という状況。 で、numに1とか入ったら意図通り<Text>list[1]</Text>が描画されるのだけど、numに0が入ると、<Text>list[0]</Text>ではなく、なぜか0だけ描画…

yupでnumberだけどnullも許す感じでバリデーションしたいとき

cpoint-lab.co.jp React Hook Formとyupでフォームにバリデーションかけてます。 で、問題は、inputのtypeがnumberで、yupではnumber or nullでバリデーションかけたいとき。 yup.number() yup.number().nullable() だと、数字はいけますが、nullが入りませ…

【メモ】仮想スクロールってものがある

web.dev VirtualScrollはパフォーマンスめちゃ上がるらしい。けどなんだ仮想スクロールって。 qiita.com つまり、見えている範囲だけスクロールイベントを起こす、のようなものらしい

removeEventListenerでscrollイベントを消す

qiita.com teratail.com scrollイベントを動かしたいが、目的達成したら消したい。で、また目的が出来たら動かしたい。 const closeFunc = () => { isOpened = false; // NOTE: scrollイベントを消す target.removeEventListener("scroll", closeFunc); }; t…

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

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

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

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

【メモ】そのページのHTML5の見出しレベルなど、文書構造を簡単に確認できるChrome拡張機能

nelog.jp

IEでoverflowとpadding-bottomを同時に使うとpadding効かない

note.com neos21.net tamagondq10.blogspot.com タイトル通り、 overflow: scroll と padding-bottom を同時に使うとpadding-bottomが効かないらしい。 なので、display: blockで高さある疑似要素をafterとかで入れてあげると解決する。

地味にどうやるのか知らなかった、inputのinputmodeをメモっておく

developer.mozilla.org

JSDocでコメントを書く メモ

たいへんお恥ずかしながら。JSDocってつい最近知りました。 ReactでPropsの説明を type Props = { /** 名前 */ name: string } みたいに書くとコンポーネント使う際にPropsに説明が出たりします。あとStorybookでコンポーネントのPropsの説明が出る。 っての…

React.Fragmentにkeyを入れる必要がある場面がある

qiita.com わざわざ<React.Fragment>って書く場面あるのかなとか思って全て<>にしてました。ありました。 mapとかでreturnする際にkeyを指定しておく必要ありますが、一番外側に必要なので、その際にFragmentが一番外の場合は<>だとkeyを指定できないので <React.Fragment key={hoge}> </React.Fragment> のようにする必要</react.fragment>…

Next.jsでlocalStorageを使う

Next.jsでStorageオブジェクトを使う これが参考になります あと、localStorageとかのキー名は1つのファイルにまとめておいたほうが管理的に良い

ReactでSNSシェア機能をreact-shareというライブラリで

yurufuwa-tech.hatenablog.com ReactでSNSのシェアをしたいときに、 github.com これが便利。 TwitterのツイートボタンとかはHTMLだとTwitterのなんかそれ用のページでぽちぽちするとタグを生成できるのでそれを埋め込むだけだが、ReactだとTwitter用のJSを…

数字を丸めていく

qiita.com 普通はMath.roundだけでOK。

時間関係の関数のテスト まとめメモ

t-wada.hatenablog.jp qiita.com そもそもの書き方 sbfl.net Date.now = jest.fn(() => 1000000000) みたいにするとDate.now()をテストの際に固定出来る(じゃないと意図通りのテスト出来ないからね)

タイムゾーンまわりの検証のために、GoogleChromeで位置情報を偽装して検証する

digitalidentity.co.jp このブログのとおりやると出来ます。 このブログの通りChromeのDeveloperToolのSensorsから、いま自分がベルリンやサンフランシスコにいることに出来ちゃいます。 日本時間24時になったら見れなくする、とか日本でデータ入れて日本で…

date-fns-tzでタイムゾーンを扱う

www.npmjs.com qiita.com これ。date-fnsとはまた別のものを入れる必要があります。 utcToZonedTimeでUTCで入っている時刻をどこかのタイムゾーンの時刻に変換できます。 とある時間データの日本時間当日24時を知りたいとき、utcToZonedTimeでAsia/Tokyoにし…

styled-componentsでforwardedAsを使ってコンポーネント拡張した上でタグを変更する

qiita.com <EventButton forwardedAs="p"> dummydummy </EventButton> const EventButton = styled(Button)` width: 320px; height: 53px; ` ↑pages/page.tsx export const Button = (props: Props, as: any) => { <Container forwardedAs={as} > const Container = styled.button`` ↑Button.tsx これで、buttonタグで作られているforw</container>…

Firefoxでbackground-colorとborderが同時に指定してあるtdでborderが消える

[CSS] Firefoxでborderが表示されない場合の対処 | metrograph.jp position: relative; border background-color このかみ合わせがIEやFirefoxで悪い… Firefoxに関して言えば、z-index: -1;を指定してあげることでbackground-colorがborderの下にいってくれ…

配列の操作する系 mapとかfilterとか

qiita.com qiita.com このリンク見ればわかる。mapはよく使うよね。someは初めて知った。

IEでposition: fixedでmargin: autoでmax-width中央寄せにならない

position: fixed; margin: auto; max-width: 1200px; これ、IEで効かずに中央寄せになっちゃう。 stackoverflow.com これが解決策だった。 position: fixed; margin: auto; max-width: 1200px; width: 100% これ。max-widthがIEで意外とバグるイメージ。max-…

Amplify + Cognito + React ならこのQiita見ておけば良いっぽい

qiita.com

日付をstringで〜年〜月〜日でもらい、それを良い感じにDate型にして、date-fnsでその日を過ぎたか判定

まず、正規表現でreplaceします。 lab.syncer.jp 数字以外を/にした上で最後の1文字(日が/になっている)をとります。 '2020年11月14日'.replace(/[^0-9]/g, '/').slice(0, -1) これで返ってくるのが2020/11/14です。 これをformattedDateとかに入れておく…

AmplifyでNo Credentialsとか言われちゃう時

qiita.com らしい。 ただ、今の開発環境、Amplify関連のファイルはあるがこの記事によると肝心のaws-export.jsがなかった。 調べた感じ、どうやらamplify initとかしないとgenerateはしないっぽい感じがする。 でもすでにAmplify関連のファイルはあって、ini…

Storybookでdecolaterを使い、各Storyを共通のもので包む

storybook.js.org qiita.com decorators: [ Story => ( <div style={{ width: '216px' }}> <Story /> </div> ), ], これでこのコンポーネントのStoryは全てこのdivに包まれる。

Storybookの諸々の書き方まとめ

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

useEffectを調べた。ライフサイクル扱えるようになるのね。

React・TypeScriptで書いてHTMLにビルドして〜みたいなことをしているのだが、コンポーネントはStorybookで閲覧できるようにしている。 HTMLにビルドしているのでJSとかは普通にquerySelectorして〜みたいに書くのですが、Storybookは普通にReactで動くから…

styled-componentsの何回も見返したい参考記事【もはや自分用メモです】

ていうか今気づいたのですが、styled-componentではなくstyled-componentsなんですね。s足りてなかった。今の今まで勘違いしていた。今までのタグとカテゴリ直したい。 概要、できることの説明 qiita.com いろいろなパターンでの使い方、書き方の参考になり…

reactでVimeoを埋め込む

Vimeo埋め込むときってiframe埋め込みじゃないですか。でもJSXでどうやって埋め込むんだろうなーって思ってちょっと調べていたところ、ライブラリがあったんでそれを使うことに。 github.com www.npmjs.com // TODO 仮でvimeoのIDを入れています const video…

iPhone歴8年目して、初のリンゴループ。

知ってますか、リンゴループ。IPhoneを電源入れた際にAppleのロゴが出ますが、その状態が永遠にループする現象です。ソフトウェア的になにかしらバグってしまった際になる現象です。 今回私の場合で言えばSlackがなぜか立ち上がらなくなり、最近iPhone7がな…