JSer.infoまとめ(2021/11/23)

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