JSer.infoはフロント周りの最新情報を週刊でポストしてくれるブログである。
フロントエンドエンジニアとしては是非抑えたい内容が盛り沢山なので、今週から内容を自分なりに目を通して書き連ねていく。
元記事
https://jser.info/2021/11/23/typescript-4.5-react-18-beta-remix-v1/
今週はTypeScriptやReactのアップデートだけでもボリュームがあるのに、Remixが正式リリースされるという大変な情報量の週だった。
特にRemixはボリュームがあるので、年末年始など使って把握したいフレームワークである。
TypeScript 4.5
TypeScript 4.5がリリースされたので、追加内容をさらっておく。
Announcing TypeScript 4.5
「Awaited」型の導入
Awaited型はawait,async関数の操作をモデル化する目的で使う。
例)
// A = string
type A = Awaited<Promise<string>>;
// B = number
type B = Awaited<Promise<Promise<number>>>;
// C = boolean | number
type C = Awaited<boolean | Promise<number>>;
node_modules から lib を追加可能に
libを用いることで、標準ライブラリの差し替えが楽になる。
https://zenn.dev/uhyo/articles/better-typescript-lib-v2
文字列リテラル型の代わりにテンプレートリテラル型を使うことができるようになった
export interface Success {
type: `${string}Success`;
body: string;
}
export interface Error {
type: `${string}Error`;
message: string;
}
export function handler(r: Success | Error) {
// Successで終わる文字列型
if (r.type === "HttpSuccess") {
// rはSuccess型
let token = r.body;
}
}
まだ用途が定まらず理解が難しい。
–module es2022 の追加
es2022がコンパイルオプションとして使えるようになったらしい。 es2022の仕様がまず分かっていないからキャッチアップかなあ。。
参考記事
https://zenn.dev/aumy/scraps/06e8d775b047f2
その他、諸々あるけどよく分らん。
React 1.8
参考
https://qiita.com/uhyo/items/bbc22022fe846fd2b763
https://github.com/reactwg/react-18/discussions/112
https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html
https://zenn.dev/uhyo/articles/react-18-alpha-essentials
Remixとは
https://remix.run/
作者がReact Routerと同じらしい。 系統も似てる。 チュートリアル見た感じ、動的なディレクトリ作成が特徴のように感じる。
インプット
公式はざっと読んだだけ。 チュートリアルではblog的なものを作る感じ。
クラスメソッドの記事読んで見る。 https://dev.classmethod.jp/articles/qucikstart-remix-framework/
RemixはReactをベースとした他のすでに人気のあるフレームワークのNext.jsやGatsbyとは路線が異なり、SSGなど予めデータを用意して高速化を測る手法はとらず、サーバーサイドレンダリングやブラウザのFetchAPIを活用してデータをやり取りするといった手法をとっているようです。
へえ。なるほど。
よく分らん…
次は思想的なまとめ記事。
読んでて楽しい。
https://zenn.dev/kaa_a_zu/articles/fbd06ca2cc3b86
チュートリアル進めてみた
-
quick start
- 開発者ブログを作る
- Routing(静的,動的,param渡し),loader,actionの基礎
-
joke app
- crud appに近い
- 要件
- ログイン/ログアウト状態
- 一覧/詳細画面
- 新規登録機能
- 使用技術
- フロント:Remix
- バック:prisma
- DB:sqLite
認証
データの準備
prisma/schema.prisma
userテーブルを追加。 prisma側でテーブル追加。jokes,usersの紐づきも実装。
prisma/seed.ts
実際のデータを格納。
実際の作業ログはコチラ
https://zenn.dev/gunners6518/scraps/67a78ced9753be
以上。Remixはめちゃくちゃ面白そうなので、今後もちょっと学習して使いこなしたい。