コースごとの書籍一覧ページを作成 #7152

2525nicole · 2023-12-17T02:20:49Z

Issue

コースごとの参考書籍一覧が欲しい #7105

概要

コースごとに必要な参考書籍一覧ページを新たに作成いたしました。

変更確認方法

feature/create-book-list-for-each-courseをローカルに取り込む
rails db:seedで本PRで追加した書籍のデータを development 環境に読み込む
foreman start -f Procfile.devを実行し、ローカル環境を立ち上げる
komagataでログインし、Railsプログラマーコースページにアクセスする
「書籍」タブをクリックする

Railsプログラマーコースのプラクティス「OS X Mountain Lionをクリーンインストールする」の参考書籍が表示されていることを確認する

「全て」表示の時は必読書と必読ではない本どちらも表示される

「必読」表示の時は必読書だけが表示される

Screenshot

変更前

各コースページではそのコースのプラクティスのみが表示されている
参考書籍ページではコースごとに必要な書籍に絞り込むことはできない

変更後

各コースページの「書籍」タブにそのコースの参考書籍一覧が表示される
- 必読書だけの一覧表示も可能

2525nicole · 2023-12-17T15:29:50Z

@natsuto6
おつかれさまです！
既にレビュー依頼をお持ちのところ申し訳ないのですが、
ポイントの状況等を鑑みて依頼のご相談をさせていただきました😣
レビューをお願いすることは可能でしょうか🙏
全く急ぎではありませんので、ご都合のよろしいタイミングで見ていただくかたちで問題ありません🙇‍♀️

Takuya-Sakai91 · 2023-12-18T01:39:44Z

@2525nicole
承知しました👌今週立て込んでおりますがなる早で対応させていただければと思います🙇‍♂️
取り急ぎ気になったのですが、私を含め「Vueを消し去るのが目的」のIssueに取り組んでいますが、Vueで書かれているのは何か理由があってのことなのでしょうか？komagataさんからも以前ご連絡がありましたが、Reactのようなフレームワークを使わないただのJSで作っても大丈夫とのことですが、Vueで書かれている理由を知りたかった次第です。

2525nicole · 2023-12-18T04:22:51Z

@natsuto6
お引き受けいただきありがとうございます😭！
natsuto6さんの落ち着かれたタイミングで全く問題ございません🙇‍♀️
お忙しいところ恐れ入りますが、よろしくお願いいたします🙏

Vueで書いた理由について

こちらのIsuueを割り振っていただいた際の開発MTGで以下のようにいただきました。

Vue、JS、Reactどれで書いてもよいが、Vueで書いて別IssueでReact化をするのが良いかもしれない
万が一JSやReactで書く場合はポイントを増やすことも可

これを受けて、以下のようなIssueの分け方がしっくりきたため今回はVueで書くことを選択しました🙇‍♀️

今回はVueで書かれている/booksページをを使用して必要なページ（コースごとの書籍一覧ページ）を作る
別IssueでReact化

ご確認の程よろしくお願いいたします！

Takuya-Sakai91

@2525nicole
気になったところがいくつかございましたのでご確認をお願いします🙇‍♂️

リロード時や、「全て」タブから「必読」タブに切り替えた際などに、「プラクティスで絞り込む」のプルダウンが常に全プラクティスの参考書籍を表示に戻ってしまいますが想定通りでしょうか？
そうでない場合、ユーザーが選択したプラクティスがリロードやタブ切り替え後も保持される方が良いと思いました。
3つの書籍しか登録されていませんが、UIの確認やテストを行うにはもう少し書籍データがあっても良いのかなと思いましたがいかがでしょうか🙏

Takuya-Sakai91 · 2023-12-19T14:27:43Z

app/javascript/components/course-books.vue

+          .o-empty-message__icon
+            i.fa-regular.fa-sad-tear
+          p.o-empty-message__text
+            | 登録されている本はありません


書籍が存在しない場合、「登録されている本はありません」と表示されるべきかと思いますが、何も描画されていません。

ご確認ありがとうございます🙇‍♀️
こちらですがアプリ内に参考書籍自体の登録が1冊も存在しない場合に表示されるもののようです👀

bootcamp/app/javascript/components/course-books.vue

Lines 24 to 28 in 81b924c

.o-empty-message(v-else)

.o-empty-message__icon

i.fa-regular.fa-sad-tear

p.o-empty-message__text

| 登録されている本はありません

✏️以下、v-else＝getBooks()から取得したbooksのlengthが0の時、というのが条件のため

bootcamp/app/javascript/components/course-books.vue

Lines 75 to 77 in 81b924c

methods: {

getBooks() {

const uri = '/api/books.json'

試しに参考書籍をすべて削除してみたところ、期待通り表示がされました！

👇最後の1冊を表示すると、Railsプログラマーコースの書籍一覧に「登録されている本はありません」と表示される

👇既存の書籍一覧でもプラクティスに紐づいていない参考書籍でも登録自体が1冊でも存在する場合、「登録されている本はありません」という表示はされない

Takuya-Sakai91 · 2023-12-20T01:45:41Z

db/fixtures/books.yml

+  title: パーフェクト Ruby on Rails
+  price: 3637
+  page_url: https://www.amazon.co.jp/dp/B08D3DW7LP
+  description: 通称パRails


必読ではない書籍が私の方だと確認できませんでした。

「変更確認方法」に不足があり、失礼いたしました＞＜！
以下を追記いたしました🙇‍♀️

rails db:seedで本PRで追加した書籍のデータを development 環境に読み込む

たびたびお手数ですが次回確認時にこちらをお試しいただけますでしょうか🙏

2525nicole · 2023-12-21T07:23:16Z

@natsuto6
お忙しいところ早速ご確認をいただきありがとうございます🙇‍♀️！！

リロード時や、「全て」タブから「必読」タブに切り替えた際などに、「プラクティスで絞り込む」のプルダウンが常に全プラクティスの参考書籍を表示に戻ってしまいますが想定通りでしょうか？
そうでない場合、ユーザーが選択したプラクティスがリロードやタブ切り替え後も保持される方が良いと思いました。

ご意見ありがとうございます！
「プラクティスで絞り込む」のプルダウンを設置する場合、
全て⇄必読やタブの切り替え、ロードを行なってもプルダウンは保持されるのがユーザーにとって親切であると気づくことができました🙏

その一方で（そもそもの部分になってしまうのですが）コース別の書籍一覧でプラクティスごとに絞り込む機能が必要だろうか、という点も含めてチーム開発MTGで改めてご相談した結果、
もともと要件として含まれていない機能であるということから、コース別書籍一覧ページにおいて「プラクティスで絞り込む」機能は含めないことになりました。
仕様についてのメモ

そのためプラクティスでの絞り込みフォーム部分のコードは削除しております。
ご確認をいただいたところ大変申し訳ありません。
また、ユーザー側の視点に立った考え方に気づかせていただきありがとうございます🙇‍♀️勉強になります！

3つの書籍しか登録されていませんが、UIの確認やテストを行うにはもう少し書籍データがあっても良いのかなと思いましたがいかがでしょうか🙏

ご提案ありがとうございます！
たしかに3つの書籍のみ（さらにプラクティスに紐づいているものは2冊のみ）では物足りないですね＞＜！
ご指摘のとおりと感じましたので、以下のとおり書籍を追加いたしました。

データベース
- プラクティスに紐づく書籍を2冊追加（うち1冊が必読）
テスト用のfixtures
- プラクティスに紐づく書籍を1冊追加（必読）

データベースへの2冊追加により、画面上「全て」→「必読」に切り替えた際に2行から1行に正しく並ぶことも確認しやすくなったかと思いますがいかがでしょうか👀

テストについても登録済みの2冊とは異なるプラクティスに紐づく書籍を登録したことで、
test 'show only must-read books'にて「期待どおりコース内のプラクティスの必読書籍が表示される」ことを示せるようになったかと思います。

たびたびお手数をおかけしてしまい申し訳ありませんが、ご都合のよろしいタイミングでご確認をいただけますと幸いです。
よろしくお願いいたします🙏

Takuya-Sakai91

@2525nicole
仕様についてのご確認、書籍の追加等ありがとうございます！
問題なく確認できました🙌
1点ご確認よろしくお願いします。

Takuya-Sakai91 · 2023-12-24T14:06:58Z

app/javascript/components/course-books.vue

+    this.getPractices()
+  },
+  methods: {
+    getBooks() {


フェッチロジックはgetBooksメソッドとgetPracticesメソッドで共通していると思うので別メソッドとして抽出してはいかがでしょうか？🙏

2525nicole · 2023-12-26T12:31:49Z

@natsuto6
おつかれさまです🤝
お忙しいところ早速のご確認ありがとうございました🙇‍♀️
頂戴したとおりfetchロジックが重複していたので、メソッド化いたしました🙏
たびたびお手数をおかけしますが、ご都合のよろしいタイミングでご確認をいただけますと幸いです！
どうぞよろしくお願いいたします🍀

Takuya-Sakai91

@2525nicole
お待たせいたしました！
確認できましたのでApproveいたします🙌

2525nicole · 2023-12-30T01:21:05Z

@natsuto6
とんでもないです！！お忙しいところご対応いただきありがとうございます🙇‍♀️🙇‍♀️🙇‍♀️
丁寧に確認いただき、自分では気づけなかった部分に気づくことができ大変勉強になりました🙌
ありがとうございました🙏✨
引き続きどうぞよろしくお願いいたします🍀

@komagata
おつかれさまです！
チームメンバーの方にApproveをいただきましたので、レビューをお願いできますでしょうか🙏

komagata

確認させて頂きました。OKです〜🙆‍♂️

2525nicole assigned 2525nicole and Takuya-Sakai91 Dec 17, 2023

2525nicole marked this pull request as ready for review December 17, 2023 15:30

2525nicole changed the title ~~Feature/create book list for each course~~ コースごとの書籍一覧ページを作成 Dec 17, 2023

2525nicole requested a review from Takuya-Sakai91 December 19, 2023 14:18

2525nicole unassigned Takuya-Sakai91 and 2525nicole Dec 19, 2023

Takuya-Sakai91 reviewed Dec 20, 2023

View reviewed changes

2525nicole added 4 commits December 21, 2023 13:16

コースごとの参考書籍一覧ページを作成

c5202a2

fixtures変更に伴い、関連するテストコードを修正

25da6c7

プラクティスで絞り込む機能を削除

20522aa

fixturesの書籍数を増やした

89f223b

2525nicole force-pushed the feature/create-book-list-for-each-course branch from f8a53c2 to 89f223b Compare December 21, 2023 04:16

Takuya-Sakai91 reviewed Dec 24, 2023

View reviewed changes

2525nicole self-assigned this Dec 26, 2023

ファイル内で共通のfetchロジックをメソッド化した

5eabc2a

Takuya-Sakai91 approved these changes Dec 29, 2023

View reviewed changes

komagata approved these changes Dec 31, 2023

View reviewed changes

komagata merged commit 2c3299c into main Dec 31, 2023
3 checks passed

komagata deleted the feature/create-book-list-for-each-course branch December 31, 2023 07:50

This was referenced Dec 31, 2023

Release 2023-12-31 07:58:14 #7172

Merged

Release 2024-01-11 08:59:25 #7166

Merged

github-actions bot mentioned this pull request Jan 13, 2024

Release 2024-01-25 05:37:42 #7198

Merged

28 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

コースごとの書籍一覧ページを作成 #7152

コースごとの書籍一覧ページを作成 #7152

2525nicole commented Dec 17, 2023 •

edited

Loading

2525nicole commented Dec 17, 2023

Takuya-Sakai91 commented Dec 18, 2023

2525nicole commented Dec 18, 2023

Takuya-Sakai91 left a comment •

edited

Loading

Takuya-Sakai91 Dec 19, 2023

2525nicole Dec 20, 2023 •

edited

Loading

Takuya-Sakai91 Dec 20, 2023

2525nicole Dec 20, 2023

2525nicole commented Dec 21, 2023

Takuya-Sakai91 left a comment

Takuya-Sakai91 Dec 24, 2023

2525nicole commented Dec 26, 2023

Takuya-Sakai91 left a comment

2525nicole commented Dec 30, 2023

komagata left a comment

	.o-empty-message(v-else)
	.o-empty-message__icon
	i.fa-regular.fa-sad-tear
	p.o-empty-message__text
	\| 登録されている本はありません

コースごとの書籍一覧ページを作成 #7152

コースごとの書籍一覧ページを作成 #7152

Conversation

2525nicole commented Dec 17, 2023 • edited Loading

Issue

概要

変更確認方法

Screenshot

変更前

変更後

2525nicole commented Dec 17, 2023

Takuya-Sakai91 commented Dec 18, 2023

2525nicole commented Dec 18, 2023

Vueで書いた理由について

Takuya-Sakai91 left a comment • edited Loading

Choose a reason for hiding this comment

Takuya-Sakai91 Dec 19, 2023

Choose a reason for hiding this comment

2525nicole Dec 20, 2023 • edited Loading

Choose a reason for hiding this comment

Takuya-Sakai91 Dec 20, 2023

Choose a reason for hiding this comment

2525nicole Dec 20, 2023

Choose a reason for hiding this comment

2525nicole commented Dec 21, 2023

Takuya-Sakai91 left a comment

Choose a reason for hiding this comment

Takuya-Sakai91 Dec 24, 2023

Choose a reason for hiding this comment

2525nicole commented Dec 26, 2023

Takuya-Sakai91 left a comment

Choose a reason for hiding this comment

2525nicole commented Dec 30, 2023

komagata left a comment

Choose a reason for hiding this comment

2525nicole commented Dec 17, 2023 •

edited

Loading

Takuya-Sakai91 left a comment •

edited

Loading

2525nicole Dec 20, 2023 •

edited

Loading