みんなのブログを非Vue化（HTMLに変更） #7651

nishitatsu-dev · 2024-04-10T07:34:16Z

Issue

みんなのブログを非Vue化したい #7458

概要

「みんなのブログ」をVueからHTMLに変更しました

変更確認方法

feature/rewrite-external-entries-from-vue-to-html をローカルに取り込む
ログインして、「みんなのブログ（http://localhost:3000/external_entries）」にアクセスする
以下を確認する
- 表示が「Vueバージョン」の時と同じであること
- ページネーションの動作が問題ないこと
- リンクの動作が問題ないこと
  ※記事のリンクは、存在しないページへのリンクです。URLがhttp://test（番号）/exampleになっていることを確認して下さい。（参考：db/fixtures/external_entries.yml）

Screenshot

（表示上の変更は無い為、省略します）

nishitatsu-dev · 2024-04-10T09:24:37Z

@goruchanchan
レビューをお願いしたいのですが、よろしいでしょうか？
全く急いでおりません。よろしくお願いいたします🙏

goruchanchan · 2024-04-10T12:51:40Z

@nishitatsu-dev
レビュー依頼ありがとうございます！一週間程度を目安に確認いたしますので、今しばらくお待ちください🙇‍♂️

goruchanchan · 2024-04-13T13:55:19Z

@nishitatsu-dev
お疲れ様です！取り急ぎ動作確認実施しました🙇‍♂️２点ほど確認させて欲しいです🙇‍♂️
左側が今回PR分、右側が main ブランチとなっています。

表示が「Vueバージョン」の時と同じであること

ページネーションのボタン表示方法が微妙に異なるのは問題なしでしょうか？
(mainブランチは一番端でそれ以上端方向へのボタンリンクを無効化。本PRでは非表示)
ページネーションの動作が問題ないこと

main ブランチは SPA ぽい振る舞いとなっているように感じているのですが、そこまでの再現は不要という認識でいいでしょうか？
リンクの動作が問題ないこと

ご教授いただいた動作を確認できました！！問題ないと思います！

コードレビューも引き続き実施いたします🙇‍♂️

nishitatsu-dev · 2024-04-14T07:35:14Z

@goruchanchan
お疲れ様です！お忙しい所ありがとうございます。
ご質問いただいた件、以下になります。

表示が「Vueバージョン」の時と同じであること
ページネーションのボタン表示方法が微妙に異なるのは問題なしでしょうか？

ここは、問題なしです。説明不足ですみません🙇🏻
ページネーション自体のデザインは他と同じになっています。
（参考）相談部屋一覧を非vue化する by a-kuroki-gs · Pull Request #7447 · fjordllc/bootcamp

ページネーションの動作が問題ないこと
main ブランチは SPA ぽい振る舞いとなっているように感じているのですが、そこまでの再現は不要という認識でいいでしょうか？

はい。最近の「非Vue化のissue」と同じで、そこまでは不要と考えています
（参考）上記と同じです。

よろしくお願い致します🙏

nishitatsu-dev · 2024-04-14T07:38:11Z

すみません、間違ってcloseのボタンを押してました🙇🏻

goruchanchan

@nishitatsu-dev
お疲れ様です！いくつか質問しましたので内容のご確認よろしくお願いします🙏

goruchanchan · 2024-04-13T14:22:27Z

app/controllers/api/external_entries_controller.rb

@@ -1,7 +1,5 @@
 # frozen_string_literal: true

 class API::ExternalEntriesController < API::BaseController


すみません、こちらのクラスは何に利用しているんでしょうか？

このクラスは、今回の変更で利用されなくなりました。
ただ、以下の２つの理由で残すことにしました。

類似の非Vue化issueで残していたので（参考：相談部屋一覧を非vue化する by a-kuroki-gs · Pull Request #7447 · fjordllc/bootcamp）

Issueの説明文に、「最終的にはHotwireにする予定」とあり、Hotwireを調べてみると、APIを使いそうな事が書いてあったので、API関係のものは残した方が良いと考えました（参考：Hotwireとは？｜猫でもわかるHotwire入門 Turbo編）
（正直な所、何をどう使うかは分かってないです。。。😅）

情報共有ありがとうございます！背景等理解できました🙇‍♂️

goruchanchan · 2024-04-13T14:37:38Z

app/views/api/external_entries/index.json.jbuilder

@@ -1,2 +1,2 @@
 json.external_entries @external_entries, partial: 'api/external_entries/external_entry', as: :external_entry
-json.total_pages @external_entries.total_pages
+json.total_pages @external_entries.total_pages if @external_entries.respond_to? :total_pages


total_pages メソッドがない場合もあるということでしょうか？

これは、今回、APIコントローラ側で@external_entriesを消した為に、total_pagesメソッドが使えない状態になりました。
（この影響で、http://localhost:3000/api/external_entries.json をブラウザで見た時にエラーが出たので、条件式を追加しました。（参考：/api/talks/index.json.jbuilder））

なるほど、app/controllers/api/external_entries_controller.rb から @external_entriesを削除したためということですね👀勉強になりました！

goruchanchan · 2024-04-14T13:31:40Z

app/views/external_entries/_external_entries.html.slim

+    .container.is-md
+      = paginate(@external_entries)
+      .card-list.a-card
+        = render(@external_entries)


こちらで app/views/external_entries/_external_entry.html.slim をレンダーしている認識でいます。
こちらの理解不足で申し訳ないのですが、= render(@external_entries) とした場合にapp/views/external_entries/_external_entry.html.slimにレンダーされる仕組みなど教えていただけると嬉しいです🙇‍♂️

個人的には、明示的に部分テンプレートとローカル変数を指定した方がわかりやすい気がしたのですが、いかがでしょうか？

Suggested change

= render(@external_entries)

= render partial: 'external_entry', collection: @external_entries, as: :external_entry

書き方の件、アドバイスいただいた書き方に修正します。
（ローカル環境がエラーで立ち上がらないので、復旧後に修正し、ご連絡します。取り急ぎ。🙇🏻）

仕組みの件ですが、以下の流れになります。

render partial: 'external_entry', collection: @external_entries, as: :external_entryで、asを省略した場合、「パーシャル名」と同名の「ローカル変数名」が渡されます。
（参考：ActionView::PartialRendererの、「Rendering a collection of partials」に出てくる具体例の説明文を参考にしました）

上記から、render partial: 'external_entry', collection: @external_entriesと書けます。

さらに省略記法で、render @external_entriesと書けます。これは、使われるパーシャル名は、コレクションの中にある「モデル名」を参照して決定される為だそうです。
（参考：5.4 コレクションをレンダリングする < Action View の概要 - Railsガイドの最後の段落に記述があり、参考にしました）

丁寧にありがとうございます！とても詳しく仕様確認していて素晴らしいと思いました！とても勉強になりました🙇‍♂️
省略形についてはこちらの理解不足があると思うので komagata さんに判断していただければいいかと思います🙇‍♂️

では、省略形は、いったんこのまま進めます〜

nishitatsu-dev · 2024-04-14T16:03:11Z

@goruchanchan
レビューありがとうございます！！！
すみませんが、ローカル環境がエラーで立ち上がらなくなってしまい、コメントのみ書きました。🙇🏻
復旧後、該当箇所を修正しましたら、ご連絡します。
よろしくお願い致します🙏

goruchanchan

@nishitatsu-dev
ご回答ありがとうございます！ご回答いただい内容で疑問は解消できました🙇‍♂️
追加で一点コメントしましたので内容のご確認よろしくお願いします🙇‍♂️

goruchanchan · 2024-04-15T13:16:04Z

app/views/api/external_entries/index.json.jbuilder

@@ -1,2 +1,2 @@
 json.external_entries @external_entries, partial: 'api/external_entries/external_entry', as: :external_entry
-json.total_pages @external_entries.total_pages
+json.total_pages @external_entries.total_pages if @external_entries.respond_to? :total_pages


なるほど、app/controllers/api/external_entries_controller.rb から @external_entriesを削除したためということですね👀勉強になりました！

goruchanchan · 2024-04-15T13:18:22Z

app/views/external_entries/_external_entries.html.slim

+    .container.is-md
+      = paginate(@external_entries)
+      .card-list.a-card
+        = render(@external_entries)


丁寧にありがとうございます！とても詳しく仕様確認していて素晴らしいと思いました！とても勉強になりました🙇‍♂️
省略形についてはこちらの理解不足があると思うので komagata さんに判断していただければいいかと思います🙇‍♂️

goruchanchan · 2024-04-15T13:26:54Z

app/views/external_entries/_external_entry.html.slim

+      .card-list-item__row
+        .card-list-item-title
+          h2.card-list-item-title__title
+            = link_to(external_entry.title, external_entry.url, rel: 'noopener', target: '_blank', class: 'card-list-item-title__link a-text-link')


link_to ですが他の場所では () 無しで呼び出しているようなので、足並みを揃えてもいいかもです🙇‍♂️

link_toの部分、()を削除しました〜

nishitatsu-dev · 2024-04-24T01:49:09Z

@goruchanchan
コメントいただいた箇所を修正しましたので、ご確認お願いします🙏
返信が遅くなってしまいすみません🙇🏻
（紆余曲折の末に、OSを再インストールして、何とかローカル環境が立ち上がるようになりました）

goruchanchan

@nishitatsu-dev
お疲れ様です！ご対応ありがとうございました！
LGTMと思いますので承認いたします🙇‍♂️

nishitatsu-dev · 2024-04-25T01:12:24Z

@goruchanchan
ありがとうございます！！！

@komagata
レビューをお願い致します🙏

komagata · 2024-05-15T07:51:22Z

app/controllers/api/external_entries_controller.rb

-  def index
-    @external_entries = ExternalEntry.all.order(published_at: :desc).page(params[:page])
-  end
+  def index; end


indexが不要であればcontrollerもここへのrouteも不要だと思うので削除をお願いします~

下記を行いました〜

api関連のファイル（controllerを１個、viewを２個）削除

routesの記述を削除

nishitatsu-dev · 2024-05-21T09:00:08Z

@komagata
コメントいただいた箇所を修正しましたので、ご確認お願いします🙏

また、issueの内容とは関係ない修正ですが、下記も行いました

コンフリクト対応（ mainブランチの最先端にrebase ）
authorの修正（ローカルPCのOS再インストール時に設定ミスしており、アイコンが表示されないコミットがあった為）

komagata · 2024-05-28T19:32:29Z

@nishitatsu-dev conflictの修正をお願い致します～。

途中保存。テスト未確認、Vueコンポーネント削除前。途中保存（書き方修正）途中保存（vueファイル削除。他コメント） VueからHTMLに移行（メモあり）

nishitatsu-dev · 2024-05-30T07:10:32Z

@komagata
conflictの修正しました〜。ご確認お願いします🙏

komagata

確認させていただきました。OKです～👌

nishitatsu-dev · 2024-06-07T09:57:04Z

@komagata
ありがとうございました〜🙏

nishitatsu-dev marked this pull request as ready for review April 10, 2024 08:59

nishitatsu-dev self-assigned this Apr 10, 2024

nishitatsu-dev requested a review from goruchanchan April 10, 2024 09:23

nishitatsu-dev closed this Apr 14, 2024

nishitatsu-dev reopened this Apr 14, 2024

goruchanchan reviewed Apr 14, 2024

View reviewed changes

goruchanchan reviewed Apr 15, 2024

View reviewed changes

nishitatsu-dev force-pushed the feature/rewrite-external-entries-from-vue-to-html branch from e40c533 to dd6d44d Compare April 23, 2024 15:07

goruchanchan approved these changes Apr 24, 2024

View reviewed changes

komagata reviewed May 15, 2024

View reviewed changes

nishitatsu-dev force-pushed the feature/rewrite-external-entries-from-vue-to-html branch from dd6d44d to 0e1d02c Compare May 21, 2024 05:37

nishitatsu-dev and others added 4 commits May 30, 2024 15:26

VueからHTMLに移行（メモあり）

6c1b0c1

途中保存。テスト未確認、Vueコンポーネント削除前。途中保存（書き方修正）途中保存（vueファイル削除。他コメント） VueからHTMLに移行（メモあり）

メモ削除、APIの表示エラー対応

c80d398

link_toの書き方を他と統一（カッコを削除）。authorを修正

247562f

api関連の「ファイル」と「ルーティング」を削除。authorを修正

c02cdef

nishitatsu-dev force-pushed the feature/rewrite-external-entries-from-vue-to-html branch from 0e1d02c to c02cdef Compare May 30, 2024 06:38

komagata approved these changes Jun 7, 2024

View reviewed changes

komagata merged commit 1bf80e9 into main Jun 7, 2024
2 checks passed

komagata deleted the feature/rewrite-external-entries-from-vue-to-html branch June 7, 2024 01:23

github-actions bot mentioned this pull request Jun 7, 2024

Release 2024-06-12 08:05:58 +0000 #7835

Merged

7 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

みんなのブログを非Vue化（HTMLに変更） #7651

みんなのブログを非Vue化（HTMLに変更） #7651

nishitatsu-dev commented Apr 10, 2024 •

edited

Loading

nishitatsu-dev commented Apr 10, 2024

goruchanchan commented Apr 10, 2024

goruchanchan commented Apr 13, 2024

nishitatsu-dev commented Apr 14, 2024

nishitatsu-dev commented Apr 14, 2024

goruchanchan left a comment

goruchanchan Apr 13, 2024

nishitatsu-dev Apr 14, 2024 •

edited

Loading

goruchanchan Apr 15, 2024

goruchanchan Apr 13, 2024

nishitatsu-dev Apr 14, 2024 •

edited

Loading

goruchanchan Apr 15, 2024

goruchanchan Apr 14, 2024 •

edited

Loading

nishitatsu-dev Apr 14, 2024 •

edited

Loading

goruchanchan Apr 15, 2024

nishitatsu-dev Apr 24, 2024

nishitatsu-dev commented Apr 14, 2024

goruchanchan left a comment

goruchanchan Apr 15, 2024

goruchanchan Apr 15, 2024

goruchanchan Apr 15, 2024

nishitatsu-dev Apr 24, 2024

nishitatsu-dev commented Apr 24, 2024

goruchanchan left a comment •

edited

Loading

nishitatsu-dev commented Apr 25, 2024

komagata May 15, 2024

nishitatsu-dev May 21, 2024

nishitatsu-dev commented May 21, 2024

komagata commented May 28, 2024

nishitatsu-dev commented May 30, 2024

komagata left a comment

nishitatsu-dev commented Jun 7, 2024

		@@ -1,7 +1,5 @@
		# frozen_string_literal: true

		class API::ExternalEntriesController < API::BaseController

	= render(@external_entries)
	= render partial: 'external_entry', collection: @external_entries, as: :external_entry

みんなのブログを非Vue化（HTMLに変更） #7651

みんなのブログを非Vue化（HTMLに変更） #7651

Conversation

nishitatsu-dev commented Apr 10, 2024 • edited Loading

Issue

概要

変更確認方法

Screenshot

nishitatsu-dev commented Apr 10, 2024

goruchanchan commented Apr 10, 2024

goruchanchan commented Apr 13, 2024

nishitatsu-dev commented Apr 14, 2024

nishitatsu-dev commented Apr 14, 2024

goruchanchan left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nishitatsu-dev Apr 14, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nishitatsu-dev Apr 14, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

goruchanchan Apr 14, 2024 • edited Loading

Choose a reason for hiding this comment

nishitatsu-dev Apr 14, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nishitatsu-dev commented Apr 14, 2024

goruchanchan left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nishitatsu-dev commented Apr 24, 2024

goruchanchan left a comment • edited Loading

Choose a reason for hiding this comment

nishitatsu-dev commented Apr 25, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nishitatsu-dev commented May 21, 2024

komagata commented May 28, 2024

nishitatsu-dev commented May 30, 2024

komagata left a comment

Choose a reason for hiding this comment

nishitatsu-dev commented Jun 7, 2024

nishitatsu-dev commented Apr 10, 2024 •

edited

Loading

nishitatsu-dev Apr 14, 2024 •

edited

Loading

nishitatsu-dev Apr 14, 2024 •

edited

Loading

goruchanchan Apr 14, 2024 •

edited

Loading

nishitatsu-dev Apr 14, 2024 •

edited

Loading

goruchanchan left a comment •

edited

Loading