🏄

Matsuri-tech Frontend Weekly 2024-02-16

社内の開発部メンバーに向けて直近でリリースされたライブラリなどの情報をMatsuri-tech Frontend Weeklyとしてまとめています。内容は実務や趣味で使えそうなものを中心に扱っており、網羅的ではなく偏りがあります。

# React Compiler

2024 年2月15日のReactの記事にて、React Forgetとして知られていたReact Compilerについて触れられていました。React Compilerは既にInstagramの本番環境で動作しているそうです。

React Compilerによって、今までuseMemoやuseCallback、memoなどを利用して手動で行われていたメモ化が自動で最適化されるようになります。またReactコアチームのメンバーは、この記事を紐付けてuseMemo、useCallback、memo、forwardRef、React.lazy、useContext、throw promise、Context.Providerは2024年末までに不要になると語っています。

# typescript-eslint v7

2024年2月12日にtypescript-eslint v7がリリースされました。

Flat configが正式にサポートされています。

Flat config用にtypescript-eslintというパッケージがリリースされました。

pnpm remove @typescript-eslint/parser @typescript-eslint/eslint-plugin
pnpm add typescript-eslint

なお、次のように利用例でtseslint.configという関数が使われていますが、これは別にtypescript-eslint用の設定をしてくれるようなものではないため、実際は利用しなくても大丈夫です。

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';

export default tseslint.config({
	eslint.configs.recommended,
  ...tseslint.configs.recommended,
})

# Hono v4

2024年2月9日にHono v4がリリースされました。

# Static Site Generation

静的ページを書き出してサイトを作る機能がリリースされました。ViteのSSGビルドをするためのプラグイン@hono/vite-ssg も公開されました。

import fs from 'node:fs/promises'
import { toSSG } from 'hono/ssg'
import app from './src/index'

toSSG(app, fs)

# Client Components

テンプレートエンジンの代替としてサーバー側で実行するように設計されていた hono/jsx が、クライアントでも実行できるようになりました。

React と同じコードが Honoで実行できます。

import { useState } from 'hono/jsx'
import { render } from 'hono/jsx/dom'

function Counter() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  )
}
// ...

const root = document.getElementById('root')
render(<App />, root)

ReactのAPIであるuseEffectやstartTransition、useContext、useなども利用できます。

# File-based Routing - HonoX

ViteとHonoをベースとしたフルスタックWeb フレームワーク HonoXがリリースされました。Honoの機能に加えて、Next.jsのようなFile-base RoutingやIslands Architectureなどの機能を利用することが出来ます。