毎日やったことを記録していく（2019/4/28 21日目）

雑記

今日やったこと

英語

TOEIC® L&R テスト 文法問題 でる1000問
  • 回答数：5問
iKnow
  • 新規：0個
  • 復習：50個
スタディサプリENGLISH
  • クイックワードクイズ：1サブセクション

開発

danime-nico-tools
  • fixturesの更新
  • 各ページにtitleを設定
ovto
  • Rails + ovtoでサンプルアプリケーション作成

知ったこと

meta_tags

SEO対策を行う際に便利なGem。
ページごとのtitleの設定も非常に楽そう。

ovtoを触ってわかったこと

  • State、Actions、MainComponentの3つのクラスを実装する必要がある
  • MainComponentクラスには必ずrenderメソッドを実装する必要がある
  • Stateクラスに要素を作るにはitemメソッドを使用する
  • itemメソッドの第一引数には要素の名前をシンボルで渡す。またキーワード引数でデフォルト値を設定できる
  • ActionsクラスやMainComponentクラスからStateクラスのitemを取り出す場合はstate.要素名の形で呼び出す
  • ActionsクラスでStateクラスに値を設定する場合は戻り値をHashで返す。(ex. { color: 'red' })
  • Actionsクラスで作成するメソッドに引数を設定する場合は、キーワード引数にする必要がある
  • MainComponentクラスからActionsクラスのメソッドを呼び出す際はactions.メソッド名の形で呼び出す
  • Actionsクラス内ならメソッド名だけで呼び出せる(同じクラス内のメソッドなので当たり前といえば当たり前かもしれない)
  • renderメソッドの中ではoメソッドを使って要素を作成していく
  • oメソッドの第一引数にはHTMLのタグ名を文字列で渡す
  • oメソッドの第一引数に'.hoge'という形で書くとclass属性にhogeを持ったdiv要素が生成される
  • oメソッドにブロックを渡すと入れ子にできる
  • renderメソッドのroot階層には要素は1つしか作れない
  • oメソッドの第二引数(以降？)にHashを渡すと要素の属性が設定できる
  • oメソッドの第二引数(以降？)に文字列を渡すと要素の中に文字列が設定される(ex. <h1>テスト</h1>)
  • onchange属性やonclick属性にactionを設定する場合は右のように書く → onclick: -> { actions.hoge }
  • onchange属性やonclick属性で操作後の値(ex. テキストボックスの入力後の値)をactionに渡したい場合は右のように書く → onclick: -> (e) { actions.hoge(fuga: e.target.value) }

感想等

ovto大分わかってきた

ovtoの扱いに大分なれてきた。
明日はファイルの分割やRailsのAPIとの非同期通信をやってみる予定。