青いやつの進捗日記。

べんきょうのしんちょくをかいていきます。

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

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 ? () : (); と書く

Reactでmapで生成するときの、keyに入れる値はindexを出来れば避ける

qiita.com Reactでmapで繰り返しする場合keyを指定する必要がある。 なにも考えずに、よく array.map((item, idx) => { return ( <item key={idx}> のようにやっていました。なんかもう、keyにはindexを入れるものだと。 そしたらレビューでkeyはindexじゃなくて、この場合な</item>…

Twitterに良い感じにコードをツイートする

wrapperかませるだけのComponentを作るとき、自己再帰するのが好きになってきたこういうのpic.twitter.com/ziAdUJtYZ0— nita-san | Blitz.js lover ⚡️ (@nitaking_) 2020年9月27日 こういうの、最近見る。どうやってるのかと思ったら同じく疑問に思った人が…

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

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

GithubのPull requestやIssueではタスクリストを簡易的に作れる

知らなかった。他の人が作ったWIPのPull Requestで残タスクをチェックボックスついた状態で書いてあって、え、これなに??と思ったら docs.github.com これでした。 ## 残タスク - [ ] のように書くと となります。すごい。

VSCodeのeditorconfigとREADMEのmarkdownの衝突について

qiita.com たまたまこれ読んでて気づきました。 そういえばVSCodeでREADME.mdを書いている時に改行でスペース2つ入れるのは知ってるけど効かないなーと。ていうか勝手に消える。まあいっかって思いながら改行は諦めていた。 で、理由はEditorconfigの設定で.…

zshをカスタマイズ。zplugというプラグインマネージャー入れて、powerlevel 10k でなんか色つける

github.com % curl -sL --proto-redir -all,https https://raw.githubusercontent.com/zplug/installer/master/installer.zsh| zsh これでzplugというプラグインマネージャーを入れる。 powelevel 10kを入れる github.com まず関係するフォントたちを入れる…

2つのフォルダの差分をターミナル上に出す

chalife.tokyo この記事が参考になります。 諸事情で手元でGitのリポジトリを統合し開発環境も合わせたのですが、build結果が納品した状態と変わらないかが気になり…なんかコマンドで出来ないのかなと思っていたら見つかりました。 これで差分がいくつかでて…

macでbashからzshにシェルを変える

自分用のMacbookはまだOSを最新にしていないのでデフォルトのシェルがbash。でも仕事用のMacbookはCatalinaにしていてシェルはzsh。なんか気持ち悪いので、統一したいと思い自分用のMacbookのシェルをzshにしようと。 qiita.com これのシェルも変えようの部…

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

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