JavaScriptとは
こちらで紹介しています。JavaScriptについて(素人が浅い知識で書かせていただきました)
アセットパイプライン
こちらで紹介しています。railsのアセットパイプラインと本番環境のデプロイについて
Ajax
サーバーとの通信でデータを受け取り、ページを書き換える時に、
処理をするために別のcontrollerに飛んで、処理後に再度今のページの中身を読み込んで戻ってくるのは処理が多くて遅くなる
↓
Ajaxを使えば今のページのままで、自分の命令が非同期でバックグラウンドで行割れる(今のページの再読み込みをせずに処理できる)。Ajaxの処理は全てJavaScriptが行わせている。
Ajaxの実行の仕方(Controllerとviewでの書き方)
linkや要素にAjaxを仕込む
↓
そのリンクが押されれば、今のページを表示したまま、別の処理を実行する(非同期処理)
↓
サーバサイドでその処理が完了すれば処理後の画面になるよう表示する。非同期処理後の画面表示をする処理は２種類あるため次の項目で示す
注意：Ajaxでは現在のページを表示したまま、リンク先の処理非同期で実行するため、リンク先の処理(アクション内)にはriedirectを記述しない。
Jsを使った2種類のAJaxでの削除方法
非同期処理後の画面表示をする処理は２種類ある。以下で削除ボタンにAjaxを仕込んだときの例で説明する
Ajax成功時の処理をjsに書くかjs.erbに書くか。ここが大きな違い。
.jsに書く場合
サーバーサイドによってrails-ujsによってAjaxを仕込んだリンクにAjax::successという値がつく
↓
Ajax::successになっていれば、そのリンクに関連した要素を非表示にする。この処理がJsファイルに記述されており、ずっと稼働している。
.js.erbに書く場合(SJRというやり方)
サーバーサイドで処理を完了すれば、サーバーサイド側からJsの処理を命令するようにする。これは、命令内容はjs.erbで書かれrubyでjsの処理を実行できるようにしてある。
注意:サーバーサイド側ではDOMを判断できない。しかし削除されたインスタンスのidを把握することはできるため、それを使って画面変更(削除)を行う。
↓
そのために
削除したい要素のにHTMLのid属性に、そのインスタンスのidを埋め込む。
↓
js.erbで任意のインスタンスidと同じ、HTMLのid属性を持つ要素を非表示にするようにする。
この場合のメリットはサーバー側でデータを使って、Jsの内容を作成できること。デメリットはサーバーサイドからのjs命令(js.erb)をviewディレクトリの下で作成するため、共通化や見直すのが大変
補足
ajaxの処理はrails-ujsによって行われており、ajaxの成功失敗の判断もこいつが行っている
参考文献は現場で使える Ruby on Rails 5速習実践ガイドのチャプター8
Ajaxではli要素に多く使用されることが多い、li要素のid属性にインスタンスidを埋め込んで、そこから判断して処理をする事が多い。
Jqueryを用いたAjax(データのやりとり)
ある要素にイベントを設定（この要素がooされた時的な）
↓
urlにアクセスする。この時にgetでレスポンスするのか、postでするのか記述する。postならばデータを送る
↓
サーバサイド側からの返事がうまくいった時は.doneの中に処理を書き、そうではない時の処理は.failの中に書く。これをajaxを指示したjs側で書く
or
サーバサイド側で処理がうまくいった時の処理パターンとそうでないパターンを記述する(エラーのときはクライアント側でエラ〜メッセージが表示されるようにするとか)。これをサーバサイド側（Ajaxでアクセスされたurl側）で記述する。
補足
サーバーサイド側からクライアント側にデータを返したければ、json形式でないといけない。
やり方：
サーバーサイド側で、データベースにアクセスしてデータをとってくる
↓
連想配列の形にして変数Aに代入する
↓
json_encode(変数A)で連想配列の形からJSONの形に変更する。それを返す。
json_encodeについてはこちらを参考にさせていただきました。【PHP入門】JSON形式にエンコードする方法(json_encode)
補足
coffeeScriptとは
これはJsの代替言語で、JSで表現したいことを簡単にかける。またアセットパイプラインによって最終的にjsに変換されのでrailsでも使用できる。しかし最近はcoffeeScriptのメリットが少なくなってきたため、使用しないケースもある
turbolinks
こちらで紹介しています。JavaScriptについて(素人が浅い知識で書かせていただきました)
またturbolinksの具体的な機能はgetを用いたページ移行を高速化すること。具体的にいうと、ページ移行が起きた時に共通部分なる部分(cssやjs)は前のページの内容を残したまま移行するようにする。どのページでも同じcssやjsファイルを読み込んでいるため、読み込みを無くし引き継ぎをすることで高速化を実現している
yarn
これはJsのパッケージマネージャー。Jsのパッケージをどんなバージョンでインストールするかを管理。インストール内容に一貫性を持たせたりできる。railsでいうgemみたいなもの。また同じJsのパッケージマネージャーのnpmとも互換性があるため、便利。
参考文献
yarnとは
高速で、信頼性が高く、そして安全な依存関係の管理
webpacker
これはJsのビルドツール。ビルドツールとは実行環境で動作できるように組み立てるツールのこと。アセットパイプライン作成にはSprocketsが採用されていたが、webpackerを使用することで、より高度な処理をできるようにする。