selectboxの連動ができません

Question

前提・実現したいこと

連動した動きのセレクトボックスを作ろうとしています。
javascript自体ほとんど触ったことないため、解決方法がわかりません。
勉強を始めたところですが、とにかくまず動くものを作りたいため、
どなたかご教授いただければと思います。

発生している問題・エラーメッセージ

Uncaught ReferenceError: $ is not defined

class Users::SubCategoriesController < ApplicationController

  def index
    @sub_category = SubCategory.new
    @sub_categories = SubCategory.all
  end

  def show
  end

  def new
    @sub_category = SubCategory.new
  end

  def edit
    @sub_category = SubCategory.find(params[:id])
  end

  def create
    @sub_category = SubCategory.create!(sub_category_params)

    if @sub_category.save
      flash[:success] = 'カテゴリーを追加しました'
      redirect_to users_category_sub_categories_path
    else
      flash.now[:danger] = 'カテゴリーの追加に失敗しました'
      render :new
    end
  end

  def update
    @sub_category = SubCategory.find(params[:id])

    if current_sub_category == @sub_category

      if @sub_category.update(sub_category_params)
        flash[:success] = 'カテゴリーを編集しました'
        render :edit
      else
        flash.now[:danger] = 'カテゴリーを編集に失敗しました'
        render :edit
      end

    else
        redirect_to root_url
    end
  end

  def destroy
    @sub_category = SubCategory.find(params[:id])
    @sub_category.destroy

    respond_to do |format|
      format.html { redirect_to sub_categorys_url }
      format.json { head :no_content }
    end
  end

  def sub_category_params
    params.require(:sub_category).permit(:sub_category_name, :category_id)
  end
end

class SubCategory < ApplicationRecord
  validates :sub_category_name, presence: true
  belongs_to :category
  has_many :articles

end

    = form_for [:users, @article] do |f|
      .form-item
        - category_options = Category.order(:id).map { |c| [c.category_name, c.id, data: { children_path: users_category_sub_categories_path(c) }] }
        = f.select :category_id, category_options, { include_blank: true }, class: 'select-parent'

        - sub_categories = @article.category.try(:sub_categories) || []
        - sub_category_options = sub_categories.map { |c| [c.sub_category_name, c.id] }
        = f.select :sub_category_id, sub_category_options, { include_blank: true }, class: 'select-children'
      .form-item
        = f.label :tag_name, "Tag :"
        = f.collection_check_boxes(:tag_ids, Tag.all, :id, :tag_name)
      .form-item
        = f.label :article_title, "Title :"
        = f.text_field :article_title, required: true
      .form-item
        = f.text_area :article_content, class: 'tinymce', rows: 20, cols: 120
        = tinymce
      .form-item
        = f.collection_check_boxes(:tag_ids, Tag.all, :id, :tag_name)
      .button-panel
        = f.submit "Posting", class: "button"
      .form-footer
        = link_to '一覧へ戻る', users_articles_path

該当のソースコード

$(() =>
  (function() {
    const replaceSelectOptions = function($select, results) {
      $select.html($('<option>'));
      return $.each(results, function() {
        const option = $('<option>').val(this.id).text(this.name);
        return $select.append(option);
      });
    };

    const replaceChildrenOptions = function() {
      const { childrenPath } = $(this).find('option:selected').data();
      const $selectChildren = $(this).closest('form').find('.select-children');
      if (childrenPath != null) {
        return $.ajax({
          url: childrenPath,
          dataType: "json",
          success(results) {
            return replaceSelectOptions($selectChildren, results);
          },
          error(XMLHttpRequest, textStatus, errorThrown) {
            console.error("Error occurred in replaceChildrenOptions");
            console.log(`XMLHttpRequest: ${XMLHttpRequest.status}`);
            console.log(`textStatus: ${textStatus}`);
            return console.log(`errorThrown: ${errorThrown}`);
          }
        });
      } else {
        return replaceSelectOptions($selectChildren, []);
      }
    };

    return $('.select-parent').on({
      'change': replaceChildrenOptions});
  })()
);

↓この部分がダメと言われています

$(() =>

試したこと

https://qiita.com/jnchito/items/59a5f6bea3d7be84b839
こちらを参考にして作成しています。coffeeで書かれていますが、javascriptを勉強したいため
生のjavascriptで書こうとしましたが、いつまでも出来そうにないの変換ツールに頼ったものの
結局ダメでした。。。。
coffeeでも同じ箇所にエラーは出ます。
やりたいことは上記のサイトと同じことで、そのまま再現したいです。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。
vagrant
ubuntu
ruby 2.5.2p104 (2018-10-18 revision 65133) [x86_64-linux]
Rails 5.2.1
mysql
jquery使用していません

Answer 1

$～というのは大体がjQueryのライブラリを利用したもので、jQueryのライブラリを読み込んでいないとそのようなエラーが出ます。

次のように、jQueryのライブラリを読み込ませておきましょう(場合によってはヘッダの中のほうがよいかも)。また、javascriptにHTMLを連動させたければ、vuejsというライブラリがおすすめです。

...
<body>
<!--ここから-->
<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
<!--ここまで-->
<script>
// javascriptのコード!!!!
</script>
</body>
...

Comments

[ma5toy]

解決しました！ありがとうございます。
生のjavascriptでやりたかったですが自分で実装するしかなさそうですね。
変換ツールはほとんどがjquery使用しているようです！