このシリーズについて
C 言語で約32年、組み込みソフトを開発してきたエンジニアが、Web 開発をゼロから学ぶ過程の記録です。新しく出てくる Web の概念は、割り込み、ウォッチドッグ、構造体といった組み込みの言葉に置き換えながら理解していきます。
最終目標は、病院でもらう血液検査の結果を読み取って蓄積し、推移をグラフで見られるアプリを作ることです。いきなり作ると挫折するので、小さなツールを1つずつ作りながら、必要な技術を順に身につけていきます。
開発は自宅のサーバーで行い、AI(Claude)に質問しながら進めています。つまずいたことも、できるだけそのまま残しています。
なお、記事に登場するドメイン名、URL のパス、ユーザー名、ポート番号などは、セキュリティのため架空のものに置き換えています。また、作っているツールは学習用で、医療的な判断には使わないでください。検査結果の解釈は、医師に相談してください。
読む順番
| こんな方は | ここから |
|---|---|
| 初めて読む方 | 入門編 第1回から順に |
| どんな環境で作っているかを先に知りたい方 | 番外編 開発環境の全体像 |
| 組み込みと Web の対応だけをざっと見たい方 | 入門編 第8回の対応表 |
入門編は、開発の流れ一式(ビルド、常駐、公開)を通す土台づくりです。
データベース編では、アプリで使うデータの保存の仕方(SQL)を学びます。
実践編からは、最終目標のアプリに向けて機能を1つずつ作っていきます。
番外編は、本編の途中で出てきた道具やつまずきを、1つの話題に絞ってまとめたものです。
入門編(Step 0・1:土台づくり)
- 【入門編 第1回】組み込み32年のエンジニアが Web 開発を始めます ― なぜ始めたか・学習ロードマップ
- Web 開発を始めた理由、最終目標、小さなツールを積み重ねる学習の道のり
- 【入門編 第2回】Web 版の「Lチカ」― 自宅サーバーで1ページを公開するまで(Step 0)
- 文字を表示するだけのツールで、ビルドから常駐、中継、認証、公開までの経路を一本通す
- 【入門編 第3回】小さなツールでも要件定義書と設計書を書く ― 検査値の単位換算ツール(Step 1)
- V字モデルに倣った軽量なドキュメントの書き方
- 【入門編 第4回】Vite を組み込みの言葉で理解する ― ビルド、開発サーバー、base(Step 1)
- 画面のビルドの道具 Vite を、コンパイルとリンク、リンカスクリプトに置き換えて理解する
- 【入門編 第5回】TypeScript を C と比べる ― 構造体、enum、タグ付き共用体(Step 1)
- TypeScript の型を、C の構造体や enum と並べて比べる
- 【入門編 第6回】イベント駆動は割り込みだった ― 画面の部品とハンドラ(Step 1)
- ボタンや入力欄の操作を、割り込みとハンドラとして読み解く
- 【入門編 第7回】本番配信 ― ビルドから自宅サーバーでの公開まで(Step 1)
- 作った画面を、自宅サーバーで外から使える状態にするまでの手順
- 【入門編 第8回】振り返りと「Web と組み込みの対応表」(Step 0・1 のまとめ)
- つまずきと教訓、テスト項目書の書き方、Web と組み込みの対応表
データベース編
- 【データベース編 第1回】データベースにつなぐ仕組みと、練習用のデータベースを作る
- データベースにつなぐ仕組みと、壊しても困らない練習用のデータベースの用意
- 【データベース編 第2回】表を作る ― CREATE TABLE とデータの型を、C の構造体と並べて
- 表の作り方とデータの型を、C の構造体の定義と並べて理解する
- 【データベース編 第3回】データを入れる ― INSERT と NULL を、C の構造体の初期化と並べて
- INSERT で行を入れる書き方と、値のない状態 NULL を、構造体の初期化と並べて理解する
- 【データベース編 第4回】見る・絞り込む・並べる ― SELECT・WHERE・LIKE・ORDER BY を、C の for ループと並べて
- 表から行を取り出し、条件で絞り込み、並べ替える書き方を、配列を for ループで調べる処理と並べて理解する
- 【データベース編 第5回】数える・まとめる ― COUNT と GROUP BY を、C の集計ループと並べて
- 行を数え、項目ごとにまとめて平均・最大・最小を出す
- 【データベース編 第6回】書き換える・消す ― UPDATE と DELETE を、トランザクションで安全に試す
- 書き換えと削除を、取り消せるトランザクションの中で試す
- 【データベース編 第7回】控える・戻す ― mysqldump の控えは、戻し方まで確かめる
- 一部の行だけを控えて、消してから戻す
あわせて読む:
- 【MariaDB】コピペで動かしていた WordPress のデータベースのコマンドを、意味から理解する
- 記事の中でそのまま実行していたデータベースのコマンド(控え・確認・一括変更)を、1つずつ読み解く
実践編(Step 2〜:アプリの機能を作る)
準備中です。最初の回は、画面とサーバーで計算を分担する計算 API(Step 2)を予定しています。記事を公開したら、ここに順に追加していきます。
番外編
- 【番外編】組み込みエンジニアが Git でつまずいた6つのこと
- 初期ブランチ名、日本語ファイル名、空ファイルのコミット、push の認証エラーなど、実際のつまずきと直し方
- 【番外編】VS Code の Remote-SSH で、自宅サーバーを直接開発する
- 手元の VS Code からサーバーに接続して開発する仕組みと設定、ポート転送、GitHub への push
- 【番外編】開発環境の全体像 ― 自宅サーバー・VS Code・GitHub の構成
- 手元の PC、自宅サーバー、Cloudflare、GitHub が、それぞれ何を受け持っているかの構成紹介
最終更新:2026年10月24日
