Skip to content

日報の画像に関するバグを修正#9276

Merged
komagata merged 3 commits intomainfrom
bugfix/duplicate-image-on-report-update
Nov 19, 2025
Merged

日報の画像に関するバグを修正#9276
komagata merged 3 commits intomainfrom
bugfix/duplicate-image-on-report-update

Conversation

@smallmonkeykey
Copy link
Copy Markdown
Contributor

@smallmonkeykey smallmonkeykey commented Oct 21, 2025

Issue

概要

日報本文の更新時とコピーボタンによる新規作成時に画像をアップロードして画像を貼り付けると1度の貼り付けにも関わらず、二重で貼り付けられてしまっていたので修正しました。
また、モーダル内のテンプレート本文に画像をペーストすると、モーダルを開き直すたびに貼り付け画像が重複して増えていくバグが発生するので修正しました。

変更確認方法

  • 日報本文の更新時に画像を貼り付けるの確認方法
  1. {bugfix/duplicate-image-on-report-update}をローカルに取り込む
  2. 任意の生徒のユーザーでログインする
  3. すでに作成してある日報を編集する
  4. 本文に画像をペーストする
  5. 1枚のみペーストされるか確認する
  • コピーボタンによる新規作成時に画像をアップロードするの確認方法
    1.任意の生徒のユーザーでログインする
    2.すでに書いてある日報のページからコピーボタンをクリックし新規作成に移る
    3.本文に画像をペーストする
    4.1枚のみペーストされるか確認する

  • モーダル内のテンプレート本文の画像の確認方法
    1.任意の生徒のユーザーでログインする
    1.日報画面でテンプレート登録またはテンプレート変更をクリックする
    2.モーダルが開いた状態で、テンプレート本文欄に画像をペーストする
     → 画像が1枚貼られる
    3.キャンセルをクリックしてモーダルを閉じる
    4.再びテンプレート登録またはテンプレート変更をクリックする
    5.同じように画像をペーストする
     → 画像が2枚ではなく、1枚貼られることを確認する

原因と修正

日報本文の更新時とコピーボタンによる新規作成時の件

TextareaInitializerが同じtextareaに対してJSのファイルとStimulusの両方から初期化されていたため、画像アップロードイベントが二重登録されていました。

具体的には以下の2箇所で初期化が行われていました。
app/javascript/packs/application.jsにてimport '../textarea.js'により、'.js-markdown'があるページで textarea.js が実行
app/javascript/controllers/report_template_controller.js 内で.js-report-contentに対して再度 TextareaInitializer.initialize() を実行

これにより、画像ペーストが2回貼られしまっていました。

また、新規作成時にこの不具合が発生しなかったのは、 以下の条件分岐によって.js-markdownが付与されていなかったためです。
class: "a-text-input js-warning-form js-report-content markdown-form__text-area #{params[:action] == 'new' && params[:id].blank? ? '' : 'js-markdown'}",
この分岐でした。

JSファイルでの実行は不要なため、この.js-markdown関連の分岐を削除し、Stimulus側でのみTextareaInitializerを管理するように変更しました。

モーダル内のテンプレート本文の画像が複数貼られる件

モーダルを開くたびにTextareaInitializer.initializeが複数回実行され、同じtextareaにpasteイベントが重複登録されていました。
uninitializeを実行してから initializeを呼ぶように変更し、毎回1回だけ初期化されるように修正しました。

Screenshot

変更前

image

変更後

image

Summary by CodeRabbit

バグ修正

  • モーダルウィンドウを開く際のテキストエリア初期化プロセスを改善しました。これにより、以前入力された内容が残らないようになります。
  • 報告書フォームのスタイル適用ロジックを最適化し、より安定した表示と動作が実現されました。

@github-actions github-actions bot requested a review from komagata October 21, 2025 12:22
@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Oct 21, 2025

Walkthrough(概要)

レポートテンプレートコントローラーのモーダルオープン時にテキスエリアの再初期化前に未初期化を実行し、フォームの説明フィールドの条件付きCSSクラス割り当てを削除する変更。

Changes(変更内容)

コホート / ファイル(s) 変更内容
テキスエリア初期化の改善
app/javascript/controllers/report_template_controller.js
openModalメソッド内でテキスエリア再初期化前にTextareaInitializer.uninitialize('#js-template-content')を呼び出し、モーダルオープン時の状態リセットを確保
条件付きクラス割り当ての削除
app/views/reports/_form.html.slim
説明テキスエリアのjs-markdownクラスの条件付き追加ロジックを削除し、クラス属性を静的値に統一

Estimated code review effort(推定レビュー工数)

🎯 2 (Simple) | ⏱️ ~10 minutes

  • 単一行の追加と条件分岐の削除という局所的な変更
  • 両方の修正ともテキスエリア処理の改善に関連

Possibly related PRs(関連する可能性のあるPR)

Suggested reviewers(推奨レビュアー)

  • komagata

Poem(詩)

🐰 モーダルふわり、テキスエリア
初期化をリセット、心機一転
条件も削ぎ落とし、シンプルなり
フォームは輝く、ウサギの工夫で ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. You can run @coderabbitai generate docstrings to improve docstring coverage.
✅ Passed checks (2 passed)
Check name Status Explanation
Title check ✅ Passed プルリクエストのタイトルは日報の画像に関するバグ修正を述べており、実装内容の主要な目的と合致しています。
Description check ✅ Passed プルリクエストの説明は、テンプレートの必須セクション(Issue、概要、変更確認方法、Screenshot)をすべて含み、詳細かつ完全に記載されています。
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch bugfix/duplicate-image-on-report-update

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@smallmonkeykey smallmonkeykey self-assigned this Oct 21, 2025
- `_form.html.slim`のtextarea から`.js-markdown`を削除
- Stimulusのみで初期化
@smallmonkeykey
Copy link
Copy Markdown
Contributor Author

@matuaya
おつかれさまです!
こちらのレビューをお願いできますでしょうか??🙏

@matuaya
Copy link
Copy Markdown
Contributor

matuaya commented Oct 23, 2025

@smallmonkeykey
レビュー承りました😊
できれば一週間ほどいただけると嬉しいです🙇‍♀️

@smallmonkeykey
Copy link
Copy Markdown
Contributor Author

@matuaya
ありがとうございます!よろしくお願いします!

@smallmonkeykey
Copy link
Copy Markdown
Contributor Author

@matuaya
お疲れ様です!
こちらなのですが、新たなバグが追加されまして、今の変更だけだとそのバグに対応できていない可能性があります。
そのため一旦レビュー依頼を下げたいと思うのですが、もしレビューをしてくださっている最中だったら本当にすみません🙇‍♂️

@smallmonkeykey smallmonkeykey requested review from matuaya and removed request for matuaya October 30, 2025 09:28
@matuaya
Copy link
Copy Markdown
Contributor

matuaya commented Oct 30, 2025

@smallmonkeykey
了解です🙏
今ちょうどApproveしようとしていたところでした😳💦
バグがあったのですね・・全然気づけなかったです💦

@smallmonkeykey
Copy link
Copy Markdown
Contributor Author

@matuaya
お手数おかけしてすみません🙇‍♂️
別件の画像のバグがでてきまして…!
本当に見てくださっていたのにすみません🙇‍♂️

@matuaya
Copy link
Copy Markdown
Contributor

matuaya commented Oct 31, 2025

@smallmonkeykey

お手数おかけしてすみません🙇‍♂️

違うんです・・!🙇‍♀️💦
「全然バグに気づけぬままApproveするところだった!」と焦ってしまっただけなんです🙏
変に気を遣わせてしまってこちらこそすみません🙇‍♀️

`uninitialize()`を実行してから`initialize()`を呼ぶように変更し、毎回1回だけ初期化されるように修正
Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (2)
app/javascript/controllers/report_template_controller.js (2)

24-30: [任意の改善提案] connect内でも初期化前にuninitializeを検討

現在の変更により、ビュー側から js-markdown クラスが削除され、二重初期化の問題は解決されています。ただし、Turbolinks/Turbo環境ではコントローラーが切断・再接続される可能性があるため、より防御的なコードとして initialize の前に uninitialize を呼び出すことも検討できます。

この対応は必須ではありませんが、replaceReportopenModal と同様のパターンに統一できます:

 connect() {
   if (this.reportTarget.value === '') {
     this.reportTarget.value = this.registeredTemplateValue
   }
   this.registeredTemplateValue = this.templateInputTarget.value
+  TextareaInitializer.uninitialize('.js-report-content')
   TextareaInitializer.initialize('.js-report-content')
 }

82-104: [任意のリファクタリング提案] fetchメソッドの代わりにrequest.jsの使用を検討

コーディングガイドラインでは fetch メソッドの代わりに request.js の使用が推奨されています。registerTemplate メソッド(82-104行目)と updateTemplate メソッド(120-138行目)で fetch が使用されていますが、これは既存のコードであり、今回のバグ修正の範囲外です。

必要に応じて、別PRでの対応を検討してください。コーディングガイドラインに基づく。

Also applies to: 120-138

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b60d992 and 99b5b58.

📒 Files selected for processing (2)
  • app/javascript/controllers/report_template_controller.js (1 hunks)
  • app/views/reports/_form.html.slim (1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.js

⚙️ CodeRabbit configuration file

**/*.js: - どうしても避けられない時以外に新規にVue.js, Reactのコードを追加しない。

  • fetchメソッドの代わりにrequest.jsを使う。

Files:

  • app/javascript/controllers/report_template_controller.js
🧠 Learnings (1)
📓 Common learnings
Learnt from: komagata
Repo: fjordllc/bootcamp PR: 9101
File: app/notifiers/discord_notifier.rb:131-135
Timestamp: 2025-09-12T21:18:00.834Z
Learning: Rails アップグレードPRにおいて、product_review_not_completed メソッドの webhook URL 設定の shared フォールバック追加も、設定システム全体の変更として別PRで対応すべきである。
Learnt from: komagata
Repo: fjordllc/bootcamp PR: 9101
File: app/models/graduation_notifier.rb:23-28
Timestamp: 2025-09-12T21:16:47.639Z
Learning: Rails upgrade PRにおいて、configuration systemの変更やwebhook設定の改善提案も、アップグレードに直接関連しない場合は別PRで対応すべきである。PRのスコープ維持が重要。
Learnt from: ryufuta
Repo: fjordllc/bootcamp PR: 8992
File: app/models/correct_answer_notifier.rb:23-23
Timestamp: 2025-07-30T07:26:36.599Z
Learning: PRのスコープを維持することが重要であり、バグ修正PRにおいて、修正対象以外の機能(例:ルーティングテスト)の追加提案は適切ではない。そのような改善が必要な場合は別PRで対応すべきである。
Learnt from: Miya096jp
Repo: fjordllc/bootcamp PR: 9102
File: app/controllers/mentor/buzzes_controller.rb:0-0
Timestamp: 2025-09-04T01:39:22.261Z
Learning: fjordllc/bootcamp プロジェクトでは、更新処理の成功時の通知メッセージについて、I18n を使用せずに日本語文字列を直接記述する方針で一貫性を保っている。
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
  • GitHub Check: build_and_test
🔇 Additional comments (2)
app/javascript/controllers/report_template_controller.js (1)

55-62: LGTM! モーダル表示時のテキストエリアをクリーンな状態で再初期化

uninitialize を追加することで、モーダルを開くたびにテキストエリアがクリーンな状態で初期化されます。これは replaceReport メソッドと同じパターンであり、イベントハンドラの重複登録を防ぐ適切な実装です。

app/views/reports/_form.html.slim (1)

82-86: LGTM! 二重初期化を防ぐコアな修正

js-markdown クラスの条件付き追加ロジックを削除し、静的なクラスリストに変更したことで、application.js からの初期化が防止されます。これにより、Stimulusコントローラー(js-report-content クラス経由)のみが TextareaInitializer を管理するようになり、画像の二重貼り付け問題が解決されます。

@smallmonkeykey smallmonkeykey changed the title 日報本文の更新時に画像を貼り付けると二重で貼り付けられてしまっていたので修正 日報の画像に関するバグを修正 Nov 9, 2025
@smallmonkeykey
Copy link
Copy Markdown
Contributor Author

@matuaya
おつかれさまです!新たに追加されたバグを修正しました。
レビューをお願いすることはできますか?
以前依頼した時にすでにレビューをしてくださっていたので再度依頼しました。
今別のレビューを担当されていると思うので、負担があれば他の方に依頼しますのでおっしゃってください🙇‍♂️

@matuaya
Copy link
Copy Markdown
Contributor

matuaya commented Nov 9, 2025

@smallmonkeykey
大丈夫です!
数日いただければ嬉しいです🙇‍♀️

@smallmonkeykey
Copy link
Copy Markdown
Contributor Author

@matuaya
ありがとうございます🙏よろしくお願いいたします!

Copy link
Copy Markdown
Contributor

@matuaya matuaya left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

動作バッチリ問題ありませんでした☺️👍
Approveさせていただきます!

@smallmonkeykey
Copy link
Copy Markdown
Contributor Author

@matuaya
レビューありがとうございました🙏✨
2度もレビューを依頼したのに関わらず快く引き受けてくださって本当にありがとうございます!!

@smallmonkeykey
Copy link
Copy Markdown
Contributor Author

@komagata
メンバーレビューを終えましたのでご確認お願いします!

Copy link
Copy Markdown
Member

@komagata komagata left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@komagata komagata merged commit c5e9855 into main Nov 19, 2025
14 checks passed
@komagata komagata deleted the bugfix/duplicate-image-on-report-update branch November 19, 2025 02:42
@github-actions github-actions bot mentioned this pull request Nov 19, 2025
7 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants