document.URL.matchの使い方

Question

ご回答いただけるとありがたいです。よろしくお願いします！

実現したいこと

document.URL.matchを使って、特定のページにだけJSを反映させたい。

現状

Railsを使ってSNSのようなアプリを作っています。そこでプロフィールアイコン機能を実装しています。
アイコンを登録する時に、画像のプレビューを表示させるために、JSを用いています。

※ユーザー登録する時に、nickname, password, password-confirmationが入力されていないと、エラーメッセージが表示され、登録できない設定です。

該当のソースコード

#registrations/new.html.erb
<div class="account-page">
  <div class="account-page-title">
    アカウントを作成
  </div>
  <%= form_with model: @user, url: user_registration_path, local: true do |f|%>
    <%= devise_error_messages!%>
    <div class="account-page-container">
      <div class="account-page-wrapper">
        <div class="field-input account-page-input-avator">
          <label class="account-page-input-avator-btn">
            <div id="avator-list"></div>
            <%= image_tag "human.dummy.png", class: "human-dummy" %>
            <%= f.file_field :avator, class: 'hidden' %>
          </label>
        </div>
(省略)

#preview.js
if (document.URL.match( "users/sign_up" )) {
  document.addEventListener('DOMContentLoaded', function(){
    const ImageList = document.getElementById('avator-list');

    const createImageHTML = (blob) => {
      const imageElement = document.createElement('div');

      const blobImage = document.createElement('img');
      blobImage.setAttribute('src', blob);

      imageElement.appendChild(blobImage);
      ImageList.appendChild(imageElement);
    };

    document.getElementById('user_avator').addEventListener('change', function(e){
      const imageContent = document.querySelector('img');
      if (imageContent){
        imageContent.remove();
      }

      const file = e.target.files[0];
      const blob = window.URL.createObjectURL(file);

      createImageHTML(blob);
    });
  });
}

以上のコードで、アイコンに指定した画像を表示させることができています。
また、表示されているアイコンをクリックしたら、アイコンを変更することもできます。

###起きていた問題（解決済）
わざと何も入力せずに「（アカウントを）登録する」ボタンをクリック。
エラーメッセージが表示される。
画像を選択し、表示させようと思っても表示されない。
なぜか確認したところ、一度登録に失敗するとURLが

(失敗前)http://localhost:3000/users/sign_up
(失敗後)http://localhost:3000/users

になりsign_upがなくなります。
そこでJSのコードを以下のように変えました。

#preview.js
if (document.URL.match( "users/sign_up" ) || document.URL.match( "users" )) {
(省略)

これで登録失敗後にも、画像を選択したら表示されるようになりました。
ここからがわからないところです。

###起きている問題
ログイン画面(http://localhost:3000/users/sign_in)でコンソールを確認すると以下のエラー文が表示されます。

Uncaught TypeError: Cannot read property 'addEventListener' of null
    at HTMLDocument.<anonymous> (avatorPreview.js:18)

原因は先ほど

#preview.js
if (document.URL.match( "users/sign_up" ) || document.URL.match( "users" )) {
(省略)

にしたから、usersが含まれるURL全てにjsが適応されているからということは理解しています。

そこでdocument.URL.match( "users" )の部分を変えないといけないと思い、以下などを参考にいろいろ試しました。
URLの指定の仕方
URLで条件分岐（取得とif文の組み方）

###試したこと

document.URL.match.pathname( "users" )

document.path.match( "users" )

window.location.pathname( "users" )

他にも
①"users"の後のパスを読み込まない方法
②document.URL.matchの反対で"users/sign_inを読み込まない方法
などがあるのかと予想して調べてみましたが、そのような方法があることする見つけることができませんでした。

以上になります。ご助言いただけると幸いです。

Answer 1

document.URL.match( "users" )) を
document.URL.match( /users$/" )) にしてみてください。

ただこれでも index が呼ばれた時にも hit してしまいます。

users/sign_up の時にだけ動かしたいのでしたら、assetsから除いて、viewに埋め込んだらどうでしょう。

Comments

[shawn_709]

ご助言ありがとうございます！
アドバイスを元に
if (document.URL.match( "users/sign_up" ) || document.URL.match( "users$" )) {
としたらエラーが解消されました！