私の外部記憶装置

ただの覚え書きです。ちょこちょこ見直して加筆・修正していますが、間違ってるかも😅

トップ > 作業記録 > 【Rails】非Vue化・非React化
最終更新日

【Rails】非Vue化・非React化

作業記録 Rails

概要

  • 構成（bootcampアプリ@2024年7月）
    • Rails 6.1
    • Vue 2.7
    • React 17.0
  • 作業内容
    • HTML関連の追加
      • コントローラに記述を追加
      • パーシャルの作成、置き換え
    • Vue、React関連の削除
      🚨他の場所でも使われている場合がある。削除前に要確認
      • 「APIコントローラ」「.json.jbuilder」「.vue」「.jsx」の不要な記述（または、ファイル自体）を削除
      • 「APIコントローラ」ファイルを削除する場合、以下の「APIのルーティング」から該当部分を削除
        config/routes/api.rb
      • 「.vue」ファイルを削除する場合、以下から「.vueファイルパス」と「コンポーネント名」の記述を削除
        app/javascript/packs/application.js
  • 作業順序
    1. Vue・React関連のコードを確認する
    2. HTML関連のコードを大まかに書く（Vue・Reactのコードを移植）
    3. 「Vue・React関連の既存表示」と「HTML関連の新規表示」を並べて、確認しながら作業
    4. Vue・React関連のコードを削除

作業のtips

「.jbuilder」ファイルの探し方

※ちなみにデータの流れは以下
「APIコントローラ」→「.json.jbuilder」で、これを「.vue」や「.jsx」からfetchしている

  1. 「.vue」「.jsx」ファイルで、下例のような/api/hoge?${piyo}という記述を見つける
  2. パス部分（/api/hoge）と同じ「Path」をhttp://localhost:3000/rails/info/routesから探す
    下記の例なら、/api/reports(.:format)等
  3. http://localhost:3000/rails/info/routesで、「Path」の右に書いてある「Controller#Action」を見て、コントローラとアクションを確認する
    下記の例の場合、「Controller#Action」がapi/reports#indexだったので、コントローラがapp/controllers/api/reports_controller.rb、アクションがindex等
  4. VSCodeで、アクション名の上に表示されるJump to viewを押すと「.json.jbuilder」ファイルが開く
    （または、アクション名と記載内容から、ファイルを判断）
    下記の例の場合、アクションと同名のapp/views/api/reports/index.json.jbuilder等
// Vueの例
computed: {
  // ...
  reportsAPI() {
    const params = this.newParams
    return `/api/reports.json?${params}`
  }
},

// Reactの例
const { data, error } = useSWR(
  practices
    ? `/api/reports.json?user_id=${userId}&page=${page}&practice_id=${userPracticeId}`
    : unchecked
    ? `/api/reports/unchecked.json?page=${page}&user_id=${userId}`
    : userId !== ''
    ? `/api/reports.json?page=${page}&user_id=${userId}`
    : practiceId !== ''
    ? `/api/reports.json?page=${page}&practice_id=${practiceId}`
    : companyId !== ''
    ? `/api/reports.json?page=${page}&company_id=${companyId}`
    : all === true
    ? `/api/reports.json?page=${page}&practice_id=${userPracticeId}`
    : console.log('data_fetched!'),
  fetcher
)

ビューファイルの記述

「ビューファイル（slim形式）」内で、以下のような記述をされている

# Vueの例
div(data-vue="UserRecentReports" data-vue-user-id:number="#{@product.user.id}")

# Reactの例
= react_component('Reports', userId: @report.user.id, displayUserIcon: false, displayPagination: false)

参考