---
title: 発表資料 - 五反田.ts #1
tags: 
author: [Haruki Shimizu](https://docswell.com/user/shumizu418128)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/PJR9ZYKN79.jpg?width=480
description: https://gotanda--ts.connpass.com/event/402821/
published: September 07, 26
canonical: https://docswell.com/s/shumizu418128/5R8M1W-2026-09-07-191521
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/PJR9ZYKN79.jpg)

Astroはじめました。
haruki


# Page. 2

![Page Image](https://bcdn.docswell.com/page/PEXQ9GL8JX.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/3EK9P4LLED.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/L73WXL3675.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/87DK2N4MJG.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/VJPK15MQE8.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/2EVVYP9PEQ.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/57GL9PZQEL.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/4EQYW2LWJP.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/KJ4WKLD171.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/LE1YXLZ57G.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/GEWGNV9WJ2.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/47ZL3492J3.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/YJ6WX3D6JV.jpg)

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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/GJ5MXL35J4.jpg)

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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/9E29XLZG7R.jpg)

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


# Page. 17

![Page Image](https://bcdn.docswell.com/page/D7Y48QRGEM.jpg)

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


# Page. 18

![Page Image](https://bcdn.docswell.com/page/VENYQKD8J8.jpg)

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


# Page. 19

![Page Image](https://bcdn.docswell.com/page/Y79PDVGXE3.jpg)

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


# Page. 20

![Page Image](https://bcdn.docswell.com/page/G78D3PV97D.jpg)

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