既読ユーザー
その他2人
課題04「04 コメント機能」アウトプット
ディスカッション
  • daidai3110 2020/10/29 23:48

    全体的にめちゃ良いまとめです。さすが!

    ちなみに他の記事などを見てもしれっとjQueryが使われているが、要素を追加したり削除するだけであればjQueryが便利なので素のJavaScriptとかは使われないのだろうか...?

    → 最近は素のJSがかなり使いやすくなってるのでわざわざjQuery使わなくてもいいかもですね!
    ちなみにVue.jsとかReact.jsなんかはjQueryではなく素のJSで書きますね(もしくはTypeScriptというものですが今知らなくて良いでしょう)

  • daidai3110 2020/10/29 23:48

    DBの更新に関してはActive Recordがきちんとやってくれるが、見た目部分はjQueryで行うイメージ。(ページをリロードするとDB通りの情報で表示される)

    DB通りのってどういうことですか??

  • SACHI UENISHI 2020/10/29 23:55

    コメントありがとうございます!

    DB通りのってどういうことですか??

    ページをリロードせずに表示されているものはjQueryが行ったもので、ページをリロードした時はデータベースからひっぱってきてeachで回したもの、という意味です...(答えになってますかね...)

  • SACHI UENISHI 2020/10/29 23:58

    最近は素のJSがかなり使いやすくなってるのでわざわざjQuery使わなくてもいいかもですね!

    jQueryを使わなくてもVue.jsとかでも可能なんですね。ありがとうございます!

  • daidai3110 2020/10/30 07:20

    $(".post-body").append("#{escape_javascript(render 'comments/comment', comment: @comment)}");

    たとえばこれって、データベースからコメントの情報をひっぱってきて、それをパーシャルに埋め込んでHTMLを生成し、それをappendの引数にいれてます。

    なので下記の表現はあたかも非同期通信の場合はデータベースにアクセスしない、みたいに受け取れるのでちょっと違和感を感じました!

    ページをリロードした時はデータベースからひっぱってきてeachで回したもの

    参考

    【Ruby on Rails】SJR(コントローラからJavaScriptを返して実行) | プログラミングマガジン

    Ajax通信をした後にその結果をブラウザ側で処理する方法としてはAjaxのリクエストボディにJavaScriptコードを返却してそれをブラウザ側で実行するという方法があります。(他にはクライアント側でイベントリスナーを作ってAjaxのリクエスト結果を処理する方法もありましたが。)これをServer-generated JavaScript Responses(SJR)といいます。

  • SACHI UENISHI 2020/10/30 08:26

    データベースからコメントの情報をひっぱってきて、それをパーシャルに埋め込んでHTMLを生成し、それをappendの引数にいれてます。

    DBからの情報ひっぱってきてたんですね...修正します!ご指摘ありがとうございます!

  • daidai3110 2020/10/30 09:59
    • コメント作成ボタンを押す
    • リクエストが飛ぶ
    • コメントを永続化する
    • そのコメントを元にコメント一行分のHTMLを組み立てる
    • そのHTMLをappendの引数に設定したものがHTTPのレスポンスボディに設定される
    • クライアントはそのレスポンスボディに入ってるもの($(".post-body").append("<div>~~~~~~~</div>");)を解釈し実行する
    • その結果画面の一部が更新される

    この流れを理解しましょう!

  • miketa-webprgr(みけた) 2020/10/30 10:44

    参考までにこちらを送ります!

    https://tech-essentials.work/questions/146

    私の質問は、改めて読み返すと自分自身でも読み返すと分かりづら過ぎて読むのがつらいのでスルーしていただくとして、

    だいそんさんの答え(text/javascriptを返すの話をしているあたり)は非常に参考になると思います!

    あと、だいそんさんにあえて挑戦しますが、createアクションについては、DBから情報をひっぱってきていないと思います!

    (DBに保存をしたものを持ってきてインスタンスに格納していないという意味で)

    # comments_controller.rb
    
      def create
        @comment = current_user.comments.build(comment_params)
        @comment.save
      end
    
    # create.js.slim
    
    - if @comment.errors.present?
      | alert("#{@comment.errors.full_messages.join('\n')}");
    - else
      | $('.comments-box').prepend("#{j render('comments/comment', comment: @comment)}");
      | $('.input-comment-body').val('');
    

    もちろん、「非同期通信の場合はデータベースにアクセスしないみたいに受け取れるのでちょっと違和感を感じました!」

    という指摘をして、SACHI UENISHIが勘違いしていないか確認することが主な趣旨なので、私の指摘は、
    重箱の隅をつつくようなどうでもいいことですけど笑

    ・・・ん、けど、saveしたときにそのsaveしたものをDBからひっぱってきているって言えるんですかね。。。

    まあ、定義の問題に終始しそうなのでどうでもいいですが、何らかの理解に繋がれば幸いです!笑

    といって逃げます!笑

  • daidai3110 2020/10/30 10:49

    あざまっす!

    あと、だいそんさんにあえて挑戦しますが、createアクションについては、DBから情報をひっぱってきていないと思います!

    確かにcreateアクションはDBへのSELECTは行ってないですね!紛らわしい表現で申し訳ない!

    もちろん、「非同期通信の場合はデータベースにアクセスしないみたいに受け取れるのでちょっと違和感を感じました!」
    という指摘をして、SACHI UENISHIが勘違いしていないか確認することが主な趣旨

    おっしゃる通りここが主旨でした!!

    というか完全にこちらのやりとり忘れてたので再掲してくださり助かります!!笑

    参考までにこちらを送ります!
    https://tech-essentials.work/questions/146

  • miketa-webprgr(みけた) 2020/10/30 10:51

    大勝利!!笑

    確かにcreateアクションはDBへのSELECTは行ってないですね!紛らわしい表現で申し訳ない!

    質問した本人は覚えているものです笑

    というか完全にこちらのやりとり忘れてたので再掲してくださり助かります!!笑

  • daidai3110 2020/10/30 11:03

    ということで上西さん、わからないことあればなんでも聞いてもらってぜひディスカッションできればなと思います!

  • SACHI UENISHI 2020/10/31 00:02

    レスポンスボディとか全然触れたことなかったので調べてみます...
    みけたさんも参考になる資料教えてくれてありがとうございます!
    お二人ともどうもありがとうございます!