2021-01-01から1年間の記事一覧
React hooks では custom hooks を多用するのですが、custom hook で返す関数がデフォルト引数を取る時の型をいい感じに書きたかったのメモ。 デフォルト引数を取る関数を返す Custom Hook こんな Hooks の型をいい感じに書きたい export const useCount = (…
バックエンドの API がまだできてないプロジェクトで Next のフロントを作成することになり開発中の API との通信に噂の MSW を使ってみることにしました。 Next.js 特有の問題でちょいハマりしたので導入完了したところまでのメモ。 MSW (Mock Service Work…
iPhone の Safari 対応してない CSS が結構あって開発中に実機で確認したい。ただCSSやJSの挙動の確認で更新とリロードが多くなるから確認環境を作って都度 push するのは too much … 手元の localhost のまま実機確認したんじゃ〜というケースが多々ありま…
Svelte 公式の TypeScript 化したプロジェクトで、.svelte テンプレート内で自作の TypeScript ファイルをインポートしたらコンパイルエラーになってしまいました。 Svelte の TypeScript 化 公式のテンプレート README に書かれているスクリプトを実行した…
LP作って〜って言われたので、ほな Svelte でやってみよっかな〜と思い Svelte に入門しました。 Svelte はデフォルトでは CSS in JS でスコープのあるスタイルが書けるのですが、共通して使いまわしているコンポーネントのスタイルを親コンポーネントで指定…
フロントエンド開発をしていて Sass の導入に sass になっているものと node-sass になっているものがあってどっち？ってなったのでメモ node-sass は非推奨になっていた Warning: LibSass and Node Sass are deprecated. While they will continue to recei…
nodenv install --list でインストールしたいバージョンが見当たらない nodenv で新しい node のバージョンをインストーしようとしてインストール可能なリストを表示… $ nodenv install --list インストールしたいバージョンが表示されない… nodenv がアップ…
TypeScript な React のフォームを作成していて new FormData() で取得したフォーム内容のデータの型を送信する形式の interface から作成したかったのメモ type Entries = { [K in keyof T]: [K, T[K]]; }[keyof T][]; で Object.entries() したときの型が…
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>…
create-react-app で作った TypeScript の React アプリで Next.js でやって便利だと感じたパスのエイリアス設定しようとして盛大にハマったのでメモ。 ゴール create-react-app --template teypescript で作った TypeScript の React アプリで /src ディレ…
Next.js でプロジェクトを作ると root ディレクトリに routing をするための /pages が作られるのでコンポーネントなどのファイルを作ろうとすると root にディレクトリが増えてしまっていって見通しがあまりよろしくないので、react のプロジェクトのように…
何回も作るのに都度調べるのめんどくなってきたからメモ Next.js のプロジェクトを作る 今いるディレクトリにプロジェクトを作る $ npx create-next-app --use-npm . --use-npm オプションつけないと npm が無いって怒られる。忘れがち… TypeScript 化 $ npm…
プロトタイプを作っているときなど、ダミー画像で画像生成サービスを使うことがあります。 Next.js の組み込みコンポーネント next/image でダミー画像生成サービスの url を src に設定したらエラーになったので忘れないようにメモ。 next/image の src に…
新規に作ろうとして環境作るまでに盛大にハマったのでメモ 環境 "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…
以前ゼロパディングで桁数を合わせる方法のメモを書いていましたが、三桁ごとにカンマ区切りのフォーマットもよくやるよな〜と思ったのでやり方のメモ。 こんなの 1234567890 => "1,234,567,890" 1234567890.1235 => "1,234,567,890.1235" -1234567 => "-1,2…
Next.js で作ったアプリでブラウザの戻る / 進む ( router.back() History.back() / History.forward() ) が実行された際に、最後に見ていた時のスクロール量が保持されるのでスクロール量を 0 にして遷移させたかったのメモ scrollRestoration オプションを…
デフォルトだと useBreakpointValue が初回レンダリング時に undefined を返すので、分割代入で値を受け取ろうとしたらエラーになる Chakra UI v1.6.4 以降なら defaultBreakpoint オプションを使う。 それ以前なら useBreakpointValue() || defaultValue で…
Chakra UI の Button コンポーネントの size props は margin や width のような配列形式でレスポンシブ時の値を渡すことができない。 size の値をレスポンシブで変えたい時は `useBreakpointValue()` を使う
オブジェクトがリストになっているデータから、オブジェクト内の id をキーにした Map を作成したい時、id の型を interface から取得したかったのメモ interface interface Iidol { id: number; name: string; tyep: 'cute' | 'cool' | 'sexy' | 'pop'; } 1…
コンポーネントがレンダリング中に別コンポーネントの state を変更しようとすると Warning: Cannot update a component (`Componet`) while rendering a different component が発生する。 ハマった時は、これもアイカツ！を思うと頑張れる!!
プロトタイプをたくさん作る事になりついに Next.js に入信しました。 今回 user id ごとに表示を切り替える Dynamic Routing をしているページで user id が無効な時 404 にリダイレクトさせようとして次のようなコードを作成しました。 /pages/posts/[uid]…
フォームのエラーを作っていて、schema からエラー用のオブジェクトの型を作りたかった。 例えば interface UserInterface { 'name': string; 'age': number; 'image'?: string; } こんな interface や type から下記のようなエラー用のオブジェクトの型を作…
例えば都道府県別の飲食店のリストみたいなものがあって、都道府県別のカテゴリー別で店舗数を出したいみたいな時、都道府県とカテゴリーと複数のカラムでグルーピングする必要があります。 シート名店舗リスト A B C 1 店舗名 都道府県 カテゴリー 2 店舗 A…
GitHub に新しくリポジトリを作って、README に出てくる通りローカルリポジトリの remote に登録して push しようとしたら Repository not found. なエラーになってしまったので解決方法のメモ。 と言っても状況はそれぞれのマシンの ssh の設定とかで変わる…
UTF-8 なのにスプレッドシート変換で日本語が文字化けする時は、ファイルの先頭に日本語の文字を入れると上手くいくかも！
データを突っ込む初期値として [0, 0, 0] とか [[], [], []] みたいな配列を作りたい * n で要素を繰り返した配列が作れる data = [0] * 3 # [0, 0, 0] * n する配列の要素全てが n 回繰り返される data = [1, 2, 3] * 3 # [1, 2, 3, 1, 2, 3, 1, 2, 3] 要素…
SELECT 全体のレコード数, 条件A の総数, 条件B の総数 FROM テーブル WHERE 条件 GROUP BY カラム こんな感じで特定の条件でグループ化したデータをグルーピングされた中で、さらに条件別に数を出したい。 例えばユーザーの購入レコードがあって、ユーザー…
Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement. というエラーに出会ったのでメモ。 環境 React ^17.0.1 エラーが発生した経緯 ロード中と完了後に別のコンポーネントを表示したいとか、…
新しいMacに Git の設定やり直したのを書き忘れてたので思い出しながらメモ。 環境 Intel Mac macOS Big Sur Homebrew インストール済み Git のインストール Xcode の Xcode Command Line Tools をインストールする ターミナルで git --version コマンドを叩…
JavaScript (React) で <input type="datetime-local" /> の値を設定するメモ datetime-local の value は yyyy-MM-ddThh:mm の形で指定する 表示される日付と時刻の書式は実際の value とは異なることです。表示される日付と時刻は、オペレーティングシステムからの報告に従ってユーザーの…
