Remix+CloudflareでWebサイトを作る 27（Hello, remix-typedjson・articleとsectionの違い・Markup Validation Service）
saneatsu
【2024-06-04】loaderがJsonifyObject型を返してくる
remix-typedjson で解決
remix-typedjson を使うと治るっぽい。
v0.3.0からdeferにも対応しているよう。
書いてみる（が型補完効かない）
READMEのコードを書いてみよう。
export async function loader({ request, context }: LoaderFunctionArgs) {
return typedjson(
{ greeting: 'hello', today: new Date() },
)
}
export default function IndexPage() {
const loaderData = useTypedLoaderData<typeof loader>();
}
loaderData.greeting がサジェストされない。
エラー内容。
TypedResponse<never> かもしれないからダメ。
Issuesで検索してみたけど該当無し。
返り値に型付けてみる（失敗）
type LoaderData = {
greeting: string;
today: Date;
};
// 中略
return typedjson<LoaderData>(
こんな感じにしてみたけどダメだった。
エラー出てるけど使えるし一旦これで...。
なんかRemixのバージョン上がったときとかにいい感じになおんないすかね。
追記：コメント内で解決済。
saneatsu
export {
typedjson as json,
redirect,
useTypedActionData as useActionData,
useTypedFetcher as useFetcher,
useTypedLoaderData as useLoaderData,
};
remix-typedjsonのContributorの方のExampleコードなんだけど、このファイルみたく1つのファイルで一括してリネームしてるのでいつか真似しようかな。
全部loaderの中でawaitしちゃってるからdeferになおしていこう。
saneatsu解決した！
経緯
別ページではエラーが発生せずに動いた。
const { users } = useTypedLoaderData<typeof loader>(); で型エラーが出るかどうかは、途中でreturn redirect('/path')の処理を挟んでいるかどうかっぽい。
import { redirect } from "@remix-run/cloudflare";
export async function loader({ request, context }: LoaderFunctionArgs) {
const userId = getUserIdFromSession(request);
if (!userId) {
return redirect("/"); // ここがあるとエラーが出るが、コメントアウトするとエラーが消える
}
const users = getUsers();
return typeddefer({ users });
}
解決方法
redirect()でエラーになるのか...。
そういえば、最初に見つけたZennの記事にremixのredirect()の代わりにremix-typedjsonも同じ名前のredirect()を提供していたような...。
ということでそれでした。
// 不要な記述はは省略している
- import { redirect } from "@remix-run/cloudflare";
+ import { redirect } from "remix-typedjson";
export async function loader({ request, context }: LoaderFunctionArgs) {
const userId = getUserIdFromSession(request);
if (!userId) {
return redirect("/"); // remix-typedjsonが提供しているredirect()を使うとuseTypedLoaderDataでエラーがでない
}
const users = getUsers();
return typeddefer({ users });
}
【2024-05-12】初期描画が遅い原因を探る ここの時結局ライブラリ軽くして初期応答早くしたけど、defer使ったらもっとGood UXになる。
saneatsu
【2024−06-04】articleとsectionの違い
1つ前のScrapの【2024-06-02】h1 タグは1ページに複数でもいいのか の最後に書いたarticleとsectionの使い分け問題調べる。
<article>
使い所
独立したコンテンツのかたまりを示す
具体例
- ニュース記事
- ブログ投稿
- フォーラムの投稿
- コメント
- ユーザーのレビュー
コード
<article>
<h2>タイトル</h2>
<p>テキストが入ります。</p>
</article>
<article>
<h2>タイトル</h2>
<p>テキストが入ります。</p>
</article>
<section>
使い所
文章やコンテンツなどをひとまとまりにする
要素が見出し（<h1> 等）によって「章・節・項」で構成される（必須ではないが推奨されてるっぽい）
具体例
- 書籍の章
- レポートのセクション
- Webページのセクション
- 関連記事
- おすすめ情報
コード
<section>
<h2>タイトル</h2>
<p>テキストが入ります。</p>
</section>
<section>
<h2>タイトル</h2>
<p>テキストが入ります。</p>
</section>
まとめ
ん〜〜〜わからん。
<article> は <section>より使用範囲が狭そうな名前だし<section>だけじゃダメだったのかな？
なんで似たようなの2つ作ったんだ。
この2つが出てきた文脈知りたい。
さぁ、ChatGPT。
まとめるんだ。
わかったようでわかってない。
参考
saneatsu【2024−06-04】わからない時はMarkup Validation Serviceで確認もできる
なるべくわかりやすいように説明したつもりですが、実際にやってみると、「本当にこの使い方であっているの？」と疑問に思うことがあるかと思います。
W3Cが運営する「Markup Validation Service」で確かめましょう。URLはもちろん、htmlファイルやコードを直接入力してもチェックすることが可能です。
なるほど。こういうのがあるのか。
ESLintとかでもある程度チェックしてるけどHTMLの要素チェックしてくれるのありがたい。
他にも色々似た便利サービスありそう。
とりあえずなんとなく <div> ばっか使うのからほんの少しだけ脱却。