LoginSignup
4

More than 5 years have passed since last update.

Mithril.jsをどういう設計でサービスに導入したか

Last updated at Posted at 2017-12-07

※ この記事はエキサイトAdvent Calendar 2017 8日目の記事です。

普段はAndroidやPHPでのサーバーサイドの開発をしているのですが、

野球党というサービスでフロントエンドを担当し、Mithril.js(以下 Mithril)を採用しました

その際にMithrilをどういう設計でサービスに導入したかということを紹介します

Mithrilのチュートリアルや入門、細かいAPIの紹介は致しません

Mithrilとは

SPA向けのJavaScriptフレームワーク

特徴

軽量 かつ フルスタック

軽量

スクリーンショット 2017-12-06 17.35.51.png
Mithrilの公式ページより引用

8kbというのは素晴らしいですね!
用意されているAPIが13個のみで学習コストが低いのも素晴らしいです

フルスタック

  • ルーティング
  • リクエストクライアント
  • 仮想DOM
  • auto redraw

SPAに必要なものは一通り揃っています

ドキュメントやサンプル,チュートリアル

公式のドキュメントが整っているので、そちらを参考にするのがベストです

日本語
http://mithril-ja.js.org/

英語
https://mithril.js.org/

基本的には日本語版で問題ないのですが、少しだけバージョンが古く、訳が怪しいところもあるので、
悩んだら英語版のドキュメントにも目を通すと解決できるかと思います


0.系と1.系で大きな差があるので、ググる場合は気をつけてください
最新版の公式ドキュメント,サンプルとMithril本体のコードを読みに行くのがオススメです

サービスへの導入

F/S段階の小さなサービスで導入しました

野球党
プロ野球全試合のつぶやきをリアルタイムでまとめて見れるサービス:baseball:
https://89fun.jp/

自由が故に、どういう設計でやるべきか

Mithrilは制約が少なく、自由に実装できます

ただ本当に自由に書いてしまうとview componentのクラスが太り続け、メンテナンスが厳しくなりそうです

公式ドキュメントにはtipsやアンチパターンについては記述してありますが、全体設計等には触れていません

そこで野球党では、4つのレイヤーに分ける設計で取り組みました

設計で目指すポイント

シンプル

メンテナンスの容易さ、実装するエンジニアの追加や変更する際も簡単に引き継げるようにシンプルな設計にする

加えて、
せっかくMithrilの学習コストが低いのに設計の把握に時間がかかるようではもったいないので、
そういう意味でもシンプルにする

4つのレイヤーに分ける設計

1.ページをまとめるjs

ここはdocument.bodyやrootとなるDOMに mount or route を設定する
それ以外は行わない

2.view component

Mithrilのコンポーネント
view + ライフサイクル以外は絶対に行わない
ユーザーからのイベントも受け取るだけで処理はmodelに任せる

3.model

view component と data source を繋ぎ、ロジックを実装するクラス
ここのunitテストを書くことで最低限の処理が担保されるイメージ
data sourceを分離しておくことでテストも書きやすい

もし複雑な処理があるようなサービスであれば
ここをUseCaseとRepositoryにわけると良いかもしれません

4.data source

modelから呼ばれる
各種APIへのリクエスト処理がここに該当する
LocalStorageなどを使う場合もアクセスはここが担当する
Promiseを返却する

この設計を導入してみて

実際に途中から開発メンバーが追加されたのですが、
その時もとてもスムーズに開発に参加できておりました

Mithrilの学習コストが低いのもあり、ほとんど事前学習や調査は必要なかったとのことです!

反省点としては
どうしてもview componentではDOMに階層を表現するためにネストが深くなるので、
各要素ごとに小さく小さくview componentを切って、実装する方が把握しやすくなってよかったかなと思いました

まとめ

  • MithrilとはSPA向けのJSフレームワークでフルスタックで軽量

  • Mithrilを4つのレイヤーにわけて設計してサービスに導入しました

  • 設計を決めておくことで担当メンバーの追加や交代も容易になる

  • 良い設計を考えつづけるのが大事

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4