Typescript+React+Hono+Cloudflareに移植する
tadokunocloudflare のCLI(wrangler)をインストールして、テンプレートの作成
wrangler init omu-index
ここで、Framework Starter を選択する。
他に、Application Starterなどあるが、詳細不明。
FrameworkはHonoを選ぶ。
移植は、ソースをChatGPTに入れると、変換したものが出てくる。
そのソースを利用するときの問題として、型宣言が見つからないとか、型が定義されていないといった問題が出てくるので、それらを順次片付けていく。
外部のものをインポートしている場合には、それに応じた型をインストールしていく。
npm install @types/react @types/react-dom
npm install @types/leaflet
npm install @supabase/supabase-js
tadokunoなんか、色々やっているうちによく分からなくなってしまったが、現在の環境について
Hono のドキュメント通りに環境を作ってみた。
Cloudflare Pages の環境として作成する。
基本的な知識が乏しいので、少しづつ確認していく。
大きな問題として、OpenStreetMapの表示の部分 leaflet.css がCDNで取ってくることができないようなので、React Leaflet https://react-leaflet.js.org/ を使う。
tadokunoHonoのドキュメントから、環境を作る。
プロジェクトの初期化
mkdir my-app
cd my-app
npm init -y
ソースコードを変換したい
ChatGPTに、HTML＋Javascriptのソースを、Typescript＋React＋Honoに変換するように指示しても上手くいかない。複雑になりすぎる。
環境がおかしい
Reactの基本的なコードが動かない。おそらく環境がぐちゃぐちゃになっていると思われる。
もう一度最初からやり直す。
tadokunoSimplebarのReactでの使い方については、以下の記事を参考
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simplebar@5.3.6/dist/simplebar.min.css"/>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/simplebar@5.3.6/dist/simplebar.min.js"></script>
この2行を移植する。これらはCDNで直接ネットからインポートされているので、これをインストールして参照する形をとる。
React Leafletを使う
tadokunoサーバーサイドのJavascriptを、Typescriptに移植するのは特に問題は無かった。単なる言語仕様の問題なので。
また、HonoのFrameworkを使うことについても、基本的にエントリーポイントなどは全てサーバーサイドでの動作となるため、レンダリングした内容を基本返すということで理解した。
分からないのは、クライアントサイドでReactを使う方法で、Reactで記述したコンポーネントをどうやってHonoの環境で動作させるのかが分からない。
Reactのコンポーネントとして定義した関数が実行するのはどのタイミングなのか。
ここまでの結論としては、非同期処理の部分はReactコンポーネントは使わない。クライアントサイドは静的な部分のみReactコンポーネントとして定義して、それ以外の部分は通常のHTML+Javascriptとして作成する。
そうなると、API呼び出しやデータベースへのアクセスが絡むところは全て普通に書いて、ウインドウやスクロールバーなどUIパーツのみReactコンポーネントになる。
実際には、hono/jsxで書くので、Reactではないな。
tadokunoサーバーサイドのライブラリの構造
types.ts : 型定義