Webサイトやアプリ制作に使用されるイメージの強いJavaScriptですが、ライブラリを活用すれば、Webブラウザ上で動作するAIの開発も行えます。
本記事では、JavaScriptを使ったAIの作り方やJavaScriptで実現できるAIの活用例について解説します。
これからJavaScriptを使ったAI開発にチャレンジしてみたい方は、ぜひ本記事の作り方を参考にしてください。
そもそもAIとは？
AIはArtificial Intelligence（アーティフィシャル・インテリジェンス）の略称で、日本語では「人工知能」を意味する言葉です。
人間の知的な活動をコンピュータで再現する技術を指しており、機械学習や深層学習によって発展するのが特徴です。
現在では、検索エンジンの最適化や自動運転、チャットボットなど、多岐にわたる分野でAIが活用されており、日々の生活に欠かせない存在となっています。
一般的なAIの作り方
一般的なAIは以下のような作り方で開発されています。
- プログラミングで作る
- APIで作る
- ツールで作る
これらの一般的な作り方の詳細についてみていきましょう。
AIの作り方①プログラミングで作る
AIをプログラミングで作る方法は、最も柔軟で高度な開発が可能です。PythonやJavaScripなどのプログラミング言語を使用し、機械学習のアルゴリズムを実装することで、特定の用途に最適化されたAIを構築できます。
例えば、画像認識や自然言語処理のモデルを作成可能です。ただし、開発にはプログラミングの知識が必須であり、難易度は高めです。
そのため、プログラミングでAIを開発するのは、AIとのプログラミングの知識有しており、独自性の高いAIを開発したい場合に適した方法といえます。 また、JavaScript以外にAIを開発できるプログラミング言語であるPythonですが、両者には明確な違いがあります。
以下の記事では、JavaScriptとPythonの違いについて解説しているので、両者の違いがよくわかっていないという方は、ぜひこちらもあわせてご覧ください。
AIの作り方②APIで作る
プログラミングの知識がなくても、AIを簡単に活用できる方法としてAPIがあります。
APIとは、異なるソフトウェア同士が相互にデータを交換したり、機能を呼び出したりできるインターフェースです。
さまざまなサービスが提供するAPIを利用することで、AI機能を自分のアプリに組み込めます。
これらのサービスはすでに学習済みの高度なモデルを提供しているため、複雑な機械学習の知識が不要な点がメリットです。
AIの作り方③ツールで作る
AIを開発するためのツールを使用すれば、プログラミングのスキルがなくてもAIを作成できます。これらのツールには無料で利用できるものも多く、手軽にAI開発を試すのに適しています。
それぞれのツールによって専門性が異なるため、必要なAIを使えるツールを選定して使用することが大切です。
JavaScriptで開発したAIでできること
JavaScriptで開発したAIでは、主に以下のようなことができます。
- 画像の分類
- 物体検出
- チャットボットの開発
これらのJavaScriptで開発したAIでできることについてみていきましょう。
できること①画像の分類
JavaScriptを使ったAIには、画像を分類する機能を実装できます。例えば、写真に写っているオブジェクトが人なのか動物なのかの判別を自動的に行うことができます。
画像分類は、顔認識や物体検出などの高度な機能の基礎となるため、JavaScriptでAIを活用する第一歩として取り組みやすい技術です。
できること②物体検出
物体検出とは、画像や動画の中から特定の物体を見つけ、その位置や物を特定する技術です。
JavaScriptでは、ライブラリを活用することで、ブラウザ上でリアルタイムに物体検出を実装できます。
また、検出した物体を枠で囲ったり、テキストを表示させたりして、視覚的にわかりやすくすることも可能です。
JavaScriptならブラウザだけで物体認識を行えるため、クライアント側でのAI活用の幅が広がるでしょう。
できること③チャットボットの開発
JavaScriptを使えば、AIによるチャットボットの開発が可能です。
チャットボットは、ユーザーの質問に対して自動で回答するプログラムで、カスタマーサポートやFAQ対応、簡単な会話アシスタントなどに利用されます。
例えば、WebサイトにAIチャットボットを導入すれば、24時間体制で顧客対応ができるようになります。
ユーザーが質問を入力すると、ボットが適切な回答を返し、場合によってはデータベースと連携して追加情報を取得することも可能です。
また、AI開発をするためにJavaScriptの学習をしたいと考えている方は、以下の記事もあわせてチェックしてみてください。JavaScriptを独学するメリットや、学習のロードマップなどについて詳しく解説しています。
JavaScriptでAIを作れるライブラリ
JavaScriptには、AIを開発するための便利なライブラリがいくつか存在します。
これらのライブラリを活用することで、ブラウザ上で機械学習モデルを動作させたり、ニューラルネットワークを構築したりすることが可能です。
代表的なJavaScriptのライブラリを以下の表にまとめました。
| ライブラリ名 | 特徴 |
| TensorFlow.js | 学習済みモデルを使用できる Google提供の機械学習ライブラリ。 |
| ml5.js | TensorFlow.jsを簡単に使えるようにしたライブラリ。 |
| Brain.js | シンプルなAPIでニューラルネットワークを構築できるライブラリ。 |
| Synaptic.js | Node.jsとブラウザの両方で実行できるニューラルネットワークライブラリ。 |
| WebDNN | 推論フェーズに特化した国産のフレームワーク。 |
| Mind | Node.jsとブラウザ上で動作する学習済みのライブラリ。 |
これらのライブラリを使うことで、画像認識やチャットボットの開発、データの分類など、さまざまなAI機能をJavaScriptで実装できます。
自分の目的に合ったライブラリを選び、AI開発に挑戦してみましょう。
TensorFlow.jsを使ったAIの作り方
実際にJavaScriptのライブラリであるTensorFlow.jsを使って、画像から物体を検出するプログラムを作成してみましょう。TensorFlow.jsを使ったAIの作り方の手順は以下のとおりです。
- cdnを読み込む
- 画像を用意する
- scriptを記入する
- 開発者ツールで確認する
今回はNode.js環境を使って立ち上げたローカルサーバーを使ってTensorFow.jsの挙動を確認していきます。これらの作り方の手順について詳しく確認していきましょう。
作り方の手順①cdnを読み込む
まず、TensorFlow.jsと物体検出モデルを読み込むために、CDNを使用します。以下のscriptタグで書かれたコードをHTMLのheadタグ内に記述しましょう。
<script src=”https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd”></script>
これにより、ライブラリをローカルにインストールせずにインターネット経由で簡単に読み込みを行えます。
作り方の手順②画像を用意する
続いて、物体検出を行いたい画像をHTML内に配置します。例えば、画像のパスが「images/image.jpg」の場合、bodyタグ内に以下のように記述します。
このとき、idタグもあわせて付与しておきましょう。
作り方の手順③scriptを記入する
続いて、物体検出を行うJavaScriptコードを記述します。以下のコードでは、画像の取得や物体の検出を行って、その結果をコンソールに出力するようにしています。
const img = document.querySelector(“#img”);
const model = await cocoSsd.load();
const predictions = await model.detect(img);
console.log(predictions);
}
HTMLとは別のファイルにコードを記述する場合は、sprictタグから別途jsファイルを読み込んでください。
作り方の手順④開発者ツールで確認する
最後にブラウザから物体検出ができているかを確認したら、JavaScriptを使ったAIの作り方は完了です。
ブラウザから開発者ツールを開いて、コンソールに物体検出の結果が表示されているかを確認してください。
今回のケースでは、personがコンソールに2つ出力されており、画像に2人の人物が映っていることを特定できています。
このように、TensorFlow.jsを使えば、画像の内容を自動的に判別するAIを作成できます。
TensorFlow.jsを使って物体検出を自動で行えるようになれば、制作するアプリにAIを活用した高度な機能を搭載できるようになるでしょう。
また、今回の作り方で記述したコードの全体は以下のとおりです。
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Document</title>
<script src=”https://cdn.jsdelivr.net/npm/@tensorflow/tfjs”></script>
<script src=”https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd”></script>
</head>
<body>
<img id=”img” src=”images/image.jpg”>
<script>
window.onload = async function() {
const img = document.querySelector(“#img”);
const model = await cocoSsd.load();
const predictions = await model.detect(img);
console.log(predictions);
}
</script>
</body>
</html>
JavaScriptを使ったAI開発の方法を学ぶなら
JavaScriptを使ったAI開発のスキルを身につけるなら、以下の方法があります。
- 独学で学ぶ
- 通学で学ぶ
これらの学習方法についてみていきましょう。
学習方法①独学で学ぶ
JavaScriptを使ったAI開発を独学で学ぶ場合、オンライン教材や書籍を活用すると効率的です。
まず、基本的なJavaScriptの知識を習得し、その後TensorFlow.jsやBrain.jsなどのAI関連ライブラリを学ぶことで段階的にスキルを身につけられます。
実際に、小規模なAI開発を行ってみることでより理解が深まるでしょう。
学習方法②通学で学ぶ
専門学校やプログラミングスクールでは、JavaScriptを使った開発の実践的なスキルを体系的に学べます。
講師の指導を受けながら学べるため、独学よりも効率的にスキルを習得しやすいのがメリットです。
また、チーム開発の機会が多く、実務に近い経験を積める点も魅力です。
さらに、スクールによっては、卒業後の転職支援が含まれるコースもあります。
そのため、通学での学習はJavaScriptエンジニアを目指している方に、特におすすめです。
JavaScriptを使ったAIの作り方のまとめ
今回は、JavaScriptを使ったAIの作り方について解説しました。JavaScriptを使えば、ブラウザ上で画像分類や物体検出、チャットボットの開発などが実現できます。
特に、JavaScriptはライブラリを活用することで、高度なスキルがなくてもAI開発をできるのが特徴です。
これからAI開発に挑戦する方は、ぜひ本記事の作り方を参考にして、自分のプロジェクトに活用してみてください。
