JavaScriptについて勉強していく
winnie279JavaScriptに入門する
winnie279変数を結合して文字列にする場合はテンプレートリテラルを使う。
+で結合するとバグの温床になる。
winnie279JavaScriptは3つの値を一度に比較できないため、300 >= 200 >= 50を実行するとfalseとなる。
300 >= 200が評価されてtrueになり、true >= 50が評価されてfalseになるため。
winnie279式の評価
'1' + 1 // '11'
''.length && true // 0 評価値はbooleanじゃない（なぜ？）
キーワード引数
func({a: 1, b: 2, c: 3})
if文の代わりの書き方
Reactでよくやる
- let hoge;
- if (condition) {
- hoge = 'value';
- }
+ const hoge = condition && 'value';
他にもこれは使えそう（賛否はある）
- let player;
- if (name) {
- player = name;
- } else{
- player = 'anonymous';
- }
+ const player = name || 'anonymous';
（少し改変）
winnie279RedwoodJS
Documents
Summary
RedwoodJSはフルスタックフレームワークの1つ。フロントエンドはReact、バックエンドはNode.jsで実装する。また、フロントエンドとバックエンド間のやり取りはGraphQLで行われる。
Routing
import { Router, Route } from '@redwoodjs/router'
const Routes = () => {
return (
<Router>
<Route path="/" page={HomePage} name="home" />
<Route notfound page={NotFoundPage} />
</Router>
)
}
export default Routes
Scaffold
GraphQLのスキーマを元に、テンプレートとなる「骨組み」を自動生成する。
yarn redwood generate scaffold hoge
主に以下のテンプレートを自動生成する。
web/src/Routes.jsxweb/src/pages/Hogeweb/src/components/Hogeapi/src/graphql/hoges.sdl.jsxapi/src/services/hoges/hoges.js
Page
URLごとのUI。ページ。
データフェッチの前にレンダリングできる。
Cell
データのやり取りを担う。 async/await を使うような処理はここに書く。
yarn redwood generate cell Hoge
以下のテンプレートを自動生成する。
/web/src/components/HogesCell/HogesCell.jsx
Component
データフェッチの後にレンダリングするUI（Cellは除く）。
winnie279Remix
フルスタックフレームワーク。React Router V6のNestedRoutingをサポート。SSGの機能は備えていない。
winnie279
winnie279Remix can prefetch everything in parallel before the user clicks a link.
Zero loading states. Zero skeleton UI. Zero jank.
It looks like traditional HTML forms but enables fully dynamic web experiences you’re after.
export default function NewInvoice() {
return (
<Form method="post">
<input type="text" name="company" />
<input type="text" name="amount" />
<button type="submit">Create</button>
</Form>
);
}
export async function action({ request }) {
const body = await request.formData();
const invoice = await createInvoice(body);
return redirect(`/invoices/${invoice.id}`);
}
公式ページおもしろい。
winnie279loader functions are the backend "API" for their component, and it's already wired up for you through useLoaderData.
dynamic routing
The part of the filename attached to the $ becomes a named key on the params object that comes into your loader. This is how we’ll look up our blog post.
app/routes/posts.$slug.tsx
import type { LoaderArgs } from "@remix-run/node";
import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
export const loader = async ({ params }: LoaderArgs) => {
return json({ slug: params.slug });
};
export default function PostSlug() {
const { slug } = useLoaderData<typeof loader>();
return (
<main className="mx-auto max-w-4xl">
<h1 className="my-6 border-b-2 text-center text-3xl">
Some Post: {slug}
</h1>
</main>
);
}
Nested Routesが分かりやすい。
最後の説明も良い。
winnie279React Router
Client Side Routing
Client side routing allows your app to update the URL from a link click without making another request for another document from the server.
