JavaScriptだけで顔認識AIを動かしてみた ― 「認識」の先に何をさせる?
2026.10.20顔認識AIを「作る」から、その認識を社会的に「どう使うか」へ
JavaScriptでつくる、小さな実験
はじめに
個人的にAIの学習について考えるために、ちょっとした実験をしてみました。
※組織としてではなく、個人的です
作ってみたのは、ブラウザのカメラに映った人の顔を認識するシステムです。
-
顔を認識する
-
認識した人を出席として記録する
-
特定の人なら警告を表示する
技術的には、JavaScriptと顔認識ライブラリを使えば、ブラウザだけでもここまでできます。
でも、今回やりたかったのは、
「顔認識AIを作りました。すごいでしょう」
という話ではありません。
むしろ、顔を認識できるようになった、その先について考えてみたかったんです。
技術力を高めることは、もちろん大切です。
ただ、技術は目的ではなく手段です。
世の中では、「こんな高い技術があります」で止まってしまうともったいない。
技術のすごさを語って満足することは、社会に出て何かを動かした経験がなくても、案外できてしまいます。
「こんな技術があります」
「こんなAIが使えます」
だから?、じゃあ、その先は?
僕が悩んでるのは、そこです。
AIが何かを認識した。
その先で、人間は何をするのか?
何を作るのか。何を決めるのか。
そして、そもそもAIに何をさせていいのか。
これは学生だけの話でも、技術者だけの話でもありません。
AIを使う僕たちみんなが、考えなければならないことだと思っています。
今回の顔認識システムは、そのことを考えるための小さな実験です。
AIが何かを認識した。
じゃあ、その結果をどう使うんですか?
そもそも、その結果を使っていいんですか?
そういう話です。
技術の話はこの後にも出てきますが、まとめだけ知りたい方は、目次にある「まとめ」まで飛んでもらって構いません。
目次
今回の実験から考えた3つのこと
まず、技術の説明をする前に、今回の実験を通して考えたことを3つ書いておきます。
1. 「AIを作れる人」から「AIに何をさせるかを決められる人」へ
AIが顔を認識できるようになったとしても、それだけでは何も起きません。
例えば、
|
1 2 3 4 5 6 7 8 9 |
カメラ ↓ 顔を認識する ↓ 「田中先生かもしれない」と判定する |
ここまではAIの仕事です。
でも、その後に、
|
1 2 3 4 5 |
田中先生と認識した ↓ 出席にする |
とするのか、
|
1 2 3 4 5 |
田中先生と認識した ↓ 画面に名前を表示する |
とするのか、
|
1 2 3 4 5 |
田中先生と認識した ↓ 別のシステムにデータを送る |
とするのかは、別の話です。
つまり、
AIに何を認識させるかだけではなく、認識した結果を何に使うのかを設計することが重要になる。
ということです。
例えば、自動運転を考えてみても同じです。
信号機をAIが認識できた。
では、その認識結果を使って、車はどう動くのか。
「赤だから止まる」というプログラムを書くのか。
歩行者がいるから、さらに減速するのか。
緊急車両が来たらどうするのか。
AIが認識した結果を、社会の中の「判断」につなげていく必要があります。
だからAI時代には、
「AIを作れる人」だけではなく、「AIに何をさせるべきかを決められる人」が重要になる。
と考えました。
2. 「AIに何をさせるか」だけではなく、「AIに何をさせないか」
「AIに何をさせないか」とは、AIを制限することではなく、技術ができることが増えるほど「どこまでAIに任せ、どこからを人間が担うか」という役割分担を設計する、という意味です。
もう一つ重要なのが、こちらです。
技術的にできるからといって、やっていいとは限りません。
例えば、顔認識AIで、
「この人は誰なのか」
を認識できるようになったとします。
すると、技術的には、
-
出席を自動で取る
-
入退室を記録する
-
特定の人物が来たら通知する
-
人物ごとに行動を記録する
-
他のシステムと組み合わせる
といったことも考えられます。
でも、
「できるから全部やろう」
では、ちょっと危ないわけです。
顔はかなり強い個人情報です。
本人が知らないところで顔を登録されていたらどうでしょう。
間違って別の人として認識されたらどうでしょう。
いつまでデータを保存するのでしょう。
誰がそのデータを見るのでしょう。
そもそも、何の目的で使うのでしょう。
こういう問題が出てきます。
つまりAIを使うときには、
「何をさせるか」だけではなく、「何をさせないか」を決めることも設計の一部になる。
ということです。
今回のシステムでも、そこは意識しています。
AIそのものに、
「この人は危険人物だ」
と判断させているわけではありません。
AIがやっているのは、
「カメラに映っている顔が、登録されている誰の顔に近いか」
を判定するところまでです。
その結果を受け取って、
|
1 2 3 4 5 6 7 |
もし田中先生なら 出席にする もし警告対象として登録されていたら 警告を表示する |
という処理をしているのは、普通のJavaScriptです。
ここはかなり重要なポイントだと思っています。
AIの判断と、その結果を使って人間が設計した処理は、分けて考えたほうがいい。
3. AIは「資本を持つ企業」に集中していく可能性がある
もう一つ、AIについて考えていることがあります。
AIは、誰でも簡単に作れるようになってきました。
今回のような顔認識であれば、ブラウザ上で動かすこともできます。
ただし、
最先端のAIそのものを作る
となると話が変わります。
大量のデータ。
大量のGPU。
膨大な計算資源。
研究者。
エンジニア。
そして、それを維持するためのお金。
こういうものが必要になります。
なので、AIの基盤そのものについては、今後さらに資本を持っている企業に集中していく可能性があります。
一方で、AIを使うためのAPIやサービスは、どんどん一般化していくでしょう。
そうなると、すべての人が巨大なAIモデルを一から作る必要はなくなります。
むしろ、
「そのAIを使って何を作るのか」
のほうが重要になってくる。
例えば、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
AI ↓ 画像を認識する ↓ 結果を返す ↓ 自分のプログラムで処理する ↓ サービスとして提供する |
という形です。
そう考えると、これからの教育でも、
「AIの中身を全部作れるようになりましょう」
だけではなく、
「AIを使って何を実現するのか」を考えられるようにする。
という方向も重要になってくるんじゃないかと思います。
では、実際に何を作ったのか
ここからは、今回の実験について技術的に説明します。
今回作ったものは、かなり小さなシステムです。
イメージとしては、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
カメラ ↓ 顔を検出 ↓ 顔の特徴を数値化 ↓ 登録済みの顔と比較 ↓ 「誰に近いか」を判定 ↓ その結果を普通のプログラムで利用 ├─ 出席 └─ 警告 |
という流れです。
ブラウザだけで動くので、サーバーを用意しなくても実験できます。
今回使ったもの
今回の実験では、以下を使いました。
-
JavaScript
-
Google Colab
-
Webカメラ
-
@vladmandic/face-api -
localStorage
顔認識には、@vladmandic/face-api@1.7.12 を使っています。
CDNから読み込むだけなので、かなり手軽です。
|
1 |
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://cdn.jsdelivr.net/npm/@vladmandic/face-api@1.7.12/dist/face-api.js"</span><span class="nt">></script></span> |
モデルもCDNから読み込めます。
|
1 2 3 |
<span class="kd">const</span> <span class="nx">MODEL_URL</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">https://cdn.jsdelivr.net/gh/vladmandic/face-api/model/</span><span class="dl">'</span><span class="p">;</span> |
AIはどこにいるのか
ここが、AIについて説明するときに意外と分かりにくいところです。
今回のシステムには、普通のJavaScriptの処理と、AIモデルによる処理があります。
ざっくり分けると、
|
1 2 3 4 5 6 7 8 9 10 11 |
JavaScript ↓ システム全体を動かす face-api.js ↓ 顔を検出・特徴を抽出・顔を比較する |
という関係です。
今回使用している主なモデルは3つです。
TinyFaceDetector
画像の中から、
「ここに顔があります」
という部分を検出します。
FaceLandmark68TinyNet
顔の特徴点を検出します。
例えば、目や鼻、口などの位置関係を見るための情報です。
FaceRecognitionNet
顔から特徴量を作ります。
今回のシステムでは、最終的に128個の数値からなるベクトルとして顔の特徴を扱います。
例えばイメージとしては、
|
1 |
[0.12, -0.04, 0.38, ... , 0.21] |
のようなデータです。
人間が見ても、
「この数字は田中先生の顔だな」
とは分かりません。
でも、似た顔なら、この数値の並びもある程度近くなります。
「顔を登録する」とは何をしているのか
ここも誤解されやすいところです。
今回のシステムでは、
顔を登録するたびにAIを再学習している
わけではありません。
ここは結構大事です。
登録時には、
-
画像またはカメラから顔を取得する
-
顔を検出する
-
顔の特徴量を取得する
-
名前と一緒に保存する
ということをしています。
例えば、
|
1 2 3 4 5 6 7 |
<span class="p">{</span> <span class="nl">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">田中先生</span><span class="dl">"</span><span class="p">,</span> <span class="nx">descriptor</span><span class="p">:</span> <span class="p">[</span><span class="mi">128</span><span class="nx">個の数値</span><span class="p">]</span> <span class="p">}</span> |
というデータを保存します。
保存先にはブラウザの localStorage を使っています。
つまり、
|
1 2 3 4 5 6 7 8 9 |
田中先生 ↓ 顔の特徴量 ↓ ブラウザに保存 |
という仕組みです。
AIモデルそのものを書き換えているわけではありません。
顔を認識するときに何をしているのか
カメラに人が映ると、登録時と同じように顔の特徴量を取得します。
そして、登録済みの顔と比較します。
今回使っているのが、
|
1 2 3 |
<span class="nx">faceapi</span><span class="p">.</span><span class="nf">euclideanDistance</span><span class="p">() </span> |
です。
簡単に言えば、
「この2つの顔の特徴量は、どのくらい離れているのか」
を数値で出しています。
距離が小さいほど、
|
1 2 3 4 5 |
特徴が近い ↓ 同じ人である可能性が高い |
と考えられます。
今回の実験では、例えば、
|
1 |
<span class="kd">const</span> <span class="nx">threshold</span> <span class="o">=</span> <span class="mf">0.55</span><span class="p">;</span> |
として、
|
1 2 3 4 5 6 7 8 9 10 11 |
距離 < 0.55 ↓ 登録された人物として認識 距離 >= 0.55 ↓ Unknown |
というルールにしています。
もちろん、この数字を設定したからといって、100%正しいわけではありません。
顔認識には誤認識があります。
照明、角度、カメラ、表情などによっても結果は変わります。
なので、実際の運用を考えるなら、この「しきい値」も含めて検証する必要があります。
複数人も同時に認識できる
今回の実験では、1人だけではなく、カメラに映っている複数の顔を同時に検出できます。
流れとしては、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
カメラ映像 ↓ 顔Aを検出 ↓ 特徴量を取得 ↓ 登録者と比較 顔Bを検出 ↓ 特徴量を取得 ↓ 登録者と比較 顔Cを検出 ↓ 特徴量を取得 ↓ 登録者と比較 |
という処理をしています。
それぞれについて、一番距離が小さい登録者を探します。
認識したあとは、普通のプログラム
今回、一番見せたかったのはここです。
顔認識が終わったら、あとは普通のJavaScriptです。
例えば、
|
1 2 3 4 5 |
<span class="k">if </span><span class="p">(</span><span class="nx">recognizedName</span> <span class="o">!==</span> <span class="dl">"</span><span class="s2">Unknown</span><span class="dl">"</span><span class="p">)</span> <span class="p">{</span> <span class="nf">markAttendance</span><span class="p">(</span><span class="nx">recognizedName</span><span class="p">);</span> <span class="p">}</span> |
とすれば、
認識できた人を出席にする
という処理ができます。
つまり、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
AI ↓ 「田中先生に近い」 ↓ JavaScript ↓ 出席として記録 |
です。
AIが「出席」という概念を理解しているわけではありません。
AIは顔を認識しています。
その結果を使って、人間が決めたルールをプログラムとして実行しています。
出席データもブラウザに保存する
出席情報も localStorage に保存しています。
例えば、
|
1 2 3 4 5 6 7 8 9 10 11 |
<span class="p">{</span> <span class="dl">"</span><span class="s2">2026-09-10</span><span class="dl">"</span><span class="p">:</span> <span class="p">[</span> <span class="dl">"</span><span class="s2">じょう</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">田中先生</span><span class="dl">"</span> <span class="p">]</span> <span class="p">}</span> |
のような形です。
日付単位で管理しているので、
|
1 2 3 4 5 |
9月10日 じょう 田中先生 |
という出席記録を残せます。
同じ日に何度顔認識されても、同じ人を何回も出席登録しないようにしています。
つまり、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
顔認識 ↓ 名前が分かる ↓ 今日の出席データを確認 ↓ まだ登録されていなければ追加 |
という処理です。
これもAIではなく、普通のプログラムです。
「警告」もAIが判断しているわけではない
今回、もう一つ実験として「警告」を入れました。
登録した人物に、
|
1 |
<span class="nx">warning</span><span class="p">:</span> <span class="kc">true</span> |
という情報を持たせます。
例えば、
|
1 2 3 4 5 6 7 8 9 |
<span class="p">{</span> <span class="nl">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">田中先生</span><span class="dl">"</span><span class="p">,</span> <span class="nx">descriptor</span><span class="p">:</span> <span class="p">[</span><span class="mi">128</span><span class="nx">個の数値</span><span class="p">],</span> <span class="nx">warning</span><span class="p">:</span> <span class="kc">true</span> <span class="p">}</span> |
です。
そして、その人物が認識されたら、
-
顔枠を赤くする
-
⚠ 田中先生と表示する -
画面全体に警告を表示する
-
一定時間点滅させる
といった処理をします。
ここでも重要なのは、
AIが「この人は危険だ」と判断しているわけではない
ということです。
単純に、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
顔認識 ↓ 田中先生と一致 ↓ 田中先生の設定を確認 ↓ warning === true ↓ 警告を表示 |
です。
つまり、「警告対象」という判断そのものは、システムを設計した人間が設定しています。
これは、AIを社会で使うときにかなり重要なポイントだと思います。
技術的には、かなり簡単にAIを組み込める
今回の実験をやってみて感じたのは、
AIを使ったシステムを作ること自体のハードルが、かなり下がっている
ということです。
昔なら、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
AIを研究する ↓ モデルを作る ↓ 大量のデータを用意する ↓ 学習させる ↓ サーバーを用意する ↓ アプリケーションに組み込む |
みたいな話になりがちでした。
もちろん、最先端のAIを作るなら今でも大変です。
でも、AIを利用する側であれば、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
既存のAIモデル ↓ API / ライブラリ ↓ 自分のプログラム ↓ 自分のサービス |
という形で、かなり簡単に組み込めます。
今回も、顔認識そのものをゼロから作ったわけではありません。
既存のモデルを利用して、
「顔認識の結果を、別のプログラムにつないでみる」
という実験をしています。
ここからが、たぶんAI教育で重要になる
ここまでの話を授業に持っていくと、面白いことができます。
例えば学生に、
「顔認識AIを使って何か作ってください」
とだけ言うとします。
すると、
|
1 2 3 4 5 |
顔を認識しました! ↓ 名前が出ました! |
で終わってしまう可能性があります。
でも、
「顔を認識したあと、その情報を何に使いますか?」
と聞いてみる。
すると、そこから考えることが増えます。
例えば、
|
1 2 3 4 5 |
顔認識 ↓ 出席 |
だけではありません。
|
1 2 3 4 5 |
顔認識 ↓ 教室の混雑状況を把握 |
かもしれない。
|
1 2 3 4 5 |
顔認識 ↓ 高齢者施設で本人確認 |
かもしれない。
|
1 2 3 4 5 |
顔認識 ↓ 入退室管理 |
かもしれない。
逆に、
|
1 2 3 4 5 |
顔認識 ↓ 人を勝手に追跡 |
という使い方も技術的には考えられます。
でも、それは本当にやっていいのか。
ここまで考えて、初めて「AIを使ったシステムを設計する」という話になるんじゃないかと思います。
AIに「何をさせるか」を考える
AIは、こちらが目的を与えない限り、勝手に社会を良くしてくれるわけではありません。
例えば、
|
1 |
画像を認識するAI |
があったとしても、
|
1 |
認識した結果を何に使う? |
は別問題です。
さらに、
|
1 |
その結果を誰が見る? |
|
1 |
どのくらい保存する? |
|
1 |
本人の同意は必要? |
|
1 |
間違えたらどうする? |
|
1 |
AIに判断させるべき? |
という問題も出てきます。
つまり、AIをシステムに組み込むというのは、
AIモデルを呼び出すコードを書くことだけではない。
その結果を社会の中でどう扱うのかまで設計することです。
「AIに何をさせないか」を決める
個人的には、こちらのほうが今後かなり重要になると思っています。
AIは、
「できること」
が急速に増えています。
だからこそ、
「できるけど、やらない」
を決める必要があります。
例えば今回の顔認識なら、
|
1 |
顔を認識する |
こと自体はできます。
でも、
|
1 |
認識した人物をずっと追跡する |
となると、話が変わってきます。
さらに、
|
1 2 3 4 5 6 7 8 9 |
顔認識 ↓ 人物を評価 ↓ 評価結果を保存 |
となれば、もっと慎重に考える必要があります。
AIが高性能になるほど、
技術的な問題より、使い方を決める問題のほうが大きくなる
のではないかと思っています。
「AIを作れる人」から「AIを使って設計できる人」へ
ここで、最初の話に戻ります。
今回の実験で学生に見せたいのは、顔認識そのものだけではありません。
むしろ、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
AI ↓ 何かを認識する ↓ 結果が返ってくる ↓ その結果をプログラムで使う ↓ 何かのサービスになる |
という構造です。
AIのモデルそのものを作らなくても、
AIを組み込んだシステムは作れる。
だからこそ、
「AIを作れるか?」
だけではなく、
「AIを使って、何を作るのか?」
が重要になります。
さらに言えば、
「それを本当にAIにやらせていいのか?」
まで考える必要があります。
これからのプログラミング教育で考えたいこと
これまでのプログラミング教育では、
|
1 2 3 4 5 6 7 8 9 |
アルゴリズムを理解する ↓ コードを書く ↓ プログラムを完成させる |
という流れが中心でした。
もちろん、これは今後も重要です。
ただ、AIによってコードを書くこと自体のハードルが下がっていくと、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
何を作るのか ↓ なぜ作るのか ↓ AIに何をさせるのか ↓ AIに何をさせないのか ↓ 認識結果をどう使うのか |
という部分の重要性が、さらに高くなると思います。
コードを書くことが不要になるわけではありません。
むしろ、
コードを書いて、AIの結果を自分のシステムに組み込めること。
そして、
そのシステムが何をするべきなのかを考えられること。
この両方が必要になる。
そんなイメージです。
今回の実験で一番やりたかったこと
今回作った顔認識システムは、実用的な出席管理システムでもなければ、本格的なセキュリティシステムでもありません。
あくまで、
AIの認識結果を、その後のプログラムにつないでみるための小さな実験
です。
でも、たったこれだけでも、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
顔を認識する ↓ 名前が分かる ↓ 出席にする ↓ 条件によって警告する |
というところまで作れます。
そして、この先には、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
AIが認識する ↓ 人間が意味を与える ↓ プログラムが処理する ↓ 社会の中で何かが起きる |
という構造があります。
ここが今回、一番面白いと思ったところです。
まとめ
今回の実験から考えたことを、もう一度まとめます。
1. AIを作れる人から、AIに何をさせるかを決められる人へ
AIが認識できること自体より、
その結果を何に使うのか
を設計することが重要になる。
2. AIに何をさせるかだけではなく、何をさせないか
技術的にできることと、
社会的にやっていいこと
は同じではない。
顔認識のような技術では、特にこの視点が重要になる。
3. AIは資本を持つ企業に集中していく可能性がある
巨大なAIモデルそのものを作るには、大量のデータ、計算資源、人材、資本が必要になる。
一方で、AIを利用するためのAPIやライブラリは広く使えるようになっていく。
だからこそ、
AIを一から作る能力だけではなく、AIを使って何を設計するのか
が重要になる。
今回の実験は、顔認識AIを作ったことがゴールではありません。
むしろ、
「AIが何かを認識した。その次に、人間は何をするのか?」
という問いを考えるための実験です。
AIを「作る」ことから、
AIに何をさせるのかを「決める」ことへ。
そして、
AIに何をさせないのかを「決める」ことへ。
これからのAI教育では、こういう部分もかなり重要になってくるんじゃないかなと思っています。