js初心者だった僕が武器を手に入れるまで ~ fall in love with react ~
TRANSCRIPT
![Page 1: Js初心者だった僕が武器を手に入れるまで ~ fall in love with react ~](https://reader034.vdocuments.net/reader034/viewer/2022042520/588748431a28ab5a628b5e31/html5/thumbnails/1.jpg)
js初心者だった僕が武器を手に入れるまで
~ Fall in Love with React ~
Yoshi
![Page 2: Js初心者だった僕が武器を手に入れるまで ~ fall in love with react ~](https://reader034.vdocuments.net/reader034/viewer/2022042520/588748431a28ab5a628b5e31/html5/thumbnails/2.jpg)
自己紹介
・名前 : 吉井竜太
・地元 : 島根県松江市 (Rubyの発信地 )
・ Qiita (http://qiita.com/RyutaYoshi)
google翻訳みたいなものを自作してみた (http://qiita.com/RyutaYoshi/items/9a809c0a03e02874fabb)
React.jsと RefluxJSを用いた快適 view生活 (http://qiita.com/RyutaYoshi/items/267ea5d1eb0e2719eb7f)
![Page 3: Js初心者だった僕が武器を手に入れるまで ~ fall in love with react ~](https://reader034.vdocuments.net/reader034/viewer/2022042520/588748431a28ab5a628b5e31/html5/thumbnails/3.jpg)
本題に入る前に最近の吉井の事情
![Page 4: Js初心者だった僕が武器を手に入れるまで ~ fall in love with react ~](https://reader034.vdocuments.net/reader034/viewer/2022042520/588748431a28ab5a628b5e31/html5/thumbnails/4.jpg)
1月の面談にて1年振り返ってどうだった?もっと要望とかある?
もっと画面ビュンビュンしたいので、js勉強したいっす!!
あっ、丁度フロントエンドやる人探してたし挑戦してみる? 是非是非!
やりたいっす!!!
![Page 5: Js初心者だった僕が武器を手に入れるまで ~ fall in love with react ~](https://reader034.vdocuments.net/reader034/viewer/2022042520/588748431a28ab5a628b5e31/html5/thumbnails/5.jpg)
その月の全体会
![Page 6: Js初心者だった僕が武器を手に入れるまで ~ fall in love with react ~](https://reader034.vdocuments.net/reader034/viewer/2022042520/588748431a28ab5a628b5e31/html5/thumbnails/6.jpg)
![Page 7: Js初心者だった僕が武器を手に入れるまで ~ fall in love with react ~](https://reader034.vdocuments.net/reader034/viewer/2022042520/588748431a28ab5a628b5e31/html5/thumbnails/7.jpg)
フロントエンダー 吉井★ 誕生
![Page 8: Js初心者だった僕が武器を手に入れるまで ~ fall in love with react ~](https://reader034.vdocuments.net/reader034/viewer/2022042520/588748431a28ab5a628b5e31/html5/thumbnails/8.jpg)
2月より Homeup!に Join
・フロント周りは React使って実装するから勉強しておいてねー
・ブログ機能の開発から Joinしてもらうよー
・ JJさん、タインと一緒に開発してねー
![Page 9: Js初心者だった僕が武器を手に入れるまで ~ fall in love with react ~](https://reader034.vdocuments.net/reader034/viewer/2022042520/588748431a28ab5a628b5e31/html5/thumbnails/9.jpg)
![Page 10: Js初心者だった僕が武器を手に入れるまで ~ fall in love with react ~](https://reader034.vdocuments.net/reader034/viewer/2022042520/588748431a28ab5a628b5e31/html5/thumbnails/10.jpg)
Reactとのふれあい開始
app.jsx見ればわかるんだな!
![Page 11: Js初心者だった僕が武器を手に入れるまで ~ fall in love with react ~](https://reader034.vdocuments.net/reader034/viewer/2022042520/588748431a28ab5a628b5e31/html5/thumbnails/11.jpg)
Reactとのふれあい開始
どれどれ ...
![Page 12: Js初心者だった僕が武器を手に入れるまで ~ fall in love with react ~](https://reader034.vdocuments.net/reader034/viewer/2022042520/588748431a28ab5a628b5e31/html5/thumbnails/12.jpg)
Reactとのふれあい開始
カチッ ...
![Page 13: Js初心者だった僕が武器を手に入れるまで ~ fall in love with react ~](https://reader034.vdocuments.net/reader034/viewer/2022042520/588748431a28ab5a628b5e31/html5/thumbnails/13.jpg)
Reactとのふれあい開始
!?!?!?!?!?!?!?!?!?!?!?!?
![Page 14: Js初心者だった僕が武器を手に入れるまで ~ fall in love with react ~](https://reader034.vdocuments.net/reader034/viewer/2022042520/588748431a28ab5a628b5e31/html5/thumbnails/14.jpg)
Reactとのふれあい開始
Reactチュートリアルと違うっ!!!
![Page 15: Js初心者だった僕が武器を手に入れるまで ~ fall in love with react ~](https://reader034.vdocuments.net/reader034/viewer/2022042520/588748431a28ab5a628b5e31/html5/thumbnails/15.jpg)
ブログ機能の実装開始
![Page 16: Js初心者だった僕が武器を手に入れるまで ~ fall in love with react ~](https://reader034.vdocuments.net/reader034/viewer/2022042520/588748431a28ab5a628b5e31/html5/thumbnails/16.jpg)
恐ろしい速度でタスクをこなすタイン
![Page 17: Js初心者だった僕が武器を手に入れるまで ~ fall in love with react ~](https://reader034.vdocuments.net/reader034/viewer/2022042520/588748431a28ab5a628b5e31/html5/thumbnails/17.jpg)
パソコンの前で固まる俺
![Page 18: Js初心者だった僕が武器を手に入れるまで ~ fall in love with react ~](https://reader034.vdocuments.net/reader034/viewer/2022042520/588748431a28ab5a628b5e31/html5/thumbnails/18.jpg)
エース級の 2倍の速度でタスクをこなすタイン
![Page 19: Js初心者だった僕が武器を手に入れるまで ~ fall in love with react ~](https://reader034.vdocuments.net/reader034/viewer/2022042520/588748431a28ab5a628b5e31/html5/thumbnails/19.jpg)
タインとの出来の差に嘆く俺
![Page 20: Js初心者だった僕が武器を手に入れるまで ~ fall in love with react ~](https://reader034.vdocuments.net/reader034/viewer/2022042520/588748431a28ab5a628b5e31/html5/thumbnails/20.jpg)
そんなこんなでだいぶ苦しい思いをした 2月
![Page 21: Js初心者だった僕が武器を手に入れるまで ~ fall in love with react ~](https://reader034.vdocuments.net/reader034/viewer/2022042520/588748431a28ab5a628b5e31/html5/thumbnails/21.jpg)
言い訳
・それまでに jsと戯れてこなかったからファイルの位置すら分からなかった
・ Refluxというフレームワークを用いていた
・単に初心者だった
・タインがすごかった
![Page 22: Js初心者だった僕が武器を手に入れるまで ~ fall in love with react ~](https://reader034.vdocuments.net/reader034/viewer/2022042520/588748431a28ab5a628b5e31/html5/thumbnails/22.jpg)
2月の振り返り面談にて
よっしーは本当にフロントエンドでやっていくの? ( ……斎藤さん ..!!
やりたいことをやるのは大事だけど、もっと色々やってみて決めたらいいんじゃない?
..サーバーもしたいっす
![Page 23: Js初心者だった僕が武器を手に入れるまで ~ fall in love with react ~](https://reader034.vdocuments.net/reader034/viewer/2022042520/588748431a28ab5a628b5e31/html5/thumbnails/23.jpg)
フロントエンダー 吉井★ 解任
![Page 24: Js初心者だった僕が武器を手に入れるまで ~ fall in love with react ~](https://reader034.vdocuments.net/reader034/viewer/2022042520/588748431a28ab5a628b5e31/html5/thumbnails/24.jpg)
現在は Homeup!でお世話になっています。
![Page 25: Js初心者だった僕が武器を手に入れるまで ~ fall in love with react ~](https://reader034.vdocuments.net/reader034/viewer/2022042520/588748431a28ab5a628b5e31/html5/thumbnails/25.jpg)
ここから本題~ Fall in Love with React ~
![Page 26: Js初心者だった僕が武器を手に入れるまで ~ fall in love with react ~](https://reader034.vdocuments.net/reader034/viewer/2022042520/588748431a28ab5a628b5e31/html5/thumbnails/26.jpg)
・ React.js (Facebook社製の OSS javascriptライブラリ )
![Page 27: Js初心者だった僕が武器を手に入れるまで ~ fall in love with react ~](https://reader034.vdocuments.net/reader034/viewer/2022042520/588748431a28ab5a628b5e31/html5/thumbnails/27.jpg)
Reactを用いて作られているサービス達
![Page 28: Js初心者だった僕が武器を手に入れるまで ~ fall in love with react ~](https://reader034.vdocuments.net/reader034/viewer/2022042520/588748431a28ab5a628b5e31/html5/thumbnails/28.jpg)
3つの特徴を持つライブラリ
![Page 29: Js初心者だった僕が武器を手に入れるまで ~ fall in love with react ~](https://reader034.vdocuments.net/reader034/viewer/2022042520/588748431a28ab5a628b5e31/html5/thumbnails/29.jpg)
1.JUST THE UI
・MVCで言うところの、 Viewの部分に特化している
・コンポーネントを作るためだけ
・他の技術に依存しないので、割とどんなプロジェクトにも試験的に 導入できる
![Page 30: Js初心者だった僕が武器を手に入れるまで ~ fall in love with react ~](https://reader034.vdocuments.net/reader034/viewer/2022042520/588748431a28ab5a628b5e31/html5/thumbnails/30.jpg)
2. Virtual DOM
・ DOMに変更が行われる時、変更前後の差分だけ元の HTMLに当てはめてあげるのがスマート! (Virtual DOMの思想の原点 )
・実際の DOMと対になる仮想的な DOMを生成する。ユーザーは仮想DOMを操作して、その差分を実際の DOMに適応する実装のこと。
![Page 31: Js初心者だった僕が武器を手に入れるまで ~ fall in love with react ~](https://reader034.vdocuments.net/reader034/viewer/2022042520/588748431a28ab5a628b5e31/html5/thumbnails/31.jpg)
3. DATA FLOW
・データの変更に応じて UIの変更が行われる単方向のデータバインディング
![Page 32: Js初心者だった僕が武器を手に入れるまで ~ fall in love with react ~](https://reader034.vdocuments.net/reader034/viewer/2022042520/588748431a28ab5a628b5e31/html5/thumbnails/32.jpg)
3行で説明すると
1.ページ状態を保持しているプレーンな JSのオブジェクト」に
2.「テンプレート的な関数」を作用させて、「仮想 DOM」と呼ばれる DOMの設計図を取り出し
3.その設計図を使って本物の DOMを構築する。
( 引用元 : Reactを使うとなぜ jQueryが要らなくなるのか , http://qiita.com/naruto/items/fdb61bc743395f8d8faf)
![Page 33: Js初心者だった僕が武器を手に入れるまで ~ fall in love with react ~](https://reader034.vdocuments.net/reader034/viewer/2022042520/588748431a28ab5a628b5e31/html5/thumbnails/33.jpg)
Reactはシンプルだけど奥が深い( 簡単に説明できない )
![Page 34: Js初心者だった僕が武器を手に入れるまで ~ fall in love with react ~](https://reader034.vdocuments.net/reader034/viewer/2022042520/588748431a28ab5a628b5e31/html5/thumbnails/34.jpg)
実装例 ( 超簡単に )
![Page 35: Js初心者だった僕が武器を手に入れるまで ~ fall in love with react ~](https://reader034.vdocuments.net/reader034/viewer/2022042520/588748431a28ab5a628b5e31/html5/thumbnails/35.jpg)
1. 初期状態を定義 (stateや propsなど ..)
![Page 36: Js初心者だった僕が武器を手に入れるまで ~ fall in love with react ~](https://reader034.vdocuments.net/reader034/viewer/2022042520/588748431a28ab5a628b5e31/html5/thumbnails/36.jpg)
2. 仮想 DOM の実装 (jsx シンタックス )
![Page 37: Js初心者だった僕が武器を手に入れるまで ~ fall in love with react ~](https://reader034.vdocuments.net/reader034/viewer/2022042520/588748431a28ab5a628b5e31/html5/thumbnails/37.jpg)
3. 値変更に関するもろもろのメソッド実装
![Page 38: Js初心者だった僕が武器を手に入れるまで ~ fall in love with react ~](https://reader034.vdocuments.net/reader034/viewer/2022042520/588748431a28ab5a628b5e31/html5/thumbnails/38.jpg)
あとは、 stateで保持しているデータを用いてDBの更新すれば OK
![Page 39: Js初心者だった僕が武器を手に入れるまで ~ fall in love with react ~](https://reader034.vdocuments.net/reader034/viewer/2022042520/588748431a28ab5a628b5e31/html5/thumbnails/39.jpg)
まとめ
・ 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)