AIイラストサーチ: フロントエンド編
はじめに
以前、AIイラストサーチというものを作ったという記事を投稿しました
今回の記事は、フロントエンドを開発している際に、自分が頭の中で考えていたことを、文字として残すために書いています。（ので、ほぼ個人用のメモ。参考にならない可能性あり)
やったこと
react + typescriptで1画面のSPAを作成した。
検索バーに入力を行うと、バックエンドのAPIに検索結果の問い合わせを行う。
考えていたこと
なんでreact + typescriptにした？
型を扱いたかったので、typescriptにした。
業務では、vueやreactはちょこちょこ使う。
個人では、だいぶ昔にvueを使ったアプリを作ったことがあるくらい。
reactとtypescriptを使ってゼロからアプリを作ったことがなかった。
なので、勉強も兼ねて、react + typescriptで構築してみることにした。
状態管理どうやってる？
contextで管理している
状態を持ちたいが、親のコンポーネントから子のコンポーネント、そして孫のコンポーネントにpropsで状態を渡していく（いわゆるバケツリレー) は、コードが読みづらくなると判断した。
そのため、グローバルな状態管理を行いたい。しかし、Reduxなどを導入するのは、今回のアプリケーションの規模に対しては余計な処理が増えて、逆にわかりにくくなると判断した。なので、contextを使用した。
contextではシンプルな状態管理が行える
<IsLoadingProvider>
<ImagesProvider>
hoge
</ImagesProvider>
</IsLoadingProvider>
ただし、contextで囲むので、これ以上状態が増えると、変な事になりそう。
UI周り気にしていることは？
バックエンド側で、機械学習の処理とElastic Search内での近似近傍探索処理が発生する。リクエストが完了するまで時間がかかる。
そのため、ロード画面を入れるようにした。
また、ロード中は、検索バーが入力不可となり、ユーザーがUI上から連続でAPIにリクエストを飛ばすことができないようにした。
テスト書いた？
コンポーネントテストを書きます! ( 書いてない )
開発環境と本番環境
開発環境では、yarn startでインタラクティブに開発ができるようにした。
本番環境では、nginxの特定ディレクトリ以下に、ビルドされたファイルを出力した。
Discussion