開始89日目〜超初心者、文系、30代のスタート〜
ブログテンプレート
本日学んだこと:
require_tree
は同列を読み込むこと
rails db:migrate:reset
Bundle install後、既にあるデータベースを消去する。
→記述が正しいの反映されない場合はこれを使ってみる。
//= require jquery
→これをappreciation.jsに入れないと実装できない。
Jsファイルにおいて、jqueryのajaxを用いてコントローラーまでリクエスト送る。
→コントローラーからテンプレートホルダーのjbuilderを介してdone(ダン)ないしはfailに返ってくる。
※フォームが発火した時にイベントが発生するか確認必須。
$(function(){
$().on('submit', function(e){
e.preventDefault();
})
});
ブラウザのデフォルトで機能してしまうものをキャンセルして。
404エラー：記述したURLが間違っている可能性高い。
json.text @post.text
右から左に読み換えられる。
respond_to
Railsのコントローラーで利用できる respond_to というメソッドを使うと、リクエストに含まれているレスポンスのフォーマットを指定する記述を元に条件分岐ができます。
必要なデータだけをJSONなどの形式で返すサーバの仕組みのことをAPI、もしくはJSON API
$(*****).on(*****, function(e)
→親要素の中の子要素、というような書き方になる。
例えば、投稿フォーム内の送信ボタンを押した時にイベント発火するというように設定できる。
animateメソッド
animateメソッドは、メソッドを利用したオブジェクト(レシーバ)が持つプロパティなどを、指定した値まで徐々に変化させることができるメソッドです。
Turbolinksはリンクを生成する要素であるa要素のクリックをフックにして、
移動した先のページをAjaxで取得します。
その後、取得ページのデータが遷移前のページと同じものがあれば再利用し、
title・body要素を置き換えて表示します。
データを再利用するので、アプリケーションの速度向上などのパフォーマンスの向上を
させることができます。
- 「disabled」とは、HTML要素を無効化する属性
- 「disabled」は、jQueryの「prop()」「is()」メソッドで操作する
- 「disabled」の操作には「attr()」メソッドは向かない
→実装のコツ、どのイベントが発火して、成功？失敗？した時にどうなるのか？を考えてコードを記述していくとわかりやすくなる。
どこにも属さずに記述すると、何も起きない。
time_formats
→strftimeメソッドを使わなくてもto_sメソッドで取得できる形式
手順：
config/initializersフォルダ内にtime_formats.rbを作成。
Date::DATE_FORMATS[:default] = "%Y年%m月%d日"
Date::DATE_FORMATS[:date] = "%m/%d"
DateTime:DATE_FORMATS[:default] = "%Y年%m月%d日 %H時%M分"
DateTime:DATE_FORMATS[:datetime] = "%Y/%m/%d %H:%M"
[:default]とするとto_sメソッドを使った時の取得形式を変更できます。
[:名前]とするとto_s(:名前)の形で指定した形式で取得することができます。
lこの部分は好きな名前をつけることができます。
いくつでも指定が可能です。
JSのAjax関数を実行、DBから値を取得し、JSONでデータを変換、done関数で実行という順番に処理されている。
明日やること:
インクリメンタルサーチ実装を完了させる。
感想:
コードに対して少し疑問が生じた。
補足カリキュラムで時間をかけすぎた為遅れが生じた。
それでもなんとかカリキュラムを進めることができた。
もう少し、スピードアップと同時に理解力を深めていきたい。
開始81日目〜超初心者、文系、30代のスタート〜
本日学んだこと:
統合テスト：
フィーチャスペックは、Rspecを使って統合テストを行うためのスペックです。テスト環境用の仮想ブラウザを操作して、「特定のa要素をクリックする」「ボタンと対応するコントローラのアクションが動く」といった複雑なテストを書くことができます。
Capybaraは、ブラウザの操作を再現するのに必要なgemです。特定の要素をクリックしたり、フォームに値を入力したり、特定の要素が画面に表示されているかなど、様々なブラウザ上の動きをテストすることができます。
visitメソッドは引数にURL、 もしくはプレフィックスを指定することで、そのページに移動することができるメソッドです。
click_onメソッドは、指定したHTML要素をクリックするメソッドです。
※visitメソッドとclick_onメソッドは特によく使用する
Ruby on Railsで作成したアプリケーションの中でJavaScript/jQueryを使用する：
非同期通信（Ajax）
リクエスト後にレスポンスが帰ってきた際、ブラウザが再読み込みされること無く通信が行われる通信方法です。非同期通信は英語で"Asynchronous JavaScript + XML"と表現され、略してAjax（エイジャックス）と呼ばれます。Ajaxという表現は今後も頻繁に用いるので覚えておきましょう。
Java Script Object Notationの略で、データ交換を行うためのデータ記述形式の一種です。Rubyのハッシュと同様、キーとバリューの組み合わせでデータを表現する形式です。
respond_to というメソッドは、「リクエストがHTMLのレスポンス求めているのか、それともJSONのレスポンス求めているのか」を条件に条件分岐してくれます。
FormData
フォームのデータの送信に使用することができます。
必要なクラス名とIDを与える
後のajaxの非同期通信を実装するために、事前にコメントのフォームにクラス名を与える。
コメント機能実装のステップ
- jQueryを記述するためのファイルを作成する
- フォームが送信されたら、イベントが発火するようにする
- 非同期通信でコメントが保存されるようにする
- respond_toを使用してHTMLとJSONの場合で処理を分ける
- jbuilderを使用して、作成したメッセージをJSON形式で返す
- 返ってきたJSONをdoneメソッドで受取り、HTMLを作成する
- エラー時の処理を行う
attrメソッド
要素が持つ指定属性の値を返します。
要素が指定属性を持っていない場合、関数はundefinedを返します。
processDataオプション
デフォルトではtrueになっており、dataに指定したオブジェクトをクエリ文字列(例: msg.txt?b1=%E3%81%8B&b2=%E3%81%8D )に変換する役割があります。
クエリ文字列とは、WebブラウザなどがWebサーバに送信するデータをURLの末尾に特定の形式で表記したものの事です。
contentTypeオプション
サーバにデータのファイル形式を伝えるヘッダです。こちらはデフォルトでは「text/xml」でコンテンツタイプをXMLとして返してきます。
rails newコマンドでアプリケーションを作成した際にgemfileにデフォルトで記述されているgemで、入力データをJSON形式で出力するテンプレートエンジン
テンプレートリテラル記法
ダブルクオートやシングルクオートの代わりにバックティック文字で囲むことで、複数行文字列や文字列内挿入機能を使用できます。(shift+@)
インデックスでデータの検索を高速化
→データベースの機能の一つで、テーブル内のデータ検索を高速化することができる。
インデックスを貼るという。
2つのデメリット。
- データを保存・更新する速度が遅くなる
- データベースの容量を使う
jbuilder:array! メソッド
jbuilderという拡張子を持つテンプレートでは、JSONという名前のJbuilderオブジェクトが自動的に利用できるようになります。
Jbuilderオブジェクトは、JSON形式に返すための便利なメソッドがたくさん用意されており、配列で返したい場合はarray!を使用します。
array!を使用することで、JavaScript側に配列で値を送ることが可能です。
forEach メソッド
forEachは、与えられた関数を配列に含まれる各要素に対して一度ずつ呼び出します。
明日やること:
補足カリキュラムを完了する。
感想:
大河内さんと終わった後話した。
カリキュラムを進めることも大事だが、しっかり身に着けることを第一に勉強に時間を割く必要がある。
開始76日目〜超初心者、文系、30代のスタート〜
本日学んだこと:
redirect_to使い方
view の表示と直接は関係ないと書いたものの、redirect_to で呼び出せるのは GET のみであるため、実質的には、view を表示するために別の request を呼び出すといった使い方となる
render使い方
create アクションの後に、show ページを表示したい場合など、view を変更したいケースは頻繁にあると思います。
明示的に view を指定すると、指定した view が表示される。
基本的に、
- データを追加、更新、削除するときは、「リダイレクト」
- データの取得して表示するときは、「レンダー」
をします。
RSpecは、Rubyを元に作成されたテストに特化した言語です。 「rspec-rails」というGemをインストールすると、RSpecを利用できます。
factory_bot
簡単にダミーのインスタンスを作成することができるGem
例)
#factory_botを利用しない場合
user = User.new(nickname: "abe", email: "kkk@gmail.com", password: "00000000", password_confirmation: "00000000")
#factory_botを利用する場合
user = FactoryBot.build(:user)
コントローラーのテストとは、コントローラー内のメソッドであるアクションが呼ばれた際の挙動をチェックするもの。
ひとつのアクションに対して2つ以上のexample(it '' do ~ end)が必要です。
例)
describe ◯◯Controller do
describe 'HTTPメソッド名 #アクション名' do
it "インスタンス変数は期待した値になるか？" do
"擬似的にリクエストを行ったことにするコードを書く"
"エクスペクテーションを書く"
end
it "期待するビューに遷移するか？" do
"擬似的にリクエストを行ったことにするコードを書く"
"エクスペクテーションを書く"
end
end
明日やること:
chat-spaceわからない所を聞く。
テストの復習。
感想:
もう少し周りを見て気づくことができると良いと思う日だった。
TSUTAYA家電は集中できたので、充電器を買って望むようにしたい。
開始69日目〜超初心者、文系、30代のスタート〜
本日学んだこと：
rake db migrateを2回行うと、同じようなファイルが2回作成されてしまい、エラーが起こるので、実行したら確認した後先に進めること。
検証とコードを見て比較すると、記述したコードの階層が見えてくる。
＆(アンパサンド)は親要素の名前を引き継ぐBEMの記述方法。
BEMはCSSコードよりも短くコードを記述することができる。
VSコードのファイルは入れ換えたら復元はできない。
カリキュラムに記載しているファイル名、
自分で作成したファイル名、違いがあるから比較する。
明日やること：
中間報告まで行う。
感想：
これまでよりも一つのカリキュラムにかかる時間があまりにも増えている。
やはりフロント実装の遅れがかなり響いている。
このペースで果たして終わるのかどうか、そもそもエンジニアを目指すべきなのかから考えてしまう今日この頃。
開始66日目〜超初心者、文系、30代のスタート〜
・今日学んだこと
githubをcommitせずに切り替えると削除されてしまう。1度だと一時預かり場所になって、Redirectをすれば元に戻るが、2度やると削除されてしまう。投稿フォームの非表示方法、
.要素名{
}
で非表示にできる。
例)ファイルを開くボタンの設置、アイコンの子要素に設置することでアイコン周辺クリックでファイルを開ける。ブロック要素を重ねるには、position relative(親)&absolute(子)を使う。
・明日やること
chat-spaceのフロント実装の完成、ユーザー管理、グループ作成、メッセージ実装機能まで行う。
・感想
このまま進むと本当に一気に遅れるのではと不安を覚える。
明日は絶対に終えて次のカリキュラムに進んでやる。
もうそれしか言えない。
