POSTやDELETEリクエストがGETリクエストになってしまう。

uruu-github commented 1 week ago

前回解消したはずなのになってしまう。

（✗）data: {method: 'post'}

（○）data: {turbo-method: :post}

まえはこういうふうにしたら行けた。けど今回はならない。

uruu-github commented 1 week ago

原因はRails7から使用されるTurboによるもの。 6以前ではrails-ujsが対応していた？

uruu-github commented 1 week ago

link_toの場合、DELETEリクエストであっても、デフォルトではGETリクエストとして送られるが、 javascriptによりDELETEなどリクエストが変更される。 rails7より上記の通りjavasceriptの挙動が変わっている。

uruu-github commented 1 week ago

参考記事これのとおりやってみたけどだめやった。

uruu-github commented 1 week ago

まずは前提から勉強する！

参考記事：

Hotwireとは HotwireはRails7からRailsのデフォルトになった、モダンなWebアプリケーションを作るための新しいアプローチ。

Turbo
Stimulus
Strada 上記の３つから構成される。

また、そのなかでもTurboは下記の４つから構成される。

Turbo Drive
Turbo Frames
Turbo Streams
Turbo Native

つまりこのような階層構造になっている。 Hotwire

Turbo
- Turbo Drive
- Turbo Frames
- Turbo Streams
- Turbo Native
Stimulus
Strada

この中のStradaとTurbo Nativeはモバイル開発で使う技術なので、Web開発の場合は以下の技術が利用される。

Turbo

Turbo Drive：画面遷移を高速にする機能
Turbo Frames：Turbo Driveの部分置換版
Turbo Streams：複数個所のHTML要素を同時に更新できる

Stimulus

uruu-github commented 1 week ago

Hotwireの特徴

HTMLをレスポンスすること。フォーム、リンクからのリクエストはすべて非同期リクエストになる（すべてFetchAPIを利用する）。 fetchに対してJSONではなくHTMLをレスポンスする。これによりレンダリングをサーバーサイドだけで行えるようになる。今までのRailsアプリケーションの延長上でモダンなWebアプリケーションの開発ができる

uruu-github commented 1 week ago

ではturbo-railsとは？

turbo-railsはRailsからTurboを便利に使うためのgemである。 TurboはJavaScriptのライブラリで、Railsには依存していない。（そのためTurboはRails以外でも使える）

RailsからTurboを直接使うこともできるが、turbo-railsを使うことでより便利に使えるようになる。 →直接使うよりも短いコードでかけるようになる。

turbo-rails利用時のデータの流れは下記の通り

サーバー側でturbo-railsによって解釈しタグを作成。ブラウザ（クライアント）側で上記で作成したタグがTurboにより解釈されて要素が更新される。以上のことよりRailsからTurboを使うときには、直接使うことはなく、turbo-railsを介して使う！

uruu-github commented 1 week ago

Stimulusとは

StimulusはTurboと相性が良いJavaScriptのライブラリのこと。

カオスになりがちなJavaScriptのコードにレールを敷く役割を担っている。

Turboを使うとJavaScriptを書かずに「サーバーサイドレンダリング + fetch」でHTML要素を更新できるようになる。具体的にはRailsのScaffoldで用意される7つのアクション（index、show、new、create、edit、update、delete）は、JavaScriptなしでインタラクティブにできるようになる。その結果、ReactやVueを使うのに比べて、JavaScriptを書く量は劇的に減る。

それでもJavaScriptが必要なケースは出てくる。そんな時には、Stimulusが用意するレールの上にJavaScriptを書くことになる。

uruu-github commented 1 week ago

Hotwireはライブラリではない？

HotwireはTurboとStimulusという２つのライブラリのパッケージのようなもの。Hotwireというライブラリがあるわけではない。

uruu-github commented 1 week ago

Hotwireのまとめ

通常の画面遷移: HTMLを丸ごと変える
Turbo Drive: だけ更新する
Turbo Frames: だけ更新する
Turbo Streams: 複数のHTML要素を更新する
Stimulus: JavaScriptを使ってTurboでできないことをやる

uruu-github commented 1 week ago

= javascript_include_tag "turbo", type: "module" この文章を入れることで解決できた！

%html
  %head
    = javascript_include_tag "turbo", type: "module"
    = javascript_importmap_tags

ログアウトだけでなく記事の削除やフォロー機能も解決できた。

参考

uruu-github commented 1 week ago

なぜ追加すると解決できたのか（ChatGPT）

Turboのモジュールとしての読み込み

type: "module"を指定することで、TurboがESモジュールとして読み込まれるようになります。これにより、Turboの機能が正しく初期化され、JavaScriptの動作が期待通りになる可能性があります。ESモジュールは、スコープの分離や非同期読み込みをサポートしており、これがTurboの動作に影響を与えた可能性があります。
RailsのUJSとの統合

Turboが正しく読み込まれることで、RailsのUnobtrusive JavaScript（UJS）機能も適切に動作するようになります。data-method="delete"のような属性が正しく処理され、期待通りにDELETEリクエストが発行されるようになった可能性があります。もしUJSが読み込まれていなかった場合、data-method属性が無視されてGETリクエストが発行されていたかもしれません。
依存関係の解決

Turboが適切に読み込まれたことで、他の関連するJavaScriptコードやライブラリ（例えば、StimulusやActionCable）が正しく動作し、全体としてアプリケーションのJavaScriptの動作が改善された可能性があります。
ブラウザのキャッシュや初期化の問題

以前の設定や読み込みに問題があった場合、ブラウザのキャッシュが影響していた可能性もあります。javascript_include_tagでTurboを明示的に読み込むことで、これがクリアされたり再初期化されたりしたかもしれません。

このように、javascript_include_tag "turbo", type: "module"を追加することで、Turboが適切に読み込まれ、全体的なJavaScriptの動作が改善されたと考えられます。引き続き、他の部分にも影響がないか確認しながら開発を進めてください。

uruu-github commented 1 week ago

ビシッということでゴチャゴチャが解除された感じやと思う。基本的に設定は線でいいはずやけど…

rails assets:precompileをやってなかったのが原因かも

uruu-github / uruu-blogapp2