JavaScript
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 に…
以前ゼロパディングで桁数を合わせる方法のメモを書いていましたが、三桁ごとにカンマ区切りのフォーマットもよくやるよな〜と思ったのでやり方のメモ。 こんなの 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 から下記のようなエラー用のオブジェクトの型を作…
Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement. というエラーに出会ったのでメモ。 環境 React ^17.0.1 エラーが発生した経緯 ロード中と完了後に別のコンポーネントを表示したいとか、…
JavaScript (React) で <input type="datetime-local" /> の値を設定するメモ datetime-local の value は yyyy-MM-ddThh:mm の形で指定する 表示される日付と時刻の書式は実際の value とは異なることです。表示される日付と時刻は、オペレーティングシステムからの報告に従ってユーザーの…
Cloud Firestore のタイムスタンプ型は firebase.firestore.TImestamp オブジェクトなので Date と思って扱うとエラーになるし、seconds プロパティを new Date() すると別の日付になってしまうので注意！
default exports は好きな名前で import できてしまうから極力 named exports / import にしたほうが良いと教えてもらったので、先に変数が作られてる場合どうするんだろう？と思い調べて見たメモ。 ESModules の named exports exports // foo.ts export co…
Cloud Firestore からデータを取ってこようとしたら次のようなエラーが返ってきた。 { error: { code: 9, details: "The query requires an index. You can create it here: https://console.firebase.google.com/v1/r/project/<projectName>/firestore/indexes?...", mes</projectname>…
久々に Firebase Hosting を使おうとしてしたら firebase init の Project Setup で 既にあるプロジェクトを使おうと思い Use an existing project を選択すると Error: Failed to list Firebase projects. See firebase-debug.log for more info. になって…
開発中は console.log で色々確認したいけど、ESLint で console.log が残ってるとエラーになるようにしてると、特に雑でいい個人開発だと都度消してってのがメンドイので production の時だけ console.log を削除してしまいたかった。 webpack の uglifyjs-…
2020年最後なのでネタ投稿です。 charCodeAt を使って A-Z の文字コードを作る charCodeAt() メソッドは、指定された位置にある UTF-16 コードユニットを表す 0 から 65535 までの整数を返します。 cf. String.prototype.charCodeAt() - JavaScript | MDN 'A…
Object.keys() オブジェクトのキー一覧が配列で取れる const Idols = { 'cute': ['Ichigo', 'Sakura', 'Akari', 'Madoka', 'Maria'], 'cool': ['Aoi', 'Yurika', 'Shion', 'Sumire', 'Seira'], 'sexy': ['Ran', 'Mitsuki', 'Hikari', 'Juri', 'Sora'], 'pop'…
アイカツ！を見ておけば幸せになれるので、 アイカツ！を終わらないコンテンツにするために永遠のデータについて考えてみました。
よくあるオブジェクトが要素のリストでオブジェクトの内容を変更したい。 そして配列は immutable に扱いたい。 interface Idol { id: number; name: string; type: string; unit?: string; }; const data: Idol[] = [ { id: 1, name: 'Hosimiya Ichigo', ty…
ショートカットの案内を表示するのに Mac, iPhone, iPad なら ⌘ それ以外は Ctrl を表示したい。という要望でクラアンと側で OS の判定をしたメモ navigator.userAgent / navigator.platform を使う MDN のドキュメントには navigator.userAgent, navigator.…
久しぶりに webpack 環境を作っていて web-pack-dev-server を動かそうとしてハマったのでメモ package.json "devDependencies": { "webpack": "^5.6.0", "webpack-cli": "^4.2.0", "webpack-dev-server": "^3.11.0" }, Error: Cannot find module 'webpack-…
TypeScript な Express でAPI作ってエラーを返す処理を都度書いているとめんどいので、エラーハンドリングして返すようにしたメモ エラーハンドリングのミドルウェアはルーティングより後に書く 上から順番にルーティングにマッチしていくか見ていって、該当…
要素マージンを含めた width / height を取得するのがちょいと大変だったのでメモ。 html { font-size: 16px; } .div { margin: 0.3rem 0.2rem; // 4.8px 3.2px 相当 border: .3rem solid #000; // 4.8px 相当 width: 6.2rem; // 99.2px 相当 height: 6.2rem…
