Node.jsとReactを使ったシンプルなchatbotの実装

サマリー

Javascriptを使ったフロントサイドのサーバーフレームワークであるNode.jsとReactを用いたシンプルなchatbotの実装について述べる。

基本的な動作としては、会話のルールを書いた後に、jsonファイルにそれらを落とし込み、書き込まれたシーケンスの流れに沿って会話が進むルールベースのものとなる。

環境設定

まずNode.jsをインストールする。nodeのサイトのダウンロードページにアクセスすると以下のようなページに行く。それぞれのOSに合わせてインストーラーをダウンロードする。

基本的には特別な設定は無く、「next」を押していくことでダウンロードは完了する。最終的にダウンロードできたかどうかは、ターミナルで「node –version」を入力してバージョンが表示されれば完了している。また、nodeのパッケージ管理ツールであるnpmも同時にダウンロードされているはずなのでそちらも「npm –version」でダウンロードされていることを確認する。

npmは企業内で利用する際にはプロキシ設定が必要となる。

npm config set proxy (それぞれのプロキシアドレス:例http://proxy.example.com:8080
npm config set https-proxy (それぞれのプロキシアドレス:例http://proxy.example.com:8080

次に、JavascriptのフレームワークであるReactのフレームワークを作成する。まず、任意のフォルダーのディレクトリ下で、ターミナルを動作させて、reactのテンプレート(名称は任意(今回はmy-app))を作成する。

npx create-react-app my-app

次に作成したmy-appディレクトリに移動して、Reactを動作させる

cd my-app
npm start

reactが立ち上がるとブラウザ(http://localhost:3000)で以下のようなReact画面が見える。

生成したmy-appのフォルダーの中は以下のような構成となっている。

これらの中で「src」フォルダーの中は以下のようになる。

基本的にはApp.jsファイルの中のコードを書くこととなる。デフォルトで書かれてあるコードは以下となる。

import logo from './logo.svg';
import './App.css';

function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}

export default App;

react-simple-chatbotの利用

ここでChatbotのライブラリとしてreact-simple-chatbotを利用する。

ドキュメンテーションのボタンをクリックすると、インストールの手順が現れる

ターミナルで「npm install react-simple-chatbot -save」を入力してライブラリをインストールする。

先程のApp.jsのファイルを以下のものに書き換える。

import React from 'react';
import Sample from './sample';
import './App.css';

function App() {
const style = {
width: "50%",
margin: "0 auto",
marginTop: 150
};
return (
<div className="App">
<div style={style}>
<Sample />
</div>
</div>
);
}

export default App;

さらに同じフォルダー内にsample.jsファイルを作成し、以下のようにcahtbotのシーケンスをコードする。

import React from 'react';
import ChatBot from 'react-simple-chatbot';

export const Sample = () => {
return (
<ChatBot
steps={[ 
　　　{ 　　　　　　　id: '1', 
　　　message: 'What is your name?', 
　　　trigger: '2', }, 
　　{ 　　　　　　　id: '2', 
　　　　　　　　　user: true, 
　　　trigger: '3', }, 
　　{ 　　　　　　　id: '3', 
　　　message: 'Hi {previousValue}, nice to meet you!', 
　　　　　　　　　　　end: true, },
　　　　　　 ]}
/>
)
}

export default Sample

後は、基本的には、エクセル等上で作成したルールシーケンスを上記のjsonデータ構造に変換していくだけで良い。

作成が終了した時点でターミナルで「npm start」してブラウザで動作を確認することができる。