🗂

AIイラストサーチ: フロントエンド編

2022/07/18に公開

はじめに

以前、AIイラストサーチというものを作ったという記事を投稿しました
https://zenn.dev/sugasuga/articles/83a1ff1c62aa53

今回の記事は、フロントエンドを開発している際に、自分が頭の中で考えていたことを、文字として残すために書いています。(ので、ほぼ個人用のメモ。参考にならない可能性あり)

やったこと

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