We Are JavaScripters! @10th

Reactのフォーム画面開発で発生する問題をredux-formで解決する

• The best way to manage your form state in Redux.
• Reactでフォームの状態管理を簡単にやってくれる
• フォームの増幅がらくらく実装可能
• Vue版はないのかな…

Reactに不変の愛を

• 参照透過性：
  • 関数がどこでいつ呼び出されようと、入力が同じであれば、常に得られる結果が同じになる、ということを意味します。つまり、関数の評価結果が状態変化の副作用に左右されることが少ない（あるいは、まったくない）ということです（Wikiより）
• Elm：
  • コンパイルするとHTML、Javascript、CSSで出来た「ブラウザアプリケーション」を生成するというプログラミング言語
  • 純粋関数型の静的型付き言語で、型推論、型検査の機能がある
  • シンプルで小さいので、初めての関数型のプログラミング言語の勉強としてよさそう

Take into Accessibility in React

• Higher Order Components：
  • コンポーネントを引数にして、カスタマイズしたコンポーネントを返す
• a11y：
  • accessibilityの略（ a で始まり y で終わる間に11文字あるから）
• aria-hiddenかtabindex="-1"でフォーカス対象から外せる
• プレースホルダーアンカーリンク：
  • href属性が指定されていないa要素は、プレースホルダ（場所取り）を表す
  • このプレースホルダは「リンクは機能させたくないが、その内容だけは表示しておきたい」といった場面で使用する
• .is-***でなくaria属性にCSSを当てるとよい
• axesslab.com/accessibility-according-to-pwd：
  • ブラウジングするときに困難なことについて、障がいを持つ人たちがコメントしている
• pa11y ：
  • ページがアクセシブルかどうかをチェックするコマンドラインツール

CSSの嫌なところを解決できる。そうCSS Houdiniならね。

• Houdini：
  • W3C Houdini Task Forceで進められているプロジェクト
  • http://shibe97.hatenablog.com/entry/2016/12/05/083000
  • DOM以外のレイヤーにもJavaScriptからアクセスできるようにする

Chromeデベロッパーツールを自分色に染める

• CSSの未使用クラスを監視できるかな
• 実装ではVue.jsもつかえる（CSP版のみ）
• PLAIDエンジニアブログに詳細あり

同じ、とは

• Setは重複する値を許さないデータ構造
  • オブジェクトは対象外
• JSには同値を判定するロジックが4つある
  • ==, ===, Object.is(), SameValueZero()
• ハッシュ関数：
  • 同じ値だあれば同じ値を返す
  • ハッシュ関数が返す値を「ハッシュ値」という
  • あるハッシュ関数については、どんな入力を与えても一定のビット数でハッシュ値を返す