Rails6 の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• Rails6 へ行く。
• Rails6 の差分を削除

#author("2022-06-14T06:12:58+00:00","default:src128","src128")
#author("2022-06-15T08:31:20+00:00","default:src128","src128")
&tag(Rails6);
*目次 [#f7676f10]
#contents
*関連ページ [#ma4ce7a7]
-[[./基本的プロジェクトの作成]]
-[[./macOS]]
-[[./Ubuntu2004]]
-[[./Webpacker+Yarn+Sprockets]]
-[[./jQuery]]…jQueryのみを使う。
-[[./font-awesome]]
-[[./CKEditor]]
-[[Rails/Bootstrap4]]…BootstrapとjQueryを使う。

*参考情報 [#w6dea96e]

*基本 [#lc2e2488]
-JavaScriptの管理はyarnに。
-css等その他はいままで通り
-Bootstrapを使った基本プロジェクトの作成方法は[[Rails/Bootstrap4]]を参照のこと。
*Tips [#n7af8b7b]

**yarn関連 [#d842502f]
-インストール
 yarn install
-アップグレード
 yarn upgrade

**master.keyがなくデプロイ失敗する [#e357697c]
-新規プロジェクトだとmaster.keyが.gitignoreで指定されている。
-Capistrano3でgit_copyを実行するとmaster.keyが含まれずエラーが発生する。
-これを解消するためにdeploy.rbに以下のタスクを追加する。
#pre{{
namespace :deploy do
  # サーバーにファイルをアップロードする
  task upload_file: [:set_rails_env] do
    on roles(:app) do |host|
      upload!('config/master.key', "#{shared_path}/config/master.key")
#      upload!('config/credentials.yml.enc', "#{shared_path}/config/credentials.yml.enc")
      #      execute 'echo "credentials.yml.enc upload!!"'
      execute 'echo "master.key upload!!"'
    end
  end
  before 'deploy:starting', 'deploy:upload_file'
end
}}


*トラブルシューティング [#w7aa4418]

**yarn installでpython2のエラー [#gb5e5a17]
-以前作成したrails6プロジェクトをcloneし「yarn install」を実施すると以下のようなエラーが表示されるようになった。
 gyp verb check python checking for Python executable "python2" in the PATH
-node-sassのエラーだが、これはnode-sassのバージョンが古いのが原因。package.jsonのwebpackerのバージョンを上げるとよいっぽい(webpackerがnode-sassに依存している)。
-2022/06/14(火)現在、Rails 6.1のプロジェクトを作成したときのpackage.jsonの内容
#pre{{
{
  "name": "rails61-demo",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "5.4.3",
    "turbolinks": "^5.2.0",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3"
  }
}
}}
-しかしwebpackerのバージョンを上げると、Ubuntu 20.04でエラーがでる。[[Ubuntu2004/Node.js]]に従いv16をインストールする。


**rails-factoryが動かない [#pd665248]
-railsプロジェクトを作成するためのfactoryが動かない。
-以下のコマンドで「bootsnap」や「webpacker」などさまざまなエラーがでる。
#pre{{
bundle exec rails new $project_path  --skip-bundle --database=mysql
}}
-「port install yarn」でyarnをインストールし、rails-factoryのGemfileを修正することが必要。
#pre{{
source "http://rubygems.org"
gem "rails", "6.0.3.5"
gem 'bootsnap'
gem 'webpacker'
gem 'listen'
}}

**ActionView::Template::Error (invalid base64) [#s498da97]
-Rails 6にアップグレード後に発生。
-ブラウザを何回リロードしても直らないが、ブラウザを一端終了して再起動すれば修正された。
-ブラウザのキャッシュとCookieが原因らしい。

**Uncaught TypeError: $(...).modal is not a functionエラーが発生 [#fa58e2fb]
-Bootstrap4のモーダルを表示しようとすると「Uncaught TypeError: $(...).modal is not a function」が発生。
-jQuery自体のメソッドであるshow/hideは呼び出せるがそれは根本的な原因ではない。[[JavaScript - モーダル画面でエラー Uncaught TypeError: $(...).modal is not a function が出てしまう｜teratail:https://teratail.com/questions/250963]]
-modal('show')が呼び出せないとshowだと背景が暗くならな、閉じれないなど不具合が発生する。
-[[Methods like modal() not working if Bootstrap loaded with Webpack (Rails) - Stack Overflow:https://stackoverflow.com/questions/61705296/methods-like-modal-not-working-if-bootstrap-loaded-with-webpack-rails]]にあるようにjQueryを複数回ロードしているのが原因。application.jsとenvironment.jsの両方でjQueryを呼び出していないかチェックする。以下を削除する。
#pre{{
new webpack.ProvidePlugin({
 $: 'jquery',
 jQuery: 'jquery',  // taking this out doesn't fix it
...
}}

**Bootstrap4のModalが呼び出せない(remoteがtrueの場合) [#jc59f1c9]
-Bootstrap4のモーダルで、remote modalが呼び出せない(ajaxのリンク経由で)。
-jquery_ujsからrails-ujsに変更になったせいで、ajax処理は呼び出せるが、Bootstrapの処理が呼び出せてないっぽい。
-ajaxから呼び出すjs.erbでmodal('show')を呼び出すようにしたら表示はできることを確認。
#pre{{
$("#my-modal").modal('show');
}}

***表示されない場合 [#l64bd236]
-以下のようなシンプルな呼び出しボタンを作成。data-remoteありで表示できず、data-remoteなしで表示できた場合、rails-ujsが原因だと思われる。
 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#my-modal" data-remote="true">
   Launch demo modal
 </button>
-js.erbに「$("#my-modal").modal('show');」があることを確認。
-書いているのにもかかわらず表示されない場合、jQueryがエラーになっている可能性あり。
-window.alert("abc")などが表示でき、modalがきかない場合、application.jsに以下の記述があるか確認。
#pre{{
import jQuery from 'jquery'
window.jQuery = window.$ = jQuery

}}

**LoadError: cannot load such file — uglifier [#f8a8bb95]
-[[Rails5へのバージョンアップでのハマりポイント共有 (Google App Engine, Rails4.2.6 => 5.1.4) | by Masaki Kamachi | indies.band | Medium:https://medium.com/indies-band/rails5%E3%81%B8%E3%81%AE%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E3%82%A2%E3%83%83%E3%83%97%E3%81%A7%E3%81%AE%E3%83%8F%E3%83%9E%E3%82%8A%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88%E5%85%B1%E6%9C%89-google-app-engine-rails4-2-6-5-1-4-694f339988]]によるとuglifierをGemfileに追加するか、production.rbなどでuglifierを使わないようにしてもよいっぽい。

**cloneした環境でyarnエラー [#n047d8dc]
-プロジェクトのrootで「yarn install」を実行。[[Rails6 開発時につまづきそうな webpacker, yarn 関係のエラーと解決方法 - Qiita:https://qiita.com/NaokiIshimura/items/8203f74f8dfd5f6b87a0]]
 yarn install