Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
10
Help us understand the problem. What is going on with this article?
@tatehito

Rails6でSemanticUIのJavaScriptを読み込む方法(ドロップダウン・アコーディオン等を使いたい!)

More than 1 year has passed since last update.

SemanticUIでドロップダウンやアコーディオン等の部品を使用するには、JQueryをインストールし、SemanticUIのJavaScriptを読み込む必要があります。

Rails6以前でSemanticUIを利用する方法についてはQiitaなど情報が充実しています。しかし、Rails6からJQueryのインストール方法やapplication.jsの読み込み方法が変更されたため、Rails6での設定には戸惑う方が少なくないかと思います。(僕がそうでした。)

ということでこの記事には、Rails6における、SemanticUIのインストールからJavaScriptを読み込む(ドロップダウン等の部品を動かす)方法を記載します。

確認環境は以下の通りです。

  • Rails 6.0.0
  • JQuery 3.4.1
  • semantic-ui-scss 2.4.2.0

SemanticUIのインストール

まずはSemanticUIをインストールする方法から。Railsでは、semantic-ui-scssというgemを使ってSemanticUIをインストールできます。

Gemfileに以下を追記後、bundle installします。

Gemfile
gem 'semantic-ui-sass'

appication.scssに以下を追記します。

app/assets/stylesheet/application.scss
@import "semantic-ui";

これでSemanticUIのインストールは完了です。単純なButtonなど、JavaScriptを利用しない部品は利用できるようになっているはずです。

JQueryのインストール

SemanticUIのドロップダウン等の部品を使うには、JQueryをインストールする必要があります。

Rails6以前はjquery-railsというgemを利用するのが一般的でしたが、Rails6ではgemを使わずにインストールすることができるようになっています。

以下のコマンドを実行し、yarnでJQueryを取得します。

$ yarn add jquery

次に、application.jsに以下を追記します。

※ Rails6以前とRails6ではapplication.jsのパスが変わっています。

  • Rails6以前:app/assets/javascript/application.js
  • Rails6:app/javascript/packs/application.js
app/javascript/packs/application.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('jquery') // この1行を追記

最後に、environment.jsに以下を追記します。

config/webpack/environment.js
const { environment } = require('@rails/webpacker')

// 追記:ここから
const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)
// 追記:ここまで

module.exports = environment

これでJQueryが利用できる状態になりました。

JavaScriptの読み込み

SemanticUIのJavaScriptを読み込むには、app/assets/javascript/application.jsに設定を書き込みます。このファイルはRails6では存在しないため、手動で作成する必要があります。(Rails6以前では自動で作成されます)

また、使用したいSemanticUIの部品を動かすためのコード(初期化コード)も書いておきます。たとえば、ドロップダウンを使用する場合は以下のようにします。

app/assets/javascript/application.js
// Loads all Semantic javascripts
//= require semantic-ui

// ドロップダウンを使用するためのコード
$(function(){
  $('.ui.dropdown').dropdown();
})

各部品の初期化コードはSemanticUI公式サイトのUsageに掲載されているので、そちらを参照してください。

このままではapp/assets/javascript/application.jsは読み込まれないので、application.html.erbに以下を追記します。

app/view/layouts/application.html.erb
<head>
    (略)
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <!-- ↓この1行を追記 -->
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>

以上です。これでドロップダウン等が動作するようになっているかと思います。

参考

10
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
tatehito
都内で働くプログラマ。Java・Rubyなど。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
10
Help us understand the problem. What is going on with this article?