Skip to content

テスト自動化勉強会が開催されました

7月10日、渋谷の21cafeにてテスト自動化勉強会 by hifive「業務アプリのテスト自動化」が開催されました。50名近い参加者に集まっていただき、大変賑わっていました。

まず最初にSHIFTの太田さんより、SI-Toolkitにおける画像比較の仕組みをソースコードを読みながら解説と題してお話がありました。SI-ToolkitはPitalium似に他画像を使ったテストツールになります。また、Pitaliumと同じくオープンソースで公開されています。

資料は以下になります。

続いてhifiveチームの石川よりスクショでテスト”Pitalium” 新機能ご紹介としてお話しました。こちらはPitalium自体の紹介と、最近追加された部分除外に関する機能について紹介しました。

資料は以下になります。

最後は小島直也さんよりDevOpsの実践に向けた自動テストと題してお話いただきました。DevOpsにおけるテスト、特に自動テストの重要性とその取り組み方について実際の業務を通じて得た知見をお話いただきました。

こちらも資料は以下になります。


その後、懇親会が同会場内で開催されました。多くの方々に残っていただき、お話が賑わっていました。

今後も定期的に勉強会を開催していきます。気になるテーマがありましたらぜひご参加ください!

テスト自動化勉強会 by hifive「業務アプリのテスト自動化」 – connpass

hifiveのクラスモジュール紹介(その5)「インスタンスの動的な拡張」

JavaScript(ECMAScript5)ではクラスを作成することができません。ECMAScript2015になって、ようやくクラスを使えるようになりました。しかしレガシーなブラウザでは実装されていないため、Babelのようなライブラリを使ってコードを変換するのが一般的です。

JavaScriptではprototypeやdefinePropertyなどを使ってクラス(的なもの)を実装しますが、hifiveではそういった面倒な仕組みを意識することなくクラスを実装できるモジュールを開発しました。この機能は1.3.1以降で利用できます。

今回はインスタンスを動的に拡張する方法について紹介します。よりJavaScriptらしい記述が可能になります。

ベースになるクラスについて

今回のベースは以前紹介したhifiveのクラスモジュール紹介(その3)「フィールド/アクセサ」で使ったHelloClassになります。通常、このHelloClassのインスタンスに対して適当なプロパティを指定するとエラーになります。

これを防ぐために、クラスに isDynamic: true, を定義します。

こうして定義されたクラスはインスタンスのプロパティが自由に拡張できるようになります。

元々JavaScriptではこういったプロパティの追加が自由にできていましたが、よりクラス設計を厳密に行うためにデフォルトでは拡張がオフになっています。とは言え、ダイナミックに項目を追加したいという場合もあると思いますので、その際に使ってみてください。


今回のコードはJSFiddleにアップロードしてあります。実装時の参考にしてください。

サーバサイドの開発に慣れている方にとってはクラスや継承は当たり前のものでしょう。これによって実装がとても簡単に、生産性高いものになるはずです。ぜひhifiveのクラス機能を使いこなしてください。

クラスの作成と使用 – hifive

hifiveのクラスモジュール紹介(その4)「抽象クラス」

JavaScript(ECMAScript5)ではクラスを作成することができません。ECMAScript2015になって、ようやくクラスを使えるようになりました。しかしレガシーなブラウザでは実装されていないため、Babelのようなライブラリを使ってコードを変換するのが一般的です。

JavaScriptではprototypeやdefinePropertyなどを使ってクラス(的なもの)を実装しますが、hifiveではそういった面倒な仕組みを意識することなくクラスを実装できるモジュールを開発しました。この機能は1.3.1以降で利用できます。

今回は抽象クラスの使い方について紹介します。

ベースになるクラスについて

今回のベースは以前紹介したhifiveのクラスモジュール紹介(その2)「継承」で使ったAnimalClassになります。このAnimalClassは継承して利用するクラスになります。そこで抽象クラスであるという定義として isAbstract: true, を指定します。

こうして定義されたクラスはインスタンスを作ろうとするとエラーになります。

抽象クラスにすることで実装も含めた形で継承前提のクラスが作れるようになります。


今回のコードはJSFiddleにアップロードしてあります。実装時の参考にしてください。

サーバサイドの開発に慣れている方にとってはクラスや継承は当たり前のものでしょう。これによって実装がとても簡単に、生産性高いものになるはずです。ぜひhifiveのクラス機能を使いこなしてください。

hifiveのクラスモジュール紹介(その3)「フィールド/アクセサ」

JavaScript(ECMAScript5)ではクラスを作成することができません。ECMAScript2015になって、ようやくクラスを使えるようになりました。しかしレガシーなブラウザでは実装されていないため、Babelのようなライブラリを使ってコードを変換するのが一般的です。

JavaScriptではprototypeやdefinePropertyなどを使ってクラス(的なもの)を実装しますが、hifiveではそういった面倒な仕組みを意識することなくクラスを実装できるモジュールを開発しました。この機能は1.3.1以降で利用できます。

今回はクラスのフィールド、アクセサについて紹介します

フィールドについて

フィールドはインスタンスで用いる変数になります。基本的に外部から直接変更することはありません。defaultValueを使って規定値を設定できます。

アクセサについて

フィールドにアクセスするためのget/setメソッドを提供するのがアクセサです。

アクセサ名をnullで定義した場合、自動的に _p_アクセサ名 でget/setが定義されます。また、getだけを定義した場合は読み取り専用のアクセサになります。

アクセサはフィールドにそのまま値を入れるだけでなく、計算した上で入力/出力できます。

読み取り専用にするために

JavaScriptの 'use strict'; を使うことで読み取り専用のアクセサに書き込みを行おうとしたり、存在しないアクセサへのアクセスをエラーにできます。

適切に開発していくためにも 'use strict'; を使っていくべきでしょう。


今回のコードは JSFiddle にアップロードしてあります。実装時の参考にしてください。

サーバサイドの開発に慣れている方にとってはクラスや継承は当たり前のものでしょう。これによって実装がとても簡単に、生産性高いものになるはずです。ぜひhifiveのクラス機能を使いこなしてください。

hifiveのクラスモジュール紹介(その2)「継承」

JavaScript(ECMAScript5)ではクラスを作成することができません。ECMAScript2015になって、ようやくクラスを使えるようになりました。しかしレガシーなブラウザでは実装されていないため、Babelのようなライブラリを使ってコードを変換するのが一般的です。

JavaScriptではprototypeやdefinePropertyなどを使ってクラス(的なもの)を実装しますが、hifiveではそういった面倒な仕組みを意識することなくクラスを実装できるモジュールを開発しました。この機能は1.3.1以降で利用できます。

今回はクラスの基本機能でもある継承について紹介します。

ベースになるクラスについて

まずベースになるクラス、AnimalClassについて紹介します。名前と鳴き声を紹介するメソッドがあります。

継承する

このAnimalClassを継承するクラスとして、DogClassとCatClassを作成します。この時、 AnimalClass.extend を使います。コンストラクタは必須のメソッドになります。また、この時点で親のフィールド(voice)にアクセスできます。親のコンストラクタを呼び出す際には
`super
.constructor.call(this, params);` を使います。

CatClassも殆ど同じ実装になります。

このように共通化される機能は親クラスに入れられるようになります。

使い方

継承したクラスは通常のクラスと同じように実装できます。


サーバサイドの開発に慣れている方にとってはクラスや継承は当たり前のものでしょう。これによって実装がとても簡単に、生産性高いものになるはずです。ぜひhifiveのクラス機能を使いこなしてください。

hifiveのコントローラを連携させてみよう

大きなシステムが機能やサービスごとに分割して開発されるように、フロントエンドにおいても一つのコントローラですべてを管理するのではなく、複数のコントローラに分けて実装する方が効率的です。

今回はhifiveで複数のコントローラを分ける実装方法について紹介します。

実装例はJSFiddleにあります。参考にしてください。

概要

まず大事なのは全体を統括するコントローラの存在です。その中に個々の機能を実装するコントローラが複数存在します。つまり全体を統括するコントローラは機能実装はせず、コントローラ同士をつなぐ役割に徹するのが良いでしょう。

HTMLについて

HTMLは次のようになります。全体として #container があり、その中に子コントローラ用の #container1 、 #container2 があります。

JavaScriptについて

JavaScriptの実装ですが、まず子コントローラを定義します。まずテキストが入力されたタイミングでイベントハンドリングを行うコントローラです。

次に親コントローラから送られてきたメッセージを表示するコントローラです。

最後にこの2つのコントローラをつなぐ親コントローラです。大事なのは __meta の中で子コントローラごとにrootElementとして監視するDOMを指定しておくことです。

実際の処理のハンドリングについては以下のように、まず子コントローラからトリガーを使って親コントローラへ通知します。

親コントローラでは {rootElement} という定義を使って受け取ります。こちらでは子コントローラのメソッドを直接呼び出します。

そして子コントローラで表示処理を行います。


このように実装することでDOMごとにコントローラを分けて権限を管理しつつ、相互にメッセージのやり取りができるようになります。ごく小さなWebアプリケーションであれば一つのコントローラで良いですが、ある程度大きくなるのが予想される場合はあらかじめコントローラ連携を念頭に作るのが良いでしょう。

詳細は13.コントローラの連携 – hifiveを参照してください。

hifiveのクラスモジュール紹介(その1)「基本的な定義方法」

JavaScript(ECMAScript5)ではクラスを作成することができません。ECMAScript2015になって、ようやくクラスを使えるようになりました。しかしレガシーなブラウザでは実装されていないため、Babelのようなライブラリを使ってコードを変換するのが一般的です。

JavaScriptではprototypeやdefinePropertyなどを使ってクラス(的なもの)を実装しますが、hifiveではそういった面倒な仕組みを意識することなくクラスを実装できるモジュールを開発しました。この機能は1.3.1以降で利用できます。

今回はまず基本的な構造を紹介します。次のように書きます。重要なのは h5.cls.RootClass.extend になります。そして、 _super (親クラス)を引数として、オブジェクトを返却します。

オブジェクトには基本的なキーとして name/field/accessor/method があります。それぞれクラス名、フィールド名、プロパティ、メソッドの4つになります。

フィールドの利用

例えばフィールドは次のようになります。_ではじめるのがルールです。

プロパティの利用

プロパティは次のようになります。こちらは_を使いません。

メソッドの利用

メソッドは初期で読み込まれるconstructor以外は自由に定義できます。クラスのインスタンスを作成する際に値を送ることもできます。

インスタンス生成

そしてクラスのcreateメソッドを使ってインスタンスを生成します。

後はこのインスタンスを使って自由にメソッドを呼び出せます。

外部に公開する

最後に外部(グローバル)に公開する場合です。これは h5.u.obj.expose を使います。例えば以下の例では hoge.fuga.SampleClass でアクセスできます。


クラスを使ったサンプルをJSFiddleにアップしてあります。ごく基本的な機能だけですが、実装時の参考にしてください。

これから何回かに分けてクラスの使い方を紹介します。JavaやC#相当まではいきませんが、クラスを使うことでより生産性の高いコードが書けるようになるはずです。

クラスの作成と使用 – hifive