フロントエンド
なんとなく存在は知っていた「より高度に利用してない変数やファイルを検知してくれる」knipをさわってみたので備忘録まで。 knip knip.dev レポートしてくれる内容は以下のようです knip.dev 実際に試してみた knip.dev // src/main.ts import { usedFuncti…
Next.jsのドキュメントでは書かれていないのですが、現在職場にあるコードでは以下のようにCSPの設定がされていました。 気になったこと const csp = ` default-src 'self'; script-src 'self' 'unsafe-eval' https://cdnjs.cloudflare.com; `; ... <meta httpEquiv="Content-Security-Policy" content={csp} /> この設</meta>…
諸事情でどうしてもローカルでのgitのpre-commitのタイミングでformatをかけたり、ということができなかったのでCIでformatがちゃんとかかってるかのチェックをするものを用意していました。 そのとき気づかず以下のようなことをしていました - name: Lint r…
基本的に昨今ですと各種フロントエンドのライブラリやフレームワークが用意している router のようなものの push などでurlやpathの遷移などを行うと思いますが、所要で window.location.href を使わなければいけず、ちょっと挙動が気になったので調べてみま…
ESLintのV9を入れる機会があったのでいろいろ触ってみました。その時の備忘録です。 install eslint.org 結構PrettierやVSCodeの設定などとセットで入れてしまう関係であんまり公式ドキュメントに目を通さないことが多いのですが、改めて見てみました。 esli…
結論: 変わらない import { useQuery, useQueryClient } from "@tanstack/react-query"; import ky from "ky"; import { useState } from "react"; const CURRENT_TIME = "CURRENT_TIME"; const Page = () => { const [enabled, setEnabled] = useState(true…
ちょっと所要でNext.jsが後追いで読み込むjsファイルではなく、最初にレンダリングされるhtmlのresponseにインラインのjsが入っており、そこで処理されてほしいなと思ったのでちょっと試してみました。 結論 NextのScriptで書く。書くときには strategy="bef…
いろいろlazyまわりとかでコードを読んでいたらふとたどり着いたので書き残しておく。 みたバージョンは v18.3.1です。 github.com 認識が間違っていなければこちらのコードが実行されているのかなと思います github.com fiberの理解が浅いので詳細は省きま…
walk-diagonally.hatenablog.com こちらのブログを書いているときに見つけた内容です。 こちらも同様に v14.2.5で見ていきます。 github.com dynamic を利用する際に ssr のフラグを確認し、いわゆる { ssr: false } だった場合は noSSR の関数をreturnして…
nextjs.org タイトルにある通り、Next.jsのdynamicの内部のどこでReact.lazyを使っているかみてみました。 v14.2.5のコードを見てみました。 app-dynamicにいた app-dynamic.tsx github.com app router利用時の dynamic のfunctionはここから実行されるのだ…
所要でexport defaultとnamed exportについて調べる機会があったので、改めて見てみたらふーんとなったので備忘録まで。 わたしの記憶はこのあたりで止まっていた 以下の記事を全肯定、全否定とかの意図は全くなく、参考にさせていただきつつここで記憶が止…
なんだか昔にも似たような内容を調査した気がしますが、忘れてしまったので備忘録的に記載します。 JSのtry-catch-finallyにおいて、内部でreturnを書いた場合にどうなるかを確認しました。 function hoge() { try { return "try" throw new Error("error!!!…
なんとなく存在はちらっと知っていたのですが、あまりちゃんと触ったことがなかったのでいろいろ試してみました。 AbortController developer.mozilla.org 一度リクエストが開始されると、基本的にそのリクエストを止めることは難しいです。例えば、UI上でそ…
デフォルト引数(Default Parameters)の挙動がちょっと気になったのでいろいろ触ってみた typescriptbook.jp www.typescripttutorial.net const hoge = (a: string, b = false) => { console.log(`a: ${a}, b: ${b}`) } hoge("a") hoge("a", false) hoge("a",…
基本的にuseQueryを記載した場合、即時でdataの取得が行われると思いますが、たまに「画面描画のタイミングでは不要で、buttonをclickしたタイミングでデータ取得したい」といった需要があるかと思います。 そういったときにどうしたらよいかというのを確認…
React18で正式に出てきたuseTransitionを今更ながら触ってみました。 import { NextPage } from "next"; import Head from "next/head"; import { useState, useTransition } from "react"; type Tabs = "simple" | "delayed"; const Home: NextPage = () =>…
grid layoutをいい加減覚えなければと思い続け、今回重い腰を少しだけあげてgridにチャレンジしてみました。 といってもまずはtableと比較から初めてみました。 <body> <h1>List Example</h1> <h2>Table</h2> <style> body { font-family: Arial, sans-serif; background-color: #f4f4f4; ma</body>…
幅が決まってるものに対してellipsisをかけることはシンプルかと思います。 しかし親要素のサイズが可変で、そこに合わせて子要素がellipsisをかけたい場合どうするのかなとちょっと把握したくなったので試してみた。 結論としては親要素の幅をちゃんと指定…
TanStack Queryでは、データを再取得したいときに queryKey が更新されるとデータも更新される仕組みになっています。 しかし、外部でmutateなどを使ってデータを変更したあと、そのデータを再度更新する方法について知りたかったので、以下の実験を行いまし…
すべてはここに書いているので焼き直しです。 chuckwebtips.hatenablog.com table-layout: fixedを使う場合 そもそも table-layout: fixed を知らかなったのでびっくり。 <table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>LongLongLongLongLongLongLongLongLongLongLong Name</td> <td>Smi</td></tr></table>…
いつぞやから navigator.clipboard というAPIが生えてることを今更認識したので試してみた <body> <div> <div> <input type="text" id="input"> </div> <div> <button id="button">copy</button> </div> </div> </body> <script> const input = document.getElementById('input'); const button = document.getElementById('button'); button.addEventList…
知ってる人からすると当たり前すぎる内容ですが、ちょっと気になったので動作確認してみた。 tl;dr 振る舞いはここに書いてあるとおりです。 tkdodo.eu 試してたこと 前提 Nextjs (pages router) TanStack Query ky バージョン等は割愛 画面としては以下のよ…
colgroup というHTMLタグがあることを急に把握したのでちょっと動作確認をしてみた。 参考にしたページはこちら blog.hubspot.com 書いてみたコードは以下 <table> <colgroup> <col> <col style="width: 80%;"> <col> <col> </colgroup> <tr> <th>id</th> <th>name</th> <th>email</th> <th colspan="2">Telephone</th> </tr> <tr> <td>1</td> <td>John Doe</td> <td>example@example…</td></tr></table>
