発表資料 - 五反田.ts #1

Astroはじめました。 haruki

ABOUT ME 自己紹介 haruki モビルス株式会社 2026新卒 個人開発「GBBinfo」運用中 gbbinfo-jpn.onrender.com

W H AT I R U N GBBinfo を運営しています ヒューマンビートボックス世界大会の非公式情報サイト 大会日程・出場者・ルールを一人でまとめている

WHY 公式サイトが、そもそも存在しない 世界大会なのに、情報の置き場所がなかった。 情報はSNSに散らばり、日本語の一次情報はほぼない それを問題視して、自分で作り始めた 「非公式」だけど、実質そこしかない状態になった

2024 ノーコードから Flask へ ツールの制約が窮屈になって、自分で書くことにした。 2021- ノーコードツール できることの外に出られない 2024- ▶ Flask + Jinja2 自作サイトを公開

AT T H AT T I M E ts？なにそれおいしいの？ まだ大学生で、書けるのは Python だけでした。

SCALE サイトは、すくすく育ちました 本日現在の累計です。 30 万人以上 累計ユーザー数 100 カ国以上 アクセス元の国・地域

I N F RA サーバーは render.com お金を使いたくなかったので、全部無料枠で始めました。 独自ドメインは取らない Render が配るサブドメインをそのまま使う gbbinfo-jpn.onrender.com として運用開始

これが大きな過ちとなります。

2026.04.24 恐ろしいメール プラン体系変更のお知らせ 2026年8月1日から Hobby プランの内容を変更

W H AT ' S C H A N G I N G 無料枠の帯域幅が削られる 100GB ▶ 5GB これまで 2026年8月から

C U R R E N T U SAG E 当時の使用量、最大 50GB／月 実際の使用量 50GB 新しい無料枠 5GB

LO C K E D I N ドメインも、もう動かせない 無料運用を貫いてきたので、高額請求は避けたい。 Google 広告を、すでに今のサブドメインで出稿していた だからドメインを変えるという選択も取りにくい どうあがいても、完全な無料運用は厳しそう

V E N D O R LO C K - I N めちゃくちゃ ベンダーロックイン サーバーも、ドメインも、集客も、 ひとつの無料枠にぶら下がっていた。

DECISION 考えた結果、三つ決めました 全部を無料に戻すのは諦めて、削れるところを削る 01 02 03 Astro へ リファクタリング 画像などの処理を Cloudflare Workers へ それでもかかる分は 素直に払う

ARCHITECTURE 帯域を食う経路だけ、外に出す HTML にはリンクだけ置き、画像はユーザーが直接取得します。 ▶ ユーザー Astro（Render） HTML と、画像へのリンクだけ 100カ国 ▶ Cloudflare Workers 画像そのものを直接配信

FIRST TSX はじめての tsx テンプレートエンジンから、React コンポーネントへ。 BEFORE Flask + Jinja2 HTML を直書きしていた AFTER ▶ Astro + tsx React で柔軟に組めるようになった

COMPONENTS コンポーネントのありがたみを知る 今までは、同じHTMLを何度も書いていました。 共通パーツを一箇所直せば、全ページに反映される ページ単位ではなく、部品単位で考えられるようになった 遠回りだったけれど、とても良い勉強になりました

I18N 多言語対応にも効きました Flask-Babel から Paraglide JS に置き換えています。 翻訳を忘れると、コンパイルが失敗する 型情報を使って、ビルド前にエラーとして気づける 実行時に空文字が出る、という事故がなくなった

CONCLUSION ベンダーロックイン ダメ ゼッタイ おわり