ミツエーリンクス製npmパッケージの紹介
UI開発者 加藤この記事はミツエーリンクス Advent Calendar 2020 - Adventarの2日目の記事です。
今回は当社が公開しているnpmパッケージを2つご紹介したいと思います。もちろん一般に公開しているものですので、皆さんにもご利用いただけます！有用だなと思っていただけたら、ぜひ使ってみてください！
@mitsue/vlint
vlintはHTMLとCSSの文法チェックをコマンドライン上で行うことができるツールです。内部的にはThe Nu Html Checkerを利用しています。
このツールの目的の1つは「ページごとの文法エラーを管理すること」です。もちろんエラーや警告が1つも出ないことが前提ですが、プロジェクトの要件によってはどうしても回避できない場合があります。 長期間運用をしていると、そういった回避できないエラーや警告が出ていることが常態化してしまい、どのエラーが意図したもので、どのエラーが直すべきエラーなのか、見分けがつかなくなってしまうケースがあります。
そのためvlintにはファイルごとのエラーを.vlintignore.ymlに出力し制御できる仕組みを実装してあります。回避できない、意図したエラーは.vlintignore.ymlに列挙し、一覧にないエラーが発生した場合はアラートが出るので、意図しないエラーや、リグレッションを防ぐごとができます。
@mitsue/eslint-config
JavaScriptの構文チェックツールであるESLintの当社用の設定です。
eslint-config-googleやeslint-config-airbnbなど、すでに公開されている設定もありますが、当社でも独自の設定ルールを作成し、公開しています。
当社ではフロントエンド・スタイルガイドというものを策定しており、HTML, CSS, JavaScriptの記述ルールなどを定めています。@mitsue/eslint-configでは、そのフロントエンド・スタイルガイドに沿うようにルールを定めています。 プロジェクトによってはES5以前で書かれているプロジェクトもあるためES5用の設定ファイル（@mitsue/eslint-config-es5）も用意しています。「@mitsue/eslint-config-es5」は「@mitsue/eslint-config」を継承し、ES5用にいくつかのルールを上書きする形で運用しています。
さきに紹介したvlintと併せて、HTML, CSS, JavaScriptの文法エラーがないかは、随時チェックするようにしています。
作業者ベースではhuskyとlint-stagedを組み合わせて、プレコミットフックを使ってチェックすることが定番化しており、エラーがある状態ではコミットできない制約を設けることで品質の低下を防ぐ仕組みを作っています。
また、エラーがないかをチーム全員でチェックできるようにGitLab CIを使ったCIの導入も少しずつ進んでいます。
最後に
世界には数えきれないほどのツールがあり、今回ご紹介したツールを使わないと達成できないことというのはほとんどない気がします。しかし、ツールにはそれぞれ特性や相性があり、いつ、どこで、誰にマッチするかは分かりません。私たちが普段使っているツールが、誰かの助けにもなればみんな幸せ...！と思っています。
npmパッケージの公開はここ1年くらいで本格的に取り組み始めたところで、正直まだ手探りなところが多いですが、今後も少しずつツールやパッケージなどを公開していく予定です。公開したときはまたブログで紹介していきますので、当社への興味を持っていただくきっかけとなれば幸いです！