プログラミング勉強中!!

TECH::EXPERT 40期 受講生の筆者がその日学んだことをアウトプットしていくブログです。学習量によっては全て書ききれないこともあります。お気付きのことありましたバシバシコメントください!!3月中旬よりWEBエンジニアとして働くことになりました。日々の業務などについても発信させていただきたいと思います!!よろしくお願いいたします!!

:remote => trueとは

はい、こんばんは。

 

本日の梅田はゲリラ豪雨がすごかったですね。

 

早めに帰宅しようとしたのが裏目に・・・あえなく教室に引き返し勉強することになりました・・・。

 

きっと神様からの警告なんだと思い、気をとり直して勉強に励みました。

(お前はまだまだ勉強せなあかん!!!とね)

 

ということで本日の振り返りです!!!

 

本日の振り返りは:remote => trueです。(ハッシュロケット=>は好まれないので要注意!!remote: trueが良いかな。)

 

:remote => true(remote: true)とは、非同期通信を簡単に実装してくれるものとお考えください。

 

私のMaaanga!!!にも簡単に実装できました。

 

<iframesrc="https://api.gyazo.com/player/9673e49b58eca99c1cdfadc10a72ec53"width="960"height="532"frameborder="0"webkitallowfullscreenmozallowfullscreenallowfullscreen>gyazo.com

 

以上のようになりました。

 

はい、なんと通常なら10行以上かかってしまう記述をな、な、なんと!!1〜2行程度の記述で終わらせてしまうのです。

 

まず、使用の対象ですが、以下になります。

 

form_for

form_tag

link_to

button_to

 

(form_withにも使えると思いますが、検証しておりませんので、ここでは省略させていただきます。)

 

フォームを送信できる機能に対して実装できるのですね。

 

以下、流れになります。

 

1.コントローラに定義

f:id:g1034725:20181205004539p:plain

2.機能を実装したいビュー画面の直下に「アクション名.js.erb」のファイルを作成。

ここではコメントを投稿して保存、反映させる機能ですので、createアクションですね。コメントですので、app/views/comment/create.js.erbとします。

 

3.$('追加したい場所').append(`追加したい部分`)

f:id:g1034725:20181205004707p:plain

この場合、.appnend()を用いているので、追加したい部分の一番後ろに追加するという指定になります。

一番上に追加したい場合は.prepend()を用いる。 



このステップを踏むと、トップのGyazo

のようになります。

 

めちゃくちゃ簡単な方法なので、皆様もぜひお試しください!!

 

この非同期通信が設定できて、初めてrailsが楽しい!!!と感じました!!!

 

これからも頑張ります!!