Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Rails初心者がSPAアプリを作ってみた話

 Rails初心者がSPAアプリを作ってみた話

822ce4bbdd68b1cc1c40993939b1ed7d?s=128

Kouichi Nishizawa

July 20, 2019
Tweet

More Decks by Kouichi Nishizawa

Other Decks in Technology

Transcript

  1. Rails初心者がSPAアプリを作っ てみた話 長野Rubyの会 #2 2019.7.20 於 GEEKLAB.NAGANO

  2. 自己紹介 • にしざわこういち • プログラマー • @koty • 元ギークラ某長野 管理人見習い

    • 最近転職しました
  3. プログラミング言語歴 VisualBasic.NET ・・・10年 C# ・・・10年 Java ・・・3年 Python ・・・4年 TypeScript

    ・・・1年 Ruby ・・・1ヶ月
  4. None
  5. 前回発表内容

  6. 前回発表内容

  7. 今日の発表内容 勉強がてら作ってみているアプリの話 https://glide-well.b-sw.co/#/workouts/ 発表することで教えてもらうスタイル

  8. アプリでできること • 水泳の練習メニューの記録 • 練習内容のslackへの投稿 ◦ 現状は、整形したメッセージをクリップボードに入れるだけ • 俺得アプリ

  9. SPAで作った • このご時世、サーバーサイドのWebフレームワークのみでシステムを作れること はまずない • 特にFormはSPAで作るほうが楽。配列の扱いとか • 認証を通せるようにしたら自分で使う予定

  10. システム構成 CloudFrontでルーティング ブラウザ CloudFront heroku S3 index.html /api/* Rails vue.js

    https://github.com/koty/glide-well-front https://github.com/koty/glide-well-api Railsだと何も考えずに herokuにpushするだけで動く。すご い。。。
  11. webpacker • webpackをrailsで包んだものらしい • 最初使いかけたが挫折 • frontとapiを分けることにした

  12. front - api でアプリを分ける長所 • webpackerを覚える必要がない • vue.jsのノウハウをそのまま使える • アプリケーションサーバーが静的ファイルを扱わなくて良い

    ◦ アプリケーションサーバーの負荷がちょっと減る
  13. front - api でアプリを分ける短所 • ソース管理が煩雑 • コミットがまとまらない • ローカルでのデバッグが面倒

  14. ActiveModelSerializers モデルのオブジェクトをJSONにしてくれるgem ネストしたJSONをpostして更新するきれいな方法がよく分からなかった w = params.permit(:id, :date, :kind, :impression) if

    @workout.update(w) update_details(@workout.id) def update_details(workout_id) WorkoutDetail.where(workout_id: workout_id).delete_all p = params.permit(:id, :date, :kind, :impression, workout_details: [:id, :menu_kind, :times, :distance, details = p[:workout_details] details.each do |detail| rec = WorkoutDetail.new(detail) rec.workout_id = workout_id rec.save end
  15. おしまい Railsを教えられるようにがんばります