青いやつの進捗日記。

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

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〜とか書いてやるのかなーと思っていたらこれよく使うと。便利ですねこれ。画面幅によって要素がそもそも全然違う時とかはこれでコンポーネントごとそもそ…

Githubのデフォルトのラベルの意味

最近Githubでプロジェクトを進めることが増えたのですが(Bitbucketのほうが今までは多かった) Pull RequestとかIssueとかでラベルがあるのですね。 docs.github.com デフォルトでもあるし、作れたりもする。ラベル貼っておくと意味合いわかりやすい。 ただ…

JavaScriptの非同期処理について、良い記事があった

sbfl.net sbfl.net 恥ずかしながらまだあまり非同期処理を使いこなせず…1回だけ書きましたがなんかうまくいった…という感じなので…次やる時また参考にしたい気持ちです

技術書のPDFをKindleで良い感じに読むためのメモ

りあクトをKindleで読みたい。 booth.pm qiita.com www.amazon.co.jp KindleFireにメールで送って読むのは論文読むときもしていたのだけど、なんと「変換」ってタイトルで送るとKindle形式に変換してくれるだと…! って勢いで書いてるうちに変換できたのだけ…

Googleスプレッドシートのフィルタ機能、画面一覧とかで使う

trinity.jp これみればわかる。(雑

IEではclassList関連で使えない機能が色々ある。

hepokon365.hatenablog.com IEではclassListで使えない機能があります。 代表的なのがtoggleとか。 で、今回引っかかったのが const a = b.classList.value.replace(/-/g, '').split(' '); で、IEで未定義またはNULL参照プロパティ'replace'は取得できません…

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

ESLintとPrettierを同時に良い感じに動かす。今回はESLintからPrettierを呼び出す

プロジェクトにeslintを入れてルールを書いてるプロジェクト、 VSCodeのPrettierの設定と、ESLintの衝突を回避したい。とりあえず文末のセミコロン - 青いやつの進捗日記。 このブログでも書いたが、VSCodeの拡張機能のPrettierが.vscode/settings.jsonに書…

Reactでstyled-componentなプロジェクトに、reset.cssを導入する

最近はじめてstyled componentでCSSを書いています。 で、reset.cssを入れようと思ったのですが、もうそもそもどう入れるのかわからず。 qiita.com を参考にやりました。 入れたresetは github.com こちら。このパッケージをnpmやyarnでインストールして、 _…

VSCodeのPrettierの設定と、ESLintの衝突を回避したい。とりあえず文末のセミコロン

www.atnr.net VSCodeのPrettierの拡張機能の設定の Prettier: Semi Whether to add a semicolon at the end of every line と ESLintのプロジェクトに置いた設定の.eslintrc.jsonの "semi": ["error", "never"], が衝突していた。 とりあえずこれを回避した…

MacのアプリのHyperSwitchが動かなくなった!対処出来た、アクセシビリティから消して追加しなおそう

HyperSwitchって便利アプリがあります。 bahoom.com Command + Tab で起動しているアプリごとの切り替えは出来ますが、そうではなくウィンドウごとの切り替えが出来るようになります。 GoolgeChromeで複数のウィンドウで見てるとか、VSCodeで複数のプロジェ…

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

VSCodeのLiveServerのプロジェクトごとの設定

qiita.com これが参考になります。 LiveServerって、拡張機能で開いているプロジェクトをlocalhostで立ち上げられるやつ。BrowserSync等の環境を用意していなくても気軽に立ち上げられるので便利な場面がたまにあります。 marketplace.visualstudio.com プロ…

Prototype汚染って何…?

JavaScriptをES5で書かざるを得ない場面があり、でもnodelistに対してforEachを使いたいので if (window.NodeList && !NodeList.prototype.forEach) { NodeList.prototype.forEach = Array.prototype.forEach; } と書いて使っている時がありました。 で、先…

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

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

1pxで指定しているのに0.990pxになってしまって、borderがEdgeで表示されていない…どう対策すれば…と思っていたら…ブラウザのズームが90%でした

タイトルで全て。 1pxで指定しているのに0.990pxって表示されて、その結果見えなくなっちゃったりしてて、これどう対策すれば……といろいろ試行錯誤し、調べていたらStackOverFlowにてこの記事が出てきまして stackoverflow.com I also had this issue. In my…

パフォーマンスのために、遅延読み込み・非同期読み込みについて調べる

qiita.com これを読んで。最適化とか表示早くするのが特に必要なものならここらへんのチューニング必要なのかもしれないなーと思い調べてみようと決意。ちなみにこれ書いてる現状はなにも知らない。 JavaScriptの非同期読み込み qiita.com 全然気にしたこと…

CSSで良い感じに調整可能なよみがな、ルビを振る

CSS

qiita.com このQiitaが参考になります。 一応HTMLのタグとして存在はしているものの、そこもline-heightに含まれてしまうが故に見た目として悪い。のでこのQiitaのようにdata属性に読みがな降ってあげるのが正しそう。 アクセシビリティ的に気にする必要ある…

macでOSアップデートでデフォルトのシェルがzshに、nodenvの再設定が必要

nodenvでnodeのバージョン変えようと思ったらnodenvがない的な言われ方して怒られた。 そういえば、macOSがCatalinaになってデフォルトのシェルがbashからzshになっていたのでした。 そもそもnodenv入れるときってどんなことしてたっけなあと思い返してみる…