Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Rails初心者がSPAアプリを作ってみた話
Kouichi Nishizawa
July 20, 2019
Technology
0
140
Rails初心者がSPAアプリを作ってみた話
Kouichi Nishizawa
July 20, 2019
Tweet
Share
More Decks by Kouichi Nishizawa
See All by Kouichi Nishizawa
農業AIアイディアソンに参加してきた
koty
0
430
Google Home アプリを作った話
koty
0
41
Other Decks in Technology
See All in Technology
PUTとPOSTどっち使う?
hankehly
0
140
suppress-ts-errors を使って TypeScriptの型チェックを漸進的に強化する / Introducing-suppress-ts-errors
kawamataryo
2
100
通知がOFFだとToastは表示されな… されてる!?
napplecomputer
0
200
誰が正解を知っているのか / Who knows the right answer
takaking22
1
210
機械学習システムアーキテクチャ入門 #1
asei
3
1.1k
Istio入門
nutslove
15
4.8k
チームとチームのチーム
eiel
1
890
出張スクラムマスターとしての FEARLESS CHANGE な生き方
naitosatoshi
1
1.1k
2022年度新卒技術研修「フロントエンド」講義
excitejp
PRO
0
330
セキュリティ 開運研修2022 / security 2022
cybozuinsideout
PRO
2
2.9k
トランザクションスクリプトはどこから来たのか トランザクションスクリプトは何者か トランザクションスクリプトはどこへ行くのか #sekkeinight
a_suenami
7
2.1k
Scrum Fest Osaka 2022 段階的スクラムマスターのススメ
orimomo
0
670
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
780
250k
Unsuck your backbone
ammeep
659
55k
The Art of Programming - Codeland 2020
erikaheidi
32
9.2k
A better future with KSS
kneath
225
15k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
37
3.2k
Embracing the Ebb and Flow
colly
73
3.4k
Mobile First: as difficult as doing things right
swwweet
213
7.5k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
172
8.4k
Learning to Love Humans: Emotional Interface Design
aarron
261
37k
It's Worth the Effort
3n
172
25k
Why Our Code Smells
bkeepers
PRO
324
55k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
15k
Transcript
Rails初心者がSPAアプリを作っ てみた話 長野Rubyの会 #2 2019.7.20 於 GEEKLAB.NAGANO
自己紹介 • にしざわこういち • プログラマー • @koty • 元ギークラ某長野 管理人見習い
• 最近転職しました
プログラミング言語歴 VisualBasic.NET ・・・10年 C# ・・・10年 Java ・・・3年 Python ・・・4年 TypeScript
・・・1年 Ruby ・・・1ヶ月
None
前回発表内容
前回発表内容
今日の発表内容 勉強がてら作ってみているアプリの話 https://glide-well.b-sw.co/#/workouts/ 発表することで教えてもらうスタイル
アプリでできること • 水泳の練習メニューの記録 • 練習内容のslackへの投稿 ◦ 現状は、整形したメッセージをクリップボードに入れるだけ • 俺得アプリ
SPAで作った • このご時世、サーバーサイドのWebフレームワークのみでシステムを作れること はまずない • 特にFormはSPAで作るほうが楽。配列の扱いとか • 認証を通せるようにしたら自分で使う予定
システム構成 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するだけで動く。すご い。。。
webpacker • webpackをrailsで包んだものらしい • 最初使いかけたが挫折 • frontとapiを分けることにした
front - api でアプリを分ける長所 • webpackerを覚える必要がない • vue.jsのノウハウをそのまま使える • アプリケーションサーバーが静的ファイルを扱わなくて良い
◦ アプリケーションサーバーの負荷がちょっと減る
front - api でアプリを分ける短所 • ソース管理が煩雑 • コミットがまとまらない • ローカルでのデバッグが面倒
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
おしまい Railsを教えられるようにがんばります