２ヶ月前のブログエントリーで Aurelia という次世代のクライアントサイドフレームワークについて書きましたが、Aureliaの開発が更に進んでいて、私たちもそれに追随してサンプルアプリケーションの Typescript のバージョンを更新しました。変更個所をご紹介したいと思います。

リポジトリはこちらです。gulp のみで動作し、IDEに依存していません。

弊社がエンタープライズ向けのプロジェクトで利用したDurandalフレームワークの作者 Rob Eisenberg さんがこの間次世代のクライアントサイドフレームワークAurliaを発表しました 。

Get Started を和訳しました

ベースの技術が変わりましたが、Durandal の後継者だと言われているフレームワークですので、早速社内で試してみました。可能性を感じたので、Aurelia の Get Started セクションを和訳しました。興味がある方は是非参考にしていただきたいです。（pull requestを送ってマージされました。訳がおかしいところがあればお知らせください!)

Get Started 日本語版

また、サンプルアプリケーションをTypeScriptに変換しました

Aurelia のサンプルアプリケーションは ES6 で実装されていますが、弊社ではクライアントサイドの開発に TypeScript を使っているので、早速 TypeScript に変換しました。

TypeScriptで実装されたサンプルアプリケーションのリポジトリ

元々のサンンプル同様にGulp を使っていて、Visual Studio 等のIDEに依存していませんので、気軽に試していただけます。メインソース、ユニットテスト、結合テストが全て TypeScript に変換されています。

ソースマップも出力されているので、ChromeでTypeScriptのままデバッグができます。



サンプルのREADMEも和訳してありますので、参考にしていただけると幸いです。

最近手がけたプロジェクトではクライアントサイドとサーバーサイドのモデルを同期させるときの通信量を削減するために、JSON Patch RFC6902 を採用してみました。JSON Patch の簡単な説明とサーバーサイドの実装方法について、以前に紹介しましたが、今回はKnockout.jsを使ったクライアントサイド用の実装方法と利用パターンをご紹介したいと思います。

JSON Patch とは

実装方法

キーポイント

プロパティに対する変更の適用と検出

機能概要	用途	サンプルコードで の対応メソッド
変更前の値の保持と現在の値との比較	変更の検出	_getChanges
変更前の値を現在の値にリセット	変更の検出の結果を空にする	_resetChanges
現在の値の変更	JSON Patch による変更の適用	_applyChanges

observableの値のタイプ	extender名
プリミティブ	track
モデル	trackObject
モデルの配列	trackObjectArray

• JSON データから新規のインスタンスを生成するために、コンストラクタを使っていること
  コンストラクタは extender のパラメータとして渡されます。
• 各メソッドが内部でそれぞれ koPatch.getChanges、koPatch.resetChanges、koPatch.applyChanges というメソッドを呼び出していること
  モデルに対する変更の適用と検出をするための専用のメソッドです。このメソッドの実装方法は"モデルに対する変更の適用と検出"で説明します。

上記のコードを実行すると、以下のアウトプットになります。

終わりに

モデルのフィールドが多く、そのまま送ると転送量が多くなるような場合に、JSON Patch を利用して転送量を減らすことができます。レスポンスタイムの短縮につながりますので、モバイル、デスクトップのウェブアプリケーションのユーザーエクスペリエンスの向上ができます。今回ご説明したように実装は簡単です。皆様もぜひ検討してみてください。

著者について
グリシン キリルは、11年前にロシアから来日し、2013年からエンラプトでウェブアプリケーションの開発に従事する。Functional Reactive Programmingに夢中で、クライアントサイドの開発を簡単に、より確かにするための研究を行う。

前回、TypeScriptとthisのおさらい という記事で TypeScriptでラムダ式を使った場合の this の留意点について簡単におさらいしました。

実際の開発現場では、色々なライブラリと一緒に使った場合に考慮する事があるでしょう。 弊社が経験した TypeScript と組み合わせたライブラリ（ jQuery、Knockoutjs ）での考慮点を、簡単なサンプルとともに紹介していきたいと思います。

今回はAltJsとして弊社がよく利用するTypeScriptにおけるthisについておさらいします。

基本的にはJavaScriptと変わらない、、、のですが。
TypeScriptとJavaScriptの違いとして、関数の定義方法によるところがあります。

• アロー関数式
• ()=>{} 
• ラムダ [lambda]式でも通じるかと思います。
• 当記事では「ラムダ式」と記載します。
• 従来function式
• function(){}

このラムダ式ですが、略記以外に重要なポイントがあります。
TypeScriptのラムダ式ではthisの扱いが異なるという所です。（ハンドブック参照）

Bean validation 1.1(JSR303, JSR349) とは

• アノテーションでオブジェクトの制約を表現できる
• 独自の制約を追加することができる
• オブジェクト(ネストしたオブジェクトを含む)をバリデーションするAPIを提供している
• メソッド、コンストラクターの引数、戻り値を検証するAPIを提供している
• (ローカライズされた)バリデーションエラーを取得できる
• Java EEに統合されている(Java EE以外でも使える)

Bean validationの用法紹介: Spring Controllerの引数を検証するために使う

独自の制約を作成する

コード6: Validators.java
コード7: Validator.java
コード8: Message.java

Unfilteredとは?

ResponseBytes

BEMの採用でCSSとHTMLの開発プロセスの改善をする

私はCSS/HTMLの開発の際、構成管理をどのようにすれば良いか考える機会がありました。どんなコードベースでも以下の点の改善ができれば、開発のプロセスがもっと早く、もっと簡易に、もっと確かになるためです。

• 再利用性
• 拡張性
• 開発生産性とメンテナンス性

上記の点の改善を可能にするCSSとHTML設計手法のうちの一つにBEMがあります。どのように改善ができるか、詳しく説明したいと思います。

再利用性

BEMにはブロックとエレメントいう２つの概念があります。
ブロックとは独立した存在で、デザインの「構成要素」であります。ブロックはコンテキスト（親HTMLエレメント等）に依存せずに、ページのどこの位置に配置されても自分の機能を保つべきものです。
ブロックを組み合わせて、アプリケーションページを組み立てます。
エレメントは、ブロックの一部分であり、特定の役割を果たしています。 エレメントはコンテキストに依存していて、そのエレメントが属するブロックだけで利用されています。
ブロックとブロックの中にネストされたエレメントの例：
ブロックの独立した性質のおかげで、他のブロックと自由な組み合わせでアプリケーションのどこのページにでも簡単に再利用ができます。

拡張性

BEMには更にモディファイヤーという概念があります。
モディファイヤーはブロックとエレメントのスタイルにバリエーションを持たせるためのものです。CSSとHTMLの開発フェーズが終わっていても、CSSのベーシックな知識しか持っていないチームメンバーでも新しいモディファイヤーを追加することで、既存のブロックやエレメントのデザインの変更が簡単にできます。
既存のブロックの背景色を変更するモディファイヤーを追加する例：
また、既存のモディファイヤーを組み合わせたりすることで、新しいデザインが作れます。
既存の二つのモディファイヤーの組み合わせで新しいデザインのボタンを作成する例（ボタンの色とサイズの組み合わせ）：

開発生産性とメンテナンス性

ブロックはコンテキストに依存しない存在であるため、ブロックを組み合わせることでページの作成が可能になります。
CSSとHTMLの作成を外部デザイナーに依頼する場合、アプリケーションページの全体の作成ではなく、必要なブロックだけの作成を依頼すれば、あとは基本レベルのCSSとHTMLの知識を持つチームメンバーでもブロック利用して、アプリケーションページの組み立てができます。
２つのブロックの簡単な組み立ての例：

簡略化されたBEMへのアプローチ

BEM自体は結構大きなフレームワークです。CSS設計ルールだけではなくて、専用のテンプレートエンジンやビルドツールやJavaScriptを取り扱う方法などが含まれています。このフレームワークの全ての要素を導入するには、相当な努力が必要でしょう。
幸いなことに、ブロック、エレメント、モディファイヤーというコアコンセプトを有効に使うのに、全体のフレームワークを取り入れる必要はありません。BEMに基づいたCSS設計ルールだけを採用しても、BEMをはじめることができます。
弊社では、こういうCSS設計ルールセットを用意しております。この設計ルールセットのメインの部分を紹介したいと思います。

BEMに基づいたCSS設計ルール

1. クラスのネーミング

   概念的に、クラスのネーミングルールはBEMのものと同じですが、ブロック、エレメント、モディファイヤーの区切り用のエレメントを自分の好みにあわせています。
   各ブロックの定義は個別のファイルに納めることで、ブロック名の衝突を避けています。
   

2. カスケードセレクターを利用しない

   コンテキストに依存してしまい、ブロックの再利用が困難になるため、カスケードのセレクターを利用しません。
   エレメントの場合も同じです。理由は２つあります。
   
   • セレクターのspecificity（詳細度）が上がってしまうので、CSSルールが特殊になり、モディファイヤーでのスタイルの上書きが難しくなります。
     Specificityというのは、CSSルールの優先順位のことです。複数のCSSルールが同じHTMLエレメントの同じ要素をコントロールしているとき、specificityが高い方が優先されます。基本的に、カスケードのあるセレクターのspecificityがカスケードのないセレクターより高いので、以下の例でテキストの色はredのままになり、モディファイヤーが効かなくなります。
     だめな定義の例：
     セレクターのspecificityが同じ場合、後から定義された方が優先になります。
     
   • クラスのネーミングルールによって、エレメントのクラス名にすでにブロック名が入っているため、他のブロックのエレメントのクラス名との衝突はおきません。
     

3. タイプセレクターを利用しない（セレクタにタグ名が使われているセレクターのこと）

   • カスケードセレクターと同じように、specificityが上がるので、モディファイヤーでのスタイルの上書きが難しくなります。
   • 定義された以外のエレメントでの利用が不可になります。

4. セレクターにIDを利用しない

   IDを使ってしまうと、そのブロックをページ内で一回しか使えなくなるために、再利用が不可になります。
   

以上が設計ルールセットのメインの部分の紹介になります。

簡単なブロックのCSSとHTMLのサンプル

以下に簡単なブロックとモディファイヤーの定義と利用方法のサンプルを紹介します。

結果

まとめ

最近手がけたエンタープライズ向けプロジェクトでも上で説明したCSS設計手法を採用しています。その感想を簡単にシェアしたいと思います。

• 今回のプロジェクトではブロックのCSSとHTMLの作成を外部デザイナーに依頼していました。作成していただいたブロックを組み立て、合計で50以上の画面を作りましたた。ブロックの再利用が本当に簡単で、画面作成にかかるコストを大幅に減らせた印象があります。
• デザイナーからブロックのCSSとHTMLが納品された後でもデザインの多少の変更がありましたが、CSSの再設計を依頼せずに、モディファイヤーを利用することで既存のブロックの拡張が簡単にできました。

著者について
グリシン キリルは、11年前にロシアから来日し、2013年からエンラプトでウェブアプリケーションの開発に従事する。Functional Reactive Programmingに夢中で、クライアントサイドの開発を簡単に、より確かにするための研究を行う。