Movatterモバイル変換


[0]ホーム

URL:


Uploaded bybasicinc_dev
PPTX, PDF1,095 views

Js初心者だった僕が武器を手に入れるまで ~ fall in love with react ~

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

Related topics:

Embed presentation

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

Recommended

PDF
3日間でサービスをリリースした話
PDF
gemの複数バージョンカジュアルテスト #shibuyarb
PDF
GopherJS + Nashorn
PDF
YAPC::Asia 2014 LT
PDF
非ガチ勢「よし、Coffee script使おう!」
PDF
2012 12-17-titanium meetupvol4
PDF
20160724 gemのお話の続きとか
PDF
20160716 Gemのお話
PDF
初めての公開Gem作り
PDF
自己紹介LT(公開版)
PDF
いまさらツリー構造
PDF
Ruby/PureImage: 第2回岡山Ruby会議LT
PDF
わたしのRubyの楽しみかた
PDF
よちよち.rbで知ったコミュニティの素晴らしさ
PDF
よちよち.rbで知ったコミュニティの素晴らしさ
PDF
Ruby関西 10才の誕生日に向けて
KEY
About playdocja
PDF
プリキュアのRuby実装の紹介 (2015 ver) #MeguroStartup
PPTX
構造化データマークアップでステキな検索結果を手に入れる
PPTX
川又康平 20160428
PPTX
画像処理アルゴリズム入門とcanvas
PPTX
悪いRegexと良いregexと最良regex
PPTX
Safe stringにgsubを実行できるように対応
PDF
Mini magickでの画像合成
PPTX
HUで6000万pvのトラフィックを捌くまでに起ったことをありのままに話すぜ
PPTX
無名関数のすすめ
PPTX
turbolinks攻略
PDF
マーケティング視点でのデザイン
PPTX
インフラ(Aws)覚えたいそんなあなたへ!
PPTX
エンジニアがチームで数字を追って得たもの

More Related Content

PDF
3日間でサービスをリリースした話
PDF
gemの複数バージョンカジュアルテスト #shibuyarb
PDF
GopherJS + Nashorn
PDF
YAPC::Asia 2014 LT
PDF
非ガチ勢「よし、Coffee script使おう!」
PDF
2012 12-17-titanium meetupvol4
PDF
20160724 gemのお話の続きとか
PDF
20160716 Gemのお話
3日間でサービスをリリースした話
gemの複数バージョンカジュアルテスト #shibuyarb
GopherJS + Nashorn
YAPC::Asia 2014 LT
非ガチ勢「よし、Coffee script使おう!」
2012 12-17-titanium meetupvol4
20160724 gemのお話の続きとか
20160716 Gemのお話

What's hot

PDF
初めての公開Gem作り
PDF
自己紹介LT(公開版)
PDF
いまさらツリー構造
PDF
Ruby/PureImage: 第2回岡山Ruby会議LT
PDF
わたしのRubyの楽しみかた
PDF
よちよち.rbで知ったコミュニティの素晴らしさ
PDF
よちよち.rbで知ったコミュニティの素晴らしさ
PDF
Ruby関西 10才の誕生日に向けて
KEY
About playdocja
PDF
プリキュアのRuby実装の紹介 (2015 ver) #MeguroStartup
初めての公開Gem作り
自己紹介LT(公開版)
いまさらツリー構造
Ruby/PureImage: 第2回岡山Ruby会議LT
わたしのRubyの楽しみかた
よちよち.rbで知ったコミュニティの素晴らしさ
よちよち.rbで知ったコミュニティの素晴らしさ
Ruby関西 10才の誕生日に向けて
About playdocja
プリキュアのRuby実装の紹介 (2015 ver) #MeguroStartup

Viewers also liked

PPTX
構造化データマークアップでステキな検索結果を手に入れる
PPTX
川又康平 20160428
PPTX
画像処理アルゴリズム入門とcanvas
PPTX
悪いRegexと良いregexと最良regex
PPTX
Safe stringにgsubを実行できるように対応
PDF
Mini magickでの画像合成
PPTX
HUで6000万pvのトラフィックを捌くまでに起ったことをありのままに話すぜ
PPTX
無名関数のすすめ
PPTX
turbolinks攻略
PDF
マーケティング視点でのデザイン
PPTX
インフラ(Aws)覚えたいそんなあなたへ!
PPTX
エンジニアがチームで数字を追って得たもの
PPTX
Ruby under the hood
PPTX
My sql viewに救われる(かもしれない)
PPTX
Yamakado 20160428
PPTX
君に届け!〜カテゴライズしたユーザーにメッセージを送る〜
PPTX
Have fun-with-ruby
PPTX
Linuxのファイルシステムについて調べてみた
PPTX
Zaru 20160428
PPTX
メール送信におけるスパム認定のリスクと対策
構造化データマークアップでステキな検索結果を手に入れる
川又康平 20160428
画像処理アルゴリズム入門とcanvas
悪いRegexと良いregexと最良regex
Safe stringにgsubを実行できるように対応
Mini magickでの画像合成
HUで6000万pvのトラフィックを捌くまでに起ったことをありのままに話すぜ
無名関数のすすめ
turbolinks攻略
マーケティング視点でのデザイン
インフラ(Aws)覚えたいそんなあなたへ!
エンジニアがチームで数字を追って得たもの
Ruby under the hood
My sql viewに救われる(かもしれない)
Yamakado 20160428
君に届け!〜カテゴライズしたユーザーにメッセージを送る〜
Have fun-with-ruby
Linuxのファイルシステムについて調べてみた
Zaru 20160428
メール送信におけるスパム認定のリスクと対策

Js初心者だった僕が武器を手に入れるまで ~ fall in love with react ~


[8]ページ先頭

©2009-2025 Movatter.jp