search

Oba-eng / curry_web

0 stars 0 forks source link

投稿時のプレビュー表示ができない #29

Open Oba-eng opened 5 months ago

Oba-eng commented 5 months ago

投稿自体は可能で保存もできています。

$(function () {

window.previewImage = function(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $("#img_prev").attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } };

$("#image-select-btn").change(function () { previewImage(this); }); });

app/views/layouts/application.html.erb <!DOCTYPE html>

CarryWeb <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag 'application', media: 'all' %> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> <%= render 'shared/header' %> <%= render 'shared/flash_message' %> <%= yield %>
<%= render 'shared/footer' %>

config/initializers/assets.rb

Version of your assets, change this if you want to expire all your assets.

Rails.application.config.assets.version = '1.0'

Add additional assets to the asset load path.

Rails.application.config.assets.paths << Emoji.images_path

Add Yarn node_modules folder to the asset load path.

Precompile additional assets.

application.js, application.css, and all non-JS/CSS in the app/assets

folder are already added.

Rails.application.config.assets.precompile += %w( menus.js ) Rails.application.config.assets.paths << Rails.root.join('app', 'javascript')

_form.html.erb <%= javascript_include_tag 'menus' %>

<%= form_with model: menu do |f| %>

<%= f.label :メニュー名 %> <%= f.text_field :name, class: 'form-control' %>
<%= f.label :材料 %> <%= f.text_area :material, class: 'form-control', rows: 8 %>
<%= f.label :作り方 %> <%= f.text_area :make, class: 'form-control', rows: 8 %>
<%= f.label :ポイント %> <%= f.text_area :point, class: 'form-control', rows: 8 %>

<% if menu.errors.any? %>

<%= pluralize(menu.errors.count, "error") %> prohibited this menu from being saved:

    <% menu.errors.full_messages.each do |message| %>
  • <%= message %>
    • <% end %>

<% end %>

<%= f.label :サムネイル %> <%= f.file_field :menu_image, class: 'form-control', accept: 'image/*', onchange: "previewImage(this);" %>
<% if f.object.menu_image.present? %> <%= image_tag f.object.menu_image.thumb.url, alt: "menu-image", id: "img_prev", size: "300x105" %> <% else %> <%= image_tag "menu-default-image.png", alt: "menu-image", id: :img_prev, size: "300x105" %> <% end %>

<%= link_to '戻る', menus_path, class: 'btn btn-primary ml-2' %> <%= f.submit '登録', class: 'btn btn-primary' %>

<% end %>



- エラーから考えられる原因
```previewImage```メソッドが見つからないとエラーに出ているためここが原因なのですが、menu.jsの最初にコンソールを差し込んでいるのでそもそもファイルが読み込まれていないからエラーになっているのではないか？と考えています。

- 試したこと
最初は```assets```ディレクトリに配置せず
```app/javascript/application.js```
このようにファイルを```assets```ディレクトリを使わずに実装していました。
その後sprocketsを導入しassetesからファイルを読み込むように変更しましたがmenu.jsだけがずっと読み込まれない状況です。
- 参考URL

- バージョン情報
Rails 6.1.4
ruby 3.0.2`
'sprockets-rails'
kenchasonakai commented 5 months ago

そもそもSprocketsを使った場合どのような設定を行えば個別でJSファイルを読み込めますか？

また、上記を理解した上でご自身の設定で足りないもの、余計なものはありますか？

今起きている現象と同じようなことが起きている人や同じようなエラーが出ている人が書いた記事は探してみましたか？

Oba-eng commented 5 months ago

https://www.notion.so/MVP-c95dd13ba2ce4917971f9f5f9f9c162a?pvs=4#943b154bf6f944fbb882f7b0e9c16972

管理者ツールのエラーから →jQueryがの設定に問題があると仮説を立てる →jQueryを使うためにwebpackが必要 →webpackを使うためにnodeのバージョンを変更する必要がある →webpackの設定がかなり複雑でわかりにくい →プレビューでここまでやるのおかしくない？ →app/aseets/javascripts/application.jsは読み込みができていてapp/aseets/javascripts/menu.jsだけ読み込めていない

ここ数日こんな感じで色々やってみましたがよくわからなくなってきました。 どうしてapp/aseets/javascripts/menu.jsだけ読み込めていないのか？ を調べてみましたが個別でjsファイルを読み込む方法として //= require_tree . を削除しアセットパイプラインの設定を追加するといった内容の記事しか見当たらず すでに試した内容でエラーの内容は変わらないままです。

正直これ以上何をしたらいいかわかりません。

Oba-eng commented 5 months ago

個別でjsファイルを読み込むには

//= require_tree .

を削除すればオーケー。 どうやらSprocketsを使った場合、manifest.jsファイルというファイルでコンパイルの管理をする必要があるらしい。

今まで設定していたapplication.jsとの違いは何？ manifest.jsファイルを作成しrailsガイドを確認しながら設定をしてみること webpacker関係のファイルが残っていたらそれを削除すること 3つを考えてみる

[https://railsguides.jp/asset_pipeline.html#マニフェストファイルとディレクティブ](https://railsguides.jp/asset_pipeline.html#%E3%83%9E%E3%83%8B%E3%83%95%E3%82%A7%E3%82%B9%E3%83%88%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%A8%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%86%E3%82%A3%E3%83%96)

railsガイドを見てファイルの設定をしてみる

config/manifest.js ファイル
//= link_tree ../images
//= link_directory ../stylesheets .css
//= link_tree ../../javascript .js
//= link_tree ../../../vendor/javascript .js

このファイルを追加しただけだと何も変わらないことがわかった。

ファイルをどう連結して出力するかは、app/assets配下の
application.cssやapplication.jsといったマニフェストファイルに記述する。
どのファイルを読み込むのかを取りまとめたファイルを、マニフェストファイルと呼ぶ。

上記からわかるようにどのファイルを読み込むのかを取りまとめたファイルをマニュフェストファイルと呼ぶ。

https://mt731.hatenablog.com/entry/2021/10/07/162133

Sprocketsを使った場合どのような設定を行えば個別でJSファイルを読み込めるか？

application.jsファイル(マニュフェストファイル)に//= require menusを追加して読み込む https://zenn.dev/yuu_kinkikids/articles/9c41445d05a9b2

でもこれやっても読み込みはされていない？ app/javascript/common.js app/javascript/image_preview.js この2つのファイルはmenus.jsと同じ役割を持っているため削除した

Uncaught ReferenceError:  is not defined

このエラー内容はjQueryの非同期通信ができていない時に起こるエラーらしい。 また、rails6系からjQueryはwebpackで管理するようになったらしいからjQueryを使うためにwebpackも導入されていることを確認する必要があるっぽい

https://autolab-minoya.hatenablog.com/entry/2020/09/17/015425

oobarikuto@MacBook-Air-2 carry_web % webpack --version

zsh: command not found: webpack

この結果からwebpackがインストールされていない。 webpackの設定ができていないからjsが動かないかも

https://zenn.dev/hid3/articles/60658bbe935068 ↑この記事を参考にwebpackを導入してみる

npm run

でエラーが発生する npmはインストールされているしエラー内容にある内容はクリアしているため謎

nodeのインストールができない。ずっと16.17.0になっている。これが最新のものになれば次に進めることができる https://zenn.dev/tmasuyama1114/books/vue-rails-chat/viewer/node-js-installation 上記記事を参考に最新版をインストールする nodebrewのバージョンは新しくなったのにnodeのバージョンは更新されない状況

nodebrewとは何か？↓ [https://qiita.com/ucan-lab/items/517ee13a2f8769ab866c#:~:text=nodebrewとは、Node.js,簡単に切り替えできます。](https://qiita.com/ucan-lab/items/517ee13a2f8769ab866c#:~:text=nodebrew%E3%81%A8%E3%81%AF%E3%80%81Node.js,%E7%B0%A1%E5%8D%98%E3%81%AB%E5%88%87%E3%82%8A%E6%9B%BF%E3%81%88%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82)

nodebrew は最新バージョンをインストールしている。 なのにバージョンの変更ができていない状況。

https://zenn.dev/milkandhoney995/articles/12620416782403 上記記事を参考にすすめる

oobarikuto@MacBook-Air-2 carry_web % node -v
v16.17.0
oobarikuto@MacBook-Air-2 carry_web % nodebrew use v20.12.2
use v20.12.2
oobarikuto@MacBook-Air-2 carry_web % node -v              
v16.17.0
oobarikuto@MacBook-Air-2 carry_web % which node
/Users/oobarikuto/.nodenv/shims/node
oobarikuto@MacBook-Air-2 carry_web %

nodebrew ではなく、.nodenvになっているからバージョンの切り替えができていないことがわかった。 nodebrewとnodenvの違いは？

https://zenn.dev/ikuraikura/articles/c923e8038488330b0e03 nodebrewを使ってバージョン管理する方がいいらしい。

nodenvからnodebrewに変更する方法

nodenvからnodebrewに切り替える手順は以下の通りです：
Node.jsのバージョン管理ツールであるnodenvをアンインストールします。これにより、nodenvがシステムから削除されます。
css
Copy code
nodenv uninstall --user
Node.jsのバージョン管理ツールであるnodebrewをインストールします。Homebrewを使用してインストールする場合は、次のコマンドを実行します。
Copy code
brew install nodebrew
nodebrewを利用してNode.jsをインストールします。インストールしたいバージョンを指定して、次のようにコマンドを実行します。
php
Copy code
nodebrew install-binary <version>
たとえば、最新の安定版をインストールするには、次のコマンドを使用します。

php
Copy code
nodebrew install-binary stable
インストールしたNode.jsのバージョンを使用します。次のコマンドを使用して、インストールしたいバージョンを指定します。
perl
Copy code
nodebrew use <version>
たとえば、インストールしたバージョンが20.12.2であれば、次のようにします。

perl
Copy code
nodebrew use v20.12.2
これで、nodebrewが正常にインストールされ、Node.jsのバージョン管理が可能になります。

nodebrewに変更するためには、いくつか手順が残っています。まず、以下のコマンドで.bash_profileまたは.bashrcファイルを編集して、nodebrewのパスを設定します。

bash
Copy code
echo 'export PATH="$HOME/.nodebrew/current/bin:$PATH"' >> ~/.bash_profile
または

bash
Copy code
echo 'export PATH="$HOME/.nodebrew/current/bin:$PATH"' >> ~/.bashrc
次に、現在のセッションに反映させるために、以下のコマンドを実行します。

bash
Copy code
source ~/.bash_profile
または

bash
Copy code
source ~/.bashrc
これで、nodebrewを使用する準備が整いました。nodebrewが正しく設定されたかどうかは、node -vコマンドを実行してNode.jsのバージョンを確認することで確認できます。

npm run devのエラー解消

oobarikuto@MacBook-Air-2 carry_web % npm run dev
npm ERR! Missing script: "dev"
npm ERR! 
npm ERR! To see a list of scripts, run:
npm ERR!   npm run

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/oobarikuto/.npm/_logs/2024-04-15T01_36_19_235Z-debug-0.log

コマンドを実行するディレクトリが違うことが原因だった。 下記のようにして改めてコマンドを実行することで解消しnpm run devが正しく実行された。

oobarikuto@MacBook-Air-2 carry_web % cd frontend
oobarikuto@MacBook-Air-2 frontend % npm run dev

frontend@1.0.0 dev
npx webpack

asset main.js 30 bytes [emitted] [minimized] (name: main)
./src/index.js 29 bytes [built] [code generated]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

webpack 5.91.0 compiled with 1 warning in 106 ms

https://zenn.dev/hid3/articles/60658bbe935068

上記の記事をみながら設定を行ったがブラウザでエラーが表示されてしまう。 →そもそもプレビューを表示するだけでここまで複雑な設定するなんておかしい。

Uncaught ReferenceError:  is not defined

このエラーがjQueryのエラーで起こるとあったが、application.jsは読み込まれていて ブラウザでもコンソールを使って正しく読み込まれていることを確認している。 menus.jsだけ読み込みができていない？

application.jsが読み込めているのにmenus.jsが読み込めない理由がわからないです。

kenchasonakai commented 5 months ago

webpackerは使わず、sprocketsを使用するのでapp/javascriptディレクトリは使いません 全てapp/assets/javascriptsディレクトリ配下に配置しましょう

gemのjquery-railsではなくpackage.jsonに記載しているjqueryを使用しましょう yarn installを実行するとnode_modulesにインストールされます 環境構築に失敗するならDocker環境を使用すると良いかと思います

coffee scriptは使用しません

config/initializers/assets.rbの設定がぐちゃぐちゃなので整理しましょう

Rails.application.config.assets.precompile -= ['application.js']とRails.application.config.assets.paths << Rails.root.join('app', 'javascript')は不要かと思います

Oba-eng commented 5 months ago

ありがとうございます。 sprocketsについてもう一度調べ直しました。 https://www.notion.so/ca15999aca144044b718248373cce3e5?pvs=4#70fee96a8aed4b8b820c5ad0947371df 調べてみてもassets配下にファイルを配置するべきだとわかりました。 その後、jQuery関係のエラーが管理者ツールに表示されましたが、読み込みができていないことが判明し <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> を追加したら正しくプレビューが表示されるようになりました。 ありがとうございました！