Zenn
🐕

[Rails6]Webpackerのコンパイルエラーとは？(Rails7との違い)

に公開
OS
Rails 6
CDN
Rails 7
importmap
tech

Rails6でのWebpackerのコンパイルエラーが多すぎる

親の顔より見たエラー😭😭😭😭

Webpackerの仕組み

  • JavaScriptやCSSをローカルでバンドル・コンパイルするツール
  • app/javascript にあるコードを、public/packs にまとめる（Webpackでバンドル）
  • <%= javascript_pack_tag "application" %> で読み込む

Webpackerのコンパイルエラー時の対処法

Webpackerのコンパイルエラーが出たらこれをやれ！

1. コンパイルだけさせるコマンドを打とう

rails s の下記の代わりにこのコマンドをうつ。
コンパイルだけ実行することで、出てくるエラーメッセージが短くなるので、エラーが見つけやすくなる！

rails webpacker:compile

2. 一個一個問題を解決していく

コマンドで一気に解決することはできない。
上のコマンドによって出たエラーメッセージを読んで、エラーの原因になってそうな箇所を地道にチェックしていく。

  • プライベートなエラーなのか？（私が何かミスしてる、誤字、やり損ねてるなど）
  • 全体で起きてる問題なのか？（バージョン変更による互換性など）
    どっちの問題なのか調べていく。

色んなエラーが重なって面倒なことになってることが多いので、一個一個潰していくしかない！

エラー調査におすすめのサイト

  • Stack Overflow
    海外サイトは母数が違うので、解決策が集まるのが速い。

https://stackoverflow.com/questions

  • GitHubのIssue欄
    エラーが出ている該当ライブラリのGitHubを見る。
    非互換性情報など、GitHub上でエラーについて指摘されてないかを調べる。

Rails7以降では

そもそもRails7以降はWebpackerを使ってない。

なぜWebpackerが廃止されたのか？

Webpackerは多くのライブラリとの互換性の問題を抱えているから。

  • Webpackerは別のライブラリを寄せ集めて使用している。
  • ライブラリが使用してたOSのサポートが終了して、バージョンやOSが変更されて…と食い違いが発生する。互換性問題がキリない！
  • フロントはRailsのことを想定して開発していない。我々は開発スピードの違うものを組み合わせて使用しているので、うまくいかなくても仕方ない。

Rails7以降のスタイル（CDN + Importmap）

Rails7以降は、CDNとImportmapを使用して、JavaScriptライブラリをURLを使って、外部から直接読み込むスタイルに変更。

Importmapとは？

https://railsguides.jp/v7.0/asset_pipeline.html#import-mapをjavascriptアセットパイプラインとして使う

ブラウザでモジュール（JSファイル）を読み込むときに、どのURLから読み込むかを指定する仕組みのこと。
Importmapは、「このJSの名前は、どのURLにあるのか？」をブラウザに教えてあげる地図みたいなもの。

config/importmap.rb に下記を書く。
<script type="importmap"> を自動でHTMLに埋め込んでくれるので、簡単にモジュールを使用することができる。

pin "application"
pin "lodash", to: "https://cdn.jsdelivr.net/npm/lodash-es@4.17.21/lodash.js"

デメリット

  • 外部依存のため、HTTP/HTTPSの不一致などの通信状況で読み込めない場合がある

CDN

全世界に配置されたサーバー群（エッジサーバー）を利用して、ユーザーの地理的に近いサーバーから、静的なコンテンツを提供するサービス。

オリジンサーバーと呼ばれる元データを保持するサーバーがあり、そこから全世界に配置されたエッジサーバーへデータが転送される。

エッジサーバーは、オリジンサーバーのデータをキャッシュ（一時保存）し、ユーザーに対してそのキャッシュデータを提供する。

つまり、エッジサーバーはキャッシュサーバーのような役割を担い、Webコンテンツの高速な配信と安定したサービス提供を支えている。

昔自分でまとめた内容（復習）

CDN（コンテンツデリバリーネットワーク）とは

ウェブコンテンツ（画像・CSS・JavaScriptなどの静的ファイル）を効率的に配信するための仕組み。

世界中に分散配置されたサーバー（キャッシュサーバー）を使い、ユーザーの物理的に近い場所からデータを届ける。

海外サイトにアクセスするとき、物理的に近いサーバーからアクセスした方が速い。
また、大量アクセスがあった時も、同じコンテンツを複数のサーバーから配信できるので、大元のサーバーの負荷が軽減される。
https://zenn.dev/eliri/articles/e73d74c4aaba95#cdn（コンテンツデリバリーネットワーク）とは

assetsのディレクトリ内にあるデータをCDNを使って配信している。

パッケージ管理ツール

そもそもパッケージとは？
インターネット上で公開されている、プログラムの機能単位で配布したもの。
ここでまとめた。
https://zenn.dev/eliri/articles/4e238cb8eb449f#パッケージ

今はシステムを開発する際、１から全て作るのではなく、既存の部品（パッケージ）を使って組み合わせることが多い。
（例：アップロード機能、ログイン機能）

パッケージにはバージョンがあり、アップデートで仕様が変わることもある。

パッケージ管理ツールの役割

依存関係を自動で解決し、必要なものを一括で導入してくれる。

依存関係の例

  • AとBが同じCパッケージに依存している
  • AをアップデートするとCも更新が必要
  • しかしCのアップデートによりBが動かなくなる
    →これがバージョン地獄や互換性の問題の正体

OSとライブラリの互換性の話

ライブラリやツールにもサポートOSがある。

OSのサポート終了がライブラリの動作に影響する。
例：Amazon Linux2 → CentOSベース（yum使用）→ CentOS終了 → 代替OSに変更 → コマンドも変わる
→ OSの変更＝開発環境の変更になる
→ Webpackerが動かなくなる原因にも直結

参考文献

https://qiita.com/Ayaka14/items/e19c3d1fce36555a09d1
https://note.com/enumura_memo/n/nb1f248e2f9c6
https://qiita.com/ryohashimoto/items/f5382478c78f296d8291
https://qiita.com/yasu-sg/items/94be5b537c13ea3a1dbe
https://zenn.dev/takeyuwebinc/articles/996adfac0d58fb
https://qiita.com/eichann/items/6b4378d43cc71c0b0d98

調べててかなり難しかったので、間違ってたらコメントでご指摘いただけますと幸いです！
勉強になるので助かります！
（特にRails7に関しては、あまり触れてないので理解が浅い…）

Discussion