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を用いて作られているサービス達

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

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)