以下の内容はhttps://s51517765.hatenadiary.jp/entry/2025/04/14/073000より取得しました。


Hello Cloudflare world

無料でSQLまで使えるクラウドサービス

以下で紹介されていて、まさに「1円も払いたくないマン」である私はとても興味を持っていました。
無料で色々使えそうなので、ハンズオンをトレースしてみたのちSQLが使えるところまで試してみました。
zenn.dev

ハンズオン

以下を参考にHello worldしておきます。
zenn.dev
reffect.co.jp

まずは、環境構築を行いますが、環境構築を要約すると、
・Nodeをインストール
・NodeのCloudflare WorkersのCLIツールであるwranglerをインストール
wranglerにlogin(Cloudflareと紐づけ)
・プロジェクトの作成(wrangler init XXX)
ソースコードの作成
・デプロイ
といった感じになります。

Hello worldであれば小一時間でできるかと思います。

D1というSQLを使ってみる

次の段階として、SQLを使ったwebページを作ってみました。
この先はJavaScriptでWebアプリのデプロイをやったことがあるか、このレベルにないと、
いくら無料で使えるからと言っても「チョットナニイッテイルカワカンネ」となる可能性があります。

私はWebアプリはあまり作ったことがない(過去にはFirebaseで買い物リストを作ったり、N予備校の基礎コースをやったぐらい)のでソースについては生成AIに全力で依存して作成しました。
今回はGoogle AI studioを使いました。
このソースコードは公開しますので、SQLアクセスの基礎的なところまでは、これでできるかと思います。
あとは、これを改造すれば好きなことができるでしょう。
github.com

自分で記述するソースコードとしては、src/index.tspublic/index.htmlwrangler.tomlです。
src/index.tsはTypeScriptですが、JavaScriptしか触ったことがない私ですが、ほぼ問題なく読むことはできる感じです。

しかしこの中で、悩んだのが(結局解決までいって原因はわかるのだが)wrangler.tomlに記述する設定でした。
ここがAIに聞いても全く正解にたどり着けず試行錯誤の末、という感じでした。

まとめ

できあがったものは以下のように、検索ボックスにキーワードを入力すると、DBからそれに一致するものを抽出するものです。

ここでは、SQLSELECTしか使っていませんが、SELECTが使えればどんなSQLも使えるはずなので、CloudflareでSQLを使いこなせたといってもよいでしょう。




以上の内容はhttps://s51517765.hatenadiary.jp/entry/2025/04/14/073000より取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14