【水曜のDX道場】個人開発アプリで学ぶWebアプリの仕組み #1 全体像編

個人開発アプリで学ぶWebアプリの仕組み #1 全体像編 2026/11/11 @DXDojo Shinnosuke Oka (eXpresser) / Studio UXM

はじめに：なぜアプリの仕組みの話？ AIに頼めば、アプリが作れる時代になった • ChatGPT、Claude、Codexなどに 「こんなアプリを作って」と頼むだけで、動くものができる • 現在は、「バイブコーディング」（雰囲気でAIに作らせる開発）でも、 それなりに動くものができる時代になっている では、仕組みを知る必要はもうない？ • それってベストプラクティスなの？ • 動いているように見えても、データはどこに保存されている？ • 不具合が出たとき、どこを直せばいい？ • セキュリティの穴に気づける？ 2026/11/11 @ DX Dojo (C) Shinnosuke Oka / eXpresser / Studio UXM 2 / 37

はじめに：なぜアプリの仕組みの話？ むしろ、仕組みを知っている人が強くなる • AIが書くのは「部品」。 どこに何を置き、どうつなぐかを決めるのは人間。 • 仕組みを知っているほど、AIへの頼み方が具体的になり、 狙いどおりのものが出てくる • エンジニアでなくても、 AIやベンダーが作ったものを「判断する」立場になる だから、今は システムの仕組みを「誰もが」 理解していないといけない時代 2026/11/11 @ DX Dojo (C) Shinnosuke Oka / eXpresser / Studio UXM 3 / 37

この発表のゴール Webアプリ開発の原点を知る • 「作りたいもの」と「困りごと」から、 アプリがどう生まれるかを知る Webアプリの全体像を知る • Webアプリに必要な、「7つの役割」を 知っておく。 これらに 回答 できるよう になる 今後、深掘りしてほしい技術・分野を考えてもらう • いただいたご意見から、 次回以降のDX道場で深掘りする 2026/11/11 @ DX Dojo (C) Shinnosuke Oka / eXpresser / Studio UXM 4 / 37

アジェンダ 3min はじめに: なぜ、いま、この話なのか？ 15min Chapter-1: Webアプリの原点を知る 「こんなアプリにしたい！」 夢を広げ、言語化する方法 15min ハンズオン＆デモ：実際にエディタを触ってみよう！ 15min Chapter-2: Webアプリの全体像を知る 夢を形にする「仕組み」ってどうなってるの？ 7min まとめ 2026/11/11 @ DX Dojo (C) Shinnosuke Oka / eXpresser / Studio UXM 5 / 37

Chapter-1 Webアプリ開発の原点を知る

自己紹介 Shinnosuke Oka (eXpresser) 鉄道系個人サークル「Studio UXM」を運営 自身の趣味活動と自己研鑽のために、 「配線略図エディタ」と「路線図エディタ」 というWebサービスを開発・公開 合同会社JOHNNYWORKS所属 Cloud Platform Architect / Web Developer 2026/11/11 @ DX Dojo (C) Shinnosuke Oka / eXpresser / Studio UXM 7 / 37

私がWebアプリを作るようになるまで Year Age 1990 0 滋賀県の片田舎で生まれる 2005 15 「パソコンで仕事がしたい！」という理由で、 岐阜高専へ進学 授業・実験はC言語中心 2008 18 高専ロボコンの広報サイトを運営 HTML/CSSを手で編集 2009 19 自分の鉄道写真作品を展示する Webサイトを公開 忍者ツールズで公開 JavaScriptに触れ始めた 2010 20 豊橋技術科学大学へ進学 授業・実験はJava中心 2013 23 学業の傍ら、「A列車で行こう」というゲーム にハマり、架空鉄道界隈にドップリ さくらのレンタルサーバーを契約 PHP/MySQLに触れ始めた 2016 26 博士後期2年で退学し、新卒扱いで前職に就職 ASP.NET, Angular, Reactなど 2020 30 Webアプリ「配線略図エディタ」公開 Vue + Laravel でモダン開発 2021 31 Webアプリ「路線図エディタ」公開 React + Go に鞍替え 2026 36 AI駆動開発 (Codex) を導入開始 2026/11/11 @ DX Dojo 来歴 技術スタック (C) Shinnosuke Oka / eXpresser / Studio UXM 8 / 37

2008: 岐阜高専ロボコンゼミ https://www.gifu-nct.ac.jp /mecha/inaba/index.html 2026/11/11 @ DX Dojo (C) Shinnosuke Oka / eXpresser / Studio UXM 9 / 37

• https://www.gifu-nct.ac.jp/mecha/inaba/index.html

2009～: 鉄道写真Webサイト Urban eXpress Museum https://photo.uxm.jp 2026/11/11 @ DX Dojo (C) Shinnosuke Oka / eXpresser / Studio UXM 10 / 37

• https://photo.uxm.jp/

2020-2021: Webアプリ公開 ←配線略図エディタ https://raildiag.uxm.jp 路線図エディタ→ https://routemap.uxm.jp 2026/11/11 @ DX Dojo (C) Shinnosuke Oka / eXpresser / Studio UXM 11 / 37

• https://raildiag.uxm.jp/
• https://routemap.uxm.jp/

「配線略図」とは？ 鉄道における、 線路のつながりや、 ホームの配置などを 簡易的に表した図 理科でいう電気回路図 のようなイメージ 配線略図を作成する Webアプリを開発 2026/11/11 @ DX Dojo (C) Shinnosuke Oka / eXpresser / Studio UXM 12 / 37

配線略図エディタで実現させたい世界 To-Be (こうなったらいいな) As-Is (困りごと) • 配線略図作成はExcelでの作成が主流 であり、調整がめんどくさい • 立体交差などの特殊な書き方が必要 • 作成した図は自分のPCだけ 見せるには画像で貼るしかない • 業務で知った技術を、 試せる場所がない • 配線略図の本質である、 線路のつながりを書くことだけに 集中したい • 作った図を「作品」として共有でき る場所を作りたい • 技術を気兼ねなく試せる場所を 作りたい 配線略図エディタが実現させること • 配線略図専用の部品を置くだけで描けて、面倒な立体交差は自動調整する • ブラウザだけで図を保存・公開できる • 自分のサービスとして、新しい技術を試す練習台になる 2026/11/11 @ DX Dojo (C) Shinnosuke Oka / eXpresser / Studio UXM 13 / 37

アプリを作る時に大事なこと ①「困りごと」と「作りたいもの」から始める 使いたい技術から考えるのではなく、 「面倒だな」「こうなったらいいな」が出発点であること。 ②ユーザーはなるべく具体的に一人思い浮かべる 「○○な人」ではなく「経理の○○さん」などとペルソナを設定する。 個人開発であれば、「自分」をユーザーの一人とすると軸がブレにくい。 ③小さく始めて、使う人と一緒に育てる 最初から完璧を目指さない。少しずつユーザーを増やしていく。 ④「どう作るか」よりも「何を作りたいか」 手を動かすのはAIが手伝ってくれる。自分がどれだけ夢を描いているかが大事。 2026/11/11 @ DX Dojo (C) Shinnosuke Oka / eXpresser / Studio UXM 14 / 37

何が言いたいか というと、コレ X@python_academia より 15 / 37

• https://x.com/python_academia/status/2119671809436192787?a=l9HFhIcVoyP40_DZMnc&s=20

作ったら、すごい世界が現れた 配線略図数 17,000 ユーザー数 8,000 月間PV数 11,000 ※2026/10現在 ニコニコ動画公式 生放送より 2026/11/11 @ DX Dojo ニコニコ超会議にて ひろゆき氏から取材を受ける © 鉄道ホビダス © ARTDINK (C) Shinnosuke Oka / eXpresser / Studio UXM 鉄道ホビー系Webメディア （鉄道ホビダス様） で特集いただく A列車で行こうゲーム同梱の ガイドブックで使われたらしい 16 / 37

Hands-on 路線図エディタを触ってみよう！

業界を震撼させた「高輪ゲートウェイ」 こんな狭い領域に この作業をちょっとでも楽にしたい・・・！ 「高輪ゲートウェイ」という駅を 2026/11/11 @入れる必要がある DX Dojo (C) Shinnosuke Oka / eXpresser / Studio UXM 18 / 37

ハンズオンの内容 もしも阪神電車に新しい駅と列車ができたら・・・？ 2026/11/11 @ DX Dojo (C) Shinnosuke Oka / eXpresser / Studio UXM 19 / 37

Chapter-2 Webアプリの全体像を知る

21 / 37

22 / 37

23 / 37

役割にするとシステム構造は似通ってくる • 2つのアプリは、使う技術 [Vue.js/React] [Laravel/Go] が違う • でも、役割ごとに分けると、ほぼ同じ形になる • 一般的なWebアプリも、だいたいこの7つの役割でできている 注記 画面と処理を1つの技術でまとめて作るもの （サーバーで画面を作って返す = Server-Side Rendering: SSR）もある。 それでも役割は分けて考える方が整理しやすい。 何の技術を使うか？ →次以降のスライドで説明 よりも もっと詳しく聞きたい！ という分野について コメントをください！ この部品は何のためのもの？ を考える方が大事 2026/11/11 @ DX Dojo (C) Shinnosuke Oka / eXpresser / Studio UXM 24 / 37

いわゆる「フロントエンド」。 ユーザーが直接見て触るところ。 見た目・使いやすさ・やりたいことに直結する。 AIには「誰が・何をしたいか」を伝えると、 狙った画面になりやすい。 25 / 37

いわゆる「バックエンド」。 画面からの要求を受け取って、データを取り出し・加工し・保存に回す。 画面から受け取る時に本当にそのデータが正しいか検証する。 「どのデータを、誰に、どこまで見せるか」を決めるのは人の仕事。

いわゆる「ストレージ」や「データベース」。 データの種類で、しまう場所を選ぶ 大きなファイル → ストレージ つながりのあるデータ → データベース データはここにある。消えたら困るものほど、置き場所を意識する。

いわゆる「バックアップ」。 壊れても、消えても元に戻せるように、別の場所に控えを取っておく。 一か所壊れても問題ないように、何か所かに保管する (多重化) が良い。 クラウドのストレージなら、自動で複数の場所に複製してくれる。

いわゆる「認証」。 「この人は本人か」を確かめる。ID・パスワードなど、 いちばん漏れてはいけない情報を扱う。 セキュリティの要。昨今の事情も踏まえて、自前で作らず、 専門のサービスに任せるのがよい。

いわゆる「DevOps」「運用・改善」。 使われ方と声を集めて、直して、届けるまでの 流れ。自動化すればするほどプレゼンスが上がる。 不具合は、この流れに乗せて直す。 AIが作業しても、人の判断を必要に応じて入れて いく（トリアージ・レビュー・リリース）。

いわゆる「マネタイズ」。 運営にはお金がかかる。広告・課金・サブスクなど、 手段によって使うサービスが変わる。 作る前に「どうやって続けられるか」まで考えておく。

Webアプリは、この7つの役割でできている No 役割 いわゆる ひとこと 1 ユーザーが操作する フロントエンド 見て触るところ 2 データを処理する バックエンド 受け取って加工する 3 データを保管する データベース・ストレージ しまっておく 4 ユーザーを安全に識別する 認証 本人か確かめる 5 不測の事態に備える バックアップ 元に戻せるようにする 6 よりよいアプリに仕上げる DevOps 集めて、直して、届ける 7 アプリを続けていく マネタイズ 続けるお金を生む あなたが、次回以降聞きたいものは 何ですか？ 2026/11/11 @ DX Dojo (C) Shinnosuke Oka / eXpresser / Studio UXM 32 / 37

まとめ

As-Is × To-Be = 作りたいもの To-Be (こうなったらいいな) As-Is (困りごと) • 配線略図作成はExcelでの作成が主流 であり、調整がめんどくさい • 立体交差などの特殊な書き方が必要 • 作成した図は自分のPCだけ 見せるには画像で貼るしかない • 業務で知った技術を、 試せる場所がない • 配線略図の本質である、 線路のつながりを書くことだけに 集中したい • 作った図を「作品」として共有でき る場所を作りたい • 技術を気兼ねなく試せる場所を 作りたい 配線略図エディタが実現させること • 配線略図専用の部品を置くだけで描けて、面倒な立体交差は自動調整する • ブラウザだけで図を保存・公開できる • 自分のサービスとして、新しい技術を試す練習台になる 2026/11/11 @ DX Dojo (C) Shinnosuke Oka / eXpresser / Studio UXM 34 / 37

今日の結論 アプリを作るうえで大事なこと 「困りごと」と 「作りたいもの」から始める ユーザーはなるべく具体的に 一人思い浮かべる 小さく始めて、 使う人と一緒に育てる 「どう作るか」よりも 「何を作りたいか」 2026/11/11 @ DX Dojo Webアプリの要素7選 ユーザーが操作する フロントエンド データを処理する バックエンド データを保管する DB・ストレージ 不測の事態に備える バックアップ アプリを続けていく マネタイズ ユーザーを安全に識別する 認証 よりよいアプリに仕上げる DevOps (C) Shinnosuke Oka / eXpresser / Studio UXM 35 / 37

この発表のゴール Webアプリ開発の原点を知る • アプリは「困りごと」×「作りたいもの」から生まれる。 • 技術から考えず、「面倒だな」「こうなったらいいな」が出発点。 Webアプリの全体像を知る • Webアプリは、7つの役割でできている。技術の名前より、 「この部品は何のためのものか」を見れば、どんなアプリも読める。 今後、深掘りしてほしい技術・分野を考えてもらう • いただいたご意見から、次回以降のDX道場で深掘りする コメント or アンケートでご回答ください！ 2026/11/11 @ DX Dojo (C) Shinnosuke Oka / eXpresser / Studio UXM 36 / 37

ご清聴ありがとうございました https://uxm.jp (C) Shinnosuke Oka / eXpresser / Studio UXM

• https://uxm.jp/