## webpacker.ymlに読み込みの設定を書く

```config/webpacker.yml
resolved_paths: ['app/assets/images']
```

## Frontendで読み込み

```js
<img src="~example.png">
```

Ruby on Rails

RailsとWebpackerでassets配下の画像を使う

<h2>webpacker.ymlに読み込みの設定を書く</h2>
<pre><code>resolved_paths: ['app/assets/images']
</code></pre>
<h2>Frontendで読み込み</h2>
...

設定

```user.rb
has_many :childs, class_name: "User", foreign_key: "parent_id"
belongs_to :parent, class_name: "User", optional: true
```

取得

```rb
user = User.find(1)
user.childs # 子を取得
user.parent # 親を取得
```

FactoryBot

```rb
# 親
　parent = FactoryBot.create(:user)

# 子
ambassador_child = FactoryBot.create(
  :user,
  parent_id: parent
)
```

ridgepole

```rb
t.integer "parent_id", null: true, commnet: "親のID"
t.index ["parent_id"], name: "parent_id"
```

[Active Record の関連付け - Railsガイド](https://railsguides.jp/association_basics.html#%E8%87%AA%E5%B7%B1%E7%B5%90%E5%90%88)

Rails 自己結合

```bash
Unpermitted parameter ...
```

というエラーが出力されていた。

## Frontend

JSON型のデータを保存するPOSTリクエストを投げます。(`JSON.stringify()`に注目)

```js
// 👇 JSON.stringify()で文字列にする
await axios.post("/api/v1/users", { json_data: JSON.stringify(data) });
```

## Rails

updateするパラメータの定義

```rb
private

def user_update_params
  params.require("user").permit(%i(
    json_data
  ))
end
```

updateする処理

```rb
data = user_update_params # 👈 別の変数に移す
# 👇 JSON.parse()する
if (data[:json_data])
  data[:json_data] = JSON.parse(data[:json_data])
end

current_user.user_update_params(data) # 👈 保存
```

### ✅ ポイント

- `user_update_params`を文字列で通してから、`JSON.parse()`した値を再代入する。

## Frontend呼び出し

Railsがいい感じで取得してくれるので、何もしなくて良い。リクエストの時のみ`JSON.stringify()`する。

```js
const res = await axios.get("/api/v1/users");
res.user.json_data
// Object型
```

RailsとWebpackerでassets配下の画像を使う

webpacker.ymlに読み込みの設定を書く

Frontendで読み込み

関連記事

記事のタグ

Share?