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

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はめちゃくちゃ面白そうなので、今後もちょっと学習して使いこなしたい。

 

その後

https://zenn.dev/gunners6518/scraps/d4a27f5ccee111

Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
Click outside to hide the compare bar
Compare
Compare ×
Let's Compare! Continue shopping