javascript質問

[ojfubd]

◻︎実現したいこと

importmapでhotwiredフレームワークやstimulusやturbo-railsを使ってjavascriptをhtmlと併用してブラウザでjavascriptが動いていたが、esbuildに移行したことでjavascriptを動かしたい ブランチ名:latestpopular

◻︎実現するために自分が選んだ手段とその理由 https://github.com/hotwired/stimulus-rails/tree/mainこの記事のWith JavaScript bundler から下の手順を試してみた。 理由 githubのgemを見るのが一番正しいと思ったため

◻︎該当のソースコード

app/javascript/application.js

// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "@hotwired/turbo-rails"
import "./controllers"
import * as bootstrap from "bootstrap"

storyshare/app/javascript/controllers/index.js

import { application } from "./application"

import AController from "./a_controller"
application.register("a", AController)

import BodyController from "./body_controller"
application.register("body", BodyController)

import CharaAutoFillController from "./chara_auto_fill_controller"
application.register("chara-auto-fill", CharaAutoFillController)

import EraAutoFillController from "./era_auto_fill_controller"
application.register("era-auto-fill", EraAutoFillController)

import ExampleController from "./example_controller"
application.register("example", ExampleController)

import GenreAutoFillController from "./genre_auto_fill_controller"
application.register("genre-auto-fill", GenreAutoFillController)

import IssenController from "./issen_controller"
application.register("issen", IssenController)

import MemoCountController from "./memo_count_controller"
application.register("memo-count", MemoCountController)

import PlaceAutoFillController from "./place_auto_fill_controller"
application.register("place-auto-fill", PlaceAutoFillController)

import ThemeAutoFillController from "./theme_auto_fill_controller"
application.register("theme-auto-fill", ThemeAutoFillController)

memo_count_controller.js

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="auto-fill"
export default class extends Controller {
  connect() {
    const themeArea = document.getElementById('memo');
    if (themeArea) {
      themeArea.addEventListener('input', this.countChara3.bind(this));
    }
  }

  countChara3() {
    const textArea = document.getElementById('memo');
    const charCount = document.getElementById('charCount2');
    if (textArea && charCount) {
      charCount.textContent = textArea.value.length;
    }
  }

}

package.json

{
  "name": "app",
  "type": "module",
  "private": "true",
  "dependencies": {
    "@hotwired/stimulus": "^3.2.2",
    "@hotwired/turbo-rails": "^8.0.5",
    "@popperjs/core": "^2.11.8",
    "autoprefixer": "^10.4.19",
    "bootstrap": "^5.3.3",
    "bootstrap-icons": "^1.11.3",
    "esbuild": "0.19.0",
    "nodemon": "^3.1.0",
    "sass": "^1.77.2"
  },
  "scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets"
  },
  "browserslist": [
    "defaults"
  ],
  "devDependencies": {}
}

◻︎その手段を使って実装するために参考にした公式ドキュメントや技術記事 https://github.com/hotwired/stimulus-rails/tree/main https://github.com/evanw/esbuild/issues/1765 ◻︎環境の違い 自分のアプリ "@hotwired/stimulus": "^3.2.2"

参考にしたgemのバージョン stimulue-rails v1.3.3

◻︎自分のアプリの環境 "@hotwired/stimulus": "^3.2.2" "@hotwired/turbo-rails": "^8.0.5"

◻︎エラーが出ているのかエラーが出ていないのか、エラーが出ているのであればどんなエラーが出ているのか

ブラウザのコンソール Uncaught TypeError: Failed to resolve module specifier "@hotwired/turbo-rails". Relative references must start with either "/", "./", or "../".

Uncaught TypeError： モジュール指定子 "@hotwired/turbo-rails" の解決に失敗しました。相対参照は"/"、"./"、"../"のいずれかで始まる必要があります。

◻︎そのエラーの内容から推測したエラーの原因 相対パスが間違っているのではないかと推測した

package.jsonに"type": "module"を追加した

◻︎エラーの原因を解決するために自分で調べた記事 https://github.com/evanw/esbuild/issues/1765

◻︎調べた記事を元に自分で行った対処法とその結果 対処法 package.jsonに"type": "module"を追加した 結果 何も変化がなかった

◻︎対処を行った際にわかったことや推測できたこと package.jsonに"type": "module"を追加しても何も起きなかったこと

[kenchasonakai]

ありがとうございます！

yarn installは実行できているか確認してますかね？

[ojfubd]

コンテナの中でyarn installが行えているか(コンテナ内のnode_modulesに必要なディレクトリがあるか)も確認するとよいかなと思います

実行しました。 手順は下の写真であっていますか？

[kenchasonakai]

config/importmap.rbが残っているようですが、整理は済んでますか？ importmapについてきちんと調べてまずは必要ないものは削除するとよいと思います https://github.com/ojfubd/storyshare/blob/latestpopular/config/importmap.rb

また、ブランチ運用についてGitHub Flowを学ぶとよいと思います

[ojfubd]

importmapを調べてまとめました。

importmapとは、ベアモジュール仕様でモジュールの名前だけを使ってインポートできるようになり、バージョン管理されたファイルへのエイリアスを設定できます。

importmapはRailsのアセットパイプラインで設定を行う時、簡略化されたモジュールのインポートが可能になります。
 importmapは主にRailsを使っている開発者がモジュールの依存関係を管理したいときや、開発環境でシンプルにモジュールをインポートしたいときに使用されます。
特に、アプリケーションの初期設定時や新しいモジュールを追加するときに役立ちます。

importmapの基本設定をするには、config/importmap.rbで必要なモジュール名とそのURLを定義します。
application.jsで定義したモジュール名を使ってアプリで使うモジュールなどをインポートします。
最後に、application.html.erbファイルに
<%= javascript_importmap_tags %>を記述します。

では、なぜimportmapを使うのかというと、従来のモジュールバンドラ（例：Webpack）を使わずに、ブラウザが直接モジュールを解決できるからです。これにより、開発環境が軽くなり、設定が簡単になります。

具体的なimportmapファイルの設定は、
以下のインポート定義は、import mapがなければ機能しません。

import React from "react"
インポート定義を有効にするには、たとえば以下のように定義する必要があるでしょう。

import React from "https://ga.jspm.io/npm:react@17.0.2/index.js"
ここでimport mapが登場して、https://ga.jspm.io/npm:react@17.0.2/index.jsアドレスにピン留めするreact名を定義します。このような情報が提供されれば、ブラウザは簡略化されたimport React from "react"定義を受け取れるようになります。

これにより、Webpackやnpmなどのツールを使わずに、ブラウザが直接モジュールを解決してくれるから、開発がシンプルになります。

importmapを削除しました。 Githubflowは、講師の人から今回は個人で開発するためブランチ名は自分で付けていいと言われたため、ブランチ名は自分でつけています。

[kenchasonakai]

importmapを調べてまとめました。

ちゃんと調べてまとめていてよいと思いました 🙆‍♂

Githubflowは、講師の人から今回は個人で開発するためブランチ名は自分で付けていいと言われたため、ブランチ名は自分でつけています。

理解して行っているとのこと承知しました 🙆‍♂

[kenchasonakai]

importmapを削除しました。

承知しました 🙆‍♂

[ojfubd]

しかし、まだJavascriptは動きません。どういう方針でエラーを解決すればいいですか

[kenchasonakai]

まずエラーがどこのファイルのどこの行のどの記述で起きているのかを探って、その後なぜ起きているのかを考えて解決していく方針が良いと思います

[ojfubd]

Uncaught TypeError: Failed to resolve module specifier "@hotwired/turbo-rails". Relative references must start with either "/", "./", or "../". new:1

他のページでは localhost:1 と書かれていたそのため ブラウザが新しいスクリプトを読み込もうとした時に失敗していると指していると言われてた 具体的にどこでエラーが発生したかは、通常はHTMLファイルの Githubissues.

Githubissues is a development platform for aggregating issues.