新人SEの学習記録

14年度入社SEの学習記録用に始めたブログです。気づけば社会人3年目に突入。

学習記録:.NET

[学習記録] .NET

内容

第2章:One ASP.NET(続き)

JavaScript開発

  • JavaScriptCSSの結合・圧縮
    • バンドル&ミニフィケーション機能に対応
      • バンドル:複数に分かれたjs/cssファイルを1つにまとめることでリクエスト回数を減らす
      • ミニフィケーション:コード中の空白やコメントを消すことでファイルサイズを削減
    • バンドル情報ファイルを用意(BundleConfig.cs)
    • BundleCollectionオブジェクトのAddメソッドを使用してバンドル設定を追加
    • ビュースクリプト、もしくはビューでインポート
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
  • ASP.NETアプリ開発で良く利用するJavaScriptライブラリ
    • jQuery
      • VS2010以降では標準で利用できる
      • インテリセンスも有効
    • jQueryプラグイン
      • jQuery Validation:ASP.NET MVCプロジェクトに標準組み込み
      • jQuery UI:Webでよく利用するUI部品を取り揃えたライブラリ集
    • Twitter Bootstrap:HTMLのclass指定だけで用意されたデザインを適用できる、VS2013標準
    • TypeScript:altJS、マイクロソフトが開発


ASP.NET Identity

  • 登場の背景
  • ASP.NET Identityの利用
    • 「新規ASP.NETプロジェクト」ダイアログで「認証」を「個人ユーザアカウント」に設定
    • この状態で登録・ログインが可能
    • App_StartフォルダStartup.Auth.csを編集してソーシャルアカウントによるサインインを可能に


ASP.NET Single Page Application

  • SPAとは
    • 単一のページで構成されるWebアプリ
    • ページの更新はJavaScriptによるDOMの操作によってのみ行う
    • データの取得などはAjaxやWebSocketなどの通信技術によって行う
    • デスクトップアプリケーションと同等のUIを実現する手段として注目を浴びる
    • SPAを実装するためのプロジェクトテンプレートが、ASP.NET Single Page Application
  • サーバサイドの準備
    • データモデルを用意してASP.NET Web API経由で公開
    • /controllersフォルダを右クリックして「追加」>「コントローラ」を選択
    • 「スキャフォールディングの追加」ダイアログで「Entity Frameworkを使用した〜Web API2コントローラ」を選択
    • 「コントローラの追加」で利用データモデルと作成するコントローラを指定
  • Knockout.jsによるクライアントサイドページの実装
    • ASP.NET SPAプロジェクトは標準でKnockout.jsを採用
    • Knockout.jsの基本はデータバインディング
      • バインドすべきプロパティをView側で宣言しておくことで、ViewModelの内容を動的にViewに反映できる
      • テキストボックスなどにバインドしておけば、Viewでの変更をそのままViewModelに反映できる
      • クライアントサイドのコードの大部分を占めていた文書ツリー操作のコードをほとんど書かなくて済む
    • このモデルをModel-View-ViewModel(MVVM)パターンと呼ぶ