日高 一明

エムスリー株式会社, product manager

星 賢人

宇野 雄

note株式会社, 執行役員 CDO（Chief Design Officer）

夏目 拓哉

### 概要  
* エンジニアが技術書を購入する際にはネットで検索して探してみることも多いと思うが、"Amazonなどでコメント付きのレビュー数が少なく実際にどのような書籍なのか分からない"・"何かいい書籍がないかと思い検索などを行ってみると毎回同じ書籍を紹介している同じようなブログにたどり着く"といった不満を抱えていた。そこで、技術書籍情報の透明化を目指したサービスを開発しようと思い取り組んでいる。
* 本格的な開発を2021/01頃から初めており、04/09現在ではサーバサイド・フロントエンドの開発が概ね完了している状態である。
* 6月中のリリースを目指して、ソースコードの最終的な調整・確認、リリース方法の学習・選定などを行っている。
* サービスのデモ動画は[こちら](https://youtu.be/KaMyk3Qh8qI)からご覧いただけます。
[![](https://img.youtube.com/vi/KaMyk3Qh8qI/0.jpg)](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の実装を行った
    * 自アカウントのレビューはモーダルを経由して編集・削除が可能で、他アカウントのレビューには"イイね"をつけることもできる
    * 書籍情報だけでなく書籍に対して投稿されているレビューも一覧で表示でき、"イイね順"などのソーティングも可能
    * 現状ではレビュー一覧のページング処理は実装していないが、（幸運にもユーザがこのサービスを利用してくれてたくさんのレビューが投稿されていった場合には） 将来的にレビューのページング処理についても追加で実装を行う必要があるかもしれない

個人開発：ブックレビューサービス（フロントエンド）

### 概要  
* エンジニアが技術書を購入する際にはネットで検索して探してみることも多いと思うが、"Amazonなどでコメント付きのレビュー数が少なく実際にどのような書籍なのか分からない"・"何かいい書籍がないかと思い検索などを行ってみると毎回同じ書籍を紹介している同じようなブログにたどり着く"といった不満を抱えていた。そこで、技術書籍情報の透明化を目指したサービスを開発しようと思い取り組んでいる。
* 本格的な開発を2021/01頃から初めており、04/09現在ではサーバサイド・フロントエンドの開発が概ね完了している状態である。
* 6月中のリリースを目指して、ソースコードの最終的な調整・確認、リリース方法の学習・選定などを行っている。
* サービスのデモ動画は[こちら](https://youtu.be/KaMyk3Qh8qI)からご覧いただけます。
[![](https://img.youtube.com/vi/KaMyk3Qh8qI/0.jpg)](https://www.youtube.com/watch?v=KaMyk3Qh8qI)

### アピールポイント
* 個人開発として0から取り組む中で、都度発生する課題やエラーについて情報検索・技術研鑽を通して自身で対応することができた点
* DDD開発を実践するために、具象的な実装だけでなく基底として抽象的な実装についても行った点
* 開発を急ぐ一方でテストケースの拡充やCI環境の整備、Docker環境の整備などリリースを見据えた対応を行うことができた点

### 開発
#### サーバサイド（Kotlin with Spring Boot）
 * DDD（ドメイン駆動設計）の設計原則の下で各種設計・実装を行う
   * DDDの設計を行うにあたり、各種Entity・Value Object・Collectionなどの基底クラスを設計・実装した 
   * ブックレビューサービスを作成するにあたり、どのようなモデルが存在しそれらがどのように関わり合っているのかを実際のコードに落とし込むことを意識した
    * アプリケーションを開発していく中で、当然ながら当初のモデル設計の過不足が明らかになっていった。その際にはアジャイル的に"修正" -> "テスト" -> "リリース"のサイクルを頻繁に回していくことでそれらのギャップをうまく埋めていきながら開発を継続していくことができた
    * 現状の実装では一部JPAとの兼ね合いのためにSetなどのKotlin提供の仕組みをそのまま利用している実装箇所があり、リファクタリング対象である

* モデルに紐づくAPIの実装
  * 設計した各モデルに対してRESTにリソースアクセスが行えるAPIを実装した
    * KotlinやSpring Bootの機能を利用し、シンプルに設計・実装を行うことを意識した
    * 現状の実装では後述のユーザ関連APIに一部RESTではなく個別用途のAPIが存在しており、リファクタリング対象である

* サインアップ・ログイン機能
  * サインアップを行うことで、様々な機能性（書籍へのレビュー投稿・レビューの評価・書籍のブックマークなど）を利用できるサインアップ・ログイン機能を実装した
    * サービスとしてのリリースを目指していることを踏まえて、実際のユースケースやニーズに沿った機能性についても実装するよう意識し（トークンを利用したパスワードリセット機能・アカウントアイコンの設定機能など）
    *  現状の実装ではユーザ登録・ログインを実行するAPIがDDDの原則を遵守していない箇所も存在し、リファクタリング対象である
    * サインアップ時には"アカウント名"・"メールアドレス"・"パスワード"を入力してもらいそのページ上でサインアップが完結する仕様になっている。そうではなく（よく他のサービスでもあるように）入力されたアドレスにフォームを送信し、そこをクリックすることでサインアップ完了とする仕様にするべきか検討している

* 書籍検索API機能
  * 書籍の検索を行うため、様々な条件で検索を行うことができるAPIの実装を行った
    * タイトル・著者・書籍説明などに対するキーワード検索だけでなく、カテゴリー・レーティング・価格・出版年など複合的な条件を入力し、その条件にマッチした書籍を検索できるようなAPI
    * 現状の実装ではAmazonやGoogleと比較してキーワード検索の実用性が低く（書籍情報として登録されているワードのマッチのみで判定）、より直感的・感覚的なキーワード検索を行った場合にもイメージに近い書籍がマッチできるように検索機能の性能を見直す必要がある
* レビュー投稿機能
  * ログイン済みのアカウントが書籍に対してレビューを投稿できる機能性を実装
    * 自身のレビューは編集・削除も可能で、他のアカウントが作成したレビューには"イイね"をつけることもできる
    * 現状では手が回っていないが、レビューに対してコメントを投稿してスレッドのように対話できる機能性も検討している

* セキュリティ関連
  * jwtを用いた認証・CORSポリシーの設定などをSpring Securityを用いて実装
    * サーバサイドをステートレスにするためにセッションなどではなくjwtを認証・認可に利用することとする
    * パスワードについてはDB格納前の段階でエンコーディングを行い暗号化する
    * （アカウント機密情報を除く）リソースに対してのGETリクエストは未認証のユーザからも認めるが、リソースの変更を伴うPOST・PUT・DELETEについては認証を必須とするように設定
    * リリースを行うにあたり現状のポリシーが適切がどうかを検討する必要があるため、GCPでのリリース作業フェーズの際に改めてサーバサイド側のセキュリティについても確認を行う必要がある

* テストケースの実装
  * ユニットテストを中心に、ロジックを網羅するテストケースを作成している
    * ユニットテストだけでなく、必要に応じてシナリオテストなども作成することでデグレーションリスクを低減することを目指している
    * githubとcircleCIを連携させることでテストを自動化させ、マージ前には確実にテストが実行されるような仕組みを作っている
    * リリース時の想定として、GCPのCloud Buildとgithubを連携させることでCIだけではなく安定的なCDを行える環境も用意することを考えている

個人開発：ブックレビューサービス（サーバサイド）

株式会社プレイド / プラットフォームチーム

伊藤 祥

株式会社DOU (旧PitPa), リードエンジニア

ウメムラ タカシ

株式会社アピリッツ, VPoD/ヒューマンセンタードデザイン学部部長

夏目拓哉

夏目拓哉

夏目 拓哉

夏目 拓哉

夏目拓哉

夏目拓哉