紙の点検表をスマホにする ― フロントエンドとは何か、何を作るか

設備の日常点検を、紙の点検表からスマホに置きかえる「点検チェックシート」を、ブラウザで動くツールとして作っていきます。作りながら、フロントエンド開発の基本を1回に1つずつ身につけるのが、シリーズ「作って学ぶフロントエンド」の目的です。

最初の1ファイル版から始めて、Node.js・Vite・TypeScript・テスト・自動チェックと、現場で実際に使われている道具を順に足していきます。第1回の今回は、作るものと「フロントエンドとは何か」を整理します。

紙の点検表の「面倒」
作るもの：点検チェックシート
フロントエンドとは
できあがるまでの流れ
データの形を先に決める
シリーズで扱うこと
まとめ

紙の点検表の「面倒」

機械の始業前点検は、多くの現場でまだ紙です。点検そのものは数分でも、その前後に手間がかかります。

基準を覚えていないと判定できない：「油温は何度まで？」をいちいち確認する
異常が埋もれる：×が付いていても、紙の束の中では誰も気づかない
あとで集計できない：「先月、エア圧の異常は何回？」に答えるには、紙をめくって数えるしかない
書き漏れ：空欄のまま提出されても、その場では気づけない

紙の点検表の4つの面倒と、ツールでの解決を左右に並べた図 — 紙の点検表の「面倒」と、ツールにしたときの変わり方

どれも「画面が判定してくれる」「記録がデータとして残る」だけでかなり減ります。大きなシステムを入れなくても、スマホのブラウザで開ける1ページから始められるのが、この題材を選んだ理由です。

作るもの：点検チェックシート

点検チェックシートの完成イメージ。点検画面、異常が目立つ記録一覧、CSV を表計算ソフトで集計する3つの画面 — 完成イメージ。①点検する ②記録を見る ③集計する（画面は開発予定のイメージ）

機能	紙だと	ツールだと
○/× の項目	丸を書く	大きなボタンを押す
数値の項目（油温・エア圧）	数字を書き、基準と見比べる	入れた瞬間に基準内か判定し、外れたら色が変わる
書き漏れ	提出後に気づく	全部答えるまで「記録する」が押せない
記録	紙のファイル	端末に保存し、一覧で異常だけ目立たせる
集計	手で数える	CSV に書き出して Excel へ

設備名・点検項目・基準値は、すべて説明用に作った架空のものです（「ライン A プレス 1 号機」など）。記録はその端末のブラウザの中にだけ保存し、外のサーバーには送りません。

フロントエンドとは

Web のしくみは、大きく2つに分かれます。

	フロントエンド	バックエンド
動く場所	使う人のブラウザ（スマホ・PC）	サーバー
担当	画面・操作・入力のチェック・端末内の保存	データベース・ログイン・ほかのシステムとの連携
主な言語	HTML・CSS・JavaScript（TypeScript）	PHP・Python・Node.js など

フロントエンド（ブラウザ）とバックエンド（サーバー）の役割の図。今回はブラウザ側だけで作り、サーバーはファイルを渡すだけ — フロントエンドとバックエンド。点検チェックシートはブラウザ側だけで仕事が完結する

以前は「フロントエンド＝見た目を整える仕事」と思われがちでしたが、今はブラウザでできることが大きく増えました。入力の判定、データの保存、カメラでの撮影、ファイルの書き出し、通信が切れても動くしくみまで、サーバーなしでもブラウザだけで仕事が完結するようになっています。

点検チェックシートも、まずはフロントエンドだけで作ります。サーバーにプログラムを置かないので、ファイルを置ける場所さえあれば公開でき、個人情報や記録が外に出る心配も小さくなります。

できあがるまでの流れ

Web のツールは、おおよそ次の順で作られます。1人で作るときも、この順番を意識しておくと迷いにくくなります。

決める・設計する・作る・確かめる・公開する・育てるの6段階と、育てるから設計に戻る矢印 — ツールができあがるまでの流れ

決める：誰が、どこで、何に困っているか（今回は「紙の点検表」）
設計する：画面に何を置き、データをどんな形で持つか
作る：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 },
  // ...
];

点検項目のリスト（データ）から、○/× ボタンと数値入力欄の画面が作られる図 — type が okng ならボタン、num なら基準つきの入力欄。画面はデータから作る

項目が「○/× で答えるもの」と「数値を入れて基準と比べるもの」の2種類しかないと決めておけば、画面はこのリストから自動で作れます。点検項目が変わっても、リストを書きかえるだけで済みます。設備ごとに項目を変えたくなったときも、このリストを差し替えればよいわけです。

シリーズで扱うこと

段階	学ぶこと
はじめの一歩	HTML・CSS・JavaScript だけで1画面を作る
開発環境	Node.js と npm、Vite でのローカルサーバーとビルド、公開までの1周
標準と互換性	スマホのブラウザごとの違い、実機での確認
次の一歩	TypeScript、CSS の整理、フレームワークを使うかの判断、ブラウザの機能（保存・カメラ・CSV）
品質	アクセシビリティ、開発者ツールと Lighthouse、コードの整形とテスト、自動チェック（CI）、セキュリティ