フロントエンドの 技術を刷新した話し
本日の内容
内容 フロントエンド の技術刷新について
INDEX • 背景 • ES6 • React.js • Redux(Flux) • テスト＆構文チェック • キャッチアップ • 今後の課題 の7本です。
自己紹介
自己紹介 • 堀川 豊（３１） • Webアプリエンジニア • フロントエンドからサーバーサイドまで • ランサーズPFと周辺システムの開発 • 好きな言語Python • 前職ではソーシャルゲーム開発
背景
背景 メッセージ機能リニューアル
背景 様々な問題 • テスト無い • module化されていない • 処理が追いにくい • DOMとビジネスロジックが密結合
背景 解決するには。。。 • テスト書く • module化 • 処理フローの明確化 • DOMとロジックの分離
背景 新技術を導入 色々入れました。
ES６導入
ES6 次期JavaScriptの仕様 • Class • Promise • Generator • Arrow Function • let/const
ES6 ES6 to ES5
ES6 Browserify + babelify • babelifyでtranspile • Browserifyで依存関係の解決 • ファイルの結合も
ES6 変換できない機能もある • WeakMap • WeakSet • Proxy • SubClassing • Symbol 各ブラウザの対応状況はこちら http://kangax.github.io/compat-table/es6/
ES6 機能紹介 import/export
ES6 機能紹介 Class
ES6 機能紹介 Arrow function
ES6 機能紹介 Arrow function
ES6 機能紹介 let / const
ES6 機能紹介 Default Parameter
ES6 機能紹介 Template strings
ブラウザ上で簡単に試せるツールも ブラウザで簡単に試せる https://babeljs.io/repl/
トランスパイル後も意識 どんなコードが出力 されるかを意識する • strict modeで出力 • ES5の機能をフルに使って表現される • 変換出来ない機能もある
ページクラス 導入
PageClass 処理フローの明確化 発火するイベントや 読み込まれるリソースを管理するクラス
例えば マイページ
さらに… Element毎に色んな処理が
oh 処理を追っかけるのしんどい
PageClass イベントとリソースを一元管理
PageClass PageClassのイベント • onBeforeRender - ページがレンダリングされる前に呼ばれる • onShow - ページがレンダリングされた後に呼ばれる • onBeforeunload - ページ離脱時によ...
PageClassの生成ロジック URLを元に生成する インスタンスを決定している /mypage/message new MypageMessagePage();
PageClassの生成ロジック URLを元に保存ディレクトリ も決定 /mypage/message gulp/src/js/mypage/mypage_message_page.js
LancersPage PageClassの基底クラス 全てのページで必要な共通処理を持っている • リソースの読み込み処理 • エラーハンドリング • PHPの実行環境取得
Redux (Flux)
Flux…?? アーキテクチャです • Facebookが提唱 • 特定のモジュールやFWの話じゃない • 設計パターンの一つ
概念図 https://github.com/facebook/flux
特徴 • データの流れが単一方向 • 各要素がイベントの発火と監視を行う • 要するにObserverパターン
Redux Redux • Fluxフレームワーク • Storeは一つ • Storeが状態を持たない • 状態はReducerが持つ
Reduxの特徴は? 状態管理に特化した フレームワーク
Fluxと同じ所 Fluxと同じ点 • 更新ロジックを一カ所にまとめている • アプリケーションが状態を直接変更しない • データの流れが単一方向
3原則 Redux３原則 • Single source of truth(Storeは１つだけ) • State is read-only(状態は読み取り専用) • Mutations are written as pure function...
reduxの変更を伝える react-redux ActionCreatorやReduxのstateを React.jsのpropsにbindさせる。 https://github.com/rackt/react-redux
テスト & 構文チェック
テスト
テスト 厨二っぽいネーミングセンス。。。（結構好き） • テストランナー • この子だけではテストはできない • テストを簡単に実行するための機能
テスト • テストフレームワーク • テストを記述できる。 • TDD & BDDどちらにも対応
テスト • アサーションライブラリ • アサーション結果が分かりやすい • 記述がシンプル 新日のロゴを思い出す
50サンプル ES6で書いております
分かりやすい ES6で書いております
構文チェック ESLint
構文チェック 特徴 • 検証ルールのon/off • カスタムルールが作成出来る • 豊富なプラグイン • ES6 & ES7をサポート • jsxのサポート
構文チェック .eslintrc 設定ファイルに適応するルールや その詳細を設定していく。 airbnb等が自社のルールを プラグインとして公開している
構文チェック 無理はしない 他社のルールをそのまま適応しても エラーが大量に出て、 おおかみ少年になる可能性がある。
構文チェック gulpと組み合わせる トランスパイルの直前にlintを走らせて エラーが存在する場合は、トランスパイルを 行わない。
構文チェック lintの結果を通知
構文チェック レポートを自動で表示
React.js
React.js Facebookが開発した UIライブラリ
component？ jsとマークアップの融合
component？ onClickイベントを追加
仮想DOM 仮想DOM
props props
state state
ライフサイクル ライフサイクル
解放 DOM操作からの解放 • DOMをこねくり回す世界から解放 • UIパーツとして再利用出来る • コンポーネントを再利用可能に • 開発スピードがあがった
キャッチアップ
キャッチアップ 経験者などいない！ React。ES6。Reduxを やったことある人間は０!
キャッチアップ ES6 • Exploring ES6 • そもそもES5 • es6features
キャッチアップ Exploring ES6 http://exploringjs.com/
キャッチアップ es6features https://github.com/lukehoban/es6features
キャッチアップ React.js • 入門React • チュートリアル
速度がバラバラ キャッチアップの速度が バラバラ • メンバーの経験値はバラバラ • js初心者の人もいた • チームのReact力があがらない
キャッチアップ 輪読会
キャッチアップ • 前半１５分はメンバー全員で黙読 • 後半１５分は持ち回りで解説 • 毎日３０分やる 輪読会のルール
キャッチアップ • 体系的な知識が付く • メンバー同士でサポートし合える メンバー一丸となって 学ぶ
キャッチアップ • 新技術導入の先頭に立って引っ張る人 • 問題が起きても、 最後の砦となって解決する • 仮に一人になってもやりきるという強い意志 最後の砦（人柱） も必要
キャッチアップ redux • まずFluxについて学ぶ • 公式ドキュメント • サンプルコード
今後の課題
課題 課題色々 • CSSとの連携 • 今回導入した技術の普及 • CI導入
まとめ
まとめ まとめ • ES6でより構造化されたプログラミング • ページクラスでイベント＆リソース管理 • Redux & React.jsで複雑なSPAも作れる! • テスト＆構文チェックで幸せ • キャッチアップはチーム一丸となってやる • ...
ご静聴 ありがとう ございました
Upcoming SlideShare
Loading in …5
×

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

1,834 views

Published on

2016.03.30 LancersNightの登壇資料。

Published in: Engineering
0 Comments
5 Likes
Statistics
Notes
no profile picture user

  • Be the first to comment

No Downloads
Views
Total views
1,834
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide
  • 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描画直後
  • 電子書籍版とオンライン版があってオンライン版は無料で読める

    内容は適宜改正されている。

    たくさん書籍を読んだわけではないが、これは良かった。
  • 機能とコード例が豊富に載っているので非常に参考になる。
    ここに載ってるコードを写経して実行するだけでも勉強になる。

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

    1. 1. フロントエンドの 技術を刷新した話し
    2. 2. 本日の内容
    3. 3. 内容 フロントエンド の技術刷新について
    4. 4. INDEX • 背景 • ES6 • React.js • Redux(Flux) • テスト＆構文チェック • キャッチアップ • 今後の課題 の7本です。
    5. 5. 自己紹介
    6. 6. 自己紹介 • 堀川 豊（３１） • Webアプリエンジニア • フロントエンドからサーバーサイドまで • ランサーズPFと周辺システムの開発 • 好きな言語Python • 前職ではソーシャルゲーム開発
    7. 7. 背景
    8. 8. 背景 メッセージ機能リニューアル
    9. 9. 背景 様々な問題 • テスト無い • module化されていない • 処理が追いにくい • DOMとビジネスロジックが密結合
    10. 10. 背景 解決するには。。。 • テスト書く • module化 • 処理フローの明確化 • DOMとロジックの分離
    11. 11. 背景 新技術を導入 色々入れました。
    12. 12. ES６導入
    13. 13. ES6 次期JavaScriptの仕様 • Class • Promise • Generator • Arrow Function • let/const
    14. 14. ES6 ES6 to ES5
    15. 15. ES6 Browserify + babelify • babelifyでtranspile • Browserifyで依存関係の解決 • ファイルの結合も
    16. 16. ES6 変換できない機能もある • WeakMap • WeakSet • Proxy • SubClassing • Symbol 各ブラウザの対応状況はこちら http://kangax.github.io/compat-table/es6/
    17. 17. ES6 機能紹介 import/export
    18. 18. ES6 機能紹介 Class
    19. 19. ES6 機能紹介 Arrow function
    20. 20. ES6 機能紹介 Arrow function
    21. 21. ES6 機能紹介 let / const
    22. 22. ES6 機能紹介 Default Parameter
    23. 23. ES6 機能紹介 Template strings
    24. 24. ブラウザ上で簡単に試せるツールも ブラウザで簡単に試せる https://babeljs.io/repl/
    25. 25. トランスパイル後も意識 どんなコードが出力 されるかを意識する • strict modeで出力 • ES5の機能をフルに使って表現される • 変換出来ない機能もある
    26. 26. ページクラス 導入
    27. 27. PageClass 処理フローの明確化 発火するイベントや 読み込まれるリソースを管理するクラス
    28. 28. 例えば マイページ
    29. 29. さらに… Element毎に色んな処理が
    30. 30. oh 処理を追っかけるのしんどい
    31. 31. PageClass イベントとリソースを一元管理
    32. 32. PageClass PageClassのイベント • onBeforeRender - ページがレンダリングされる前に呼ばれる • onShow - ページがレンダリングされた後に呼ばれる • onBeforeunload - ページ離脱時によばれる • onPopstate
    33. 33. PageClassの生成ロジック URLを元に生成する インスタンスを決定している /mypage/message new MypageMessagePage();
    34. 34. PageClassの生成ロジック URLを元に保存ディレクトリ も決定 /mypage/message gulp/src/js/mypage/mypage_message_page.js
    35. 35. LancersPage PageClassの基底クラス 全てのページで必要な共通処理を持っている • リソースの読み込み処理 • エラーハンドリング • PHPの実行環境取得
    36. 36. Redux (Flux)
    37. 37. Flux…?? アーキテクチャです • Facebookが提唱 • 特定のモジュールやFWの話じゃない • 設計パターンの一つ
    38. 38. 概念図 https://github.com/facebook/flux
    39. 39. 特徴 • データの流れが単一方向 • 各要素がイベントの発火と監視を行う • 要するにObserverパターン
    40. 40. Redux Redux • Fluxフレームワーク • Storeは一つ • Storeが状態を持たない • 状態はReducerが持つ
    41. 41. Reduxの特徴は? 状態管理に特化した フレームワーク
    42. 42. Fluxと同じ所 Fluxと同じ点 • 更新ロジックを一カ所にまとめている • アプリケーションが状態を直接変更しない • データの流れが単一方向
    43. 43. 3原則 Redux３原則 • Single source of truth(Storeは１つだけ) • State is read-only(状態は読み取り専用) • Mutations are written as pure functions(変更はすべてpureな関数で書かれる)
    44. 44. reduxの変更を伝える react-redux ActionCreatorやReduxのstateを React.jsのpropsにbindさせる。 https://github.com/rackt/react-redux
    45. 45. テスト & 構文チェック
    46. 46. テスト
    47. 47. テスト 厨二っぽいネーミングセンス。。。（結構好き） • テストランナー • この子だけではテストはできない • テストを簡単に実行するための機能
    48. 48. テスト • テストフレームワーク • テストを記述できる。 • TDD & BDDどちらにも対応
    49. 49. テスト • アサーションライブラリ • アサーション結果が分かりやすい • 記述がシンプル 新日のロゴを思い出す
    50. 50. 50サンプル ES6で書いております
    51. 51. 分かりやすい ES6で書いております
    52. 52. 構文チェック ESLint
    53. 53. 構文チェック 特徴 • 検証ルールのon/off • カスタムルールが作成出来る • 豊富なプラグイン • ES6 & ES7をサポート • jsxのサポート
    54. 54. 構文チェック .eslintrc 設定ファイルに適応するルールや その詳細を設定していく。 airbnb等が自社のルールを プラグインとして公開している
    55. 55. 構文チェック 無理はしない 他社のルールをそのまま適応しても エラーが大量に出て、 おおかみ少年になる可能性がある。
    56. 56. 構文チェック gulpと組み合わせる トランスパイルの直前にlintを走らせて エラーが存在する場合は、トランスパイルを 行わない。
    57. 57. 構文チェック lintの結果を通知
    58. 58. 構文チェック レポートを自動で表示
    59. 59. React.js
    60. 60. React.js Facebookが開発した UIライブラリ
    61. 61. component？ jsとマークアップの融合
    62. 62. component？ onClickイベントを追加
    63. 63. 仮想DOM 仮想DOM
    64. 64. props props
    65. 65. state state
    66. 66. ライフサイクル ライフサイクル
    67. 67. 解放 DOM操作からの解放 • DOMをこねくり回す世界から解放 • UIパーツとして再利用出来る • コンポーネントを再利用可能に • 開発スピードがあがった
    68. 68. キャッチアップ
    69. 69. キャッチアップ 経験者などいない！ React。ES6。Reduxを やったことある人間は０!
    70. 70. キャッチアップ ES6 • Exploring ES6 • そもそもES5 • es6features
    71. 71. キャッチアップ Exploring ES6 http://exploringjs.com/
    72. 72. キャッチアップ es6features https://github.com/lukehoban/es6features
    73. 73. キャッチアップ React.js • 入門React • チュートリアル
    74. 74. 速度がバラバラ キャッチアップの速度が バラバラ • メンバーの経験値はバラバラ • js初心者の人もいた • チームのReact力があがらない
    75. 75. キャッチアップ 輪読会
    76. 76. キャッチアップ • 前半１５分はメンバー全員で黙読 • 後半１５分は持ち回りで解説 • 毎日３０分やる 輪読会のルール
    77. 77. キャッチアップ • 体系的な知識が付く • メンバー同士でサポートし合える メンバー一丸となって 学ぶ
    78. 78. キャッチアップ • 新技術導入の先頭に立って引っ張る人 • 問題が起きても、 最後の砦となって解決する • 仮に一人になってもやりきるという強い意志 最後の砦（人柱） も必要
    79. 79. キャッチアップ redux • まずFluxについて学ぶ • 公式ドキュメント • サンプルコード
    80. 80. 今後の課題
    81. 81. 課題 課題色々 • CSSとの連携 • 今回導入した技術の普及 • CI導入
    82. 82. まとめ
    83. 83. まとめ まとめ • ES6でより構造化されたプログラミング • ページクラスでイベント＆リソース管理 • Redux & React.jsで複雑なSPAも作れる! • テスト＆構文チェックで幸せ • キャッチアップはチーム一丸となってやる • とは言え最後の砦は必要 ES6楽しいよ
    84. 84. ご静聴 ありがとう ございました

    ×