RESTful開発フロントエンド編（SPA・AltJS・フレームワーク）
•
8 j'aime•4,285 vues
社内向けにフロントエンドの説明を行いました。SPAを軸にAltJs・MVC系フレームワーク、導入で気をつける点などをまとめています。
Recommandé
Contenu connexe
Tendances
Similaire à RESTful開発フロントエンド編（SPA・AltJS・フレームワーク）
Similaire à RESTful開発フロントエンド編（SPA・AltJS・フレームワーク） (20)
RESTful開発フロントエンド編（SPA・AltJS・フレームワーク）
- 4. おさらい
- 6. RESTとは 実際に、RESTで設計したAPIはどの様になるの？ 例）会社リソースに対するAPI メソッド URL 役割 GET /companies 会社リソース全体（一覧）の取得 GET /companies/1 会社IDが１のリソースを取得 POST /companies 会社リソースの新規作成 PUT /companies/1 会社IDが１のリソースを更新 DELETE /companies/1 会社IDが１のリソースを削除
- 12. SPAをjQueryで書く
- 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. 通信について // 会社の追加 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. 通信について // 会社の削除 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. コード紹介 $("#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. コード紹介 // 新規ボタン 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. コード紹介 // クラス宣言 window.Company = function(attrs){ // 属性 this.id = attrs.id; this.name = attrs.name; // 以下 省略 }; // インスタンスメソッド window.Company.prototype = { save: function(callback){ // 保存 // 処理内容 省略 }, destroy: function(callback){ // 削除 // 処理内容 省略 } } ◆Javascriptでモデルを作って みる
- 19. コード紹介 // 存在確認 if( this.id === null || typeof this.id === 'undefined' ){ // this.idがない場合の処理 }else{ // this.idがある場合の処理 } // 変数と文字列を結合する var url = '/companies/' + this.id.toString() ◆その他
- 20. なんか。。。 大変じゃない？
- 22. AltJS
- 23. CoffeeScript → Rubyっぽく書ける。Classも使える。 Script＃ → C#っぽく書ける。でも更新されてない。 TypeScript → JavaScriptを拡張して使いやすく。 Scala.js → Javaの拡張言語の位置づけであるScalaっぽく書ける。 Dart → Google製。Classも書ける。 これらはコンパイルするとjavascriptに変換されて配布される AltJS → javascriptの代替言語 でもJavaScriptの方が人口は多い。 BPさんが来た時に学習コストが必要。
- 24. 基本フレームワーク
- 29. ちなみにうちではこうしてます
- 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. コード紹介 # クラス宣言 class Models.Company constructor: (item) -> ko.mapping.fromJS item, {}, @ # インスタンスメソッド saveRequest: (callback) => # 保存 # 処理内容 省略 deleteRequest: (callback) => # 削除 # 処理内容 省略 ◆Javascriptでモデルを作って みる
- 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. コード紹介 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. コード紹介 # 存在確認 if @id? # @idがある場合の処理 else # @idがない場合の処理 // 変数と文字列を結合する url = '/companies/#{ @id }' ◆その他
- 36. Web系エンジニア
- 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. 分業も考えないと厳しい！ ※求人、案件募集などでも既にこうなっている バックエンドエンジニア → ビジネスロジックAPIに専念 フロントエンジニア → PCのUI実装に専念 モバイルエンジニア → アプリのUI実装に専念 デザイナー → PC,アプリのUI・UXに専念 フルスタックエンジニア → 全てやれる人（理想）
- 40. まとめ
- 43. 質問があればどうぞ！
- 45. ご静聴ありがとうございました。