😽

React 周辺の技術 Stack メモ

に公開
Web
tech

React

JSX を利用可能にするぐらいの認識。
Apache + PHP の PHP に相当するものと理解。

Next.js

ルーター
ルーターとはいってもWebのルーターはL3のことではない。
URLのパスに応じて、どのTypeScriptを実行するか決定するもの。

こいつのいいところは情報がいっぱいある。
ダメなところはVercelというクラウド実行環境がベースになっているので、Node.jsでデプロイしようと思うといろいろあるらしい。
SPAやSSRが作れる。

Remix (React Router)

Remix もルーター
なお、ReactRouterというルーターに統合された。
SPAやSSRが作れる。
FileBaseRouting(ファイル名式)が使える。

Hono

Hono もルーター
これ単体だとただのRouter
なんか早いらしい。
CloudfreaEdgeが実行環境ベースなので、Next.js同様のめんどくささがある。

HonoX

Hono を利用してMPA を作るフレームワーク
とてもFront向けなのでサーバー側で利用するのはしんどさがある。
FileBaseRouting(フォルダ式)が利用でき、便利だがSPAには向かない。というか作れない。

TS の Const について。

ブロックスコープらしい。
つまり、ブロック内で再代入不可なのであって、もう一度呼び出しが発生した際にも再代入が府カナタイプな奴ではない。

Common JS と ECMA Script

CommonJSはNode.jsとかで使われるサーバーサイド向けのJSらしい。
ECMA Script はブラウザ向けのJS

つまり何が言いたいかというと Common JS はブラウザでは動かない。
Mariadbライブラリ等の、サーバーサイド的な動作をする奴はCommon JS でできており、HonoXみたいなブラウザ動作前提のフレームワークで適当にソースを書くと、クライアントサイドでは動きませんと、怒られが発生する。

なお、SSRでは動くのでHonoXのコンパイル時にこれはSSRで使うライブラリだから！！と明示すると動作ができる。

tsx

TS->JS のトラスパイラ
これがないと js を実行する Node でアプリが動かない。

vite

これもトラスパイラ？
ビルドツールと公式では書いてある。

便利そうな感じがあるが、環境変数の利用やTSのBaseUriやPathとの相性が悪く多少手動設定が求められる。

Discussion