Rails6/jQuery
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
&tag(Rails6/jQuery);
*目次 [#lc695b48]
#contents
*関連ページ [#b403a336]
*参考情報 [#cf7fc130]
-[[【Rails6】jQueryがなかなか使い始められない人へ - Qiita...
-[[Rails6でのjQuery導入方法 - Qiita:https://qiita.com/tat...
*組み込み手順 [#s0205b8f]
-以下のコマンドを実行。
yarn add jquery
-webpackの設定ファイルenvironments.jsを編集。jqueryのパス...
#pre{{
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
}}
*webpackerで使う [#fcdfcd0b]
-app/javascript/packs/application.jsを編集し、以下を追加。
#pre{{
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery") // ←の1行を追加
// (後略)
}}
-app/javascript/test.jsを作成
#pre{{
$(function() {
console.log("test");
});
}}
-application.jsに組み込む。
#pre{{
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
require("test.js") // ←の1行を追加
}}
*sprocketsで使う [#o008e1d3]
-app/assets/javascripts/application.jsを作成(Rails6ではデ...
#pre{{
function hello() {
window.alert('hello world')
}
-app/assets/config/manifest.jsを編集。javascriptsの行を追...
#pre{{
/= link_tree ../images
//= link_directory ../stylesheets .css
//= link_directory ../javascripts .js
}}
}}
-これで適当なindex.html.erbなどから呼び出せるはず。
#pre{{
<button onclick="hello()">Hello!</button>
}}
終了行:
&tag(Rails6/jQuery);
*目次 [#lc695b48]
#contents
*関連ページ [#b403a336]
*参考情報 [#cf7fc130]
-[[【Rails6】jQueryがなかなか使い始められない人へ - Qiita...
-[[Rails6でのjQuery導入方法 - Qiita:https://qiita.com/tat...
*組み込み手順 [#s0205b8f]
-以下のコマンドを実行。
yarn add jquery
-webpackの設定ファイルenvironments.jsを編集。jqueryのパス...
#pre{{
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
}}
*webpackerで使う [#fcdfcd0b]
-app/javascript/packs/application.jsを編集し、以下を追加。
#pre{{
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery") // ←の1行を追加
// (後略)
}}
-app/javascript/test.jsを作成
#pre{{
$(function() {
console.log("test");
});
}}
-application.jsに組み込む。
#pre{{
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
require("test.js") // ←の1行を追加
}}
*sprocketsで使う [#o008e1d3]
-app/assets/javascripts/application.jsを作成(Rails6ではデ...
#pre{{
function hello() {
window.alert('hello world')
}
-app/assets/config/manifest.jsを編集。javascriptsの行を追...
#pre{{
/= link_tree ../images
//= link_directory ../stylesheets .css
//= link_directory ../javascripts .js
}}
}}
-これで適当なindex.html.erbなどから呼び出せるはず。
#pre{{
<button onclick="hello()">Hello!</button>
}}
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
