Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
RESTful開発
(フロントエンド編)
スライド総数は45ページぐらい
今回は座学です。
これから話すことは当分続く、
今の時代のトレンドについてです。
話を聞きながら、どう取り組むか、難しそうだからスルーするか、
何を勉強しないといけないか、仕事にどうつなげるか、
など各自色々考えながら聞いてください。質問も随時受け付けます。
最...
おさらい
● RESTは規約
● RESTfulはRESTの規約にしたがって実装しているシステム
→ WebAPIの実装方式で流行ってるもの
RESTとは
実際に、RESTで設計したAPIはどの様になるの?
例)会社リソースに対するAPI
メソッド URL 役割
GET /companies 会社リソース全体(一覧)の取得
GET /companies/1 会社IDが1のリソースを取...
モバイルファースト時代の構成
今回はここ
バックエンド
フロントエンド
ここでRESTfulなAPIを要求
1画面ごとに1HTML上で動作するアプリケーションは
SPASinglePageApplication
と呼ばれてます
SPAで特に大事な技術って?
Javascript
Javascriptは
みなさんどのぐらい使えますか?
SPAをjQueryで書く
通信について
// 会社一覧の取得
$.ajax({
url: '/companies', // URLに id は指定しない
type: 'GET', // 取得のため GET を指定
dataType: 'JSON',
data: null...
通信について
// 会社の追加
var companyData = company.requestData();
$.ajax({
url: '/companies', // URLに id は指定しない
type: 'POST', // 追加...
通信について
// 会社の削除
var company = companies[0]
var id = company.id;
$.ajax({
url: '/companies/' + id.toString(), // URLに id を指...
コード紹介
$("#companies tbody tr").remove();
$.each(companies, function(){
var tr = $("<tr>");
tr.append($("<td>").addClass('i...
コード紹介
// 新規ボタン click
$('body').delegate('.new', 'click', function(){
dialog_open(new Company());
});
// 編集ボタン click
$('bod...
コード紹介
// クラス宣言
window.Company = function(attrs){
// 属性
this.id = attrs.id;
this.name = attrs.name;
// 以下 省略
};
// インスタンスメソ...
コード紹介
// 存在確認
if( this.id === null || typeof this.id === 'undefined' ){
// this.idがない場合の処理
}else{
// this.idがある場合の処理
}
// ...
なんか。。。
大変じゃない?
JavaScriptが苦手
ソースコードがぐちゃぐちゃになりそう
リッチな表現が難しそう
大変だと思うこと
→ AltJS
→ MVC系フレームワーク
→ テンプレート系フレームワーク
AltJS
CoffeeScript → Rubyっぽく書ける。Classも使える。
Script# → C#っぽく書ける。でも更新されてない。
TypeScript  → JavaScriptを拡張して使いやすく。
Scala.js  → Javaの拡張...
基本フレームワーク
基本フレームワーク
無数に乱立している!
色々なフレームワーク
AngularJS
React.js
Knockout.js
Backbone.js
vue.js
Ember.js
Ractive.js
Aurelia.js
・
・
・
フレー...
5大フレームワーク(2016年)
AngularJs    ・・・Google製。MVC全般をサポート。めちゃめちゃ流行ってる。
ReactJs     ・・・Facebook製。MVCのViewだけを担当。めちゃめちゃ流行ってる。
Knock...
どれを使えばいいの?
わかりません!!
どれを選定するかはチームやオーナーが考える
学習コスト
流行り
フレームワーク
の寿命
カバー範囲
メンバーの
スキル
案件状況
ちなみにうちではこうしてます
採用した構成
バックエンド
 Ruby + Ruby on Rails → DB周りやビジネスロジックをRESTAPIで提供。あと各画面の初回HTMLも提供。
フロントエンド
 ♦AltJS
  CoffeeScript → RubyっぽくJa...
コード紹介
# クラス宣言
class Models.Company
constructor: (item) ->
ko.mapping.fromJS item, {}, @
# インスタンスメソッド
saveRequest: (callbac...
コード紹介
class Models.Company
constructor: (item) ->
ko.mapping.fromJS item, {}, @
class Models.CompanyList
constructor: ->
@...
コード紹介
show: (obj) =>
obj.showRequest @callbackDone
delete: (obj) =>
confirm '削除してもよろしいですか?'
.ok =>
obj.deleteRequest @call...
コード紹介
# 存在確認
if @id?
# @idがある場合の処理
else
# @idがない場合の処理
// 変数と文字列を結合する
url = '/companies/#{ @id }'
◆その他
導入効果
バックエンド
 Ruby + Ruby on Rails → ビジネスロジックやAPIに集中できた。
               インターフェース(JSON)だけを意識すればよくなった。
フロントエンド
 ♦AltJS
  Coff...
Web系エンジニア
今までのWebエンジニア
C#/VB
.NET FW
HTML
CSS
Javascript
Ruby
RoR
HTML
CSS
Javascript
JAVA
Spring
OtherFW
HTML
CSS
Javascript
これから
C#/VB
.NET FW
HTML
CSS
Javascript
Ruby
ROR
HTML
CSS
Javascript
HTML
CSS
Javascript
Other FW
Java
AndroidFW
Other FW
S...
分業も考えないと厳しい!
※求人、案件募集などでも既にこうなっている
バックエンドエンジニア → ビジネスロジックAPIに専念
フロントエンジニア   → PCのUI実装に専念
モバイルエンジニア   → アプリのUI実装に専念
デザイナー  ...
まとめ
・RESTfulにすればクロスプラットフォームに対応できる
・SPAは単一HTML上で動く画面構成
・SPAでインタラクティブなアプリが作れる
・SPAはJavascriptが大事
・jQueryだけだと煩雑になるので、フレームワークなどを活用...
ユーザーがインタラクティブなものを求めている、
スマホ対応やアプリ化も当たり前の時代になった。
最近のWebサービスはこれらで作られている。
数年もしないうちにこれらの技術で我々にも受託依頼が増えるはず。
※実際にフロントエンド側の依頼はある(...
質問があればどうぞ!
なければ
感想を聞かせて
ください!
ご静聴ありがとうございました。
Upcoming SlideShare
Loading in …5
×

RESTful開発フロントエンド編(SPA・AltJS・フレームワーク)

3,030 views

Published on

社内向けにフロントエンドの説明を行いました。SPAを軸にAltJs・MVC系フレームワーク、導入で気をつける点などをまとめています。

Published in: Software
  • Be the first to comment

RESTful開発フロントエンド編(SPA・AltJS・フレームワーク)

  1. 1. RESTful開発 (フロントエンド編)
  2. 2. スライド総数は45ページぐらい 今回は座学です。
  3. 3. これから話すことは当分続く、 今の時代のトレンドについてです。 話を聞きながら、どう取り組むか、難しそうだからスルーするか、 何を勉強しないといけないか、仕事にどうつなげるか、 など各自色々考えながら聞いてください。質問も随時受け付けます。 最後に数名に感想を聞きたいと思います。
  4. 4. おさらい
  5. 5. ● RESTは規約 ● RESTfulはRESTの規約にしたがって実装しているシステム → WebAPIの実装方式で流行ってるもの
  6. 6. RESTとは 実際に、RESTで設計したAPIはどの様になるの? 例)会社リソースに対するAPI メソッド URL 役割 GET /companies 会社リソース全体(一覧)の取得 GET /companies/1 会社IDが1のリソースを取得 POST /companies 会社リソースの新規作成 PUT /companies/1 会社IDが1のリソースを更新 DELETE /companies/1 会社IDが1のリソースを削除
  7. 7. モバイルファースト時代の構成 今回はここ バックエンド フロントエンド
  8. 8. ここでRESTfulなAPIを要求
  9. 9. 1画面ごとに1HTML上で動作するアプリケーションは SPASinglePageApplication と呼ばれてます
  10. 10. SPAで特に大事な技術って? Javascript
  11. 11. Javascriptは みなさんどのぐらい使えますか?
  12. 12. SPAをjQueryで書く
  13. 13. 通信について // 会社一覧の取得 $.ajax({ url: '/companies', // URLに id は指定しない type: 'GET', // 取得のため GET を指定 dataType: 'JSON', data: null, // 検索条件があれば data に格納 success: function(data){ var companies = []; $.each(data, function(){ companies.push( new Company( this ) ); }); callback(companies); }, error: function(data){ // 例外処理 } }); // 会社の取得 var id = 1; $.ajax({ url: '/companies/' + id.toString(), // URLに id を指定 type: 'GET', // 取得のため GET を指定 dataType: 'JSON', success: function(data){ var company = new Company( data ) ; callback(company); }, error: function(data){ // 例外処理 } });
  14. 14. 通信について // 会社の追加 var companyData = company.requestData(); $.ajax({ url: '/companies', // URLに id は指定しない type: 'POST', // 追加のため POST を指定 dataType: 'JSON', data: companyData, // 会社情報 success: function(data){ // 新規の場合は新しくインスタンスを生成 var company = new Company( data ) ; callback(company); }, error: function(data){ // 例外処理 ( バリデーションエラーなどが返ってくる ) } }); // 会社の更新 var id = company.id; var companyData = company.requestData(); $.ajax({ url: '/companies/' + id.toString(), // URLに id を指定 type: 'PUT', // 更新のため PUT を指定 dataType: 'JSON', data: companyData, // 会社情報 success: function(data){ // 更新成功 callback(true); }, error: function(data){ // 例外処理 ( バリデーションエラーなどが返ってくる ) } });
  15. 15. 通信について // 会社の削除 var company = companies[0] var id = company.id; $.ajax({ url: '/companies/' + id.toString(), // URLに id を指定 type: 'DELETE', // 削除のため DELETE を指定 dataType: 'JSON', success: function(data){ var temp_companies = []; $.each(companies, function(){ if( this.id != id) temp_companies.push(this); }); companies = tmp_companies; // 削除したインスタンスは除く }, error: function(data){ /* 例外処理 */ } });
  16. 16. コード紹介 $("#companies tbody tr").remove(); $.each(companies, function(){ var tr = $("<tr>"); tr.append($("<td>").addClass('id text-center').html(this.id)); tr.append($("<td>").html(this.name)); tr.append($("<td>").html('〒' + this.postal_code + '<br/>' + this.address)); tr.append($("<td>").html(this.mail)); tr.append($("<td>").html('電話:' + this.tel + '<br/>FAX:' + this.fax )); tr.append($("<td>").addClass("text-center").append( $("<a>").addClass('edit btn btn-primary').attr('href', 'javascript: void(0)').text('編集') ).append( $("<a>").addClass('destroy btn btn-danger').attr('href', 'javascript: void(0)').text('削除') ) ); $("#companies tbody").append(tr); }); ◆jQueryで要素を書き換える
  17. 17. コード紹介 // 新規ボタン click $('body').delegate('.new', 'click', function(){ dialog_open(new Company()); }); // 編集ボタン click $('body').delegate('.edit', 'click', function(){ // ボタンが押された要素のIDを取得する var id = $('td.id', $(this).closest("tr")).text(); var company = get_company(id); dialog_open(company); }); ◆クリックイベント
  18. 18. コード紹介 // クラス宣言 window.Company = function(attrs){ // 属性 this.id = attrs.id; this.name = attrs.name; // 以下 省略 }; // インスタンスメソッド window.Company.prototype = { save: function(callback){ // 保存 // 処理内容 省略 }, destroy: function(callback){ // 削除 // 処理内容 省略 } } ◆Javascriptでモデルを作って みる
  19. 19. コード紹介 // 存在確認 if( this.id === null || typeof this.id === 'undefined' ){ // this.idがない場合の処理 }else{ // this.idがある場合の処理 } // 変数と文字列を結合する var url = '/companies/' + this.id.toString() ◆その他
  20. 20. なんか。。。 大変じゃない?
  21. 21. JavaScriptが苦手 ソースコードがぐちゃぐちゃになりそう リッチな表現が難しそう 大変だと思うこと → AltJS → MVC系フレームワーク → テンプレート系フレームワーク
  22. 22. AltJS
  23. 23. CoffeeScript → Rubyっぽく書ける。Classも使える。 Script# → C#っぽく書ける。でも更新されてない。 TypeScript  → JavaScriptを拡張して使いやすく。 Scala.js  → Javaの拡張言語の位置づけであるScalaっぽく書ける。 Dart  → Google製。Classも書ける。 これらはコンパイルするとjavascriptに変換されて配布される AltJS → javascriptの代替言語 でもJavaScriptの方が人口は多い。 BPさんが来た時に学習コストが必要。
  24. 24. 基本フレームワーク
  25. 25. 基本フレームワーク 無数に乱立している! 色々なフレームワーク AngularJS React.js Knockout.js Backbone.js vue.js Ember.js Ractive.js Aurelia.js ・ ・ ・ フレームワークごとに特有の機能 MVC/MVVMモデル HTML/JavaScriptのバインディング HTMLテンプレート URLルーティング RESTful API呼び出し カスタムタグ(ディレクティブ) DI(Dependency Injection, 依存性の注入)
  26. 26. 5大フレームワーク(2016年) AngularJs    ・・・Google製。MVC全般をサポート。めちゃめちゃ流行ってる。 ReactJs     ・・・Facebook製。MVCのViewだけを担当。めちゃめちゃ流行ってる。 KnockoutJs   ・・・Microsoft製。MVCのViewだけを担当。 ※うちはコレつかってます BackbornJs   ・・・大規模向けMVCフレームワーク。 vue.js      ・・・MVCのViewだけを担当。
  27. 27. どれを使えばいいの? わかりません!!
  28. 28. どれを選定するかはチームやオーナーが考える 学習コスト 流行り フレームワーク の寿命 カバー範囲 メンバーの スキル 案件状況
  29. 29. ちなみにうちではこうしてます
  30. 30. 採用した構成 バックエンド  Ruby + Ruby on Rails → DB周りやビジネスロジックをRESTAPIで提供。あと各画面の初回HTMLも提供。 フロントエンド  ♦AltJS   CoffeeScript → RubyっぽくJavaScriptを書ける。Class定義も使用可。アプリ実行時にJSに変換される。            Rubyを書ける人がメンバーに多く、学習コストが低かったので採用。  ♦基本フレームワーク   KnockoutJs → Microsoft製。MVCのView部分を担うフレームワーク。           CoffeeScriptで書いたClassの属性とHTMLのタグ内容を双方向で更新できる。           View周りにjQueryを使うのが大変だったので、比較的、学習コストが低いので思い切って採用。
  31. 31. コード紹介 # クラス宣言 class Models.Company constructor: (item) -> ko.mapping.fromJS item, {}, @ # インスタンスメソッド saveRequest: (callback) => # 保存 # 処理内容 省略 deleteRequest: (callback) => # 削除 # 処理内容 省略 ◆Javascriptでモデルを作って みる
  32. 32. コード紹介 class Models.Company constructor: (item) -> ko.mapping.fromJS item, {}, @ class Models.CompanyList constructor: -> @items = ko.observableArray() @search = =># 取得 # 処理内容 省略 class ViewModels.Companies_Index constructor: -> @companyList = ko.observableArray() @companyListModel = new Models.CompanyList @companyListModel.items.subscribe (items) => newList = items.map (item, index) -> new Models.Company item @companyList newList ◆画面にバインド <tbody data-bind="foreach: companyList"> <tr> <td><div data-bind="text: id"></div></td> <td><div data-bind="text: name"></div></td> <td> <div data-bind="text: postal_code"></div> <div data-bind="text: address"></div> </td>           ・           ・           ・
  33. 33. コード紹介 show: (obj) => obj.showRequest @callbackDone delete: (obj) => confirm '削除してもよろしいですか?' .ok => obj.deleteRequest @callbackDeleteDone newCreate: => (new Models.Company). newRequest @callbackDone ◆クリックイベント           ・           ・           ・ <td> <button data-bind="click: $parent.show"> 編集 </button> <button data-bind="click: $parent.delete"> 削除 </button> </td> </tr> </tbody> <button data-bind="click: newCreate"> 新規 </button> 
  34. 34. コード紹介 # 存在確認 if @id? # @idがある場合の処理 else # @idがない場合の処理 // 変数と文字列を結合する url = '/companies/#{ @id }' ◆その他
  35. 35. 導入効果 バックエンド  Ruby + Ruby on Rails → ビジネスロジックやAPIに集中できた。                インターフェース(JSON)だけを意識すればよくなった。 フロントエンド  ♦AltJS   CoffeeScript → 記述ミスが大きく減った。           余計なデバッグ時間の短縮。           クラスや継承が使いやすくなり、ソースコード量も減った。  ♦基本フレームワーク   KnockoutJs → DOMを操作するjQueryが完全にいらなくなった。AJAX通信の箇所だけjQuery。           HTMLとJavascriptが完全に切り離されたのでデザイン変更や仕様変更に強くなった。           HTMLとModelの役割が明確化したので、修正箇所がわかりやすくなった。ソースもみやすい。            でも最初はハマりました。。。
  36. 36. Web系エンジニア
  37. 37. 今までのWebエンジニア C#/VB .NET FW HTML CSS Javascript Ruby RoR HTML CSS Javascript JAVA Spring OtherFW HTML CSS Javascript
  38. 38. これから C#/VB .NET FW HTML CSS Javascript Ruby ROR HTML CSS Javascript HTML CSS Javascript Other FW Java AndroidFW Other FW Swift ObjectiveC CocoaTouch Other FW JAVA Spring OtherFW HTML CSS Javascript バックエンド フロントエンド やることが増える!
  39. 39. 分業も考えないと厳しい! ※求人、案件募集などでも既にこうなっている バックエンドエンジニア → ビジネスロジックAPIに専念 フロントエンジニア   → PCのUI実装に専念 モバイルエンジニア   → アプリのUI実装に専念 デザイナー       → PC,アプリのUI・UXに専念 フルスタックエンジニア → 全てやれる人(理想)
  40. 40. まとめ
  41. 41. ・RESTfulにすればクロスプラットフォームに対応できる ・SPAは単一HTML上で動く画面構成 ・SPAでインタラクティブなアプリが作れる ・SPAはJavascriptが大事 ・jQueryだけだと煩雑になるので、フレームワークなどを活用   Javascriptを簡単に書けるAltJS   JavascriptでMVCなどを書けるフレームワーク ・コスト、効果などを考えてチームやオーナーが導入の検討を するのがよい ・エンジニアに求められる技術が増えてきた → 分業も
  42. 42. ユーザーがインタラクティブなものを求めている、 スマホ対応やアプリ化も当たり前の時代になった。 最近のWebサービスはこれらで作られている。 数年もしないうちにこれらの技術で我々にも受託依頼が増えるはず。 ※実際にフロントエンド側の依頼はある(モバイルアプリ、SPA) やるかどうかは状況次第。 やるなら、一度に導入は難しいので、部分的に取り組んでいくのがベスト。 やらなくても、知識として持っておくと良いかと。 一つのフレームワークは中長期的に使えるかはわからない。 ただ、SPAの考えやエッセンスを学ぶことはとても良いことだと考える。 最後に
  43. 43. 質問があればどうぞ!
  44. 44. なければ 感想を聞かせて ください!
  45. 45. ご静聴ありがとうございました。

×