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

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

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

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

3回答

1073閲覧

javascriptの基本的なこと

Gr.

総合スコア89

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/09/16 09:42

いいねボタンを作成し、ページ遷移なしでカウントを反映させたいのですが、javascriptの知識が皆無でつまづいております。

参考サイト:railsとjsを使ったお手軽「いいね♡機能」

上記サイトを参考に作っていて、いいね機能自体は問題なく実装できました。
しかし、javascriptのコードが読み解けません。

教えてもらいたいこと

上記サイト下部の以下の部分が何を表すのかを教えていただきたいです。

views/likes/create.js.erb

$("#like-buttons").html("<%= j(render partial: 'like', locals: { tweets: @tweets, likes: @likes, like: @like}) %>")

具体的には…
①render partial: 'like' の 'like' が何を表しているのか
②localsとは何か
③{ }内が何を表しているのか
④railsのviewのlikes内に新たにcreate.js.erbを作ってこの一行だけ書けばいいのか(つまり、jsを使うにあたって初めに書かなくてはいけない文言があったりするのか)

おそらく質問内容からド素人であることはお察しいただけるかと思います。プログラミング初心者ですが、そろそろJavascriptに関しても学び始めるべきだと思っているので、何かおすすめのサイトや書籍等あればぜひ教えてください。

雑な質問で失礼いたします。

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

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

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

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

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

m.ts10806

2018/09/16 09:49

タイトルは質問内容の要約、要件を書いてください。タグにある内容は含めなくてもタグで伝わるのでなくても良いです
yukihisa

2018/09/16 10:08

これはjavaScriptではなくRailsの話ではないですか?提示ソースはjavaScriptを使ってhtmlにRailsのソースを書いているだけに見えますが。
guest

回答3

0

t_kusakabe74さんがrails寄りの話だったので、
今度は私がJavaScript側の話をします。

質問箇所以前に説明して置かなければならない箇所がいくつかありそうですね。

JavaScript

1$("#like-buttons").html("<%= j(render partial: 'like', locals: { tweets: @tweets, likes: @likes, like: @like}) %>")

HTML+JSの世界には<%= xxx %>などという書き方は存在しません。
ファイル名がxxx.erbであることから、eRubyという任意のテキストにRubyスクリプトを挿し込む機能を使う想定であると考えられます。
https://magazine.rubyist.net/articles/0017/0017-BundledLibraries.html


RailsはWebサーバと呼ばれる役割で、
Chrome等のWebブラウザからリクエストを受け取ったら、
即興のHTMLファイルを生成して返す事が仕事になります。

Railsは_like.html.erbを読み取り、
eRubyのルールに従いながら文字列を生成します。
なので、出来上がってブラウザに配信される実際のHTMLは下記のような具体的な文字列に展開されたものになっているはずです。

JavaScript

1$("#like-buttons").html("<iframe>Twitterのアプリ的なもの</iframe>")

JavaScript世界に入った先の話をします。
eRubyは私も詳しくありませんし、ブラウザにHTMLが届いた時点でRubyとかもう何も関係ないので別途勉強してください。

JavaScript

1$("#like-buttons").html("<iframe>Twitterのアプリ的なもの</iframe>")

この$は正式なJavaScriptの決まった書き方ではありませんが、
一般的にjQueryライブラリの関数であるという慣習があります。

JavaScriptの主な用途は、HTMLの要素(DOMツリー)を書き換える事で見た目を変更することです。
jQueryはネイティブのJSの至らない所を補佐するライブラリで、
読み込むとグローバル変数領域にjQuery$という関数をぽんと生成します。

質問文のコードは$関数を"#like-buttons"という文字列を引数として実行していますね。
jQueryではDOMツリーをCSSセレクターで検索出来れば素敵じゃない?という思想で作られており、文字列の先頭が#ならid名、.ならclass名でDOMツリーを検索できます。
https://api.jquery.com/id-selector/

これで$("#like-buttons")でHTMLのid="like-buttons"のDOMを捕まえました。
次に.html(文字列)を見ていきましょう。
https://api.jquery.com/html/#html-htmlString

.html()は引数空の状態で実行すると、現在のDOMの中に入っているHTML文字列を返します。
.html("<div>hogehoge</div>")という風に文字列を引数に設定して実行すると、
現在のDOMの中に入っているHTML文字列を捨てて、引数の文字列を新しいHTML文字列として差し替えます。

こうすることでブラウザのDOMツリー構造が変化し、
実際にブラウザに表示されている内容が切り替わります。

投稿2018/09/16 13:11

miyabi-sun

総合スコア21158

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

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

Gr.

2018/09/16 22:35

miyabi-sunさん 回答ありがとうございます! まさに自分が知りたかった基礎的な部分で、参考リンクとともに分かりやすい説明をいただきました。 手を動かすことも大事ですが、まずは基礎を理解することが必要だと気づかされました。 ありがとうございました!
guest

0

ベストアンサー

雑な回答ですいません!

①render partial: 'like' の 'like' が何を表しているのか

こちらは _like.html.erb のことを指しています!
書き方が少し違う参考記事なのですが、以下が参考になると思います!!!

これと、

<%= render :partial => "article" %>

これは、

<%= render partial: 'article' %>

同じ意味です!
https://qiita.com/shizuma/items/1c655dadd2e04b3990a8

②localsとは何か

これは部分テンプレート(_like.html.erb) で使う変数を設定しています!
(_like.html.erbで使いたい変数を全部ここで設定しています)
これに関してはこちらがわかりやすいと思いました!
https://qiita.com/hmuronaka/items/daf2904e3f703448f506

③{ }内が何を表しているのか

これに関しては locals にはhashを渡さないといけないのでhashの '{}' です!

④railsのviewのlikes内に新たにcreate.js.erbを作ってこの一行だけ書けばいいのか(つまり、jsを使うにあたって初めに書かなくてはいけない文言があったりするのか)

こちらは結論から言うと 1行書くだけで良い です!
railsでajaxを行う時にこう言うやり方をします!
(remote: true、 ○○.js.erbをつかったやり方)


おそらく javascript で色々調べられているのが難しい要因だと思います!
こちらは railsでajaxを行う みたいな感じで調べて見ると参考になりそうな記事がたくさん出てくると思います!!!
ただajaxを行うやり方はいろいろあるので注意が必要です!
http://d.hatena.ne.jp/kitokitoki/20120808/p1

参考記事を多用してしまって申し訳ないのですが、お力になれればと思います!><

投稿2018/09/16 10:27

t_kusakabe74

総合スコア549

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

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

Gr.

2018/09/16 11:16 編集

t_kusakabe74さん 回答ありがとうございます! 上記の4件について今の自分には充分な回答が得られました! ただ、まだうまく実装できません。 以下を追加でお聞きしたいです。 ⑤$("#like-buttons")と複数形になっているが部分テンプレート内のidは"like-button"と単数形。これはこういったルールなのですか? ⑥locals: { tweets: @tweets, ... とあるが部分テンプレート内にtweetsは見当たらないのですが... お手数おかけしてすみません。 時間のある時でいいのでお助け願います。
Gr.

2018/09/16 22:31

t_kusakabe74さん 追加の質問にもお答えいただき、誠にありがとうございました! 無事に実装でき、remote : trueについてほんのりと掴めた気がします。 ここら辺の挙動をしっかりと理解するために、今後より深く学習しようと思います。 助かりました!
guest

0

⑤$("#like-buttons")と複数形になっているが部分テンプレート内のidは"like-button"と単数形。これはこういったルールなのですか?

こちらは打ち間違いのような気もしますね。。。
一度、単数形か複数形に統一してもらってもいいですか?(個人的には単数系の方がいいと思います!(idなので))

⑥locals: { tweets: @tweets, ... とあるが部分テンプレート内にtweetsは見当たらないのですが...

こちら、ややこしかったですね。。。
_like.html.erb は使われているのですが、動いているアクションがポイントです!
likes_controller.rbcreate アクション、 destroy アクションに注目すると locals で使用しているものと一致するかと思います!!!

投稿2018/09/16 12:53

t_kusakabe74

総合スコア549

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問