SlideShare a Scribd company logo
AngularJSからReactに
移ったケースの話
2015-08-30
Yosuke Kumakura
Yosuke Kumakura (kumatch)
https://twitter.com/kumatch
https://github.com/kumatch
AngularJSからReactに移ったケースの話
Agenda
• 自分がフロントエンド JS フレームワークを
AngularJS から React に移した背景を紹介
• 思い出(昔話)を語ります
• 記憶の(都合よい)改変があるかも
• 当時と今はまた状況が変わってます
サーバサイドがメイン
• Web アプリケーション & インフラエンジニア
• JavaScript はついでにやる程度だった
• jQuery でなんかやるくらい
∼ 2013年
AngularJSからReactに移ったケースの話
AngularJSからReactに移ったケースの話
AngularJSからReactに移ったケースの話
Data binding
Directive (Component)
Dependency Injection (DI)
機能面とその実装方法
サーバサイドがメイン (2回目)
• Web アプリケーション & インフラエンジニア
• JavaScript は で使っている
• かなり優れた eco system
• JS 開発環境
• concat, minify, compile
• browserify
&
      は
Node.js 普及前の成果物
• 当時の AngularJS (1.2 直後) は CommonJS
module 体制ではなかった
• ライブラリも当然ながら非 CommonJS
• ツールだけは Node.js を有効活用していた

(ex. Testacular - 現 Karma)
AngularJSからReactに移ったケースの話
• bower のみ
• AngularJS 公式ではないものは一応あった
は CommonJS module じゃなので
     による配布はされていなかった
package.json を持っていない GitHub JS コードを
npm_modules 以下へ持ってくるツールを使う
require(“angular/angular”);
Browserify によってコードがバンドルされる
angular.module(“myApp.services”, []).
value(“version”, 0.1).
service(“echoHello”, [ “version”, function (version) {
return function () {
console.log(“hello, “ + version);
};
}]);
module.exports = function (version) {
return function () {
console.log(“hello, ” + version);
};
};
Node.js 利用者から見ると微妙に
マッチしていない JavaScript 実装体制
できなくはないが
無理やりフィットさせている。
2014年 ∼
React
Node.js 以後の世界
npm modules は資産
React
Component
関心事の集約
(見た目 & 振る舞い)
React
One way data flow
Simple
(not Easy)
React
現在とこれから
CommonJS modules 化
すべて npm で導入可能
の登場
実行環境こそは Node.js だけども
これまでのフロントエンド開発のノウハウを集約
(めっちゃ頑張ってる)
Node.js 以後の世界
まとめ
• AngularJS はそこまで嫌いでもなかった
• 自分にとってフィットしてなかっただけ

(環境、時代)
• 状況はまた一刻と変わってます

好みで選びましょう
Question ?
( for )
React

More Related Content

PDF
Angular#Kanazawa
PDF
AngularJS 概説
PDF
Angular1&2
PDF
angular1脳で見るangular2
PDF
angular X designer - デザイナからみたAngularJS #ten1club
PDF
Angular2
PDF
開発ライフサイクルから見たAngularJS
PDF
Enterprise x AngularJS
Angular#Kanazawa
AngularJS 概説
Angular1&2
angular1脳で見るangular2
angular X designer - デザイナからみたAngularJS #ten1club
Angular2
開発ライフサイクルから見たAngularJS
Enterprise x AngularJS

What's hot (20)

PDF
Directiveで実現できたこと
PDF
俺とAngular JS 2
PDF
Flux react現状確認会
PPTX
React を導入した フロントエンド開発
PDF
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
PPTX
Angular2実践入門
PDF
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
PPTX
Angular js開発事例
PPTX
AngularJSを浅めに紹介します
PDF
サーバサイドエンジニアが 1年間まじめにSPAやってみた
PDF
React.js + Flux
PPTX
JavaScript使いのためのTypeScript実践入門
PDF
イマドキのフロントエンドエンジニアの道具箱
PPTX
Angular js はまりどころ
PDF
Alt01-LT
PPTX
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
PDF
One-time Binding & $digest
PDF
AngularJSについて
PDF
なぜ人は必死でjQueryを捨てようとしているのか
PPTX
Selenium2(web driver) ide編
Directiveで実現できたこと
俺とAngular JS 2
Flux react現状確認会
React を導入した フロントエンド開発
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
Angular2実践入門
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
Angular js開発事例
AngularJSを浅めに紹介します
サーバサイドエンジニアが 1年間まじめにSPAやってみた
React.js + Flux
JavaScript使いのためのTypeScript実践入門
イマドキのフロントエンドエンジニアの道具箱
Angular js はまりどころ
Alt01-LT
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
One-time Binding & $digest
AngularJSについて
なぜ人は必死でjQueryを捨てようとしているのか
Selenium2(web driver) ide編
Ad

Similar to AngularJSからReactに移ったケースの話 (18)

PPTX
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
PDF
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
PDF
React.jsでクライアントサイドなWebアプリ入門
PPTX
さわってみようReact.js、AngularJS(1系、2系)
PDF
Redux, Relay, HorizonあるいはElm
PPTX
Our Track to Modern Angular
PPTX
シンプルな9つのサンプルで学ぶJava Script初心者のためのAngularJS超入門ハンズオン
PPTX
20161125 米田 angular_jsを触ってみた
PDF
我が家のフロントエンド開発事情
PPTX
PDF
20140823 LL diver Angular.js で構築した note に関して
PDF
React+TypeScriptもいいぞ
PDF
そろそろ押さえておきたい AngularJSのセキュリティ
PDF
Node.js Tutorial at Hiroshima
PPTX
Our Track to Modern Angular #2
PPTX
Let’s angular js!!
PDF
今からでも遅くない! 2から始めるangular js
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
React.jsでクライアントサイドなWebアプリ入門
さわってみようReact.js、AngularJS(1系、2系)
Redux, Relay, HorizonあるいはElm
Our Track to Modern Angular
シンプルな9つのサンプルで学ぶJava Script初心者のためのAngularJS超入門ハンズオン
20161125 米田 angular_jsを触ってみた
我が家のフロントエンド開発事情
20140823 LL diver Angular.js で構築した note に関して
React+TypeScriptもいいぞ
そろそろ押さえておきたい AngularJSのセキュリティ
Node.js Tutorial at Hiroshima
Our Track to Modern Angular #2
Let’s angular js!!
今からでも遅くない! 2から始めるangular js
Ad

More from kumatch kumatch (7)

PDF
Node platforms
PDF
Nodeを稼働させる
PDF
Node.js patterns of module export / require
PDF
Node.js Error & Debug Leveling
PDF
Learning a node stream
PDF
[Node] Multiprocessing and runs continuously
PDF
PHPカンファレンス関西2011/スマートフォン時代のWebシステム
Node platforms
Nodeを稼働させる
Node.js patterns of module export / require
Node.js Error & Debug Leveling
Learning a node stream
[Node] Multiprocessing and runs continuously
PHPカンファレンス関西2011/スマートフォン時代のWebシステム

AngularJSからReactに移ったケースの話