JavaScript（ECMAScript5）ではクラスを作成することができません。ECMAScript2015になって、ようやくクラスを使えるようになりました。しかしレガシーなブラウザでは実装されていないため、Babelのようなライブラリを使ってコードを変換するのが一般的です。
JavaScriptではprototypeやdefinePropertyなどを使ってクラス（的なもの）を実装しますが、hifiveではそういった面倒な仕組みを意識することなくクラスを実装できるモジュールを開発しました。この機能は1.3.1以降で利用できます。
今回はクラス変数の使い方について紹介します。
ベースになるクラスについて
ベースになるクラスは id というフィールドを持っていることとします。このidはクラス変数として定義された値を返します。
インスタンスが作られる度に id がインクリメントされていきます。そのため、この HelloClass のインスタンスが呼ばれる度にインスタンスのidの値が変わる仕組みです。
そして、このidはクラス変数として定義していますので、インスタンス全体で共通管理されます。例えばあるインスタンスでidを書き換えてみます。
そうすると、別なインスタンスの値も書き換わります。
この id はクラス内のスコープで管理される変数なので、書き換える仕組みを用意しなければ外部から書き換えられることなく安全に利用できるようになります。目的に応じて使ってみてください。
今回のコードはJSFiddleにアップロードしてあります。実装時の参考にしてください。
変数のスコープを適切に管理すれば、クラス設計とその利用がより簡単になることでしょう。ぜひhifiveのクラスモジュールを使いこなしてください。
JavaScriptが広く使われていく中でコーディングスタンダードが重要になってきます。一定の基準に基づいて記述していくことで全体の品質を担保できるようになっていきます。
今回は各社、各JavaScriptプロジェクトがリリースしているコーディングスタンダードについてまとめました。
airbnb/javascript: JavaScript Style Guide
民泊サービスで知られるAirbnbの作っているコーディングスタンダードです。ESLintで候補として表示されるほど標準的なコーディングスタンダードとして知られています。
airbnb/javascript: JavaScript Style Guide
Dojo Style Guide — The Dojo Toolkit – Reference Guide
JavaScriptのフレームワークであるDojoの提供しているコーディングスタンダードです。
Dojo Style Guide — The Dojo Toolkit – Reference Guide
Google JavaScript Style Guide 和訳 — Google JavaScript Style Guide 和訳
GoogleもESLintの標準で候補として表示されます。GoogleはAngularやGWTなど多数のJavaScriptライブラリを開発しています（AngularはTypeScriptベースですが）。その知見を得るためにも使ってみると良さそうです。
Google JavaScript Style Guide 和訳 — Google JavaScript Style Guide 和訳
JavaScript Standard Style
専用のLintツールとも合わせて提供されているスタイルガイドです。セミコロンは不要としていたり、インデントはスペース2つ、キーワードの後はスペースを付けるなどルールが明確にまとまっています。
JavaScript Style Guide | Contribute to jQuery
jQueryのコーディングスタンダードです。歴史の長いライブラリだけに、その品質を一定化するためにコーディングスタンダードがまとまっています。長期的にJavaScriptをメンテナンスしていくためにも参考にすべきではないでしょうか。
JavaScript Style Guide | Contribute to jQuery
Mozilla コーディングスタイルガイド – Mozilla | MDN
Mozillaの提供するコーディングスタンダードです。なお、これはJavaScriptだけでなくCやPythonなど他の言語を記述する際の規定も含まれています。Mozillaのコードにコントリビュートする上での規約と言えます。
Mozilla コーディングスタイルガイド – Mozilla | MDN
felixge/node-style-guide: A guide for styling your node.js / JavaScript code. Fork & adjust to your taste.
Node.jsのコーディングスタンダードです。正しいコードと間違った書き方がまとまっており、どう書くべきかが分かりやすくなっています。定数の書き方なども指定されているので他の人が見たときにも分かりやすいコードになるでしょう。
有名なところとしてはAirbnb、Google、jQueryになるかと思います。こうしたコーディングスタンダードを自社でまとめると理由付けなどが大変なところもあり、他社のものをベースにしながら自社のオリジナルを出していくのが良いかと思います。
特にESLintなどのLintツールに対応した形でコーディングスタンダードがまとめられると使いやすくなるでしょう。単純な明文化より、チェックするツールと連携しているのが大事です。
Webシステムの開発時においてイベント通知はよく使われます。例えばjQueryでボタンを押した時のイベントは次のように設定されます。
こうした通知機能を任意のオブジェクトに追加できるのがhifiveのイベント通知機能になります。今回はその基本的な実装方法について紹介します。
mixを使う
まずオブジェクトに対して eventDispatcher を追加します。これは Prototype に対して追加します。
次にそのオブジェクトのインスタンスを作ります。
この時点でインスタンスに対して addEventListener / removeEventListener が追加されています。通知を受け取るイベント名を設定し、その後実行する処理内容を記述します。
後は任意のタイミングで dispatchEvent を実行します。typeとしてイベントの名前、後は任意のハッシュキーでデータを送れます。
イベント通知は複数の関数を設定できます。イベント通知、いわゆるPubSub型であればオブジェクト側では処理した後に何の関数を呼び出すかといった意識をする必要がありません。各クラスのメソッドに追加しておくことで、オブジェクト間の通信がスムーズになることでしょう。
今回のコードはJSFiddleにアップロードしてあります。実装時の参考にしてください。
hifiveのUIライブラリ、お絵かきボードの機能で拡大する部分のサイズを変更する方法です。
実際の動きは次の画像のようになります。デモはこちらのJSFiddleで試せます。
HTMLについて
HTMLは前回の拡大表示をベースに、拡大する部分を設定できるテキストボックスを追加します。
JavaScriptについて
JavaScriptでは拡大する部分のサイズを設定する処理を次のように書きます。
setSizeに数字を適用するだけなので、拡大/縮小ボタンのような使い方も簡単です。
デモはこちらのJSFiddleになります。ターゲットの画像によってサイズを分けるような使い方も良さそうですね。
Adobe社がついにFlashを2020年で開発停止すると発表しました。2020年までアップデートは継続されますが、すでに現時点でも多くのWebブラウザにおいてFlash Playerは動作しないようになっています。今後、この動きは加速していくことでしょう。
そんな中、既存のFlashコンテンツについてはなるべく息長く提供していきたいと考えるのではないでしょうか。そこで使ってみたいのが今回紹介するようなJavaScriptベースのFlash Playerとも言うべきライブラリです。
mozilla/shumway: Shumway is a Flash VM and runtime written in JavaScript
Mozillaの開発しているライブラリで、Flash VMをJavaScriptで開発しています。Action Script3をサポートしており、キー入力もできるようになっています。
mozilla/shumway: Shumway is a Flash VM and runtime written in JavaScript
gree/lwf: LWF – Lightweight SWF
Flashを読み込んでCanvasまたはWebGLにレンダリングできます。HTML5だけでなく、UnityやCocos2d-x、C++へ出力する機能も提供されています。開発元はGREEです。
gree/lwf: LWF – Lightweight SWF
Silenus
Flashの.flaファイルを解析し、JSONとXMLファイルなどに分解します。専用のレンダーを使って単体アプリケーションとして動かすことも、HTML上に描くこともできます。
ken39arg/FlashForward: FlashLite1.1 to HTML5 Animation project
Flash Lite 1.1相当のSWFファイルをHTML5上で動くのを目標としています。CanvasまだはSVGで出力が可能です。どちらも再現性が高く、場合によってはSWFよりも綺麗に描画できます。
ken39arg/FlashForward: FlashLite1.1 to HTML5 Animation project
ienaga/swf2js: JavaScript製FlashPlayer「swf2js」
SWFファイルを直接バイナリとして解析してHTML5上で実行します。Flash Lite 1〜4系まで対応し、さらにActionScript 1/2系に対応します。3は一部対応しているようです。
ienaga/swf2js: JavaScript製FlashPlayer「swf2js」
tobytailor/gordon: An open source Flash™ runtime written in pure JavaScript
JavaScriptで書かれたFlashランタイムです。SWF1は完全にサポートされていますが、SWF2については一部機能に留まっています。
tobytailor/gordon: An open source Flash™ runtime written in pure JavaScript
Flashを実行するライブラリは多数出てくるのですが、なかなか継続開発されるものは多くないようです。Flashの開発が止まってしまうと、いよいよ既存コンテンツの扱いが問題になります。まだまだビジネスやWebサービスで利用されていることが多いコンテンツだけにHTML5/JavaScriptで完全に置き換えるのも難しいでしょう。ぜひこれらのライブラリを使ってみてください。
7月10日、渋谷の21cafeにてテスト自動化勉強会 by hifive「業務アプリのテスト自動化」が開催されました。50名近い参加者に集まっていただき、大変賑わっていました。
まず最初にSHIFTの太田さんより、SI-Toolkitにおける画像比較の仕組みをソースコードを読みながら解説と題してお話がありました。SI-ToolkitはPitalium似に他画像を使ったテストツールになります。また、Pitaliumと同じくオープンソースで公開されています。
資料は以下になります。
続いてhifiveチームの石川よりスクショでテスト”Pitalium” 新機能ご紹介としてお話しました。こちらはPitalium自体の紹介と、最近追加された部分除外に関する機能について紹介しました。
資料は以下になります。
最後は小島直也さんよりDevOpsの実践に向けた自動テストと題してお話いただきました。DevOpsにおけるテスト、特に自動テストの重要性とその取り組み方について実際の業務を通じて得た知見をお話いただきました。
こちらも資料は以下になります。
その後、懇親会が同会場内で開催されました。多くの方々に残っていただき、お話が賑わっていました。
今後も定期的に勉強会を開催していきます。気になるテーマがありましたらぜひご参加ください！
JavaScript（ECMAScript5）ではクラスを作成することができません。ECMAScript2015になって、ようやくクラスを使えるようになりました。しかしレガシーなブラウザでは実装されていないため、Babelのようなライブラリを使ってコードを変換するのが一般的です。
JavaScriptではprototypeやdefinePropertyなどを使ってクラス（的なもの）を実装しますが、hifiveではそういった面倒な仕組みを意識することなくクラスを実装できるモジュールを開発しました。この機能は1.3.1以降で利用できます。
今回はインスタンスを動的に拡張する方法について紹介します。よりJavaScriptらしい記述が可能になります。
ベースになるクラスについて
今回のベースは以前紹介したhifiveのクラスモジュール紹介（その3）「フィールド/アクセサ」で使ったHelloClassになります。通常、このHelloClassのインスタンスに対して適当なプロパティを指定するとエラーになります。
これを防ぐために、クラスに isDynamic: true, を定義します。
こうして定義されたクラスはインスタンスのプロパティが自由に拡張できるようになります。
元々JavaScriptではこういったプロパティの追加が自由にできていましたが、よりクラス設計を厳密に行うためにデフォルトでは拡張がオフになっています。とは言え、ダイナミックに項目を追加したいという場合もあると思いますので、その際に使ってみてください。
今回のコードはJSFiddleにアップロードしてあります。実装時の参考にしてください。
サーバサイドの開発に慣れている方にとってはクラスや継承は当たり前のものでしょう。これによって実装がとても簡単に、生産性高いものになるはずです。ぜひhifiveのクラス機能を使いこなしてください。
