かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

npm パッケージの依存しているパッケージを知りたいぞい!

npm パッケージを使っていてライブラリのアップデートが速いものは、新しくなった方法を試そうとしたら依存しているパッケージが変更になっていたりでハマってしまうことが割とあります。 このパッケージが依存してるライブラリ何?が知りたい時のメモ npm v…

Heroku に Flask のアプリをデプロイしたメモ

ちょいちょいと試せる localhost でないサーバーで検証したいことがあったので Flask のアプリを Heroku にデプロイしてみました。(DB無し) Flask アプリの準備 # 仮想環境を作成 $ python -m venv .venv # 仮想環境を実行 $ source .venv/bin/activate # Fl…

TypeScript React JSX.Element にハマる

TypeScript React の FC, VFC という型は過渡期で将来的に変更になる可能性があるからコンポーネントの返す型は JSX.Element にした方が良いという記事を読んで新しいプロジェクトでは JSX.Element を使うようにしたのですが、そこでハマったことのメモ null…

TypeScript React forwardRef の型をがんばる

react-hook-form というライブラリを使ってフォームを作っていたのですが、input や textarea が Atom レベルのコンポーネントになっており、ライブラリの都合で ref を渡す必要があったので forwardRef の型を頑張ったメモ。 "react": "17.0.2" "typescript…

Git リモートブランチのチェックアウトがエラーになる時のメモ

PR確認でリモートのブランチにチェックアウトしようとしたらエラーになってチェックアウトできなくなった。 $ git checkout -b feature/foo origin/feature/foo fatal: 'origin/feature/foo' is not a commit and a branch 'feature/foo' cannot be created …

Sass カラーバリエーションをまるっと作りたい

新規のプロジェクトとか受託案件とかの初期段階でない限りプロジェクトで使うカラーバリエーションをまるっと作る機会ってなさそうだけど機械的にカラーバリエーションを作れる方法ができたから記録として。 カラーバリエーションを生成する // デフォルトの…

npm 上位階層にある node_modules を使った npm-script を実行したい

今回も文章量に対して大変地味なエントリーです! 一つのリポジトリ内にあるディレクトリで別々に sass をコンパイルしなければならないプロジェクトがあり、ディレクトリごとにコンパイルするためのパッケージをインストールするのは管理面でも避けたかった…

チーム開発するリポジトリで node のバージョンを揃えたい

チームでフロントの開発する時に node のバージョンが異なっているとインストールされるパッケージのバージョンとか依存とかで面倒なことになる可能性があるので揃えておくのが良いと思っています。 〇〇のバージョンをインストールしてください。とお願いし…

TypeScrip 配列から値の Union 型を作りたい

const soleil = ['星宮いちご', '霧矢あおい', '紫吹蘭'] みたいな配列から '星宮いちご' | '霧矢あおい' | '紫吹蘭' という配列の値の Union 型が作りたい。 typeof list[number] で配列の値の Union 型が作れる! const soleil = ['星宮いちご', '霧矢あお…

Markdown テーブルの中に | を書きたい

GitHub の PR や issue, wiki といったマークダウンでテーブルの中に Pick<Interface, 'foo' | 'bar'> とか a || b みたいに | を書きたい事が稀にあります。そのまま書くとコードで囲っても | がテーブルの区切りと判断されてしまうので、どうやったらテーブルのコンテンツに | が使え</interface,>…

Flask Flask-JWT-Extended がよしなに返してくれるエラーをカスタマイズしたい

Flask で書かれた API を使ったフロントの開発をしていました。 JWT が unauthorized になった時のエラーだけ他のエラーと形式が異なり、エラーコードも 401 で他のエラーと被ってしまっていて、フロントでエラーハンドリングが面倒なことになってしまってい…

Next.js SVG ファイルを React component として import したい!

create-react-app した React アプリでは何もしなくても SVG ファイルを import { ReactComponent as MySVGImage } from './svg/my-image.svg'; で読み込みコンポーネントとして扱うことができました。 Next.js でも同じことができると思ったのですが、creat…

Git ログのツリーをいい感じに見れるエイリアスを設定したらいい感じになった!

Git で logを見る時に開発中は git log --oneline でほぼ事足りていたのですが、 色々やるようになって tree 表示 GUI だと遅いのでターミナルでいい感じに表示したくなって設定を追加しました。 Git tree をいい感じに表示するエイリアス # 今いるブランチ…

React カスタム hook で返すデフォルト引数のある関数の型をいい感じに書きたい。

React hooks では custom hooks を多用するのですが、custom hook で返す関数がデフォルト引数を取る時の型をいい感じに書きたかったのメモ。 デフォルト引数を取る関数を返す Custom Hook こんな Hooks の型をいい感じに書きたい export const useCount = (…

Next で MSW (Mock Service Worker) を使うのメモ

バックエンドの API がまだできてないプロジェクトで Next のフロントを作成することになり開発中の API との通信に噂の MSW を使ってみることにしました。 Next.js 特有の問題でちょいハマりしたので導入完了したところまでのメモ。 MSW (Mock Service Work…

Mac localhost で開発中のサイトを実機モバイルで確認したい!

iPhone の Safari 対応してない CSS が結構あって開発中に実機で確認したい。ただCSSやJSの挙動の確認で更新とリロードが多くなるから確認環境を作って都度 push するのは too much … 手元の localhost のまま実機確認したんじゃ〜というケースが多々ありま…

Svelte TypeScript ファイルを .svelte テンプレートでインポートしたらエラーになった

Svelte 公式の TypeScript 化したプロジェクトで、.svelte テンプレート内で自作の TypeScript ファイルをインポートしたらコンパイルエラーになってしまいました。 Svelte の TypeScript 化 公式のテンプレート README に書かれているスクリプトを実行した…

Svelte 子コンポーネントのスタイルを親コンポーネントで指定したい

LP作って〜って言われたので、ほな Svelte でやってみよっかな〜と思い Svelte に入門しました。 Svelte はデフォルトでは CSS in JS でスコープのあるスタイルが書けるのですが、共通して使いまわしているコンポーネントのスタイルを親コンポーネントで指定…

Sass の npm パッケージは sass と node-sass どっちを使えばいいの?

フロントエンド開発をしていて Sass の導入に sass になっているものと node-sass になっているものがあってどっち?ってなったのでメモ node-sass は非推奨になっていた Warning: LibSass and Node Sass are deprecated. While they will continue to recei…

nodenv でインストールしたいバージョンが表示されない時にやること

nodenv install --list でインストールしたいバージョンが見当たらない nodenv で新しい node のバージョンをインストーしようとしてインストール可能なリストを表示… $ nodenv install --list インストールしたいバージョンが表示されない… nodenv がアップ…

TypeScript FormData.entries() で取得したフォームデータの型を interface から作成したい

TypeScript な React のフォームを作成していて new FormData() で取得したフォーム内容のデータの型を送信する形式の interface から作成したかったのメモ type Entries = { [K in keyof T]: [K, T[K]]; }[keyof T][]; で Object.entries() したときの型が…

React HTML の HEAD 情報を書き換える react-helmet 使おうとしたら警告が出た件

React で <head> の情報を書き換えるのに react-helmet を使った所 Warning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. という警告が発生してしまいました。 環境 "react": "^17.0.2", "react-helm</head>…

React create-react-app したプロジェクトで paths のエイリアス使おうとして盛大にハマったメモ

create-react-app で作った TypeScript の React アプリで Next.js でやって便利だと感じたパスのエイリアス設定しようとして盛大にハマったのでメモ。 ゴール create-react-app --template teypescript で作った TypeScript の React アプリで /src ディレ…

Next.js root ディレクトリをシンプルにしたい。

Next.js でプロジェクトを作ると root ディレクトリに routing をするための /pages が作られるのでコンポーネントなどのファイルを作ろうとすると root にディレクトリが増えてしまっていって見通しがあまりよろしくないので、react のプロジェクトのように…

Next.js TypeScript + ESLint + Prettier の環境を作るのだ!

何回も作るのに都度調べるのめんどくなってきたからメモ Next.js のプロジェクトを作る 今いるディレクトリにプロジェクトを作る $ npx create-next-app --use-npm . --use-npm オプションつけないと npm が無いって怒られる。忘れがち… TypeScript 化 $ npm…

Next.js next/image で外部URLの画像を使いたいときにやること

プロトタイプを作っているときなど、ダミー画像で画像生成サービスを使うことがあります。 Next.js の組み込みコンポーネント next/image でダミー画像生成サービスの url を src に設定したらエラーになったので忘れないようにメモ。 next/image の src に…

TypeScrip + ESLint + Prettier + Jest のプロジェクト設定にハマる

新規に作ろうとして環境作るまでに盛大にハマったのでメモ 環境 "typescript": "^4.3.5" "eslint": "^7.30.0", "prettier": "^2.3.2", "jest": "^27.0.6", 最終的にできたもの TL:DR; TypeScript + ESLint+ Prettier の環境を作る TypeScript $ npm i --save…

TypeScript 数字をカンマ区切りの文字列に変換したい

以前ゼロパディングで桁数を合わせる方法のメモを書いていましたが、三桁ごとにカンマ区切りのフォーマットもよくやるよな〜と思ったのでやり方のメモ。 こんなの 1234567890 => "1,234,567,890" 1234567890.1235 => "1,234,567,890.1235" -1234567 => "-1,2…

Next.js ブラウザ戻る/進む (History.back / History.forward) の時に常にページトップ (スクロール量をリセット) で表示させたい

Next.js で作ったアプリでブラウザの戻る / 進む ( router.back() History.back() / History.forward() ) が実行された際に、最後に見ていた時のスクロール量が保持されるのでスクロール量を 0 にして遷移させたかったのメモ scrollRestoration オプションを…

Next.js × Chakra UI レスポンシブ値を変更できる useBreakpointValue で複数の値を扱いたい時のハマりどころ

デフォルトだと useBreakpointValue が初回レンダリング時に undefined を返すので、分割代入で値を受け取ろうとしたらエラーになる Chakra UI v1.6.4 以降なら defaultBreakpoint オプションを使う。 それ以前なら useBreakpointValue() || defaultValue で…