1. フロント & サーバ同時開発のメリット
Amebaの開発現場から
サイバーエージェント 原 一成
12/18/2013 @DeNA
Kazunari Hara

8. 原 一成
Hara Kazunari
@herablog
Web Developer

9. 原 一成
Hara Kazunari
@herablog
Web Developer
2008年

16. 原 一成
Hara Kazunari
@herablog
Web Developer

17. 原 一成
Hara Kazunari
@herablog
Web Developer
HTML/CSS/JavaScript

19. Repeat
1em
background-­‐color:
#6cf;
background-­‐image:
linear-­‐gradient(
to
right,
#ff9
50%,
transparent
50%
);
background-­‐size:
1em;

23. セレクタ
flexbox
リスト
タグ・パンくず
図形
フォーム・ 表・グラフ
設計
パフォーマンス
プリプロセッサ
スタイルガイド
など 全81項目のサンプル集

24. Designer
Front
Server

25. Webサイト制作あるある

26. コーダーとエンジニアが分かれていて
時間がかかる・確認が大変だ

27. エンジニアの書いたマークアップがひどい

28. コーダーの書いた条件分岐が効率悪い

29. Front
Server

30. Front
Server

31. ・一貫性のある開発
Front
Server
・クオリティ向上
・開発スピード向上

32. Amebaでの実現方法

34. AJAX

35. 複数リクエストをひ
とつにまとめて返す
通信を少なくする (できれば1本)
複数のAPIにアクセス

36. データ周りは専門家
が担当する

37. フロントエンドエンジニア
サーバーエンジニア

38. リリースまでの流れ

40. Idea
Design
Idea
Idea
Front
Data Front Server
Data

41. UIを作る (CSS3)

42. UIを作る (CSS3)

43. ページを作る (JavaScript)
chikuwa.js

44. ページを作る (JavaScript)
40
31KB
30
20
10
0
5KB
6KB
jqMobi
Chikuwa
jQuery

45. ページを作る (JavaScript)
Chikuwa
HTML
var notiCount = getNotiCount();
<header>
tag( header )
<button class= menu ></button>
.tag( button.menu ).gat()
<h1>Ameba</h1>
.tag( h1 ).text( Ameba ).gat()
<button class= noti >
.tag( button.noti )
.tag( span.counter )
.text(notiCount).gat()
.gat();
<span class= counter >1</span>
</button>
</header>

46. ページを作る (JavaScript)
View
Routing
$.views({
$.routes( group , {
/:
group.top : {
/:groupId/info : {name: info , action: info }
init: function(data) {
this.data = data ¦¦ {};
},
render: function() {
return tag( div );
});
Action
function top(vars) {
var view = $.view( group.top );
}
page.replace(view);
}
});
{name: top , action: top },
}

47. データのやり取りをする

48. node.js (中継サーバ)
リクエストを受けて、複数の
APIからデータを取得し、ひと
つにまとめて返すだけの役割
app.get( /api/:userId , function(req, res) {
var userId = req.param( userId );
api.get( / + userId, function(err, result) {
if (err) {
res.send(err);
} else {
res.json(result);
}
});
});

49. Git

50. Release

51. デメリット

52. ・サーバーリソースの扱い方に不慣れ
だった
・メモリ、キャッシュなど

53. ・コードそのものの品質へのこだわり
・テスト不十分

54. ・サーバーリソースの扱い方に不慣れだった
・コードそのものの品質へのこだわり
→ 今後の改善ポイント

55. ・サーバーリソースの扱い方に不慣れだった
・コードそのものの品質へのこだわり
→ 今後の改善ポイント

57. フロント & サーバ同時開発のメリット
終
12/18/2013 @DeNA
Kazunari Hara
@herablog