Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Tsubasa SEKIGUCHI Tsubasa SEKIGUCHI
January 23, 2026
Programming
610
1

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

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

Avatar for Tsubasa SEKIGUCHI

Tsubasa SEKIGUCHI

January 23, 2026

More Decks by Tsubasa SEKIGUCHI

See All by Tsubasa SEKIGUCHI
個人開発基盤をまるごとCloudflareに引っ越して爆速で総合的体験を向上させた話
Avatar for Tsubasa SEKIGUCHI tinykitten
0
190
エンジニアでも捗る デザイナー的思考入門(bitA Edit 新ver)
Avatar for Tsubasa SEKIGUCHI tinykitten
1
500
React Native × GraphQLで TanStack Queryを 選んだ理由
Avatar for Tsubasa SEKIGUCHI tinykitten
0
82
第3木曜LT会 #28
Avatar for Tsubasa SEKIGUCHI tinykitten
0
180
スモールスタートでいこう 自作テレメトリシステム概論
Avatar for Tsubasa SEKIGUCHI tinykitten
0
72
公共交通オープンデータ × モバイルUX 複雑な運行情報を 『直感』に変換する技術
Avatar for Tsubasa SEKIGUCHI tinykitten
0
320
初めてのハッカソンを「紙芝居」で終わらせた話
Avatar for Tsubasa SEKIGUCHI tinykitten
0
83
これならできる！個人開発のすゝめ
Avatar for Tsubasa SEKIGUCHI tinykitten
0
620
今日から使える AI駆動開発のすゝめ
Avatar for Tsubasa SEKIGUCHI tinykitten
1
140

Other Decks in Programming

See All in Programming
Security issues being discussed on Web Platforms
Avatar for petamoriken / 森建 petamoriken
0
950
世界の中心で、AI（App Intents）をさけぶ ー App Intents中心設計の実践ガイド
Avatar for touyou touyou
0
580
Webの地図
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
6
4.5k
AWS Step Functions 大規模並列の壁を越える / jaws-sonic-2026-niigata-step-functions
Avatar for kasacchiful kasacchiful
PRO
1
470
AgentCore CLI で進化した AWS での AI エージェントの作り方 : 必要な機能を必要な時に
Avatar for Takahiro Kubo icoxfog417
PRO
3
350
Vue Fes Japan 2026 タイムテーブル徹底解説
Avatar for 448jp | OKI Yoshiya 448jp
1
210
Snowflakeで業務アプリを作ろう。 Snowflakeのアプリ機能解説&実践ガイド
Avatar for Ayumu Yamaguchi ayumu_yamaguchi
1
280
iOSDC Japan 2026 - Swiftで作って学ぼう！データベース自作入門
Avatar for kaseken (Kent Kaseda) kaseken
2
170
Are APIs Still Relevant in the AI Era?
Avatar for Antoine Bluchet soyuka
0
230
手動確認はもう限界 〜XCUITestでCustom URL Schemeの遷移を起動種別ごとに自動テストする〜 / Testing Custom URL Schemes with XCUITest
Avatar for otouto otouto
0
290
setup-vp GitLab対応の裏側
Avatar for Naoki Haba naokihaba
0
100
AI が書く Go コードの品質を劇的に向上させる Linter: “declscope”
Avatar for mpyw mpyw
0
340

Featured

See All Featured
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.5k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
690
From π to Pie charts
Avatar for Rasagy Sharma rasagy
1
370
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
2.1k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7.9k
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
890
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
3.1k
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
280
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
3
14k
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
810
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
2
430
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
50
10k

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