Ruby on Rails: 新規作成機能の欠陥を直す！原因は。。。...chapter9
前回、このアプリには欠陥があると言ったがタイトルに書いたとおり新規作成に欠陥があります。
http://localhost:3000/tweets/newで新規作成ページからツイートしてみると。。。
投稿を押して、一覧へ戻ると、
投稿できてるが。。。
一覧ページから新規作成へアクセスし、ツイートしてみるが。。。
↓
↓ 投稿を押してから一覧へ戻るを押してみると。。。
できてない！！！
https://gyazo.com/d5098fe7b0b85c0e294fbde19184c527
原因はズバリ！
『Turbolinks』
これ、スクールで出てきた。。。
けど、、、けど、、、理解全然できてない！
何？って聞かれたら
＿人人人人人人人＿
＞ わからん！ ＜
￣Y^Y^Y^Y^Y^Y￣
って言うしかない。。。(＿ ＿|||))))
Google先生を頼って様々なサイトを見て、なんとなくTurbolinksってのが問題だとわかったが、Turbolinksについて理解できてなかったので時間が掛かりました。
本日は
◇Turbolinksとは何者なのか
◇欠陥の修正
をやっていこうと思います。
◇Turbolinksとは何者なのか
Turbolinksを理解する前に最初に欲しい情報をブラウザに映すまでの流れを勉強します。
(ブラウザ...Google Chrome、Safari 、Internet Explorer(IE)、Microsoft EdgeなどのWebサイトを閲覧する時に使うソフトのこと)
〜ブラウザに欲しい情報が表示されるまでの流れ〜
1. 欲しい画面のHTML(画面を構成する骨組み)をダウンロード
2.そのHTMLを装飾するもの(カッコよくしたり、可愛くしたり見た目をよくする)をダウンロード
この装飾するもの(スタイルシートやJavascript、画像)
3.レンダリング(1と2をくっつけて画面に映す)
(レンダリング...元になる情報を整形して表示すること)
こんな感じでサイトをみることができるようになります。
この2. の作業で複数のスタイルシートやJavascriptのフォルダが複数存在すると、ブラウザとのやりとりに時間がかかってしまい表示されるのが遅くなってしまう。
そんな問題を解決するための仕組みが存在する。
それが『アセットパイプライン(asset pipeline)』！
アセットパイプラインによって高速に画面を遷移させています。仕組みとしては画面全体を変えているわけではなく一部だけを変えることによって高速化させています(この一部だけ変更する方法をAjax(エイジャックス)と言いいます)。
この高速化させる方法として2.の複数存在するファイルを１つにまとめている。
そしてこのアセットパイプラインに追加された機能として『Turbolinks』があります。
~Turbolinks~
Turbolinksはページを遷移させる時に現在見てるページの『title』と『body』だけを新しいページの『title』と『body』と交換してブラウザを取得し直すことを省く機能を持っている。
今回の一覧ページから新規作成ページへ遷移する時もturbolinksが動いている。
ダブルクリック(mac)をして検証をクリックして、Networkを開いてみます。
Networkはページのリクエストページのリクエストをしてからの通信内容を一覧で表示できる。
参照：https://www.buildinsider.net/web/chromedevtools/01#page-4
一覧ページから新規作成ページへ飛んでみます。
一番右下を見ると。。。
turbolinksが動いているのがわかります。
https://gyazo.com/1e2111c868be1bd11a6d635ee7777b75
Turbolinksの後をみると.jsと書いてある。
これはJavascriptと言うプログラミング言語の拡張子(Javascriptのファイルだよって示すもの)。
つまりこのturbolinksはJavascriptで動いていると言うこと。
ではこのJavascriptのプログラミング言語を使うとHTMLや CSSの要素で作用して新しい HTMLやCSSが生成されることによって、新しいコンテンツが表示されたり、変化したりします。
(要素...開始タグ〜終了タグまでの全体の構成のこと。例)HTMLでは ここから→<p>~</p>←ここまで)
〜一覧ページから新規作成ページへ遷移後ツイート作成し、保存されるまでの経緯〜
<正常の場合>
1. 一覧ページから新規作成ページへ遷移する時この要素を変化させるJavascriptが使われているTurbolinksが発動
↓
2. この新規作成ページでJavascriptがある要素(今回はform要素)を支配
↓
3. タイトルや本文を保存しようと投稿ボタンを押す
↓
4. Javascriptが動きツイートがcreateアクションへ行き、モデルを通ってDBへ保存される
~今回保存できなかった原因〜
原因：
一覧から新規作成ページへ遷移後、保存できなかった原因はformタグの開始タグと終了タグが変化させたいところ(作用させたい場所まで)を囲っていなかったから。
実際に見てみます。
検証を開き、今度はElementsを見てみます。
https://gyazo.com/e3cd7e695b56e612b33749fae90cbce1
https://gyazo.com/ab89bfc224f6383e5233c0d092f63919
2行目の<form action="/tweets" accept-charset="UTF-8" data-remote="true" method="post"> ~</form>をみると<input>~<br>のところまでしか囲っていない。
つまりJavascript(Turbolinks)はここまでしか作用していないことになります。
このJavascriptが作用させたいのは<div class="tweet-new__titile">~一番下の</div>まで(<div class="tweet-new__btn">の終了タグまで)。
なので、次でnew.html.erbを修正してJavascript(Turbolinks)が正常に動くようにしていきます。
ちなみに、 Turbolinksがどの要素に作用しているかを確かめる方法としてElementsで表示されているdata-remoteを見ればいいみたいです。
https://gyazo.com/b7018109471309bab2076314c7d47f64
今回このformタグをみると data-remote="true"となっている。
これが "ture" になっているとフォームの送信がブラウザによる通常の送信方法ではなくAjaxによって (今回はTurbolinks)送信されるようになると言うことを意味しているらしいです。
◇欠陥の修正
では、修正していきます。
↓ app/views/new.html.erbは現在こんな感じなってます。
https://gyazo.com/dd7c49a49a44944a3329fca11505f8c6
<%= form_with model: @tweet do |f| %>を<div class="tweet-new__title">の上へ。
<% end %>を</div>の下へ(<div class="tweet-new__btn">の終了タグの下へ)修正します。
https://gyazo.com/8bd504d1584c1397f04e431bfca9cdbd
実際に保存できるか確かめてみます。
http://localhost:3000/tweets/index
↓ 新規作成へ飛んで
↓ 投稿をクリック後、一覧へ戻るで戻ってみる
保存できてる！
一覧から新規作成ページに飛んでからツイートすると保存できなかったのに、新規作成ページをリロード(再読み込み🔄 )すると保存できた理由としてはTurbolinksが働いていなかったからみたい。
↓ 検証のNetworkを開き、リロードして見てみるとTurbolinksが動いてないことがわかる。
アセットパイプライン(asset pipeline)、Turbolinks、TurbolinksとDBへの保存の関係性を理解するのに時間がかかってしまった😅
↓ 下に調べたサイトのリンクを貼っておきます ↓
今回原因がTurbolinksとわかったきっかけの質問
参照：https://teratail.com/questions/237566?whotofollow=
Turboliknksについて
参照：https://www.ryotaku.com/entry/2019/01/15/213420
参照：https://www.techscore.com/tech/Ruby/rails-4.0/turbolinks/
アセットパイプラインについて
参照：https://railsguides.jp/asset_pipeline.html
Ajaxについて
参照：https://railsguides.jp/working_with_javascript_in_rails.html
タグや要素とは
参照：https://allabout.co.jp/gm/gc/23843/
次回はツイート編集機能についてやってみる予定です。
以上です。
