React nesを用いたchatbot的なアプリ作成 - Elsaの技術日記(徒然なるままに)

先日お話ししたchatbotアプリが少し形になったので報告！！
作成できたのは、前回ご紹介したchatbotで作成したログイン画面のみですが😅
elsammit-beginnerblg.hatenablog.com

作成したアプリはこんな感じです。

まずはログイン。
f:id:Elsammit:20210207144127g:plain

今度はサインアップ
f:id:Elsammit:20210207153431g:plain

まだサーバーサイドは作成していないので、どんな会話を入力しても回答が一定になります。
後、やり取りが英語な理由はNESのフォントが英語のみ対応になっているためです。
もしかしたら日本語対応のための拡張ライブラリがあるかもしれないので調べてみたいと思います！！

今回のchatbotはコードを公開していないですが、、、
こういうアプリ作成した時は公開した方がよいのかな？🤔

ただアプリの紹介だけだと少し物足りないのでstateの配列追加にまとめておこうと思います。
配列の一部を取り出したり、編集したりする場合にはsliceを用いればよいことは知っていたのですが、
追加はどうやればよいのか分からなかったので調べました。

javascriptで配列への要素追加を行う場合、

var buf =[];
buf.push("hogehoge");

とするのが一般的かと思いますが、stateの配列でこちらのpushを行うのはよろしくないとのことです。
理由は、pushですと配列に対しては快適な要素が加えられるため、再描画時に想定通りの描画が行われない場合があるようです。

それではどのようにstateの配列に対して要素追加すればよいのか？
こちらのようにconcatを用いるとよろしいようです。

this.state = {
    buf:[],
};
this.setState({
     buf:this.state.buf.concat("hogehoge")
})

こちらのようにconcatを用いることで安全に要素追加が可能になります。
今回のchatbotでは、
こちらの配列をリストとして用いて、chatbotとのやり取りを追加・保存しております。

何とか形にすることが出来ました🤗
まぁ、それっぽい形になってのではないかな？満足！！
フロントエンドは何となく形になってきたので、サーバーサイドを実装していこうかな？🤔
っていうか、chatbotはサーバーサイドこそ重要ですよね。。。
望んだ答えが返ってくるようにする必要があるので。

最近サーバーサイドを触れていなかったので、これを機に勉強していきます！！
頑張ります！！