Life is Really Short, Have Your Life!!

ござ先輩の主に技術的なメモ

IOバウンドがメインなら言語の差は誤差じゃね

シングルスレッドが問題になるとしたら、FastAPIが動いているPythonもGILなのでシングルスレッドじゃねって思ったのがきっかけ。asyncioがNodeにおけるノンブロッキングI/Oと等価だと思う。PythonのGIL、3.13で廃止されるんだってね。そうなると、gunicornのようにワーカープロセスを何本かあげて管理するモデルも、お役御免になるかも。

php-fpmやgunicornのように親のプロセスでサーバ起動して、ワーカープロセスに各々リクエストを処理させることで、シングルスレッドでマルチプロセスで並行処理ってのもわかる。Nodeもやろうと思えば出来るしそういうNPMパッケージがあるけど、expressの上にかぶせたっていう話は聞いたことがない。僕は。さーせん。今の時代はリクエストの並行稼働をコンテナ単位でスケーリングしようとするから、Expressどうこうじゃないのかもしれない。

APサーバでやることって、バックエンドのDBとか、別コンテナとかにビジネスロジックの実行を依頼することが多い。9割がIOバウンド。PythonSQL発行すると速いのにTypeScriptでSQL発行すると遅いって、言語が原因ではないでしょ。

SQLを実行しているのDB。SQL自体は早くてレスポンスが遅いなら、コネクションの問題であって言語の問題じゃない。TCP開けるのにPythonが速くてNodeが遅いって意味がわからん。

BFFは必要悪だと考えていて、全部TSで行う致命的なデメリットはない派。IOバウンド主体の処理を動かすなら、パフォーマンス面のデメリットはあまり感じられない。PDF1000ページのPDF作るなら、マルチプロセスでやらないときつかろう... 帳票生成系はNode弱いです。HeadlessChrome起動してHTML->PDFみたいなことやったけど、遅かった。

とんでもないリクエストをPHPで捌いているグラブルのエンジニアチームが「Webサービスにおけるパフォーマンスにおいて、言語の差は誤差です」って仰ってくれたらそれを額縁に入れて飾るのに・・・!

上記仮説が正しいか検証するには大規模プロダクトのバックエンドを全部書き換えないといけないけど、そんな機会がどこにあるんだよなので、自分が受託して請けた範囲でFull TSでやっていきいき。

RemixでVertical Sliceをやろうぜ

UI⇔Application⇔Domain⇔Storageというレイヤーをガッツリ統合し、機能単位での依存を最低限にすることをVertical Sliceと言うらしい。縦の結合は最大化、横の結合は最小化。知らなかった。理にかなっている。

www.jimmybogard.com

一番型の担保が難しいのがフロントで、結局ブラウザがJavascriptしか動かせない。フロントエンドをReact/Vue等でビルドしたら、Vertical Sliceを実現する選択肢はTypeScriptしかなさそう。RailsはHotwireでサーバーサイド側にフロントを寄せることでFEの責務を最小化し、Vertical Sliceの実現例を見せてくれた。力技だけど。

我はRubyがあまり好きではない。第一言語Javaだった我には、Rubyのコーディングスタイルが合わない。コンパイルによる型安全が必要だ。ブラウザにはJavascriptの実行エンジンしか積まれないので、結局JavaScriptでDOMDOMするしかない。というわけで、フロントを作るならTypeScript一択。

問題はバックエンドだ。フロントにReactを採用した場合、いい感じにサーバーサイドのロジックが書けるFWがなかった。React自身はUIを構築するライブラリなので、通信やバックエンドのことは原則専門外。そこで非同期通信とレンダリングの仕組みを提供しますよ旦那ってことで、Next.jsが台頭したという認識。他になかった気がする。4年ぐらい前だと。React QueryとかSWRとかも、その類のものという認識。

バックエンドのビジネスロジックを書くものではないとなると、FlutterでRetfrofitでRestAPIクライアント作って呼び出すのと、開発体験としては同じ感覚。アプリならわかるけど、バックエンドのコードが書けないなら面倒なだけでは・・・と。

Page Router時代のgetServerSidePropsを使うのではなく、T3 Stackで提唱されていたtRPCでエンドポイントを自動生成してバックエンドを呼び出すのを見て、お!これええやん!になってトライしたけど、簡単なコードしか書いているものしかなくて、頓挫しちゃった。UIの更新が思いの外面倒だったのと、牛刀をもって鶏を割くことへの違和感が拭えなかった。

MPAの頃だったらFormの入力値を任意のオブジェクトに型変換し、ORMに突っ込んでレコードを作るのは秒殺。Next.jsになった瞬間に、Hooksがどうとか面倒になる。シンプルなAPIを組み合わせて複雑なことをやるとしたら品質がバラつく。なんか違うんだよなぁというツギハギ感が拭えずにいてNext.js以外の選択肢を探した時に、出会えたのだ。マイハニー、Remix(React Router)に。

Remixの Loader / Actionの設計は、自分が望んでいたものだった。Vertical Sliceを実現する最も優れた手段に思え、書き方が単純なので苦労しない。Hooksをゴリゴリ書くこともない。パラレルにリクエストを走らせることをなるべく許容しないRemixのモデルは、受け入れやすかった。

Remixだからではないけど、モノレポ構成にも出来る。アプリ向けのAPIサーバ、一般向けのWebサイト、管理者向けのWebサイトが単一のレポジトリで、エンティティ、DBスキーマ、バリデーションロジックを共有することが出来る。強い、強すぎる。どうしてもこれをやりたい。Gospel Stack Remixでググろう。サンプルレポジトリが置いてあるぞ。

Next.jsの優位性はあんまりよくわからない。ルーティングが簡単なことぐらいしか思いつかない。Reactに詳しくなればなるほど優位性が見えるのだろうか。RSCでコンポーネント単位でBFFやれますって言われても、loaderでJSON返してCacheしたら良さそうに思えてしまう。ピーキーすぎるというか、RSCじゃないと生きていけないケースってどれだけあるんやろ。ストリーミング?

むしろ、SSGやるならNext.jsって印象。SSRならRemixなのではと。実際Remixで書いてみると、Vertical Sliceが素直に実現できる。これ以外でWebアプリケーション書きたくないンゴ。

Remixはこれから間違いなく伸びていくので、2025年頃が楽しみ

気が変わった。T3 Stackそのものは推して行くが、Theoさんの推す構成ではない。

aroundthedistance.hatenadiary.jp

フルスタックはReact前提に

RailsフルスタックWebフレームワークの扉が開いた。Rails,Cake.Django等は、MVCのMCがメイン。Vが弱い。Vにテンプレートエンジンを使い、jQueryを使ってインタラクティブなUIを作っていたけど、もうそれが最適な時代ではない。ReactでUIをプログラミングする前提に立つと、ルーティングとrevalidateがルート単位で可能なFWが一番開発生産性が高くなる。可能であれば、ビジネスロジックもそこに入れて、だ。

Theoさん提唱のT3 Stackでは、Next.js + tRPCがコアのコンセプト。UIはNext.jsで書いて、スキーマを決めてtRPCでエンドポイントを生やし、サーバー通信を行ってUIを更新する。

Next.jsが得意な人であればこれでよいと思うが、私はNext.jsの状態管理ですごく手こずった。Next.jsは初学者にはかなり情報量が多いFWであり、Next.jsの決めた開発手法に強く従うことを求められるピーキーさが苦手。前提となる技術が抽象化されていて、なんかよくわからん状態に。

でも、ViewをReactで書いてTypeScriptでPOSTするとサーバーサイドのコードが呼び出されてUIの更新ができるなら、それがベスト。そして、Remixを見つけることが出来た。これが自分の欲しい物だった。

Remix推しポイント

クライアントとサーバーサイドが1つのファイルに書ける

やばくね??? コレが一番驚いた。tRPCのようなAPI定義も不要。フォームをPOSTしたらaction関数が実行される。

import { json } from "@remix-run/node";
import type { ActionFunctionArgs } from "@remix-run/node";
import { Form } from "@remix-run/react";
import { addTodo } from "~/todoStore";

export async function action({ request }: ActionFunctionArgs) {
  const formData = await request.formData();
  const { todo } = Object.fromEntries(formData.entries());
  await addTodo(todo);
  return json({ ok: true });
}

export default function Index() {
  return (
    <Form method="post">
      <label htmlFor="todo">Item name</label>
      <input type="text" name="todo"/>
      <input type="text" name="description"/>
      <button>Add</button>
    </Form>
  );
}

このコードを書けるようになるまでがすごい大変なんだろうけど、開発体験最高に良かった。

Routingの設計が美しい

RemixのコアはVとC。特にC。React Routerによるクライアント側のルーティングに最高のスパイスが乗っている。Nested Routeなどがそれなんだけど、元々の設計として、ルートを起点に遷移するので、所謂サーバーサイドのミドルウェアを作るのが単純化できる。

Hooksをほとんど使わない

Formの実装がほとんど素のHTMLを変わらないのと、useEffectで副作用って所が、基本的に loader関数で代替できるため。 useRefでFormのDOMを触るなどは普通にあるし、チェックボックスに全部つけるみたいなのも、普通に標準のJavaScript書けばいいだけ。そこまでHooksでやるのめんどいだけだろっていう。

ただ、単純なFormでは表現できないようなものも当然ある。予約カレンダーをvisible:hiddenで持ってポップアップして表示する系のやつとか、トグルで開いた時に初めてデータ取ってくる系のやつとか。そういうのは・・・Hooks!

Hooksで処理すべきところと、Remixに委ねていいところが、実に明確で気持ちよい。これなら戦えるって思った。

CSRが出来ないので、Remixを使う時はBFF(実質Node.jsのアプリケーションサーバ)が必要になる。BFFおけないですっていうCSR前提なら、そもそもNext.jsでもなんでもなくて、Reactで書けば良いんじゃないのとも。

残念なことに「フルスタックフレームワーク」だから、バックエンドまできちんと書いたことがないと旨味が少ない。業務系システムはすごいRemixが向いていると思う。100画面ぐらいすぐ作れそう。やっと、自分が目指す形でWebアプリケーションが作れそう!!!嬉しい。

2024.01.15 追記

CSRが出来ないので、Remixを使う時はBFF(実質Node.jsのアプリケーションサーバ)が必要になる。

嘘でーーーす!! RemixがSPAモードのサポートを開始しました!! CSR作りたいなら素のReactよりRemix採用したほうが良いかもよ!!

remix.run

Pythonで小数点の計算をする時、strでキャストすべし...

まじかよ...

dev.classmethod.jp

decimalモジュールに記載がある通り、float型ではなくstr型にすることで回避できます。 ですので、実装時にはstr型にキャストしたほうが良いと思います。

>>> from decimal import Decimal, ROUND_HALF_UP
>>> (Decimal(1750) * Decimal(0.43)).quantize(Decimal("0"), rounding=ROUND_HALF_UP)
Decimal(752)

四捨五入出来てない・・・

>>> from decimal import Decimal, ROUND_HALF_UP
>>> (Decimal(1750) * Decimal(str(0.43))).quantize(Decimal("0"), rounding=ROUND_HALF_UP)
Decimal(753)

YES YES YES!

Dartも同じようなことがあった気がする。Python以外にもfloat to Decimalじゃなくて、str to Decimalにしろってやつ。752.4999999999999999 とかになっちゃうんだよね、前者だと。

Jotai めっちゃ良いじゃん...

nulab.com

  • WeakMapを使っておりコンポーネントツリーがdisposeされるタイミングでGCが走る
  • Mockを作るのが簡単
  • 非同期処理に対応している
  • atomの中でatomを参照でき、リスナーが作れる

WeakMapの話はこの辺に詳しい。フロントエンドあるあるだね。ARCを採用しているiOSのweak/unownedの脈略を感じる。

qiita.com

なんで RecoilはWeakMapを利用しなかったんだろう。そこは気になる。

WordPressの検索機能のカスタマイズ

post_typeを追加したいという要件だった。これで瞬殺。

<?php
function custom_search_query($query) {
    if (!is_admin() && $query->is_search) {
        $query->set('s', $query->get('s'));
        $query->set('post_type',
 ["post", "page", "YOUR_POST_TYPE"]);
    }
}
add_filter('pre_get_posts', 'custom_search_query');

WP_Queryで指定できるものは何でも指定できるようなので、meta_dataやカスタムフィールドなんかも全然行けそー