AngularJSからReactに変えた昔話。

1. AngularJSからReactに
移ったケースの話
2015-08-30
Yosuke Kumakura

2. Yosuke Kumakura (kumatch)
https://twitter.com/kumatch
https://github.com/kumatch

4. Agenda
• 自分がフロントエンド JS フレームワークを
AngularJS から React に移した背景を紹介
• 思い出（昔話）を語ります
• 記憶の（都合よい）改変があるかも
• 当時と今はまた状況が変わってます

5. サーバサイドがメイン
• Web アプリケーション & インフラエンジニア
• JavaScript はついでにやる程度だった
• jQuery でなんかやるくらい

6. ∼ 2013年

10. Data binding

11. Directive (Component)

12. Dependency Injection (DI)
機能面とその実装方法

13. サーバサイドがメイン (2回目)
• Web アプリケーション & インフラエンジニア
• JavaScript は で使っている

14. • かなり優れた eco system
• JS 開発環境
• concat, minify, compile
• browserify
&

15. は
Node.js 普及前の成果物
• 当時の AngularJS (1.2 直後) は CommonJS
module 体制ではなかった
• ライブラリも当然ながら非 CommonJS
• ツールだけは Node.js を有効活用していた
(ex. Testacular - 現 Karma)

17. • bower のみ
• AngularJS 公式ではないものは一応あった
は CommonJS module じゃなので
による配布はされていなかった

18. package.json を持っていない GitHub JS コードを
npm_modules 以下へ持ってくるツールを使う
require(“angular/angular”);
Browserify によってコードがバンドルされる

19. 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);
};
};

20. Node.js 利用者から見ると微妙に
マッチしていない JavaScript 実装体制
できなくはないが
無理やりフィットさせている。

21. 2014年 ∼

22. React

23. Node.js 以後の世界
npm modules は資産
React

24. Component
関心事の集約
(見た目 & 振る舞い)
React

25. One way data flow
Simple
(not Easy)
React

26. 現在とこれから

27. CommonJS modules 化
すべて npm で導入可能

28. の登場
実行環境こそは Node.js だけども
これまでのフロントエンド開発のノウハウを集約
（めっちゃ頑張ってる）

29. Node.js 以後の世界

30. まとめ
• AngularJS はそこまで嫌いでもなかった
• 自分にとってフィットしてなかっただけ
（環境、時代）
• 状況はまた一刻と変わってます
好みで選びましょう

31. Question ?
( for )
React