2020-01-01から1年間の記事一覧
Next.jsでStorageオブジェクトを使う これが参考になります あと、localStorageとかのキー名は1つのファイルにまとめておいたほうが管理的に良い
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()をテストの際に固定出来る(じゃないと意図通りのテスト出来ないからね)
digitalidentity.co.jp このブログのとおりやると出来ます。 このブログの通りChromeのDeveloperToolのSensorsから、いま自分がベルリンやサンフランシスコにいることに出来ちゃいます。 日本時間24時になったら見れなくする、とか日本でデータ入れて日本で…
www.npmjs.com qiita.com これ。date-fnsとはまた別のものを入れる必要があります。 utcToZonedTimeでUTCで入っている時刻をどこかのタイムゾーンの時刻に変換できます。 とある時間データの日本時間当日24時を知りたいとき、utcToZonedTimeでAsia/Tokyoにし…
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>…
[CSS] Firefoxでborderが表示されない場合の対処 | metrograph.jp position: relative; border background-color このかみ合わせがIEやFirefoxで悪い… Firefoxに関して言えば、z-index: -1;を指定してあげることでbackground-colorがborderの下にいってくれ…
qiita.com qiita.com このリンク見ればわかる。mapはよく使うよね。someは初めて知った。
position: fixed; margin: auto; max-width: 1200px; これ、IEで効かずに中央寄せになっちゃう。 stackoverflow.com これが解決策だった。 position: fixed; margin: auto; max-width: 1200px; width: 100% これ。max-widthがIEで意外とバグるイメージ。max-…
qiita.com
まず、正規表現でreplaceします。 lab.syncer.jp 数字以外を/にした上で最後の1文字(日が/になっている)をとります。 '2020年11月14日'.replace(/[^0-9]/g, '/').slice(0, -1) これで返ってくるのが2020/11/14です。 これをformattedDateとかに入れておく…
qiita.com らしい。 ただ、今の開発環境、Amplify関連のファイルはあるがこの記事によると肝心のaws-export.jsがなかった。 調べた感じ、どうやらamplify initとかしないとgenerateはしないっぽい感じがする。 でもすでにAmplify関連のファイルはあって、ini…
storybook.js.org qiita.com decorators: [ Story => ( <div style={{ width: '216px' }}> <Story /> </div> ), ], これでこのコンポーネントのStoryは全てこのdivに包まれる。
index.stories.tsx importする、Metaがいる import { Story, Meta } from '@storybook/react/types-6-0'; descriptionでStorybookの上の方にそのコンポーネントの説明が出る subComponent指定でこのStoryからそのコンポーネントも見れる export default { ti…
React・TypeScriptで書いてHTMLにビルドして〜みたいなことをしているのだが、コンポーネントはStorybookで閲覧できるようにしている。 HTMLにビルドしているのでJSとかは普通にquerySelectorして〜みたいに書くのですが、Storybookは普通にReactで動くから…
ていうか今気づいたのですが、styled-componentではなくstyled-componentsなんですね。s足りてなかった。今の今まで勘違いしていた。今までのタグとカテゴリ直したい。 概要、できることの説明 qiita.com いろいろなパターンでの使い方、書き方の参考になり…
Vimeo埋め込むときってiframe埋め込みじゃないですか。でもJSXでどうやって埋め込むんだろうなーって思ってちょっと調べていたところ、ライブラリがあったんでそれを使うことに。 github.com www.npmjs.com // TODO 仮でvimeoのIDを入れています const video…
知ってますか、リンゴループ。IPhoneを電源入れた際にAppleのロゴが出ますが、その状態が永遠にループする現象です。ソフトウェア的になにかしらバグってしまった際になる現象です。 今回私の場合で言えばSlackがなぜか立ち上がらなくなり、最近iPhone7がな…
pageディレクトリがあったとして、ただその画面はPCでのみ存在し、SPではルートにリダイレクトさせたい。 react-responsiveとrouterでいけます import { useMediaQuery } from 'react-responsive' import Router from 'next/router' export const page = (pr…
基本肯定文のほうが読みやすいので、 !login ? () : (); ではなく login ? () : (); と書く
qiita.com Reactでmapで繰り返しする場合keyを指定する必要がある。 なにも考えずに、よく array.map((item, idx) => { return ( <item key={idx}> のようにやっていました。なんかもう、keyにはindexを入れるものだと。 そしたらレビューでkeyはindexじゃなくて、この場合な</item>…
wrapperかませるだけのComponentを作るとき、自己再帰するのが好きになってきたこういうのpic.twitter.com/ziAdUJtYZ0— nita-san | Blitz.js lover ⚡️ (@nitaking_) 2020年9月27日 こういうの、最近見る。どうやってるのかと思ったら同じく疑問に思った人が…
tech.motoki-watanabe.net とか書いたのですが、逐一入れるのはしんどいので、 qiita.com こういうのがあるらしいと知りました。これでなにかのパッケージ入れたら型定義パッケージも一緒に入ってくれます。いやこれが正解でしたね、逐一入れるのしんどい。 …
知らなかった。他の人が作ったWIPのPull Requestで残タスクをチェックボックスついた状態で書いてあって、え、これなに??と思ったら docs.github.com これでした。 ## 残タスク - [ ] のように書くと となります。すごい。
qiita.com たまたまこれ読んでて気づきました。 そういえばVSCodeでREADME.mdを書いている時に改行でスペース2つ入れるのは知ってるけど効かないなーと。ていうか勝手に消える。まあいっかって思いながら改行は諦めていた。 で、理由はEditorconfigの設定で.…
github.com % curl -sL --proto-redir -all,https https://raw.githubusercontent.com/zplug/installer/master/installer.zsh| zsh これでzplugというプラグインマネージャーを入れる。 powelevel 10kを入れる github.com まず関係するフォントたちを入れる…
chalife.tokyo この記事が参考になります。 諸事情で手元でGitのリポジトリを統合し開発環境も合わせたのですが、build結果が納品した状態と変わらないかが気になり…なんかコマンドで出来ないのかなと思っていたら見つかりました。 これで差分がいくつかでて…
自分用のMacbookはまだOSを最新にしていないのでデフォルトのシェルがbash。でも仕事用のMacbookはCatalinaにしていてシェルはzsh。なんか気持ち悪いので、統一したいと思い自分用のMacbookのシェルをzshにしようと。 qiita.com これのシェルも変えようの部…
www.npmjs.com github.com qiita.com Reactでレスポンシブするときに普通にStyled-Componentで@media〜とか書いてやるのかなーと思っていたらこれよく使うと。便利ですねこれ。画面幅によって要素がそもそも全然違う時とかはこれでコンポーネントごとそもそ…