これ...とてもいいUI/UXなので実装したい...。/ rails5 + js

Question

これ...とてもいいUI/UXなので実装したい...。/ rails5 + js

要約と技術要件

ウォンテッドリーを最近使っていて、同じような実装をしたい部分がありました。
ユーザ編集の挙動です。

技術
Rails5
js
slim

大きく２つに挙動は分けられるはず。

(1)フロントエンドでフォーム出力

Qiitaで調べてみるものの、フロントエンドの知識に乏しく、昨今の技術？(ex.react.js?/vue.js?)を用いるのかキャッチアップできず、もし上記に似た実装を説明するソースをご存知でしたら、教えて頂けませんか。

(2)バックエンド非同期更新

これはRailsチュートリアルや、「非同期　rails 編集 」検索で現在調査中です。現在制作中のアプリでは下記のようにredirect_back(fallback_location: root_path)を用いて画面遷移しないようにしていますが、ちゃんとAjaxにするのが目標です。この点についても「実装してわかりやすかったよ！」...というソースをご存知でしたらご教授頂けると幸いです。

def edit
	@host = Host.find_by(id:current_host) 
end

def update
	@host = Host.find_by(id:current_host)
	if @host.update_attributes(host_params)
		flash[:success] = "編集が完了しました"
		redirect_back(fallback_location: root_path) # ← 今の所は無理やり元の画面に戻してる
	else
		flash[:danger] = "編集が失敗しました"
		redirect_back(fallback_location: root_path) # ← 本当はちゃんとしたajaxにしたい。
	end
end

Answer 1

jsはAngularJSを使っているようですね。>Wantedly
画面的にはクリックを取得して（イベントの補足）、DOMの表示を切り替えて（DOMの操作）、編集完了時点で送信（Ajax）しているだけなので画面側はそんなに難しくないです。開発者ツール使ってソース見ながら動かしてみるとよくわかると思います。
リダイレクトしないようにするというのはそもそもAPIの定義をわかっていない感じですので、非同期の他にRESTとかAPIとかいう単語も合わせて検索してみてください。

Comments

[退会済みユーザー]

perpouhさんありがとうございます。WantedlyにはAngularJSなのですね。その後、調査をしたら、web apiを学ぶべきな気がしたので、学習を進めようと思います。

Answer 2

最低限必要になのはこれくらいです。

• イベントの捕捉（ユーザーの操作によって処理を動かす)
• DOMの操作（JavaScriptで動的にHTMLを書き換える）
• Ajax (ブラウザ<->サーバ間で通信を行う)
• バックエンド処理(WebAPI)の用意

JavaScriptの基礎的なイベント処理とDOM操作が理解出来ていないように見えるので、まずはそこを勉強されたほうがいいと思います。

Comments

[退会済みユーザー]

rkojimaさん、わかりやすく砕いていただきありがとうございます。JSでのDOM操作からしっかり学ぼうと思います。ありがとうございます。