TrainLCD v10リリース記念 TrainLCDを支える技術

React Tokyo #13 にて発表させていただいたスライドです。

Transcript

1. Fullstack Creator Tsubasa SEKIGUCHI TrainLCD v10リリース記念 TrainLCDを支える技術 TrainLCD v10 Release Celebration: Technologies Powering TrainLCD 2026.01.23 | React Tokyo #13
2. 2 2026.01.23 | React Tokyo #13 関口 翼 Tsubasa SEKIGUCHI aka TinyKitten / きったん 個人開発者 / クリエイター
3. TinyKitten タイニーキトゥン aka 関口 翼 個人開発者 / クリエイター 3 2026.01.23 | React Tokyo #13
4. TrainLCD スマートフォンで使えるトレインビジョン 鉄道での移動中に迷いそうな時、 電車から降りれるか不安な時 きっとあなたの役に立つはずです 日本全国の鉄道路線で使える 新感覚ナビゲーションアプリ 4 2026.01.23 | React Tokyo #13
5. 5 2026.01.23 | React Tokyo #13 縦画面対応 ストアリリース を含む TrainLCD v10アップデート
 しました！ 縦画面表示・プリセット機能 より高速になった経路検索をぜひお手元で お使いください。
6. TrainLCDとは？ What is TrainLCD? 6 2026.01.23 | React Tokyo #13
7. デザイン・実装・インフラ・運用… 一貫してほぼ一人で 開発をしています 割と使われています 毎日400〜500人くらいの ユーザーが使用しています ニッチな分野だからこそ 公共性の高いデザインを心がけて 設計されています 7 2026.01.23 | React Tokyo #13 移動をちょっと 便利にするアプリ 作っているのは
8. バックエンドの技術スタックは APIは基本的にRust BFFにはNode.jsを使用 SNSシェア用画像等 デザインの制作は Figmaを使用 フロントエンドの技術スタックは 基本的にReact Native 一部機能にSwift/Kotlinを使用 8 2026.01.23 | React Tokyo #13 React Nativeなど モダンな技術や ライブラリを採用 技術スタックについて
9. 9 2026.01.23 | React Tokyo #13 完全趣味なので 無料で配信中 TrainLCDを使ってみよう https://trainlcd.app
10. 10 2026.01.23 | React Tokyo #13 v10の設計思想 Design philosophy of v10
11. 11 2026.01.23 | React Tokyo #13 操作系の画面を 縦向き画面に 対応しました 直近の大改革(v10) 旧操作系画面 「直感的に使い方がわからない」が大きな課題だった
12. 12 操作系の画面を 縦向き画面に 対応しました 直近の大改革(v10) 2026.01.23 | React Tokyo #13 新操作系画面 デザインを一新、スマホが縦向きでも使用可能に
13. 13 操作系画面のデザインを再設計 デザインを先にFigmaで整理し、 縦画面対応UIを円滑に実装 パフォーマンスの最適化 BFFを別に用意し、上流をキャッシュ gRPC APIをGraphQL APIに変換 もはや鉄道以外にも対応 東京都交通局が提供している GTFSの都営バスデータでバス対応 2026.01.23 | React Tokyo #13 今回の改修の 工夫ポイント 縦画面対応の哲学
14. 14 2026.01.23 | React Tokyo #13 v10の実装ポイント Implementation episode of v10
15. 2026.01.23 | React Tokyo #13 15 最初にFigmaで デザインを 整理したことにより、 開発が円滑化 ポイント1 デザインファースト
16. 2026.01.23 | React Tokyo #13 16 Figma Makeで React.jsで動く プロトタイプも 作れる Figmaで良かった点 React.jsのコードを自然言語で生成できる
17. 過度の期待はしないほうがいいかも？ 2026.01.23 | React Tokyo #13 17 Figma Makeや Figma MCPは 現状、再現度が あまり高くない Figmaで苦労した点
18. 2026.01.23 | React Tokyo #13 18 BFFを新規開発し、 KVでキャッシュ、 gRPC APIを GraphQL APIに変換 ポイント2 パフォーマンス最適化 Cloudflare Workers + KVを使っています
19. 2026.01.23 | React Tokyo #13 19 エッジでの処理 高パフォーマンス 待機コストゼロ Cloudflareで良かった点 パフォーマンスが高く、安価に使える
20. 2026.01.23 | React Tokyo #13 20 CPU時間制限 ベンダロックイン Wrangler設定の
 管理 Cloudflareで苦労した点 制限が厳格なため、重い処理には不向き
21. TrainLCD v10の都営バス対応(β) 2026.01.23 | React Tokyo #13 21 CC BY 4.0のGTFS 都営バスデータを 試験的に導入 ポイント3 バス対応への挑戦
22. 2026.01.23 | React Tokyo #13 22 簡単にDL可能 事業者公式データ GTFSで良かった点 標準的なバス情報フォーマット
23. 実際の停車順と違うバグが残っている 2026.01.23 | React Tokyo #13 23 データが非線形 バックエンド必須 必要なデータが
 存在しないケース GTFSで苦労した点
24. 2026.01.23 | React Tokyo #13 まとめ Conclusion 24
25. デザインの強みを感じよう UI/UXは重要！ 個人開発でも意識しよう 0.4秒の壁(ドハディの閾値) ユーザーは案外待ちません パフォーマンスも意識しよう チャレンジしよう 新しい視点や発想は、 マンネリ化から個人開発を救う 2026.01.23 | React Tokyo #13 25 生成AIで誰でも アプリを作れる時代 価値と発想で 生き抜いていこう まとめ
26. ご清聴ありがとうございました！ Thank you for listening! 2026.01.23 | React Tokyo #13 Fullstack Creator Tsubasa SEKIGUCHI