webpackerによるStimulusのインストールでハマったこと

はじめに

皆さんStimulusを使っていますか？
ReactやVueを使う程学べていないけど、jQueryは使いたくないって人におすすめのフレームワークです！
JaveScriptの簡単なDOM操作ができる人なら学習コストはほぼゼロで使えます！

更に、Webpackerを導入しているRailsならコマンド一発でインストールできるのも魅力的です。

ターミナル

rails webpacker:install:stimulus

上記コマンドでインストールして公式サイトでサクッと勉強しながら皆さん良いStimulusライフを！

、、、としたかったのですが、インストールの際にエラーが発生して上手く動かなかったので修正点を備忘録として残しておきます。

前提

技術など	バージョン等
ruby	2.7.4
Rails	6.1.4

執筆時点の日時は2021/11/27です。

調査結果

修正点とか言ってますが、ただのバージョンの問題でした。
詳しくは分かってないのですが、Rails7にStimulusは標準で組み込まれるっぽいです（現在の筆者のRailsのバージョンは6）。
それに先駆けてStimulusが色々バージョンアップしたっぽいので、Rails6ではそのままだと使えませんでした。（間違いがありましたら諸先輩方ご指摘お願いします🙇‍♂️）

修正内容

まずは、Stimulusのバージョンを直しましょう（すでにStimulusのバージョン3.0.0をインストールしてしまった前提です。）

package.json

{
  "name": "myapp",
  "private": true,
  "dependencies": {
    "@popperjs/core": "^2.10.1",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "5.4.3",
    // 中略
-   "stimulus": "^3.0.0",
+   "stimulus": "^2.0.0",
    "turbolinks": "^5.2.0",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3"
  }
}

上記のように3.0.0を2.0.0に修正します。
その上で、

ターミナル

yarn install

で、再インストールして下さい。
不安な人は、yarn.lock内を検索して、"@stimulus/core@^2.0.0":となっているか確認してみてください。

次に、app/javascript/packs/application.jsに追記をします。

application.js

import Rails from "@rails/ujs";
import Turbolinks from "turbolinks";
import * as ActiveStorage from "@rails/activestorage";

// 中略

+ import "controllers";

上記のように1行だけ追加して下さい（もしかしたら自動で記述されているかもしれません）

最後に、app/javascript/controllers/ディレクトリにhello_controller.jsを作成、公式サイトのTOPにある部分とかを打ち込んで動くか確認してみて下さい。
公式サイトTOPと同じ動きをしてくれたら成功です！

終わりに

今回がQiita初投稿ですので、温かい目で見守ってくださるとありがたいです。
また、ミスやこうすると読みやすい等ご指摘がありましたらぜひコメントの方宜しくお願いします🙇‍♂️

繰り返しになりますが、ReactやVueを使うほどではない簡単な動きだけならStiumulusの方が導入・開発スピードは早いと思いますので、ぜひ使ってみて下さい！！