2018年の中ごろまで動かしていて、Twitter Streaming APIの終了と同時に稼動停止した画像検索・閲覧システムだったけど、年末年始やることがなかったのでReactで書き直すことにした。
書き直して再稼動させるというわけでもなく、Reactに再入門するためぐらいのモチベーション。TODOアプリケーションや三目並べを書いてもReact入門はできるかもしれないけど、自分にとって馴染みがあるトピックのほうがとっつきやすそう、という感じ。
<script> タグでVue.jsを読み込む、コンポーネントの分割はなく全てがベタッと書いてある、jquery-lightboxを読み込んでいる、という状態だったのをもうちょっとましにできたらゴール。
とにかく高速に始めたいのでcreate-react-appで作業場所を用意した。
--template typescript 引数を渡すとTypeScriptで書き始められる。とにかく高速に、と言いつつESLintやprettierの設定はひと通り済ませた。
$ npx create-react-app sukui-front --template typescript
クラスコンポーネントを一切書かずにReact hooksだけで書いてみたけど、今のところは変なつまずきもなくてよさそう。画像一覧に関する情報を useImages() っていうcustom hookに集約させる、みたいな書き方ができている。
初回render時にだけAPIを叩くときは useEffect(() => { doAPI(); }, []) ってやればいいのだろうか。ミスったときはすごい勢いでAPIリクエストが行われていて、外部サーバーに向けていなくてよかったね～という感じになる。
ページ送りボタンとか、検索フォームとか、アプリケーションのいろいろなところから画像に関する情報を取得・操作することになる。Reduxとか使えばいいのかもしれないけど、いろいろな概念を一気に習得しようとすると道が長くなるのでとりあえず完成させることを目標にした。
リポジトリはこちら。
