はじめに
組み込みソフトの開発に約32年携わってきた私が、Web 開発の勉強を始めました。このシリーズでは、その過程をつまずきも含めてそのまま記録していきます。
これまでの仕事は、主に C 言語によるベアメタル開発です。OS のない環境で、マイコンのレジスタを直接たたき、割り込みとメインループでシステムを組み立てたり、RTOS のドライバをベアメタルで作成したりしてきました。一方で、通信系の経験はなく、TypeScript、Node.js、ブラウザ、HTTP といった Web の技術は、ほぼゼロからのスタートです。
Web 開発の入門記事はたくさんありますが、「組み込みの経験者が、自分の知識に置き換えながら学ぶ」という視点の記録は、あまり見かけません。同じように Web の世界に踏み出そうとしている組み込みエンジニアの方の、道しるべの一つになればうれしいです。
なお、学習は AI（Claude）に質問しながら進めています。AI に何をどう聞き、どこでつまずいたかも、できるだけ残していくつもりです。
最終目標：血液検査の結果をグラフで見られるアプリ
最終的に作りたいのは、病院でもらう血液検査の結果（紙）をスキャンして PDF にし、その PDF を読み取って蓄積し、ブラウザで推移をグラフ表示するアプリです。
検査結果は毎回紙で受け取りますが、数値が前回と比べてどう変わったのかは、並べてみないとわかりません。自分の検査値の推移を一目で見たい、というのが出発点です。
このアプリを作るには、画面づくり、サーバーとの通信、データベース、グラフ表示、ファイルの取り込み、PDF の解析と、Web 開発の要素がひととおり必要になります。学習の題材としても、ちょうどよい目標だと考えました。
ご注意：このシリーズで作るツールやアプリは、すべて学習を目的としたものです。医療的な判断には使わないでください。検査結果の解釈や健康上の判断は、必ず医師にご相談ください。
なぜ小さなツールから始めるのか
いきなり血液検査アプリに取りかかるのではなく、小さなツールを1つずつ完成させながら進めることにしました。新しい概念が一度に押し寄せると、どこでつまずいているのかすらわからなくなり、挫折しやすいからです。
組み込みの世界では、新しいマイコンや基板を手にしたとき、まず LED を点滅させる「Lチカ」から始めますよね。開発環境、書き込み、クロック、GPIO がひととおり動くことを、いちばん小さなプログラムで確かめるためです。
Web 開発でも同じ考え方を取りました。最初は「文字を表示するだけ」のツールを公開するところから始め、そこに少しずつ機能を足していきます。各ステップは、動作を確かめられる単位で区切ります。
学習ロードマップ（Step 0〜8）
血液検査アプリまでを、9つのステップに分けました。各ステップで1つの小さなツールを完成させ、前のステップが動いてから次へ進みます。
| Step | 作るツール | 主に学ぶこと | 最終目標へのつながり |
|---|---|---|---|
| 0 | Hello ツール（文字を表示するだけ） | Git、TypeScript のビルド、Node.js サーバー、常駐化、Web サーバーの中継、認証、公開 | 公開までの土台（Web 版の Lチカ） |
| 1 | 単位換算ツール（ブラウザだけで動く） | HTML、TypeScript の基本、画面の入力と表示、Vite | 画面づくりの基礎 |
| 2 | 計算 API（サーバーで計算して結果を返す） | HTTP、API、JSON、fetch、非同期処理 | 画面とサーバーの役割分担 |
| 3 | 簡単な記録ツール（体重などを記録・一覧） | データの保存（まずはファイル）、入力チェック | 検査結果を蓄積する仕組み |
| 4 | 記録ツールのデータベース化 | MariaDB、SQL、テーブル設計 | 検査項目・日付・値の保存 |
| 5 | 記録をグラフ表示 | グラフライブラリ、日付の扱い | 検査値の推移グラフ |
| 6 | ファイル取り込みツール（CSV） | ファイルのアップロード、データの読み取りと変換 | PDF 取り込みの前段階 |
| 7 | PDF からテキストを抜き出すツール | PDF 解析と文字認識（OCR）、検査結果 PDF の形式調査 | 検査結果の自動読み取り |
| 8 | 血液検査アプリ | これまでの統合、個人の健康情報の保護 | 最終目標 |
Step 8 では健康情報という個人情報を扱うため、アクセスの保護やバックアップを改めて設計し直す予定です。
進め方：小さなツールでも V字モデルで
小さなツールでも、組み込みでなじみのある V字モデルに倣って進めます。左側で「何を作るか・どう作るか」を決め、右側でそれぞれに対応する確認を行います。
| 工程 | ドキュメント | 対応する確認 |
|---|---|---|
| 要件定義 | 01_要件定義.md | 受け入れ確認（要件を満たすか） |
| 設計 | 02_設計.md | 結合確認（画面・サーバー・データがつながるか） |
| 実装 | ソースコード | 単体確認（関数単位） |
| テスト | 03_テスト項目.md | 上記すべての結果を記録 |
| 振り返り | 04_振り返り.md | 学んだこと・次への課題 |
ドキュメントは1ツールあたり数ページ程度に抑え、書くこと自体が目的にならないようにしています。また、要件や設計を変えるときは、先にドキュメントを直してからコードを直す、というルールにしました。
学習で V字モデルは大げさに見えるかもしれません。それでも、「何ができたら完成か」を先に決めておくと、ゴールを見失わずに済みます。初めての分野ほど、この効果は大きいと感じています。
組み込みの知識に置き換えて学ぶ
新しい概念に出会ったら、組み込みの知識に置き換えて理解するようにしています。名前は違っても、やっていることは見覚えのあるものが少なくありません。学習を始める前に AI と相談して作った対応表の一部を紹介します。
| Web の概念 | 組み込みでいうと |
|---|---|
| イベントループ | メインループ＋割り込みハンドラ |
| 非同期処理（Promise / async-await） | 完了割り込み待ち・コールバック |
| HTTP のリクエスト／レスポンス | コマンド／レスポンス型の通信プロトコル |
| JSON | 構造体のシリアライズ形式 |
| データベース | 不揮発メモリへの保存（ただし検索・集計ができる） |
| ビルド（tsc / Vite） | コンパイル＆リンク |
| PM2 / systemd | ウォッチドッグ付きの起動管理 |
もちろん、完全に同じではありません。違いに気づくこと自体が、理解を深めるきっかけになります。この表は学習を進めながら育てていき、各回でも登場する予定です。
開発環境の概要
開発したツールは、自宅のサーバーで動かしています。インターネット経由で使えるようにしていますが、誰でも使える一般公開ではなく、認証をかけて限られた人だけが使える形です。
外部からのアクセスはすべて Cloudflare Tunnel を経由するので、自宅のルーターでポートを開ける必要がありません。
ブラウザからの要求は、Cloudflare、Apache を順に通って、ツールごとの Node.js プログラムに届きます。
- サーバー：
自宅の仮想マシン（Linux）。Web サーバーは Apache - 公開先：
https://example.com/apps/<ツール名>/。ツールは Basic 認証で保護 - ツールの実行：
Node.js（TypeScript で書いてビルド）。ツールごとに待ち受けポートを割り当て、PM2 で常駐させる - 開発：
手元の PC の VS Code から、Remote-SSH でサーバーに接続して作業 - バージョン管理：
Git。ツールごとに GitHub の非公開リポジトリへ保存 - 置き場所：
https://example.com/apps/<ツール名>/。Basic 認証をかけ、決まった人だけがアクセスできるようにしている
なお、このシリーズに登場するドメイン名、URL のパス、ユーザー名、ポート番号などは、セキュリティのため実際とは異なる架空のものに置き換えています。
シリーズの予定と次回予告
このシリーズは、次の構成で進める予定です。
- なぜ始めたか・学習ロードマップ（この記事）
- Step 0：Web 版の「Lチカ」― 自宅サーバーで1ページ公開するまで
- Step 1 の要件定義と設計：小さなツールでもドキュメントを書く
- Vite を組み込みの言葉で理解する
- TypeScript を C と比べる
- イベント駆動は割り込みだった
- 本番配信：ビルドから公開までの流れ
- 振り返りと「Web と組み込みの対応表」
番外編として、Git でつまずいたことのまとめも予定しています。
次回は Step 0 として、文字を表示するだけのツールを自宅サーバーで公開するまでを紹介します。組み込みでいう Lチカが、Web ではどんな手順になるのかをお見せします。
→ 第2回：Step 0 で文字を表示するツールを公開する
この記事は、シリーズ「組み込みエンジニアの Web 開発入門」の1本です。ほかの回は、シリーズの目次からどうぞ。
コメント