ReportTemplate.jsx、ReportTemplateModal.jsxを非Vue/React化

[hirokiej]

Issue

• ReportTemplate.jsx、ReportTemplateModal.jsxを非Vue/Reactに移行する #9042

概要

ReportTemplate.jsxとReportTemplateModal.jsxを削除し、Stimulus controllerを導入しました。
_report_template.html.slimとreport_template_controller.jsを追加しました。

変更確認方法

以下のことを確認します

• モーダルに関する挙動
• テンプレート登録/変更の挙動
• マークダウンが正常に動くか
• テンプレートを反映する際の挙動

1. refactor/replace-report-template-with-railsをローカルに取り込む
2. foreman start -f Procfile.devでローカル環境を立ち上げる。
3. komagataでログインする
   ID: komagata
   PASS: testtest
4. 日報作成ページへ移動する
5. 「テンプレートを登録」をクリックして、テンプレート作成のモーダルが表示されることを確認
6. 未入力だと「登録」がクリックできないことを確認
7. テンプレート登録モーダルの外側をクリックするとアラートが表示されyesでモーダルが閉じられることを確認
8. 再度、モーダルを表示し、以下のテンプレートを登録する
   *(「//マークダウン崩れ回避のためのコメント(削除してください」を削除してください

# 見出し1
- 箇条書き
- 箇条書き2
## 見出し2
1. 数字付き
1.数字付き
### 見出し3
**太字**
::: details 折りたたみ
折りたたみの内容
:::
[localhost:3000のURL](http://localhost:3000/)

```ruby
def method
puts "Rubyのメソッド"
end
//マークダウン崩れ回避のためのコメント(削除してください) ```

9. 「プレビュー」をクリックし、正しくマークダウンが適用されていることを確認し「登録」する
10. 「テンプレートを反映する」をクリックし日報本文に登録したテンプレートが挿入され、プレビューにも表示されることを確認
11. 「 テンプレートを変更」をクリックし、「変更」できないことを確認
12. 任意の文字を削除してからキャンセルをクリックして、再度、「テンプレート変更」をクリックして変更がないことを確認
13. 任意の文字を削除して「変更」をクリックして登録
14. テンプレートを反映するをクリックし、アラートが表示されることを確認し、「yes」で日報本文が変更されることを確認
15. 日報全文を削除し、「テンプレートを反映」をクリックし、アラートなしでテンプレートが挿入されることを確認

Screenshot

内部変更で画面の変更がないので、スクリーンショットはありません。

Summary by CodeRabbit

• 新機能
  • 日報テンプレートの登録・変更・プレビューができるモーダルを追加
  • テンプレート適用アクションを追加し、入力欄の自動初期化と有効性に応じたボタン制御を実装
  • アクセシビリティ対応のダイアログと日本語UIを提供
• リファクタ
  • フロントエンドをReact実装からStimulus＋サーバーサイド描画へ移行し、フォームとプレビューの連携を改善
• チョア
  • 一部ファイルをLint対象外に設定
  • フロントエンド初期化の読み込み順を調整
  • 依存関係にStimulusを追加

[coderabbitai]

Walkthrough

React製の日報テンプレート機能を削除し、Stimulusベースへ置き換え。Stimulusアプリのブートストラップと新コントローラを追加し、ビューをStimulus対応に更新。packsにcontrollersを読み込み、Stimulus依存をpackage.jsonに追加。.eslintignoreで新コントローラを一時的にlint除外。

Changes

Cohort / File(s)	Summary of changes
Stimulusブートストラップ app/javascript/controllers/index.js, app/javascript/packs/application.js	Stimulus Applicationの初期化と自動登録を追加し、packsでcontrollersを読み込む順序を追加。
日報テンプレート Stimulus コントローラ app/javascript/controllers/report_template_controller.js	日報テンプレートの反映・登録・更新・プレビュー・モーダル制御を行う新規コントローラを追加。targets/values/各種ハンドラを実装。
Reactコンポーネント削除 app/javascript/components/ReportTemplate.jsx, app/javascript/components/ReportTemplateModal.jsx	既存のReact製テンプレートUIとモーダルを完全削除。
ビュー更新（Stimulus対応） app/views/reports/_form.html.slim, app/views/reports/_report_template.html.slim	React呼び出しをサーバ部分テンプレートに置換。Stimulusのdata-controller/targets/actionsを付与し、テンプレート適用・編集モーダル・タブ・プレビュー・送信ボタン制御を実装。
ESLint設定 .eslintignore	app/javascript/controllers/report_template_controller.jsをlint対象外に追加（ecmaVersion差異による一時対応コメント付き）。
依存関係 package.json	stimulusをdependenciesに追加。

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor U as User
  participant V as View (reports/_form)
  participant C as Stimulus: report-template
  participant API as /api/report_templates
  participant Toast as Toast

  U->>V: 「テンプレート変更/登録」クリック
  V->>C: data-action: openModal
  C->>C: モーダルを開く / タブ切替 / 入力監視

  U->>C: 入力編集 / プレビュー切替
  C->>C: 送信可否更新

  alt 既存テンプレあり
    U->>C: 「変更」クリック
    C->>API: PUT /api/report_templates/:id (CSRF付き)
  else 新規登録
    U->>C: 「登録」クリック
    C->>API: POST /api/report_templates (CSRF付き)
  end

  API-->>C: 成功(JSON: id/description)
  C->>V: hidden値/表示を更新
  C->>Toast: 成功トースト
  C->>C: モーダルを閉じる

  U->>V: 「テンプレートを反映する」クリック
  V->>C: data-action: replaceReport
  C->>V: テキストエリアへテンプレ反映（確認あり）

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related issues

• ReportTemplate.jsx、ReportTemplateModal.jsxを非Vue/Reactに移行する #9042 — React実装の削除とStimulusへの移行が一致。
• ESLintのecmaVersionを2022に引き上げてバージョンアップしたい #9187 — report_template_controller.jsのESLintパース問題に対する一時ignoreが一致。

Suggested reviewers

• komagata

Poem

ぴょんと跳ねてコード替え
Reactさよなら、Stimulusへ
タブで覗いて、文も整え
登録・変更、トースト鳴って
今夜の月も、レビュー待ってる 🌕🐇

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title Check	✅ Passed	PRタイトル「ReportTemplate.jsx、ReportTemplateModal.jsxを非Vue/React化」は変更の主旨（既存のReact/Vueコンポーネントを廃止してサーバーサイド/Stimulusへ置き換えたこと）を簡潔かつ明確に表しており、差分の主要点に直接対応しているため問題ありません。
Description Check	✅ Passed	PR説明はリポジトリのテンプレートに沿っており、Issue番号（#9042）、概要、詳細な変更確認手順（ブランチ名や再現手順、期待動作）およびスクリーンショットの有無まで記載されているためレビューに必要な情報は十分に揃っています。
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch refactor/replace-report-template-with-rails

---

📜 Recent 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 c7665c5 and 5fcc2e3.

⛔ Files ignored due to path filters (1)

• yarn.lock is excluded by !**/yarn.lock, !**/*.lock

📒 Files selected for processing (9)

• .eslintignore (1 hunks)
• app/javascript/components/ReportTemplate.jsx (0 hunks)
• app/javascript/components/ReportTemplateModal.jsx (0 hunks)
• app/javascript/controllers/index.js (1 hunks)
• app/javascript/controllers/report_template_controller.js (1 hunks)
• app/javascript/packs/application.js (1 hunks)
• app/views/reports/_form.html.slim (2 hunks)
• app/views/reports/_report_template.html.slim (1 hunks)
• package.json (1 hunks)

💤 Files with no reviewable changes (2)

• app/javascript/components/ReportTemplateModal.jsx
• app/javascript/components/ReportTemplate.jsx

🧰 Additional context used

📓 Path-based instructions (1)

**/*.js

⚙️ CodeRabbit configuration file

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

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

Files:

• app/javascript/controllers/index.js
• app/javascript/packs/application.js
• app/javascript/controllers/report_template_controller.js

🧠 Learnings (1)

📓 Common learnings

Learnt from: komagata
PR: fjordllc/bootcamp#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: komagata
PR: fjordllc/bootcamp#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
PR: fjordllc/bootcamp#9101
File: app/models/product.rb:59-61
Timestamp: 2025-09-11T14:47:53.256Z
Learning: Rails アップグレードPRでは、アップグレードに直接関連しない性能改善や機能追加の提案は避けるべき。PRのスコープを維持することが重要で、そのような改善提案は別PRで対応すべきである。

🧬 Code graph analysis (1)

app/javascript/controllers/index.js (1)

config/webpack/environment.js (1)

• require (1-1)

🔇 Additional comments (21)

package.json (1)

57-57: LGTM! Stimulusの依存関係が正しく追加されています。

React/VueからStimulusへの移行に必要な依存関係が適切に追加されています。

.eslintignore (1)

1-4: 一時的なlintスキップの対応を確認しました。

PRの説明にある通り、ECMAScript2022のstaticキーワードに対するESLint設定の制限による一時的な対応として適切です。別issueでの対応が計画されていることも確認できました。

app/javascript/packs/application.js (1)

9-9: LGTM! Stimulusコントローラーの読み込みが正しく追加されています。

新しく追加されたStimulusコントローラーを読み込むためのimportが適切に配置されています。

app/javascript/controllers/index.js (1)

1-9: LGTM! Stimulusのブートストラップが正しく実装されています。

Stimulusのアプリケーション初期化とコントローラーの自動登録が適切に実装されています。コメントも分かりやすく、規約ベースの設定になっています。

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

68-68: LGTM! Stimulusコントローラーの配線が適切です。

Stimulusコントローラーのdata-controller属性が正しく設定されています。

---

70-79: LGTM! テンプレートデータの渡し方が適切です。

現在のユーザーのレポートテンプレート情報を適切にpartialに渡しており、Stimulusの値として正しく設定されています。

---

82-86: LGTM! textareaの設定とStimulusターゲットの配線が正しくされています。

テンプレートが存在する場合の初期値設定とStimulusターゲットの設定が適切に行われています。

---

97-97: LGTM! プレビュー要素のStimulusターゲット設定が適切です。

プレビュー要素にStimulusターゲットが正しく設定されています。

app/views/reports/_report_template.html.slim (5)

1-6: LGTM! Stimulusの値バインディングが適切に設定されています。

テンプレートの状態管理に必要な全ての値がStimulusコントローラーに正しくバインドされています。

---

9-28: LGTM! 条件分岐によるUI表示が適切に実装されています。

テンプレートIDの有無による適切なUI表示とStimulusアクションの配線が正しく行われています。

---

30-37: LGTM! アクセシビリティを考慮したモーダルの実装です。

適切なARIA属性（role、aria-modal、aria-labelledby、aria-hidden）が設定されており、アクセシビリティに配慮された実装となっています。

---

44-55: LGTM! タブ機能の実装が適切です。

編集値に基づく動的なアクティブ状態の表示とStimulusアクションの配線が正しく行われています。

---

78-88: LGTM! 動的なアクションとラベルの設定が適切です。

テンプレートIDの有無に応じた適切なアクション（登録/更新）とラベルの切り替えが実装されています。

app/javascript/controllers/report_template_controller.js (8)

7-22: LGTM! Stimulusコントローラーの基本構造が適切です。

静的なターゲットと値の定義が正しく行われており、必要な機能に対応した構造になっています。

---

24-30: LGTM! 初期化処理が適切に実装されています。

レポートの初期値設定とTextareaInitializerの初期化が正しく行われています。

---

32-42: LGTM! テンプレート反映機能が適切に実装されています。

確認ダイアログを含む安全な上書き処理とTextareaの再初期化が正しく実装されています。

---

67-104: LGTM! テンプレート登録のAPI呼び出しが適切です。

適切なバリデーション、CSRF対応、エラーハンドリングを含むAPI呼び出しが実装されています。

---

106-138: LGTM! テンプレート更新のAPI呼び出しが適切です。

登録処理と同様に適切なバリデーションとエラーハンドリングが実装されています。

---

140-156: LGTM! タブ切り替え機能が適切に実装されています。

編集タブとプレビュータブの切り替えロジックが正しく実装されています。

---

158-167: LGTM! 送信ボタンの状態管理が適切です。

テンプレートの変更有無に基づく送信ボタンの有効/無効切り替えが正しく実装されています。

---

1-5: 依存モジュールは存在します — 確認済み

• app/javascript/textarea-initializer.js が存在
• app/javascript/csrf.js が存在
• app/javascript/vanillaToast.js が存在（3行目に export function toast(...) を確認）

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[hirokiej]

9/17の開発MTGで本PRのStimpusuコントローラーの一部について、ESLintを一時的にスキップしてCIを通す方針となりました。

以下、経緯です。

• Stimulus Controller導入することでJSのコードにstaticが必須となります。
• 現在のESLintの設定ではecmaVersion: 2020となっており、Parsing Errorが発生します
• staticを使用した場合にLintを通すにはecmaVersion: 2022のバージョンアップが必要です。
• しかし、ecmaVersion: 2022にバージョンアップをすると、別ファイルにて170件ほどのエラーが発生するので、別issueを立てて対処すべきだと考えました。

そして、開発MTGで@machida さんに確認し以下の方針となりました。

• 今回のPRではバージョンアップをせず、「一時的にスキップ」することになりました。
• 今後の対応として、ESLintの「ecmaVersionのバージョンアップするためのissue」を新たに立てます。
• そのissueに本PRのリンクを貼り、経緯がわかるようにし、今回スキップした部分もそのissueで対応してもらいます。

[hirokiej]

@karlley さん
お疲れ様です！
レビュー依頼です！
こちらお願いしても良いでしょうか🙇？

[karlley]

@hirokiej
お疲れ様です！
返信遅れてすみませんでした💦

こちらお願いしても良いでしょうか🙇？

承知しました！
お時間を1週間ほどいただきたいのですが問題ないでしょうか？

[hirokiej]

@karlley さん
ご確認ありがとうございます🙇

急ぎではないので大丈夫です🙏！
よろしくお願い致します🙇！

[karlley]

@hirokiej

急ぎではないので大丈夫です🙏！

承知しました！
レビューさせていただきます😄

[hirokiej]

@karlley さん
ありがとうございます！
よろしくお願いいたします🙇

[karlley]

大変お待たせしました！
description内で以下2点、細かいですが気になりました。

1. package.jsonに差分が出ているので、環境起動前に場合によってはbin/yarn install が必要になる

私の環境では node_modules 不足でエラーになり、bin/yarn install を実行する必要がありました。
package.jsonに差分がある場合はyarn install が一般的かもしれません（私は知らなかったので調べました😅）のでdescriptionを修正するかどうかはお任せします。

2. 動作確認手順の 11.「テンプレートを変更」をクリックし、「変更」できないことを確認 について

6. 未入力だと「登録」がクリックできないことを確認 と同じように、11.「テンプレートを変更」をクリックし、未変更だと「変更」がクリックできないことを確認 のように書くと分かりやすいかもしれません。

コードに関しては問題無さそうでした。
また、コミットが丁寧で変更を追いやすく、とてもレビューしやすかったです。大変勉強になりました🙏
お手数ですが確認お願いいたします！

[hirokiej]

@karlley さん
ご確認ありがとうございます！
ご指摘いただいた2点を修正いたしましたので、再度ご確認よろしくお願いいたします🙇！

1.package.jsonに差分が出ているので、環境起動前に場合によってはbin/yarn install が必要になる

Stimulusを導入する際に私自身はnpm install stimulusをしたのですが、どうやらbin/setupでyarnで依存関係が整えられるのですね💡
私自身で何か記載すべきか少し考えたのですが、（ぼんやりと調べなければと思いつつ）知らない状態のままPRを出してしまっていました。
お手数をかけしてしまいすみません💦
教えてくださりありがとうございます🙇
修正いたします🙏

動作確認手順の 11.「テンプレートを変更」をクリックし、「変更」できないことを確認 について

こちらも修正いたしました。ご指摘ありがとうございます！

[hirokiej]

@karlley さん

また、コミットが丁寧で変更を追いやすく、とてもレビューしやすかったです。大変勉強になりました🙏

こちら、梅本さんにレビューで指摘いただいてから意識しているので褒めてもらえて嬉しいです😭
gitのコマンドでgit rebase -i HEAD~nが使うランキングTOP3くらいになりました🤩

[karlley]

@hirokiej

ご指摘いただいた2点を修正いたしましたので、再度ご確認よろしくお願いいたします🙇！

対応ありがとうございます！
良さそうなのでapproveさせていただきます。

gitのコマンドでgit rebase -i HEAD~nが使うランキングTOP3くらいになりました🤩

rebaseほとんど使わないので調べてみようと思います！
情報共有ありがとうございます🙏

[hirokiej]

@karlley さん
プラクティスで指摘いただいた、コミットに関して2つのブログを書いているので、もし良かったらご覧いただけたらと思います🙇
https://hiroblogdesu.hatenablog.com/entry/2025/05/14/133848
https://hiroblogdesu.hatenablog.com/entry/2024/10/05/215324

また、ご確認ありがとうございました！

@komagata さん
お疲れ様です。
メンバーレビューが終了しましたので、レビューをお願い致します🙇

[komagata]

@hirokiej おお、stimulusを導入したんですね。
vue.js, reactjsと複数入っていて、vue.jsだけでも削除するのに2年ぐらいかかったので新しいフレームワークを導入するのは非常に慎重に考えようと思っていたのですが、とりいそぎ問題が起きていないなら・・・いいのかな・・・と思いつつなやんでいます。

ちょっと悩んでいるのでレビューもうしばらくお時間いただければ幸いです。

今後は新しいフレームワークの導入を考えていたら先に連絡いただければ助かります。プログラマーとして入社したあとも同じようにしたほうがいいかもです。

[hirokiej]

@komagata

脱React化の一環として、日報テンプレート機能をReactからRails viewとStimulus controllerに移行します。

すみません、ここにStimulus controllerに移行しますとの記載があったので、てっきりマストで導入するものだと思っていました💦

ちょっと悩んでいるのでレビューもうしばらくお時間いただければ幸いです。

承知しました。
よろしくお願いいたします🙇

[komagata]

@hirokiej

すみません、ここにStimulus controllerに移行しますとの記載があったので、てっきりマストで導入するものだと思っていました💦

大変申し訳無いです。AIにベースを書いてもらったのが残っていたんだと思います。

たぶん・・・何も起きないとおもうのでこのまま行かせていただきたいと思います。

[komagata]

確認させていただきました。OKです〜！

[hirokiej]

@komagata さん
ご確認と承認ありがとうございます🙇