4月メモ・リンク集

メモ集 angular ci rx ngrx typescript ruby rails javascript

4 月に調べたことのメモです。

Angular 関連

Angular 6

リリース前の予習に。

モーダルの状態を ngrx で管理する

f:id:ryotah:20180506150121p:plain
  • UI state management with Redux in Angular 4 (Example) | hack.guides()
    • core => layout => openedModalName: string という state を用意
    • openedModalName を受け取るコンポーネントを AppComponentに配置
    • @Input の setter でうけとりモーダルの Open/Close をハンドリングする
  • angular-modal-state-with-ngrx-wip - StackBlitz
    • ngrx で管理する方法と今まで通りの方法の比較デモ
    • （途中まで）
  • 今の考え、実装に必要なタスク
    • 複数の種類のモーダルを管理するファサードっぽいモーダルコンポーネントを用意
    • 非同期で取得したデータも渡す必要
    • Esc キーや Backdrop クリックでモーダルを閉じた時のアクション
      • => 閉じた時に ModalRef からイベントなど取得できたかも
    • モーダル内で新たなアクション、かつコンテキストに左右されるようなアクションをどうハンドリングするか
    • それらを踏まえたメリット
    • 開発中のアプリケーションでは、アクション発行 => Effect 層でモーダルオープン
      • （中途半端な気もしている）
      • ModalRef を利用したい場合

ngrx の状態管理を Router (URL) 起点にする

f:id:ryotah:20180506150105p:plain

Rails 関連

マイグレーション

  • Railsのmigrationの基本とレシピ集 - Rails Webook

    • ※upとdownは、changeメソッドの代わりに使います。 upはrake db:migrateの実行時に実行され、downはrake db:rollback時に実行されます。

    • データの投入 rake db:seedコマンド

  • rake db:drop, rake db:schema:load

Active Record クエリインターフェイス

Active Record コールバック

class Order < ApplicationRecord
  before_save :normalize_card_number, if: :paid_with_card?
end

class Order < ApplicationRecord
  before_save :normalize_card_number,
    if: Proc.new { |order| order.paid_with_card? }
end

JSのテスト 関連

spyOn を利用してインスタンスメソッドの挙動を確認する

it('calls self bar method', () => {
  spyOn(Foo.prototype, 'bar');
  new Foo();
  expect(Foo.prototype.bar).toHaveBeenCalled();
});

Docker

Circle CI

- run:
      name: Install Chrome
      command: |
        wget -q -O - https://dl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
        sudo sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
        sudo apt-get update
        sudo apt-get -y install google-chrome-stable

TypeScript

http://www.typescriptlang.org/docs/handbook/advanced-types.html#mapped-types

Mapped types は便利。

type Keys = 'option1' | 'option2';
type Flags = { [K in Keys]: boolean };

// 以下は自分の利用例
export const DateFormats: {
  [key in DateFormatTypes]: DateTimeFormatOptions
}
...
export const DateFormats: {
  [key in DateFormatTypes]: DateTimeFormatOptions
}

Partial<T>も最近使うようになった。

Note that Readonly and Partial are so useful, they are included in TypeScript’s standard library along with Pick and Record:

（Pick, Recordはまだ使ったことない）

その他