フロントエンドの技術を刷新した話し。
•Download as PPTX, PDF•
19 likes•8,246 views
2016.03.30 LancersNightの登壇資料。
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to フロントエンドの技術を刷新した話し。
Similar to フロントエンドの技術を刷新した話し。 (20)
フロントエンドの技術を刷新した話し。
- 2. 本日の内容
- 4. INDEX • 背景 • ES6 • React.js • Redux(Flux) • テスト＆構文チェック • キャッチアップ • 今後の課題 の7本です。
- 5. 自己紹介
- 6. 自己紹介 • 堀川 豊（３１） • Webアプリエンジニア • フロントエンドからサーバーサイドまで • ランサーズPFと周辺システムの開発 • 好きな言語Python • 前職ではソーシャルゲーム開発
- 7. 背景
- 9. 背景 様々な問題 • テスト無い • module化されていない • 処理が追いにくい • DOMとビジネスロジックが密結合
- 10. 背景 解決するには。。。 • テスト書く • module化 • 処理フローの明確化 • DOMとロジックの分離
- 12. ES６導入
- 13. ES6 次期JavaScriptの仕様 • Class • Promise • Generator • Arrow Function • let/const
- 14. ES6 ES6 to ES5
- 15. ES6 Browserify + babelify • babelifyでtranspile • Browserifyで依存関係の解決 • ファイルの結合も
- 16. ES6 変換できない機能もある • WeakMap • WeakSet • Proxy • SubClassing • Symbol 各ブラウザの対応状況はこちら http://kangax.github.io/compat-table/es6/
- 18. ES6 機能紹介 Class
- 21. ES6 機能紹介 let / const
- 25. トランスパイル後も意識 どんなコードが出力 されるかを意識する • strict modeで出力 • ES5の機能をフルに使って表現される • 変換出来ない機能もある
- 26. ページクラス 導入
- 28. 例えば マイページ
- 30. oh 処理を追っかけるのしんどい
- 32. PageClass PageClassのイベント • onBeforeRender - ページがレンダリングされる前に呼ばれる • onShow - ページがレンダリングされた後に呼ばれる • onBeforeunload - ページ離脱時によばれる • onPopstate
- 36. Redux (Flux)
- 37. Flux…?? アーキテクチャです • Facebookが提唱 • 特定のモジュールやFWの話じゃない • 設計パターンの一つ
- 39. 特徴 • データの流れが単一方向 • 各要素がイベントの発火と監視を行う • 要するにObserverパターン
- 40. Redux Redux • Fluxフレームワーク • Storeは一つ • Storeが状態を持たない • 状態はReducerが持つ
- 42. Fluxと同じ所 Fluxと同じ点 • 更新ロジックを一カ所にまとめている • アプリケーションが状態を直接変更しない • データの流れが単一方向
- 43. 3原則 Redux３原則 • Single source of truth(Storeは１つだけ) • State is read-only(状態は読み取り専用) • Mutations are written as pure functions(変更はすべてpureな関数で書かれる)
- 45. テスト & 構文チェック
- 46. テスト
- 47. テスト 厨二っぽいネーミングセンス。。。（結構好き） • テストランナー • この子だけではテストはできない • テストを簡単に実行するための機能
- 48. テスト • テストフレームワーク • テストを記述できる。 • TDD & BDDどちらにも対応
- 49. テスト • アサーションライブラリ • アサーション結果が分かりやすい • 記述がシンプル 新日のロゴを思い出す
- 52. 構文チェック ESLint
- 53. 構文チェック 特徴 • 検証ルールのon/off • カスタムルールが作成出来る • 豊富なプラグイン • ES6 & ES7をサポート • jsxのサポート
- 59. React.js
- 63. 仮想DOM 仮想DOM
- 64. props props
- 65. state state
- 66. ライフサイクル ライフサイクル
- 67. 解放 DOM操作からの解放 • DOMをこねくり回す世界から解放 • UIパーツとして再利用出来る • コンポーネントを再利用可能に • 開発スピードがあがった
- 68. キャッチアップ
- 70. キャッチアップ ES6 • Exploring ES6 • そもそもES5 • es6features
- 74. 速度がバラバラ キャッチアップの速度が バラバラ • メンバーの経験値はバラバラ • js初心者の人もいた • チームのReact力があがらない
- 75. キャッチアップ 輪読会
- 76. キャッチアップ • 前半１５分はメンバー全員で黙読 • 後半１５分は持ち回りで解説 • 毎日３０分やる 輪読会のルール
- 78. キャッチアップ • 新技術導入の先頭に立って引っ張る人 • 問題が起きても、 最後の砦となって解決する • 仮に一人になってもやりきるという強い意志 最後の砦（人柱） も必要
- 79. キャッチアップ redux • まずFluxについて学ぶ • 公式ドキュメント • サンプルコード
- 80. 今後の課題
- 81. 課題 課題色々 • CSSとの連携 • 今回導入した技術の普及 • CI導入
- 82. まとめ
- 83. まとめ まとめ • ES6でより構造化されたプログラミング • ページクラスでイベント＆リソース管理 • Redux & React.jsで複雑なSPAも作れる! • テスト＆構文チェックで幸せ • キャッチアップはチーム一丸となってやる • とは言え最後の砦は必要 ES6楽しいよ
- 84. ご静聴 ありがとう ございました
Editor's Notes
- JQuery一本でごりごりフロントエンド開発から React.js ES6 reduxへの移りかわった。
- 新メッセージの概要と今回導入する予定の技術について javascript周りのライブラリや仕組みについて
- 昨年１２月にチャット機能のリニューアルを行いました。 ランサーさんとクライアントさんが仕事のやりとりをするのに使っています。 メッセージチームはこれで仕事のやりとりしてるよ
- クラスや新たなデータ構造が使用可能に より構造化されたプログラミングが可能となる。 ブラウザによって実装にバラつきがあり ES6のコードをそのまま使用することは出来ない。
- BabelとはJavaScriptの新規格であるES6 ( ECMAScript 6th Edition/ECMAScript 2015 ) で書かれたJavaScriptコードを古いブラウザでも解釈できるようにES5の書式に変換し てくれるツール(JavaScriptトランスパイラ)です。 Babelを使ってES6をブラウザで使用する際に１つ問題があってexport/import構文が使えない。 正確にはBabelはimport / export構文をrequire構文に変換してくれるのですが、ブラウザがrequire構文に対応していないため利用できません。
- babelifyはBrowserifyのtransformでBrowserifyの処理の中にbabelの処理を組み込めるモジュールです。 ちなみに、Browserifyはrequire構文をブラウザでも利用できるようにするためのパッケージです。 Browserrifyを通してトランスパイルとファイルの連結＆難読化を行ってる。
- TranspilerやPolyfillでも再現出来ない。
- 変数、オブジェクト、クラスをexport/importできます。 ここではFileListClassをExportしている。 システムの規模がある程度の大きさになると 機能毎にプログラムをmodule化していき それらを組み合わせて、システムを構築する っていうのは定石の一つだと思います。 しかしjavascriptでは言語レベルでimport/exportがサポートされていなかったたので、細かくモジュールに分けるのが非常に面倒でした。
- 皆さん大好きなclass構文です。 現段階ではシンタックスシュガーに過ぎませんが 今までのクラスの書き方よりは分かりやすいです。 継承、getter/setter staticメソッドのサポートをしています。
- アロー関数が登場する前は、それぞれの関数がそれ自身の this の値を定義していました。
- アロー関数はthisの値を束縛するので setIntervalのコールバックで指定された関数のthisはPerson となります。
- 今までのECMAScriptにはグローバルスコープと関数スコープしかありませんでしたが、ES6からは新たにブロックスコープと定数が追加されました。 そのブロック内でのみ有効な変数を宣言する際に用いるのがletとなります。
- PHPで良く使ってるあれ。 undefinedを渡すと指定したデフォルト値が使用される
- バッククオート『 ` 』で囲んだ文字が、文字列リテラル同様に文字列として評価される。 リテラル中の『${』と『}』で囲まれた部分は式として評価される。
- strict モー ブラウザ上でES6が実行できるツールです。
- strict モー ブラウザ上でES6が実行できるツールです。
- Lancers独自の仕組み １ページにつき１つ存在する。 そのページ内で使用されるリソースや イベント等をこのクラスにまとめる。 全てのページクラスはLancersPageクラスを継承します。
- マイページ、依頼詳細、依頼フォーム 機能が多くて大きいページは表示要素ごとに CakePHPのElementで区切ることが多いと思います。 マイページは２０個以上のElementで構成されています。 恐らくElement内でさらに別のElementを読み込んでいるので、実際に読み込まれている数はもっと多いです。
- しんどいよね。。。。 なので、ページで発火するイベントや使用するリソースは PlageClassで一元管理してしまおう!という魂胆の元に作られました。
- PageClassを生成するPageClassFactoryなるFactoryクラスが存在する。 そのクラスにlocation.pathnameを渡すと pathを分解して適切なPageClassのインスタンスを生成する。
- PageClassを生成するPageClassFactoryなるFactoryクラスが存在する。 そのクラスにlocation.pathnameを渡すと pathを分解して適切なPageClassのインスタンスを生成する。
- リソースの読み込み処理 エラーハンドリング PHPの実行環境取得等
- View MVCの「view」と同じユーザーインタラクションに応じて Action Creatorsを叩く。 Storeの監視して、変更を検知する。 ReactのComponent。 Action Creators MVCのController的な役割 ViewとStoreの仲介役。 viewから呼び出されてStoreに通知 Dispatcher Storeに向けてメッセージを発行する場合は必ずココを介する Store間の処理順序の依存性を解決している Store ビジネスロジックと「状態」を持つ シングルトン Action Creatorsと同数あるはず
- １処理が追っかけやすい。viewから順番に見ていけばいい。 ２疎結合なので、変更に強いしテスタブルでもある。
- Javascriptのシングルページアプリケーションは複雑になってきてstate(状態)を管理するのはしんどくなってきた。新機能開発するのもバグ修正するのもかなり辛い。 根本的に、「変化」と「非同期」を"同時"にコントロールするのは人間には無理がある。Reactはその問題に対してViewレイヤーで非同期と直接DOM操作を取り除くことで解決したけども、state(状態)の管理は開発者に委ねられたままなので、Reduxはそこを解決するためにある。 Reduxは3原則に則って状態変化の流れを制限することで、状態を管理できるようにしている。
- (FluxならStore, ReduxならReducer)
- 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を分割していく
- これを使用することで、Reduxの変更をViewへ通知することが可能。 Reducerで変更が発生すると変更内容を propsに渡してくれる。
- このツールは元々AngularJSのための作られたそうで、 クライアントサイドのJavascriptコードのテストを簡単に実行することができます。 このツール自体 はテストランナーで、テストフレームワークを使用してテストを行います。 テストフレームワークを簡単に実行するための機能。 実行するブラウザやテストフレームワーク、テストファイルのディレクトリを指定すると。指定したディレクトリを監視して、変更があれば即テスト実行してくれる。 browserrifyと連動できるので、ES6でテスト記述することも可能
- Expressの開発者が作ったテストフレームワーク テストフレームワーク。 テストを記述する関数群を提供し、それらの関数を使って書かれたテストの結果を判定、集計した上で結果を表示する機能を持ちます。 TDD（テスト駆動開発）とBDD（振る舞い駆動開発）の記述方法に対応していま シェア http://blog.jetbrains.com/webstorm/2015/04/dailyjs-survey-results-2014/
- twadaさんが作ったアサーションライブラリ 実行結果を判定するにはアサーションライブラリが必要です。引数にメソッドの実行結果と、想定する戻り値を指定することにより、その結果が満たされていなければExceptionを発行してテスティングフレームワークに伝えます。 記述がシンプルかつアサーション失敗時の情報が分かりやすく表示される
- わかりやす！！！ 使用されている変数の情報等を分かりやすく表示してくれる。
- ESLint は JavaScript の静的検証ツールです。コードを実行する前に明らかなバグを見つけたり、括弧やスペースの使い方などのスタイルを統一したりするのに役立ちます。同様のツールとしては JSLint, JSHint, JSCS 等があります。
- ESLint は JavaScript の静的検証ツールです。コードを実行する前に明らかなバグを見つけたり、括弧やスペースの使い方などのスタイルを統一したりするのに役立ちます。同様のツールとしては JSLint, JSHint, JSCS 等があります。 コーディングスタイルの統一が主目的。 browseryfiと連携して、lintでチェックをかけてエラーがある場合はビルドしない
- 警告がたくさん出てるのはきにすんな
- 警告がたくさん出てるのはきにすんな
- コンポーネントと言われる機能を実装して 画面を構成していく。 Redux or Fluxのviewの部分を担う
- 最小限コンポーネント構成です。 Reactはrenderコンポーネントが必須のメソッドとなり これがあれば動作します。 renderでreturnされているHTMLはjsxというシンタックスで記述されます。 renderメソッドはピュアであることが求められるので この中でstateや自身を更新するような記述をしるのはNG
- クリックイベントを追加してみました。 onclickイベントがインラインで記述されるわけではない
- 生DOMの操作は激重くんですね DOMの状態を持つ構造体をDOMとは別に持つことで 高速な差分計算が可能になり、描画速度が向上する。 この差分計算に必要なのがkeyです。 keyはVirtualDOMのdiffから実際のDOMに反映させるときに最小限の変更にするために使われます。
- コンポーネントのアトリビュートとして渡されたものがpropsとなります。 propsは外部から渡されたものなので、変更を加えてはダメです。
- Immutableな値であったのに対してMutableな値を定義することが出来ます。 ただし、現状原則使用していません。 状態は基本reduxに置くようにしています。
- React.jsではComponentの状態の変化に合わせて色々メソッドを呼んでくれるのでそれに合わせて初期化や後始末な処理を書くことが出来ます。 コンポーネント更新前 コンポーネント更新後 render描画前 render描画直後
- 電子書籍版とオンライン版があってオンライン版は無料で読める 内容は適宜改正されている。 たくさん書籍を読んだわけではないが、これは良かった。
- 機能とコード例が豊富に載っているので非常に参考になる。 ここに載ってるコードを写経して実行するだけでも勉強になる。