--- title: 【水曜のDX道場】個人開発アプリで学ぶWebアプリの仕組み #1 全体像編 tags: #webアプリ #dx道場 #鉄道 author: [eXpresser](https://docswell.com/user/eXpresser-UXM) site: [Docswell](https://www.docswell.com/) thumbnail: https://bcdn.docswell.com/page/PJRP269WE9.jpg?width=480 description: 2026/11/11「水曜のDX道場」第42回の発表資料です。 AIに頼めばアプリが作れる時代だからこそ、仕組みを知っている人が強くなる。 趣味で開発・公開している鉄道の図面作成アプリ「配線略図エディタ」「路線図エディタ」を題材に、Webアプリの中身を一通りご紹介しました。 ■ お話ししたこと ・Webアプリ開発の原点：「困りごと（As-Is）」×「こうなったらいいな（To-Be）」から、作りたいものが生まれる ・アプリを作るときに大事な4つのこと ・ハンズオン：路線図エディタで「もしも阪神電車に新しい駅と列車ができたら」を描く ・Webアプリの全体像：実際の構成図から読み解く「7つの役割」 　フロントエンド／バックエンド／データベース・ストレージ／認証／バックアップ／DevOps／マネタイズ 技術の名前より「この部品は何のためのものか」を見れば、どんなアプリも読めるようになる、という回です。 エンジニアの方はもちろん、DX推進やシステム発注でエンジニアと話す機会がある方にもおすすめです。 ▼ 配線略図エディタ https://raildiag.uxm.jp ▼ 路線図エディタ https://routemap.uxm.jp ▼ 水曜のDX道場 https://dxdojo.connpass.com/ published: November 12, 26 canonical: https://docswell.com/s/eXpresser-UXM/ZDM8NR-2026-11-11-DX-Dojo --- # Page. 1 ![Page Image](https://bcdn.docswell.com/page/PJRP269WE9.jpg) 個人開発アプリで学ぶWebアプリの仕組み #1 全体像編 2026/11/11 @DXDojo Shinnosuke Oka (eXpresser) / Studio UXM # Page. 2 ![Page Image](https://bcdn.docswell.com/page/PEX3DMQVJX.jpg) はじめに：なぜアプリの仕組みの話？ AIに頼めば、アプリが作れる時代になった • ChatGPT、Claude、Codexなどに 「こんなアプリを作って」と頼むだけで、動くものができる • 現在は、「バイブコーディング」（雰囲気でAIに作らせる開発）でも、 それなりに動くものができる時代になっている では、仕組みを知る必要はもうない？ • それってベストプラクティスなの？ • 動いているように見えても、データはどこに保存されている？ • 不具合が出たとき、どこを直せばいい？ • セキュリティの穴に気づける？ 2026/11/11 @ DX Dojo (C) Shinnosuke Oka / eXpresser / Studio UXM 2 / 37 # Page. 3 ![Page Image](https://bcdn.docswell.com/page/3EKYXG95JD.jpg) はじめに：なぜアプリの仕組みの話？ むしろ、仕組みを知っている人が強くなる • AIが書くのは「部品」。 どこに何を置き、どうつなぐかを決めるのは人間。 • 仕組みを知っているほど、AIへの頼み方が具体的になり、 狙いどおりのものが出てくる • エンジニアでなくても、 AIやベンダーが作ったものを「判断する」立場になる だから、今は システムの仕組みを「誰もが」 理解していないといけない時代 2026/11/11 @ DX Dojo (C) Shinnosuke Oka / eXpresser / Studio UXM 3 / 37 # Page. 4 ![Page Image](https://bcdn.docswell.com/page/L7395NW175.jpg) この発表のゴール Webアプリ開発の原点を知る • 「作りたいもの」と「困りごと」から、 アプリがどう生まれるかを知る Webアプリの全体像を知る • Webアプリに必要な、「7つの役割」を 知っておく。 これらに 回答 できるよう になる 今後、深掘りしてほしい技術・分野を考えてもらう • いただいたご意見から、 次回以降のDX道場で深掘りする 2026/11/11 @ DX Dojo (C) Shinnosuke Oka / eXpresser / Studio UXM 4 / 37 # Page. 5 ![Page Image](https://bcdn.docswell.com/page/87DGDWKK7G.jpg) アジェンダ 3min はじめに: なぜ、いま、この話なのか？ 15min Chapter-1: Webアプリの原点を知る 「こんなアプリにしたい！」 夢を広げ、言語化する方法 15min ハンズオン＆デモ：実際にエディタを触ってみよう！ 15min Chapter-2: Webアプリの全体像を知る 夢を形にする「仕組み」ってどうなってるの？ 7min まとめ 2026/11/11 @ DX Dojo (C) Shinnosuke Oka / eXpresser / Studio UXM 5 / 37 # Page. 6 ![Page Image](https://bcdn.docswell.com/page/VJP3X9K3E8.jpg) Chapter-1 Webアプリ開発の原点を知る # Page. 7 ![Page Image](https://bcdn.docswell.com/page/2EV4LMVNJQ.jpg) 自己紹介 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 # Page. 8 ![Page Image](https://bcdn.docswell.com/page/57G1XGL5EL.jpg) 私が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 # Page. 9 ![Page Image](https://bcdn.docswell.com/page/4EQD8XYLJP.jpg) 2008: 岐阜高専ロボコンゼミ https://www.gifu-nct.ac.jp /mecha/inaba/index.html 2026/11/11 @ DX Dojo (C) Shinnosuke Oka / eXpresser / Studio UXM 9 / 37 # Page. 10 ![Page Image](https://bcdn.docswell.com/page/KJ4Z26W571.jpg) 2009～: 鉄道写真Webサイト Urban eXpress Museum https://photo.uxm.jp 2026/11/11 @ DX Dojo (C) Shinnosuke Oka / eXpresser / Studio UXM 10 / 37 # Page. 11 ![Page Image](https://bcdn.docswell.com/page/LE1RMVY2EG.jpg) 2020-2021: Webアプリ公開 ←配線略図エディタ https://raildiag.uxm.jp 路線図エディタ→ https://routemap.uxm.jp 2026/11/11 @ DX Dojo (C) Shinnosuke Oka / eXpresser / Studio UXM 11 / 37 # Page. 12 ![Page Image](https://bcdn.docswell.com/page/GEW13LG272.jpg) 「配線略図」とは？ 鉄道における、 線路のつながりや、 ホームの配置などを 簡易的に表した図 理科でいう電気回路図 のようなイメージ 配線略図を作成する Webアプリを開発 2026/11/11 @ DX Dojo (C) Shinnosuke Oka / eXpresser / Studio UXM 12 / 37 # Page. 13 ![Page Image](https://bcdn.docswell.com/page/47ZPVML4E3.jpg) 配線略図エディタで実現させたい世界 To-Be (こうなったらいいな) As-Is (困りごと) • 配線略図作成はExcelでの作成が主流 であり、調整がめんどくさい • 立体交差などの特殊な書き方が必要 • 作成した図は自分のPCだけ 見せるには画像で貼るしかない • 業務で知った技術を、 試せる場所がない • 配線略図の本質である、 線路のつながりを書くことだけに 集中したい • 作った図を「作品」として共有でき る場所を作りたい • 技術を気兼ねなく試せる場所を 作りたい 配線略図エディタが実現させること • 配線略図専用の部品を置くだけで描けて、面倒な立体交差は自動調整する • ブラウザだけで図を保存・公開できる • 自分のサービスとして、新しい技術を試す練習台になる 2026/11/11 @ DX Dojo (C) Shinnosuke Oka / eXpresser / Studio UXM 13 / 37 # Page. 14 ![Page Image](https://bcdn.docswell.com/page/YJ6M5NWG7V.jpg) アプリを作る時に大事なこと ①「困りごと」と「作りたいもの」から始める 使いたい技術から考えるのではなく、 「面倒だな」「こうなったらいいな」が出発点であること。 ②ユーザーはなるべく具体的に一人思い浮かべる 「○○な人」ではなく「経理の○○さん」などとペルソナを設定する。 個人開発であれば、「自分」をユーザーの一人とすると軸がブレにくい。 ③小さく始めて、使う人と一緒に育てる 最初から完璧を目指さない。少しずつユーザーを増やしていく。 ④「どう作るか」よりも「何を作りたいか」 手を動かすのはAIが手伝ってくれる。自分がどれだけ夢を描いているかが大事。 2026/11/11 @ DX Dojo (C) Shinnosuke Oka / eXpresser / Studio UXM 14 / 37 # Page. 15 ![Page Image](https://bcdn.docswell.com/page/GJ5ZY5MXE4.jpg) 何が言いたいか というと、コレ X@python_academia より 15 / 37 # Page. 16 ![Page Image](https://bcdn.docswell.com/page/LE395NW4E5.jpg) 作ったら、すごい世界が現れた 配線略図数 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 # Page. 17 ![Page Image](https://bcdn.docswell.com/page/8EDGDWK5EG.jpg) Hands-on 路線図エディタを触ってみよう！ # Page. 18 ![Page Image](https://bcdn.docswell.com/page/V7P3X9KDJ8.jpg) 業界を震撼させた「高輪ゲートウェイ」 こんな狭い領域に この作業をちょっとでも楽にしたい・・・！ 「高輪ゲートウェイ」という駅を 2026/11/11 @入れる必要がある DX Dojo (C) Shinnosuke Oka / eXpresser / Studio UXM 18 / 37 # Page. 19 ![Page Image](https://bcdn.docswell.com/page/2JV4LMVG7Q.jpg) ハンズオンの内容 もしも阪神電車に新しい駅と列車ができたら・・・？ 2026/11/11 @ DX Dojo (C) Shinnosuke Oka / eXpresser / Studio UXM 19 / 37 # Page. 20 ![Page Image](https://bcdn.docswell.com/page/5EG1XG1DJL.jpg) Chapter-2 Webアプリの全体像を知る # Page. 21 ![Page Image](https://bcdn.docswell.com/page/4JQD8XDX7P.jpg) 21 / 37 # Page. 22 ![Page Image](https://bcdn.docswell.com/page/K74Z26Z2E1.jpg) 22 / 37 # Page. 23 ![Page Image](https://bcdn.docswell.com/page/LJ1RMVRKJG.jpg) 23 / 37 # Page. 24 ![Page Image](https://bcdn.docswell.com/page/GJW13L1PE2.jpg) 役割にするとシステム構造は似通ってくる • 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 # Page. 25 ![Page Image](https://bcdn.docswell.com/page/4EZPVMP6J3.jpg) いわゆる「フロントエンド」。 ユーザーが直接見て触るところ。 見た目・使いやすさ・やりたいことに直結する。 AIには「誰が・何をしたいか」を伝えると、 狙った画面になりやすい。 25 / 37 # Page. 26 ![Page Image](https://bcdn.docswell.com/page/Y76M5NMLEV.jpg) いわゆる「バックエンド」。 画面からの要求を受け取って、データを取り出し・加工し・保存に回す。 画面から受け取る時に本当にそのデータが正しいか検証する。 「どのデータを、誰に、どこまで見せるか」を決めるのは人の仕事。 # Page. 27 ![Page Image](https://bcdn.docswell.com/page/G75ZY5ZMJ4.jpg) いわゆる「ストレージ」や「データベース」。 データの種類で、しまう場所を選ぶ 大きなファイル → ストレージ つながりのあるデータ → データベース データはここにある。消えたら困るものほど、置き場所を意識する。 # Page. 28 ![Page Image](https://bcdn.docswell.com/page/9J2RGNRR7R.jpg) いわゆる「バックアップ」。 壊れても、消えても元に戻せるように、別の場所に控えを取っておく。 一か所壊れても問題ないように、何か所かに保管する (多重化) が良い。 クラウドのストレージなら、自動で複数の場所に複製してくれる。 # Page. 29 ![Page Image](https://bcdn.docswell.com/page/DEYDVPD5EM.jpg) いわゆる「認証」。 「この人は本人か」を確かめる。ID・パスワードなど、 いちばん漏れてはいけない情報を扱う。 セキュリティの要。昨今の事情も踏まえて、自前で作らず、 専門のサービスに任せるのがよい。 # Page. 30 ![Page Image](https://bcdn.docswell.com/page/VJN6M564J8.jpg) いわゆる「DevOps」「運用・改善」。 使われ方と声を集めて、直して、届けるまでの 流れ。自動化すればするほどプレゼンスが上がる。 不具合は、この流れに乗せて直す。 AIが作業しても、人の判断を必要に応じて入れて いく（トリアージ・レビュー・リリース）。 # Page. 31 ![Page Image](https://bcdn.docswell.com/page/YE9LNYL473.jpg) いわゆる「マネタイズ」。 運営にはお金がかかる。広告・課金・サブスクなど、 手段によって使うサービスが変わる。 作る前に「どうやって続けられるか」まで考えておく。 # Page. 32 ![Page Image](https://bcdn.docswell.com/page/GE8XK6XVJD.jpg) Webアプリは、この7つの役割でできている No 役割 いわゆる ひとこと 1 ユーザーが操作する フロントエンド 見て触るところ 2 データを処理する バックエンド 受け取って加工する 3 データを保管する データベース・ストレージ しまっておく 4 ユーザーを安全に識別する 認証 本人か確かめる 5 不測の事態に備える バックアップ 元に戻せるようにする 6 よりよいアプリに仕上げる DevOps 集めて、直して、届ける 7 アプリを続けていく マネタイズ 続けるお金を生む あなたが、次回以降聞きたいものは 何ですか？ 2026/11/11 @ DX Dojo (C) Shinnosuke Oka / eXpresser / Studio UXM 32 / 37 # Page. 33 ![Page Image](https://bcdn.docswell.com/page/LEL8Z98R7R.jpg) まとめ # Page. 34 ![Page Image](https://bcdn.docswell.com/page/4JM6VZ6PEW.jpg) As-Is × To-Be = 作りたいもの To-Be (こうなったらいいな) As-Is (困りごと) • 配線略図作成はExcelでの作成が主流 であり、調整がめんどくさい • 立体交差などの特殊な書き方が必要 • 作成した図は自分のPCだけ 見せるには画像で貼るしかない • 業務で知った技術を、 試せる場所がない • 配線略図の本質である、 線路のつながりを書くことだけに 集中したい • 作った図を「作品」として共有でき る場所を作りたい • 技術を気兼ねなく試せる場所を 作りたい 配線略図エディタが実現させること • 配線略図専用の部品を置くだけで描けて、面倒な立体交差は自動調整する • ブラウザだけで図を保存・公開できる • 自分のサービスとして、新しい技術を試す練習台になる 2026/11/11 @ DX Dojo (C) Shinnosuke Oka / eXpresser / Studio UXM 34 / 37 # Page. 35 ![Page Image](https://bcdn.docswell.com/page/PJRP26PYE9.jpg) 今日の結論 アプリを作るうえで大事なこと 「困りごと」と 「作りたいもの」から始める ユーザーはなるべく具体的に 一人思い浮かべる 小さく始めて、 使う人と一緒に育てる 「どう作るか」よりも 「何を作りたいか」 2026/11/11 @ DX Dojo Webアプリの要素7選 ユーザーが操作する フロントエンド データを処理する バックエンド データを保管する DB・ストレージ 不測の事態に備える バックアップ アプリを続けていく マネタイズ ユーザーを安全に識別する 認証 よりよいアプリに仕上げる DevOps (C) Shinnosuke Oka / eXpresser / Studio UXM 35 / 37 # Page. 36 ![Page Image](https://bcdn.docswell.com/page/PEX3DM34JX.jpg) この発表のゴール Webアプリ開発の原点を知る • アプリは「困りごと」×「作りたいもの」から生まれる。 • 技術から考えず、「面倒だな」「こうなったらいいな」が出発点。 Webアプリの全体像を知る • Webアプリは、7つの役割でできている。技術の名前より、 「この部品は何のためのものか」を見れば、どんなアプリも読める。 今後、深掘りしてほしい技術・分野を考えてもらう • いただいたご意見から、次回以降のDX道場で深掘りする コメント or アンケートでご回答ください！ 2026/11/11 @ DX Dojo (C) Shinnosuke Oka / eXpresser / Studio UXM 36 / 37 # Page. 37 ![Page Image](https://bcdn.docswell.com/page/3EKYXGYPJD.jpg) ご清聴ありがとうございました https://uxm.jp (C) Shinnosuke Oka / eXpresser / Studio UXM