プラグイン開発でクリーンアーキテクチャになるよう意識したこと

最近Chrome, Firefoxでのプラグイン開発を行ったので、その時気をつけたことなどまとめてみたいと思います。通常のWEB開発とはまた違った経験ができたので面白かったと思う。

疎結合高凝集を意識した

全体的な機能の凝集度を上げれる様にするため、細かいレベルでの機能に分割した。例えばDOMにイベントハンドラを登録するだけの機能や定期的にイベントを発火するだけの機能、それからPostメッセージでやり取りするためのPortを管理したり、タブを管理するための機能などドメインに限らず細かく適切に責務を与える様にして凝集度が上がる様に気をつけた。
ただ最初から凝集度が高くなる様に実装したというよりかは、ある程度動きに問題が無さそうで機能として独立させても良い気がした段階でリファクタリングをする様に心がけていた気がする。この辺りは一発で完全に作るというよりかは段階を踏んで改善していくことができたと思う。

結合度について、凝集度を高くしていくことで機能毎での独立性をあげることができていたと思う。基本的にコンポーネント内で管理する変数はコンポーネント内でのみ利用する場合はメソッド経由で参照ではなく値を返す様にしていた。とは言ってもいろんなところで扱う変数,stateも出てくるが、これについては更新を許可、参照のみ許可などをレイヤー毎に分けることで想定外の依存が存在しない様にし結合のレベルをコントロールできる様に気をつけた。

疎結合高凝集の実現方として、レイヤ間では低結合になる様にしレイヤ内では高凝集となる様レイヤを意識するのが良さそうに思った。またこの時処理フローの流れを一方向になる様にすることで全体の流れが大分把握しやすくなる様に感じた。

疎結合高凝集を意識して作ったメリットとして変更に強いシステムになったと思う。例えばPostメッセージで送る対象がhostが同一のタブからタブの開いた元と、開いた先のタブに対してのみPostメッセージを送る修正をしたのだが細かい修正で対応することができた。

最近Clean Architecture 達人に学ぶソフトウェアの構造と設計を読んでみたけどSOLID原則とかも結局は疎結合高凝集の方法な気がした。

サーバサイドのAPI開発などでデータの登録、更新、削除等が必要な場合はドメインモデルをよく考える必要があると思うけど、今回のプラグイン開発ではAPIの結果をどう表示するかとかリクエストを投げたりするくらいでドメインモデルについてはそこまで考えなくても問題なく実装できた。

AtCoder ABC Q110の問題DをHaskellで解いてみました

AtCoder ABC Q110の問題DHaskellで解いてみました

問題

正整数 N,M が与えられます。

a1×a2×…×aN=M となる正整数からなる長さ N の数列 a が何通りあるかを 10^9+7 で割った余りを求めてください。

ただし、数列 a' と a'' が異なるとは、ある i が存在して ai'≠ai'' であることをいいます。

制約
入力はすべて整数である
1≤N≤10^5
1≤M≤10^9
続きを読む

javascriptでdomの正確な位置を取得したい

javascriptでdomの位置を取得するための関数を作成してみました。domの位置として画面上の左上の位置を基準とした座標とdocument上の左上の位置を基準(スクロールを含めたもの)とした座標があると思いますが、その両方を求めれるようにしたいと思います。

続きを読む

IndexedDBを試してみる

IndexedDBを試してみる

ブラウザ上のデータを保存したい場合FileSystemAPIがありますが、これは非推奨のようなので代わりに使えそうなのを探していたところIndexedDBが良さそうなので試して見たいと思います。

IndexedDBの使い方はmozillaのサイトを見たらわかると思います。

続きを読む

ECMAScript2015のProxyを使ってobjectの値の変更を検出する

ECMAScript2015でobjectの値の変更を検出して関数を実行する場合、以前であればObject.prototype.watchの機能があったのですが現在では非推奨および廃止とのことなのでECMAScript2015から導入されたProxyの機能を使って値の変更を検出したいと思います。

MDNのサンプルでは以下のようにProxyに対して監視対象のobjectの初期値とイベントハンドラを渡していて、帰ってきたobjectの値を参照しようとした時にイベントハンドラのget関数が実行されていることが確認できます。

続きを読む

ロジスティック回帰を実装してみる

ロジスティック回帰

2クラス分類のロジスティック回帰をPythonで実装して見たいと思います。

C1, C2の2クラス分類についてクラスC1の事後確率は以下のように表せられます。

続きを読む

ECMAScript6でthisを束縛する方法について

ECMAScript6でthisを束縛する方法について検証した際のメモ

まずダメな例として、以下は画面クリックの際に呼ばれる clickFunc から this.calledFunc() を呼び出すことはできません。クリックに反応したelementがthisになるため、この場合はリスナーが設定されたdocumentがthisになりthis.calledFunc()を呼び出すことはできません。

続きを読む