JavaScript
何回も作るのに都度調べるのめんどくなってきたからメモ 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…
JavaScript の parseInt, parseFloat は 10px とか単位がある文字列でもいい感じに数値変換して返してくれますが、空文字列 "" の時 NaN が返されます。その後の計算でエラーになることも多いので NaN の代わりに 0 を返したいときのメモ 空文字や undefined…
CSS Modules とゎ？ ざっくりいうと CSS は全部が global 定義なので、コンポーネントごとにクラス名をハッシュ化したモジュールにしてしまってスタイルの影響範囲をコンポーネントの中に閉じ込めようというもの e.g. /* style.css */ .logo { color: red; }…
CSS を webpack で扱う時にセットで使いがちな css-loader と style-loader の違いをちゃんと理解してなかったので CSS Modules について考えるに当たって調べ直したのでメモ webpack の loader の処理順 e.g. SCSS を webpack で扱う際の設定 // webpack.co…
SPA の速度カイゼンやパッケージやファイルのサイズを可視化してみたい事が多々あります。 今回は create-react-app で作成したアプリでバンドルサイズを可視化してみたのメモ。 create-react-app v3 以降は --stats オプションが廃止され webpack bundle an…
SCSS のブレイクポイントの変数を React で使いたかったけど読み込ませるのにハマったのでメモ。 要件 SCSS は styled コンポーネントではなく、別途CSSにコンパイルしている SCSS の一部の変数を TypeScript な React で読み込んで使いたい SCSS の変数を J…
