Takuya Natsume

### 概要 * エンジニアが技術書を購入する際にはネットで検索して探してみることも多いと思うが、"Amazonなどでコメント付きのレビュー数が少なく実際にどのような書籍なのか分からない"・"何かいい書籍がないかと思い検索などを行ってみると毎回同じ書籍を紹介している同じようなブログにたどり着く"といった不満を抱えていた。そこで、技術書籍情報の透明化を目指したサービスを開発しようと思い取り組んでいる。 * 本格的な開発を2021/01頃から初めており、04/09現在ではサーバサイド・フロントエンドの開発が概ね完了している状態である。 * 6月中のリリースを目指して、ソースコードの最終的な調整・確認、リリース方法の学習・選定などを行っている。 * サービスのデモ動画は[こちら](https://youtu.be/KaMyk3Qh8qI)からご覧いただけます。 [](https://www.youtube.com/watch?v=KaMyk3Qh8qI) ### アピールポイント * 業務では主にサーバサイドを担当している中で、技術研鑽を通してUIの設計・実装を一から行うことができた点 * 既存のサービスやリソースなどをうまく活用しながら、UX・デザインについても自身で一貫して進めた点 * SPAとして実装を行い、リッチな振る舞いを持つUIを必要に応じて実装することができた点 ### 開発 #### フロントエンド（React） * 既存サービスのデザイン・UIを参考にしながらUIを実装 * 既存のデザインをそのまま転用するのではなく、自身のサービスに付随するであろうユースケースやニーズに適したUIとなるように微調整や修正を加えながら実装を進めた * 現状では主要なモデルが4つほど（User・Book・Review・Author）存在する中で、直感的かつシンプルなUIに保つためにオブジェクト指向UIデザインの指針に沿ってUIの設計を行うように工夫した * 各種モーダル実装 * サインアップ・ログイン・レビュー投稿などのフォームはモーダルとして実装 * 画面ベースではなくモーダルベースとすることで余計な画面遷移・デザイン工数を削減するとともに他ページでも同一機能を持つフォームモーダルを簡単に呼び出せるようにすることで、出したいフォームをどこの画面からでも・任意のアクションに紐付けて表示できるようにした * 各フォームではバリデーションを実装しており、ユーザ側に入力不備が分かりやすいように即時反映で表示を行っている * 一部サーバ側でバリデーションをかける必要があるもの（同一アカウント名の入力禁止など）についてはサーバからのレスポンスに応じてバリデーションを実装している * グローバルスナックバー実装 * ReactのContextAPIを活用することで、任意のコンポーネントから呼び出せるグローバルスナックバーを実装 * 紐付けるアクションに応じてメッセージ・分類（error・success・infoなど）を自由に設定できるようにしているため、簡単にどこのコンポーネントからでも任意のアクションに紐付けてスナックバーを表示することができるようにした * 検索UI実装 * 書籍の検索を行うため、様々な条件で検索を行うことができるUIの実装を行った * タイトル・著者・書籍説明などに対するキーワード検索だけでなく、カテゴリー・レーティング・価格・出版年など複合的な条件を入力しでき、それらの値が検索結果に反映されるようなインタラクティブなUIを目指した * 現状では検索結果の書籍順をソートできる実装になっていないため、価格順・レーティング順・レビュー数順などでソートできるようにする機能性を検討している * アカウント画面実装 * ログイン時には時アカウントの各種関連情報を参照することができるUIの実装を行った * 現在では確認できる情報は"自身のレビュー"・"ブックマークした書籍"・"アカウント画像・名称・自己紹介文などのアカウント情報"の3つで、余計な画面遷移をさせないようにタブを用いて各種情報を簡単に切り替えることができるようにした * アカウント情報タブでは自身のアカウントに紐づく画像・アカウント名・メールアドレスなどが編集でき、アカウント削除などの機能性も合わせて提供している * 書籍・著者詳細情報UI実装 * 各書籍・著者の情報やレビューを参照できるUIの実装を行った * 自アカウントのレビューはモーダルを経由して編集・削除が可能で、他アカウントのレビューには"イイね"をつけることもできる * 書籍情報だけでなく書籍に対して投稿されているレビューも一覧で表示でき、"イイね順"などのソーティングも可能 * 現状ではレビュー一覧のページング処理は実装していないが、（幸運にもユーザがこのサービスを利用してくれてたくさんのレビューが投稿されていった場合には） 将来的にレビューのページング処理についても追加で実装を行う必要があるかもしれない