8
2

More than 1 year has passed since last update.

失敗から学ぶOSSの選び方(フロントエンド編)

Posted at

2021/01 に迎えた FlashEOL のタイミング で Flash から Reactベースの画面へリプレースし、約1年間保守しました。
OSS にたくさん助けてもらいましたが、1年間を振り返ってみて今後の教訓を考えたいと思います。

前提

React + React Hook Form + TypeScript + material-ui + webpack という構成です。
初回のOSS選定は以下の観点で行いました。

  • 学習コストが高くないか
    • 日本語の公式ドキュメントがあるか
    • ググったときに日本語の解説記事が豊富か
  • コミュニティが活発か
    • GitHub の Star数が 1000 以上 (目安)
    • npm の ダウンロード数が 50000 以上 (目安)

1. 自動テストがだんだん遅くなってきた🤔

背景

自動テストをするため、Cypress を導入していました。
Cypress はテスト失敗箇所が画面上で確認できるため、初心のうちは見やすく重宝していました。

失敗

Cypress はデフォルトで直列実行されるため、テストケースの増加に対してテスト時間の悪化が顕著となりました。
そこで並列実行を考えましたが、なんと Cypress.io (CIサービス) 以外で並列実行が出来ない仕様でした。(そういうマネタイズなんですかね...)
対して jest はどこでも並列実行が可能なので移行しました。testing-library や enzyme など選択肢が多く敬遠していましたが、早く使っておけばよかった

教訓

テストライブラリを選ぶときは、テストケースが多くなっても開発効率に影響が出ないか確認/検証しよう。

2. OSSがメンテナンスされなくなった😱

背景

material-table は、material-ui をベースとしたテーブルコンポーネントです。
material-ui の公式ドキュメントで紹介されるほど人気があります。
(https://github.com/mui-org/material-ui/commit/e470b1ba9c234f16972749aa7c88d331ac9f46c1)
カスタマイズ性の非常に高いコンポーネントなので、開発しているプロジェクトの主軸となるライブラリとなっています。
グルーピング機能にはかなり救われました。

失敗

2020年夏ごろ、多くの不具合を残したままバージョン更新が止まってしまいました。
material-ui の公式ドキュメントからもいつの間にか紹介文が消されてしまいました😥
material-table は React V16 に依存しているため、React V17 に上げることが出来なくなってしまいかなり頭を悩ませるライブラリとなっています...

どうやらメンテナである mbrn 氏がメンテナンスできる状態ではなくなってしまい、他にメンテナもいないため保守できなくなったらしいです。
( https://github.com/mbrn/material-table/issues/3044 )
material-table-core というコミュニティによるフォークプロジェクトが立ち上がっていますが、まだまだStar数/ダウンロード数が少ないため見送っています。流行ってー

教訓

メンテナが1人しかいないOSSはある日突然更新が止まることがあるので、見送ろう。

結び

安定して継続的に使っていけるライブラリを選んだはずですが、1年経つと状況が変わってしまいますね。
フロントエンドのライブラリは栄枯盛衰が激しいですが、長く使っていけるかどうかをよく判断して選定していきたいです。

8
2
0

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
8
2