常連

注目の的

質問力

自己紹介

ReactでSPAを制作しているのですが、気になることがありまして。

JSXの構文が書かれたファイルの拡張子なのですが、reactについてのさまざまな解説サイトを見ていると".js"になっていることが多いように思います。正しくは".jsx"のような気がするのですが、".js"であっても問題なく動くので、これはどちらにすべきなのか迷っています。

".js"と".jsx"の違いは何ですか？
もしReactアプリ作成の過程で、このように使い分けているなどありましたら教えていただきたいです。

よろしくお願いします。

Reactアプリでの、jsファイルの拡張子について

Nuxt.jsでタイトルを設定する際、各ページのheadでページタイトルが設定されていたら`〇〇 | サイト名`とし、ページタイトルが設定されていない場合は`サイト名`とだけ表示したいと思っております。

現状以下のようになっており、もしindex.jsでtitleを記述しなかったら`| サイト名`となってしまいます。

もちろんtitleTemplateを使用せず、全てtitleに書くようにすれば表示的には大丈夫なのですが、もし他の方法があれば教えていただきたいです。

何卒よろしくお願い致します。

```js
// nuxt.config.js

  head: {
    titleTemplate: '%s | ' + 'サイト名',
    title: ''
  },
```

```
// pages/index.js

<script>
export default {
  head() {
    return {
      title: 'トップページ'
    }
  },
</script>
```

Nuxt.jsでのタイトルの設定について

### 前提・実現したいこと

現在、ブログアプリを作成中です。
投稿へのタグつけ機能を中間テーブルを用いて実装いたしました。
投稿する際にタグつけを行い、投稿詳細画面に関連したタグの表示をすることはできたのですが
反対のタグがついた投稿一覧を表示することができません。
紐づいたテーブルの情報をもってくることまではできているかと思われるのですが
テーブル情報のカラム名など全て表示されてしまっている状態（画像参照）なのでカラムを絞って表示をさせたいです。

### 発生している問題・エラーメッセージ
表示させたビュー結果とDBテーブル
![実際に表示されているビュー](39ed4d0636c9b88d6cec59471465b41c.png)
postsテーブル（タグつけされている投稿のid）
![[postsテーブル（タグつけされている投稿のid）](fb659f8e495af4d2f4d9f6810fec6276.png)]
tagsテーブル（投稿がタグつけたもの）
![tagsテーブル（投稿がタグつけたもの）](0995d5955329eaa54cee453df2d63df3.png)
post_tag_relationsテーブル
![post_tag_relationsテーブル](e8557c6944e50118e3743880f66b6c9b.png)


### 該当のソースコード

[tags_controller.rb]
```ruby
class TagsController < ApplicationController

  def index
    @tags = Tag.all
  end

  def show
    @tag = Tag.find(params[:id])
    # binding.pry
  end

end
```

[show.html.haml]
```haml
.tags-wrapper
  .tagTitle
    %h2
    = @tag.name
  .showTagPost
    = @tag.posts.each do |post|
      = post.title
```


### 試したこと

binding.pryでタグに紐づいた投稿の情報は読み取ることができていた。
投稿が紐づいたタグ自体は呼び出せているので
show.html.hamlの記述を変更すれば行けるかなと思ったのですが書き方がわかりません。

少ない情報とわかりづらい文章で申し訳ないです。
もし他に必要な記述情報があれば載せさせていただきます。

タグのついた投稿一覧を表示したい

### 実現したいこと

RailsでAjaxを用いて、いいね機能を実現しようと実装中です。
Twitterクローンのようなアプリを作成中です。
投稿一覧画面があり、各投稿に表示されるいいねボタンをユーザが押すことで、
いいねをすることができます。
言わずもがなかもしれませんが、具体的には下記の処理になります。
1. いいね追加：いいねボタン（白抜きのハート）を押すと、Ajax処理により、
   いいねボタンが黒塗りのハートへと表示が変わり、いいね数が１つ増加する。
2. いいね取消：いいねボタン（黒塗りのハート）を押すと、Ajax処理により、
　 いいねボタンが白抜きのハートへと表示が変わり、いいね数が１つ減少する。

### 現状（上手くいっていない箇所、操作と結果）

上記「1.」「2.」のいいね追加・取消ともに実装し、正常に動作することを確認しました。
しかし、一点不具合を見つけてしまいました。
具体的には下記の操作を行った際に起こります。
**「いいね数が1以上の投稿に対し、白抜きハートのいいねボタンをクリックし、いいね追加を行う」→「その後、いいねが2以上になった投稿に対し、黒塗りのハートのいいねボタンをクリックし、いいね取消を行う」**
この操作の想定結果と、実際に今起こってしまった結果は以下の通りです。

### 想定していた結果（実現したい結果）
いいねが取り消され、いいね数が１つ減少し、いいねボタンが白抜きに変わる。
→この後、白抜きとなっているいいねボタンを押すと、再びいいね追加処理が行える。

### 今起こってしまった結果
いいねが取り消され、いいね数が１つ減少するが、いいねボタンは黒塗りのハートのままとなる。
→この後、黒塗りのハートボタンを押すと、いいね取消処理が実行され、いいね数が1つ減少する。
→いいね数が0になるまで取消処理を行うことができてしまう。いいね数が0になると、ようやくいいねボタンが白抜きのハートに戻り、いいね追加処理が行えるようになる。
（問題点：いいね取消時は１つしかいいね数を減少させられないはずなのに、いいね数が0になるまでいいね取消が行えてしまう）

### 起こってしまった結果（不具合）現象のキャプチャ

①いいね数が1以上の投稿に対し、
![イメージ説明](47af71c32ca71ea0481a3c52b494a1a9.png)


②白抜きハートのいいねボタンをクリックし、いいね追加を行う。
![イメージ説明](3007b909c3d0e877acd39a164784f036.png)


**③その後、いいねが2以上になった投稿に対し、黒塗りのハートのいいねボタンをクリックし、いいね取消を行う（いいね数が１つ減少するが、いいねボタンは黒塗りのハートのままとなる）※問題点**
![イメージ説明](ce2f33c8c9ea63761097d7e5acf7c657.png)


**④いいね数が0になるまで取消処理を行うことができてしまう。※問題点**
![イメージ説明](5f593312a7511cc6a7547fee2a924222.png)


⑤いいね数が0になると、ようやくいいねボタンが白抜きのハートに戻り、いいね追加処理が行えるようになる
![イメージ説明](a7653b7d7aa8d88ca6f1a3c616721054.png)

### schema.rb ※いいねデータのみ
```ruby
  create_table "likes", options: "ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci", force: :cascade do |t|
    t.integer "user_id", null: false
    t.integer "post_id", null: false
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
    t.index ["post_id"], name: "index_likes_on_post_id"
    t.index ["user_id", "post_id"], name: "index_likes_on_user_id_and_post_id", unique: true
    t.index ["user_id"], name: "index_likes_on_user_id"
  end
```

### routes.rb ※いいねの箇所のみ
```ruby
  resources :posts do
    resources :likes, only: %i[create destroy]
    resources :comments, only: %i[create destroy]
  end
```

### likes_controller.rb
```ruby
class LikesController < ApplicationController
  before_action :authenticate_user!
  before_action :set_post, only: [:create, :destroy]

  def create
    @like = current_user.likes.create(like_params)
    @post = Post.find(params[:post_id])
  end

  def destroy
    @like = Like.find_by(like_params, user_id: current_user.id)
    @like.destroy
    @post = Post.find(params[:post_id])
  end

  private
    def set_post
      @post = Post.find(params[:post_id])
    end

    def like_params
      params.permit(:post_id)
    end

```
→@like.destroyの箇所ですが、いいね取消処理実行時、railsのログを見ると、
DELETE文が対象のいいねデータのIDに対して実行され、正常終了し、最後にCOMMITもされていました。（このDELETE文のログは、いいね数が3から0まで減少させる際に毎回起こっていました）
→DELETEが動いていないわけでもないようです。

### create.js.erbとdestroy.js.erb（同じ内容）
```ruby
$(".like_btn-<%= @post.id %>").html("<%= escape_javascript(render "shared/like", post: @post) %>");
```

### post.rb （モデル（投稿））
```ruby
class Post < ApplicationRecord
    belongs_to :user
    has_many :likes, dependent: :destroy
end
```

### like.rb （モデル（いいね））※関連箇所のみ
```ruby
class Like < ApplicationRecord
    belongs_to :user
    belongs_to :post, counter_cache: :likes_count
    validates :user_id, presence: true
    validates :post_id, presence: true
end
```

### index.html.erb （投稿一覧画面）※いいねボタンの箇所のみ
```ruby
<% @posts.each do |post| %>
    <tr class="post-<%= post.id %>">
        <td><%= link_to post.user.username, user_path(post.user_id) %></td>
        <td><%= link_to post.title, post_path(post) %></td>
        <td><%= render partial: 'shared/like', locals: {post: post} %></td>
```

### _like.html.erb （いいねボタンの表示切替を行っている箇所）
```ruby
<div class="like_btn-<%= post.id %>">
<% if user_signed_in? %>
　　# いいねボタンの表示切替
    <% like = Like.find_by(user_id: current_user.id ,post_id: post.id) %>
    <% if like != nil %>
        <%= link_to post_like_path(post, like), method: :delete, remote: true do %>
            <i class="fas fa-heart"></i>
        <% end %>
    <% else %>
        <%= link_to post_likes_path(post), method: :post, remote: true do %>
            <i class="far fa-heart"></i>
        <% end %>
    <% end %>
    <span>
        # いいね数の表示
        <%= post.likes_count %>
    </span>
<% else %>
　　# ログインしていない時はいいねマークといいね数のみ表示
    <i class="fas fa-heart"></i>
    <span>
        <%= post.likes_count %>
    </span>
<% end %>
</div>
```
→いいねボタンが白抜きか黒塗りかの判定は、
like = Like.find_by(user_id: current_user.id ,post_id: post.id)　で、
操作中のユーザが、その投稿に対していいね済かどうかを抽出し、
if like != nil　で判定を実施しています。

### いいね取消処理実行時のサーバーログ
![イメージ説明](1aac06d51ed631ac1d1c1fe468d703ee.png)


いいねボタンの表示判定時、
Like.find_by(user_id: current_user.id ,post_id: post.id)でいいねデータを取得できているはずなのに、正しく判定できていないようです。（いいね数は正確に集計できている）
Rails cでLike.find_byでデータ取得すると、いいね取消処理実行後はnilが取得できるのに、
画面でのif文判定時はnilが返らないのが、なぜかわかっておりません。（Ajaxに起因するものかと推測して、調査中です）

処理とデータの流れを一つ一つ追っていったり、
Ajaxでの取消処理実行時の注意事項なども調査中ではありますが、
並行して皆様にお力添えいただきたい次第です。

＜バージョン＞
ruby：2.6.5
rails：5.2.4.3
開発環境：Docker version 19.03.1

不足情報等ございましたら、ご指摘いただいたけますと幸いです。
よろしくお願いいたします。

【Rails】いいね機能：いいねを取り消す際、いいね数が0になるまで減少できてしまう

### 前提・実現したいこと
erbで作成したファイルをhamlに変換しました。
登録画面に遷移したく画面遷移を試みました。
erb時は正常に起動していた入力画面が、haml変換をしたら下記のようなエラーが出てしまった。
変換前通り正常に動くようにしたいです。


### 発生している問題・エラーメッセージ

```
syntax error, unexpected end-of-input, expecting keyword_end end ^
```
![![実際のエラー画面](38214427e8521b6076d6737502007a95.png)](1b47f65c6df6a9efbb2b61b0ee4f7abb.png)


### 該当のソースコード

/views/devise/registrations/new.html.haml
```Ruby
.reg-wrapper
  .reg-wrapper-content
    .reg-wrapper-nav
      %h2 ユーザー情報登録
    .reg-wrapper-content-form
      = form_for(@user, url:user_registration_path) do |f|
        = render "devise/shared/error_messages", resource: @user
        .field
          = f.label :ニックネーム, class:"form-texts"
          %span.must 必須
          %br/
          = f.text_field :nickname , placeholder:"例）フリマ太郎"
        .field
          = f.label :メールアドレス, class:"form-texts"
          %span.must 必須
          %br/
          = f.email_field :email, autofocus: true, autocomplete: "email", placeholder:"PC・携帯どちらでも可"
        .field
          = f.label :パスワード, class:"form-texts"
          - if @minimum_password_length
          %span.must 必須
          %br/
          = f.password_field :password, autocomplete: "new-password", placeholder:"７文字以上で入力してください"
        .field
          = f.label :確認用パスワード, class:"form-texts"
          %span.must 必須
          %br/
          = f.password_field :password_confirmation, autocomplete: "new-password", placeholder:"もう一度入力してください"
        .reg-info-box
          .info-title
            %h4 本人確認
          .form-texts
            %p 安心・安全にご利用いただくために、お客さまの本人情報の登録にご協力ください。他のお客さまに公開されることはありません。
        .form-set
          .name-field
            = f.label :お名前（全角）, class:"form-texts"
            %span.must 必須
            %br/
            = f.text_field :family_name ,placeholder:"例）桜木"
          .name-second-field
            %br/
            = f.text_field :first_name, placeholder:"例）花道"
        .form-set
          .name-field
            = f.label :お名前かな（全角）, class:"form-texts"
            %span.must 必須
            %br/
            = f.text_field :family_name_kana, placeholder:"例）さくらぎ"
          .name-second-field
            %br/
            = f.text_field :first_name_kana, placeholder:"例）はなみち"
        .form-birth-set
          .field
            = f.label :生年月日, class:"form-texts"
            %span.must 必須
            %br/
            = f.text_field :birthday, placeholder:"例）20200101"
        .reg-info-box-bottom
          .form-texts
            %p ※ 本人情報は正しく入力してください。会員登録後、修正するにはお時間を頂く場合があります。
        .actions
          = f.submit "次へ進む", class:"reg-submit-btn"

```

/controllers/users/registrations_controller.rb
```Ruby
# frozen_string_literal: true

class Users::RegistrationsController < Devise::RegistrationsController
  # before_action :configure_sign_up_params, only: [:create]
  # before_action :configure_account_update_params, only: [:update]

  # GET /resource/sign_up
  def new
    @user = User.new
  end

  # POST /resource
  def create
    #登録1ページ目から送られてきたパラメータを@userに代入
    @user = User.new(sign_up_params)
    #validメソッドを使ってバリデーションチェック
    unless @user.valid?
      flash.now[:alert] = @user.errors.full_messages
    #and returnを使って条件分岐を明示的に終了させている。
      render :new and return
    end
    #sessionにハッシュオブジェクトで情報保持させるため、attributesメソッドでデータ整形。
    session["devise.regist_data"] = {user: @user.attributes}
    session["devise.regist_data"][:user][:password] = params[:user][:password]
    #build_sned_addressメソッドはhas_one :send_addressのアソシエーションを設定すると使用可。関連付けのあるnewメソッドのようなもの
    @address = @user.build_send_address
    render :new_address
  end

  def create_address
    #session["devise.regist_data”]の中の["user”]というハッシュの情報を@userに代入。
    @user = User.new(session["devise.regist_data"]["user"])
    @address = SendAddress.new(address_params)
    unless @address.valid?
      flash.now[:alert] = @address.errors.full_messages
      render :new_address and return
    end
    @user.build_send_address(@address.attributes)
    @user.save
    session["devise.regist_data"]["user"].clear
    sign_in(:user, @user)
  end

  # GET /resource/edit
  # def edit
  #   super
  # end

  # PUT /resource
  # def update
  #   super
  # end

  # DELETE /resource
  # def destroy
  #   super
  # end

  # GET /resource/cancel
  # Forces the session data which is usually expired after sign
  # in to be expired now. This is useful if the user wants to
  # cancel oauth signing in/up in the middle of the process,
  # removing all OAuth session data.
  # def cancel
  #   super
  # end

  protected

  def address_params
    params.require(:send_address).permit(:send_full_name, :send_name_kana, :post_number, :prefectures, :city, :address)
  end

  # If you have extra params to permit, append them to the sanitizer.
  # def configure_sign_up_params
  #   devise_parameter_sanitizer.permit(:sign_up, keys: [:attribute])
  # end

  # If you have extra params to permit, append them to the sanitizer.
  # def configure_account_update_params
  #   devise_parameter_sanitizer.permit(:account_update, keys: [:attribute])
  # end

  # The path used after sign up.
  # def after_sign_up_path_for(resource)
  #   super(resource)
  # end

  # The path used after sign up for inactive accounts.
  # def after_inactive_sign_up_path_for(resource)
  #   super(resource)
  # end

end

```

### 変換手順
こちらを参考に変換を行いました。
https://qiita.com/tsuchinoko_run/items/0503fb87c0cb51bcecc7

```ターミナル
gem 'haml-rails'
gem 'erb2haml'
```

```ターミナル
bundle install
```

```ターミナル
rake haml:replace_erbs
```


### 試したこと

同じような質問をされている方がいらっしゃったので
form_for周りの記述、インデントなどがおかしいと考え試みましたが直りませんでした。