フロントエンドの技術を刷新した話し。

Editor's Notes

1. JQuery一本でごりごりフロントエンド開発から React.js ES6 reduxへの移りかわった。
2. 新メッセージの概要と今回導入する予定の技術について javascript周りのライブラリや仕組みについて
3. 昨年１２月にチャット機能のリニューアルを行いました。 ランサーさんとクライアントさんが仕事のやりとりをするのに使っています。 メッセージチームはこれで仕事のやりとりしてるよ
4. クラスや新たなデータ構造が使用可能に より構造化されたプログラミングが可能となる。 ブラウザによって実装にバラつきがあり ES6のコードをそのまま使用することは出来ない。
5. BabelとはJavaScriptの新規格であるES6 ( ECMAScript 6th Edition/ECMAScript 2015 ) で書かれたJavaScriptコードを古いブラウザでも解釈できるようにES5の書式に変換し てくれるツール(JavaScriptトランスパイラ)です。 Babelを使ってES6をブラウザで使用する際に１つ問題があってexport/import構文が使えない。 正確にはBabelはimport / export構文をrequire構文に変換してくれるのですが、ブラウザがrequire構文に対応していないため利用できません。
6. babelifyはBrowserifyのtransformでBrowserifyの処理の中にbabelの処理を組み込めるモジュールです。 ちなみに、Browserifyはrequire構文をブラウザでも利用できるようにするためのパッケージです。 Browserrifyを通してトランスパイルとファイルの連結＆難読化を行ってる。
7. TranspilerやPolyfillでも再現出来ない。
8. 変数、オブジェクト、クラスをexport/importできます。 ここではFileListClassをExportしている。 システムの規模がある程度の大きさになると 機能毎にプログラムをmodule化していき それらを組み合わせて、システムを構築する っていうのは定石の一つだと思います。 しかしjavascriptでは言語レベルでimport/exportがサポートされていなかったたので、細かくモジュールに分けるのが非常に面倒でした。
9. 皆さん大好きなclass構文です。 現段階ではシンタックスシュガーに過ぎませんが 今までのクラスの書き方よりは分かりやすいです。 継承、getter/setter staticメソッドのサポートをしています。
10. アロー関数が登場する前は、それぞれの関数がそれ自身の this の値を定義していました。
11. アロー関数はthisの値を束縛するので setIntervalのコールバックで指定された関数のthisはPerson となります。
12. 今までのECMAScriptにはグローバルスコープと関数スコープしかありませんでしたが、ES6からは新たにブロックスコープと定数が追加されました。 そのブロック内でのみ有効な変数を宣言する際に用いるのがletとなります。
13. PHPで良く使ってるあれ。 undefinedを渡すと指定したデフォルト値が使用される
14. バッククオート『 ` 』で囲んだ文字が、文字列リテラル同様に文字列として評価される。 リテラル中の『${』と『}』で囲まれた部分は式として評価される。
15. strict モー ブラウザ上でES6が実行できるツールです。
16. strict モー ブラウザ上でES6が実行できるツールです。
17. Lancers独自の仕組み １ページにつき１つ存在する。 そのページ内で使用されるリソースや イベント等をこのクラスにまとめる。 全てのページクラスはLancersPageクラスを継承します。
18. マイページ、依頼詳細、依頼フォーム 機能が多くて大きいページは表示要素ごとに CakePHPのElementで区切ることが多いと思います。 マイページは２０個以上のElementで構成されています。 恐らくElement内でさらに別のElementを読み込んでいるので、実際に読み込まれている数はもっと多いです。
19. しんどいよね。。。。 なので、ページで発火するイベントや使用するリソースは PlageClassで一元管理してしまおう!という魂胆の元に作られました。
20. PageClassを生成するPageClassFactoryなるFactoryクラスが存在する。 そのクラスにlocation.pathnameを渡すと pathを分解して適切なPageClassのインスタンスを生成する。
21. PageClassを生成するPageClassFactoryなるFactoryクラスが存在する。 そのクラスにlocation.pathnameを渡すと pathを分解して適切なPageClassのインスタンスを生成する。
22. リソースの読み込み処理 エラーハンドリング PHPの実行環境取得等
23. View MVCの「view」と同じユーザーインタラクションに応じて Action Creatorsを叩く。 Storeの監視して、変更を検知する。 ReactのComponent。 Action Creators MVCのController的な役割 ViewとStoreの仲介役。 viewから呼び出されてStoreに通知 Dispatcher Storeに向けてメッセージを発行する場合は必ずココを介する Store間の処理順序の依存性を解決している Store ビジネスロジックと「状態」を持つ シングルトン Action Creatorsと同数あるはず
24. １処理が追っかけやすい。viewから順番に見ていけばいい。 ２疎結合なので、変更に強いしテスタブルでもある。
25. Javascriptのシングルページアプリケーションは複雑になってきてstate(状態)を管理するのはしんどくなってきた。新機能開発するのもバグ修正するのもかなり辛い。 根本的に、「変化」と「非同期」を"同時"にコントロールするのは人間には無理がある。Reactはその問題に対してViewレイヤーで非同期と直接DOM操作を取り除くことで解決したけども、state(状態)の管理は開発者に委ねられたままなので、Reduxはそこを解決するためにある。 Reduxは3原則に則って状態変化の流れを制限することで、状態を管理できるようにしている。
26. (FluxならStore, ReduxならReducer)
27. 1. Single source of truth(ソースは１つだけ) アプリケーション全体の状態(state)はツリーの形で１つのオブジェクトで作られ、１つのストアに保存される stateが保存しやすいので、ユニバーサルアプリケーションがつくりやすい stateが一つだから、デバッグしやすい、開発しやすい 2. State is read-only(状態は読み取り専用) 状態を変更する手段は、変更内容をもったactionオブジェクトを発行して実行するだけ ビューやコールバックが状態を直接変更させることはできない 変更は一つずつ順番に行なわれる actionはオブジェクトなので、保存可能であり、テストしやすい 3. Mutations are written as pure functions(変更はすべてpureな関数で書かれる) アクションがどのように状態を変更するかを「Reducer」で行う。 「Reducer」は状態とアクションを受けて、新しい状態を返す関数である。 現在のstateオブジェクトを変更することはせずに、新しいstateオブジェクトを作って返すというのがポイント。 開発するときは、最初はアプリケーションで一つのReducerを用意して、巨大化してきたらReducerを分割していく
28. これを使用することで、Reduxの変更をViewへ通知することが可能。 Reducerで変更が発生すると変更内容を propsに渡してくれる。
29. このツールは元々AngularJSのための作られたそうで、 クライアントサイドのJavascriptコードのテストを簡単に実行することができます。 このツール自体 はテストランナーで、テストフレームワークを使用してテストを行います。 テストフレームワークを簡単に実行するための機能。 実行するブラウザやテストフレームワーク、テストファイルのディレクトリを指定すると。指定したディレクトリを監視して、変更があれば即テスト実行してくれる。 browserrifyと連動できるので、ES6でテスト記述することも可能
30. Expressの開発者が作ったテストフレームワーク テストフレームワーク。 テストを記述する関数群を提供し、それらの関数を使って書かれたテストの結果を判定、集計した上で結果を表示する機能を持ちます。 TDD（テスト駆動開発）とBDD（振る舞い駆動開発）の記述方法に対応していま シェア http://blog.jetbrains.com/webstorm/2015/04/dailyjs-survey-results-2014/
31. twadaさんが作ったアサーションライブラリ 実行結果を判定するにはアサーションライブラリが必要です。引数にメソッドの実行結果と、想定する戻り値を指定することにより、その結果が満たされていなければExceptionを発行してテスティングフレームワークに伝えます。 記述がシンプルかつアサーション失敗時の情報が分かりやすく表示される
32. わかりやす！！！ 使用されている変数の情報等を分かりやすく表示してくれる。
33. ESLint は JavaScript の静的検証ツールです。コードを実行する前に明らかなバグを見つけたり、括弧やスペースの使い方などのスタイルを統一したりするのに役立ちます。同様のツールとしては JSLint, JSHint, JSCS 等があります。
34. ESLint は JavaScript の静的検証ツールです。コードを実行する前に明らかなバグを見つけたり、括弧やスペースの使い方などのスタイルを統一したりするのに役立ちます。同様のツールとしては JSLint, JSHint, JSCS 等があります。 コーディングスタイルの統一が主目的。 browseryfiと連携して、lintでチェックをかけてエラーがある場合はビルドしない
35. 警告がたくさん出てるのはきにすんな
36. 警告がたくさん出てるのはきにすんな
37. コンポーネントと言われる機能を実装して 画面を構成していく。 Redux or Fluxのviewの部分を担う
38. 最小限コンポーネント構成です。 Reactはrenderコンポーネントが必須のメソッドとなり これがあれば動作します。 renderでreturnされているHTMLはjsxというシンタックスで記述されます。 renderメソッドはピュアであることが求められるので この中でstateや自身を更新するような記述をしるのはNG
39. クリックイベントを追加してみました。 onclickイベントがインラインで記述されるわけではない
40. 生DOMの操作は激重くんですね DOMの状態を持つ構造体をDOMとは別に持つことで 高速な差分計算が可能になり、描画速度が向上する。 この差分計算に必要なのがkeyです。 keyはVirtualDOMのdiffから実際のDOMに反映させるときに最小限の変更にするために使われます。
41. コンポーネントのアトリビュートとして渡されたものがpropsとなります。 propsは外部から渡されたものなので、変更を加えてはダメです。
42. Immutableな値であったのに対してMutableな値を定義することが出来ます。 ただし、現状原則使用していません。 状態は基本reduxに置くようにしています。
43. React.jsではComponentの状態の変化に合わせて色々メソッドを呼んでくれるのでそれに合わせて初期化や後始末な処理を書くことが出来ます。 コンポーネント更新前 コンポーネント更新後 render描画前 render描画直後
44. 電子書籍版とオンライン版があってオンライン版は無料で読める 内容は適宜改正されている。 たくさん書籍を読んだわけではないが、これは良かった。
45. 機能とコード例が豊富に載っているので非常に参考になる。 ここに載ってるコードを写経して実行するだけでも勉強になる。