質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

558閲覧

rails6でjavascriptは動くのでしょうか

tetsuya7724

総合スコア67

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/05/25 02:28

前提・実現したいこと

ドットインストールでjavascriptを勉強しています。
rails6で導入することを目的としているのですが、rails6にjavascriptを入れても読み込んでくれません。
コンソールでエラーを確認しましたがエラーは発生しておらず原因がわかりません。

rails6のバグでしょうか?教えていただけるとありがたいです。
又参考にしているコードはドットインストールjavascriptで三択クイズを作ろうです。(https://dotinstall.com/lessons/quiz_js_v3/51407)

該当のソースコード

html

1#application.html.erb 2<!DOCTYPE html> 3<html> 4 <head> 5 <title>Js</title> 6 <%= csrf_meta_tags %> 7 <%= csp_meta_tag %> 8 9 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 10 <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> 11 </head> 12 13 <body> 14 <%= yield %> 15 </body> 16</html> 17

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>Quiz</title> 6</head> 7 8<body> 9 <section class="container"> 10 <p id="question"></p> 11 <ul id="choices"></ul> 12 <div id="btn" class="disabled">Next</div> 13 </section> 14</body> 15</html> 16

css

1body { 2 background: #efdec1; 3 font-size: 14px; 4 font-family: Verdana, sans-serif; 5} 6 7.container { 8 width: 400px; 9 margin: 8px auto; 10 background: #fff; 11 border-radius: 4px; 12 padding: 16px; 13} 14 15#question { 16 margin-bottom: 16px; 17 font-weight: bold; 18} 19 20#choices { 21 list-style: none; 22 padding: 0; 23 margin-bottom: 16px; 24} 25 26#choices>li { 27 border: 1px solid #ccc; 28 border-radius: 4px; 29 padding: 10px; 30 margin-bottom: 10px; 31 cursor: pointer; 32} 33 34#choices>li:hover { 35 background: #f8f8f8; 36} 37 38#btn { 39 background: #3498db; 40 padding: 8px; 41 border-radius: 4px; 42 cursor: pointer; 43 text-align: center; 44 color: #fff; 45 box-shadow: 0 4px 0 #2880b9; 46} 47 48#btn.disabled { 49 background: #ccc; 50 box-shadow: 0 4px 0 #bbb; 51 opacity: 0.7; 52} 53

javascript

1'use strict'; 2 3{ 4 const question = document.getElementById('question'); 5 const choices = document.getElementById('choices'); 6 const btn = document.getElementById('btn'); 7 8 const quizSet = [{ 9 q: 'What is A?', 10 c: ['A0', 'A1', 'A2'] 11 }, 12 { 13 q: 'What is B?', 14 c: ['B0', 'B1', 'B2'] 15 }, 16 { 17 q: 'What is C?', 18 c: ['C0', 'C1', 'C2'] 19 }, 20 ]; 21 let currentNum = 0; 22 23 question.textContent = quizSet[currentNum].q; 24 25 quizSet[currentNum].c.forEach(choice => { 26 const li = document.createElement('li'); 27 li.textContent = choice; 28 choices.appendChild(li); 29 }); 30} 31

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2020/05/25 02:28

JavaScriptのファイル名は何でしょうか?
tetsuya7724

2020/05/25 02:31

index.jsです。 場所はassets/javascript/packs/home/index.jsになります。
maisumakun

2020/05/25 02:32

assets/javascript/packs/application.jsの中身はどのようになっていますか?
tetsuya7724

2020/05/25 02:33

// This file is automatically compiled by Webpack, along with any other files // present in this directory. You're encouraged to place your actual application logic in // a relevant structure within app/javascript and only use these pack files to reference // that code so it'll be compiled. require("@rails/ujs").start() require("turbolinks").start() require("@rails/activestorage").start() require("channels") // Uncomment to copy all static images under ../images to the output folder and reference // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>) // or the `imagePath` JavaScript helper below. // // const images = require.context('../images', true) // const imagePath = (name) => images(name, true) この様になっています。
guest

回答1

0

ベストアンサー

この様になっています。

自分でapplication.jsから呼び出すようにしないと、別に用意したhome/index.jsは呼び出されません。

なお、application.js全ページ共通になりますので、無関係なページでエラーとならないような対策が必要です。

投稿2020/05/25 02:39

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tetsuya7724

2020/05/25 02:54

index.html.erbに<%= javascript_pack_tag 'home/index.js' %>で読み込めました。 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問