設備の日常点検を、紙の点検表からスマホに置きかえる「点検チェックシート」を、ブラウザで動くツールとして作っていきます。作りながら、フロントエンド開発の基本を1回に1つずつ身につけるのが、シリーズ「作って学ぶフロントエンド」の目的です。
最初の1ファイル版から始めて、Node.js・Vite・TypeScript・テスト・自動チェックと、現場で実際に使われている道具を順に足していきます。第1回の今回は、作るものと「フロントエンドとは何か」を整理します。
紙の点検表の「面倒」
機械の始業前点検は、多くの現場でまだ紙です。点検そのものは数分でも、その前後に手間がかかります。
- 基準を覚えていないと判定できない：「油温は何度まで？」をいちいち確認する
- 異常が埋もれる：×が付いていても、紙の束の中では誰も気づかない
- あとで集計できない：「先月、エア圧の異常は何回？」に答えるには、紙をめくって数えるしかない
- 書き漏れ：空欄のまま提出されても、その場では気づけない
どれも「画面が判定してくれる」「記録がデータとして残る」だけでかなり減ります。大きなシステムを入れなくても、スマホのブラウザで開ける1ページから始められるのが、この題材を選んだ理由です。
作るもの：点検チェックシート
| 機能 | 紙だと | ツールだと |
|---|---|---|
| ○/× の項目 | 丸を書く | 大きなボタンを押す |
| 数値の項目（油温・エア圧） | 数字を書き、基準と見比べる | 入れた瞬間に基準内か判定し、外れたら色が変わる |
| 書き漏れ | 提出後に気づく | 全部答えるまで「記録する」が押せない |
| 記録 | 紙のファイル | 端末に保存し、一覧で異常だけ目立たせる |
| 集計 | 手で数える | CSV に書き出して Excel へ |
設備名・点検項目・基準値は、すべて説明用に作った架空のものです（「ライン A プレス 1 号機」など）。記録はその端末のブラウザの中にだけ保存し、外のサーバーには送りません。
フロントエンドとは
Web のしくみは、大きく2つに分かれます。
| フロントエンド | バックエンド | |
|---|---|---|
| 動く場所 | 使う人のブラウザ（スマホ・PC） | サーバー |
| 担当 | 画面・操作・入力のチェック・端末内の保存 | データベース・ログイン・ほかのシステムとの連携 |
| 主な言語 | HTML・CSS・JavaScript（TypeScript） | PHP・Python・Node.js など |
以前は「フロントエンド＝見た目を整える仕事」と思われがちでしたが、今はブラウザでできることが大きく増えました。入力の判定、データの保存、カメラでの撮影、ファイルの書き出し、通信が切れても動くしくみまで、サーバーなしでもブラウザだけで仕事が完結するようになっています。
点検チェックシートも、まずはフロントエンドだけで作ります。サーバーにプログラムを置かないので、ファイルを置ける場所さえあれば公開でき、個人情報や記録が外に出る心配も小さくなります。
できあがるまでの流れ
Web のツールは、おおよそ次の順で作られます。1人で作るときも、この順番を意識しておくと迷いにくくなります。
- 決める：誰が、どこで、何に困っているか（今回は「紙の点検表」）
- 設計する：画面に何を置き、データをどんな形で持つか
- 作る：HTML・CSS・JavaScript を書く
- 確かめる：いろいろなブラウザ・端末で動くか、入力を変えて試す
- 公開する：サーバーに置き、使ってもらう
- 育てる：使った人の声で直し、また公開する
このシリーズでは、この流れを何周も回します。最初は1ファイルで「作る→確かめる」だけ。回を追うごとに、開発の道具を足して、各段階を楽に・確実にしていきます。
データの形を先に決める
設計で一番大事なのは、画面よりもデータの形です。点検項目は、次のようなリストにします。
const ITEMS = [
{ id: 'oil-level', q: '作動油の量はゲージの範囲内か', type: 'okng' },
{ id: 'oil-temp', q: '作動油の温度', type: 'num', unit: '℃', min: 20, max: 55 },
{ id: 'air', q: 'エア圧', type: 'num', unit: 'MPa', min: 0.45, max: 0.60 },
// ...
];
項目が「○/× で答えるもの」と「数値を入れて基準と比べるもの」の2種類しかないと決めておけば、画面はこのリストから自動で作れます。点検項目が変わっても、リストを書きかえるだけで済みます。設備ごとに項目を変えたくなったときも、このリストを差し替えればよいわけです。
シリーズで扱うこと
| 段階 | 学ぶこと |
|---|---|
| はじめの一歩 | HTML・CSS・JavaScript だけで1画面を作る |
| 開発環境 | Node.js と npm、Vite でのローカルサーバーとビルド、公開までの1周 |
| 標準と互換性 | スマホのブラウザごとの違い、実機での確認 |
| 次の一歩 | TypeScript、CSS の整理、フレームワークを使うかの判断、ブラウザの機能（保存・カメラ・CSV） |
| 品質 | アクセシビリティ、開発者ツールと Lighthouse、コードの整形とテスト、自動チェック（CI）、セキュリティ |
各回でツールを実際に直し、そのときの数値やハマったところを書いていきます。
まとめ
- 題材は、紙の点検表をスマホに置きかえる「点検チェックシート」
- フロントエンドは、ブラウザで動く部分。今は判定・保存・書き出しまでブラウザだけでできる
- 流れは「決める→設計→作る→確かめる→公開→育てる」。これを何周も回す
- 画面より先に、データの形（点検項目のリスト）を決める
次回は、HTML・CSS・JavaScript の3つだけ、1ファイルで最初の点検画面を作ります。
コメント