5月度TGIFの吉井さん発表資料

1. js初心者だった僕が武器を
手に入れるまで
~ Fall in Love with React ~
Yoshi

2. 自己紹介
・名前: 吉井竜太
・地元: 島根県松江市(Rubyの発信地)
・Qiita (http://qiita.com/RyutaYoshi)
google翻訳みたいなものを自作してみた
(http://qiita.com/RyutaYoshi/items/9a809c0a03e02874fabb)
React.jsとRefluxJSを用いた快適view生活
(http://qiita.com/RyutaYoshi/items/267ea5d1eb0e2719eb7f)

3. 本題に入る前に
最近の吉井の事情

4. 1月の面談にて
1年振り返ってどうだっ
た？
もっと要望とかある？
もっと画面ビュンビュ
ンしたいので、
js勉強したいっす！！
あっ、丁度フロントエ
ンドやる人探してたし
挑戦してみる？ 是非是非！
やりたいっす！！！

5. その月の全体会

7. フロントエンダー 吉井★ 誕
生

8. 2月よりHomeup!にJoin
・フロント周りはReact使って実装するから勉強しておいてねー
・ブログ機能の開発からJoinしてもらうよー
・JJさん、タインと一緒に開発してねー

10. Reactとのふれあい開始
app.jsx見ればわかるんだな！

11. Reactとのふれあい開始
どれどれ...

12. Reactとのふれあい開始
カチッ...

13. Reactとのふれあい開始
!?!?!?!?!?!?!?!?!?!?!?!?

14. Reactとのふれあい開始
Reactチュートリアルと違うっ！！！

15. ブログ機能の実装開始

16. 恐ろしい速度でタスクをこなすタイン

17. パソコンの前で固まる俺

18. エース級の2倍の速度でタスクをこなすタイン

19. タインとの出来の差に嘆く俺

20. そんなこんなでだいぶ苦しい思いをした2月

21. 言い訳
・それまでにjsと戯れてこなかったからファイルの位置すら分からなかった
・Refluxというフレームワークを用いていた
・単に初心者だった
・タインがすごかった

22. 2月の振り返り面談にて
よっしーは本当にフロント
エンドでやっていくの？
(斎藤さん……..!!
やりたいことをやるのは
大事だけど、もっと色々
やってみて決めたらいい
んじゃない？
..サーバーもしたいっす

23. フロントエンダー 吉井★ 解
任

24. 現在はHomeup!でお世話になっています。

25. ここから本題
~ Fall in Love with React ~

26. ・React.js (Facebook社製のOSS javascriptライブラリ)

27. Reactを用いて作られているサービス達

28. ３つの特徴を持つライブラリ

29. 1.JUST THE UI
・MVCで言うところの、Viewの部分に特化している
・コンポーネントを作るためだけ
・他の技術に依存しないので、割とどんなプロジェクトにも試験的に
導入できる

30. 2. Virtual DOM
・DOMに変更が行われる時、変更前後の差分だけ元のHTMLに当てはめて
あげるのがスマート！(Virtual DOMの思想の原点)
・実際のDOMと対になる仮想的なDOMを生成する。ユーザーは仮想DOM
を操作して、その差分を実際のDOMに適応する実装のこと。

31. 3. DATA FLOW
・データの変更に応じてUIの変更が行われる単方向のデータバインディング

32. 3行で説明すると
1. ページ状態を保持しているプレーンなJSのオブジェクト」に
2. 「テンプレート的な関数」を作用させて、「仮想DOM」と呼ばれるDOMの
設計図を取り出し
3. その設計図を使って本物のDOMを構築する。
(引用元: Reactを使うとなぜjQueryが要らなくなるのか,
http://qiita.com/naruto/items/fdb61bc743395f8d8faf)

33. Reactはシンプルだけど奥が深い
(簡単に説明できない)

34. 実装例(超簡単に)

35. 1.初期状態を定義 (stateやpropsなど..)

36. 2. 仮想DOMの実装 (jsxシンタックス)

37. 3. 値変更に関するもろもろのメソッド実装

38. あとは、stateで保持しているデータを用いて
DBの更新すればOK

39. まとめ
・jQueryとかでDOMの操作がバンバン必要になりそうなサービスにはいいかも
・勉強するにあたって以下のサイトを参考にしました
ー React.jsとRefluxJSを用いた快適view生活
(http://qiita.com/RyutaYoshi/items/267ea5d1eb0e2719eb7f)
ー なぜ仮想DOMという概念が俺たちの心を震えさせるのか
(http://qiita.com/mizchi/items/4d25bc26def1719d52e6)
ー Reactを使うとなぜjQueryが要らなくなるのか
(http://qiita.com/naruto/items/fdb61bc743395f8d8faf)