zx + Datadog + GitHub Actions でフロントエンドのコードベースの健全性を可視化する
フロントエンドのダッシュボードを作ってみたらいい感じだったので紹介です。 作ったもの zx と Datadog、GitHub Actions を使って以下画像のように、フロントエンドのコードベースの各指標を可視化するダッシュボードを作りました。 値はデモ用に書き換えています 現在、計測している指標はこちらです。 Vue SFCファイルにしめるTypeScriptの割合 Vue SFCファイルにしめるComposition APIの割合 strict: trueにした場合のType Errorの数（tsc & vue-tsc） Jestの各種カバレッジ 各指標は毎朝9時に更新していて、時系列での推移も確認できます。 なぜ作った？ 技術的負債解消等コードベースのリファクタリングの活動は、機能追加に比べ進捗を把握しにくい、成果が伝わりにくいという問題があり、それを解消したいと考えたからです。 こ
@ts-expect-errorを自動追加！suppress-ts-errorsの紹介
TypeScript の型チェックを厳格化したいが既存の型エラーが多すぎて、やむなく緩い型チェックにしている方へ改善の助けになりそうなツールを作ったので紹介です。 🔧 作ったもの プロジェクトのコードベースを走査して、型エラーがあるコードすべてに@ts-expect-error or @ts-ignoreのコメントを追加する suppress-ts-errors という CLI ツールを作りました。 以下の GIF のように npx 経由で簡単に利用できます。 さらに、ts、tsx だけでなくVue SFC のスクリプト部分へのコメント追加にも対応しています。 コードはこちらです。⭐ を貰えると泣いて喜びます。 なぜ作った？ 現職のプロジェクトにて型チェックを厳格化できていない（strict: trueにできていない）という状況を改善したいと思ったからです。 型チェックのルールを修正する
Firebase + Spreadsheet で Slack Bot を作ったら社内用語辞典の運用が3倍楽しくなった話
最近作った Slack Bot が好評だったのでまとめてみました！ どこの Slack ワークスペースでも導入できるように詳細に設定方法も記載しています。 🛠 作ったもの tell-me-bot（社内では tell-me-paccho）という、社内用語辞典をいい感じに管理してくれる Slack Bot を作りました。 社内ではもともと Spreadsheet で社内用語を管理していたのですが、メンテナンスする人が限られ、あまり積極的には利用されていない状況でした。 そんな時に@しかじろうさんのこちらの記事を発見して、これはおもしろいアイデアだと思い、Firebase + Bolt（TypeScript）にて作ってみました（アイデアをくれた@しかじろうさんに感謝🙏）。元記事の機能を参考に+αの機能も色々実装しています。 構成 Cloud Functions for Firebase で
ライブラリアップデートを継続的に行う文化をチームで作るための取り組み
この記事は LAPRAS アドベントカレンダー 2021 の 1 日目の記事です。 LAPRAS 入社後に行ってきたライブラリアップデート周りの取り組みについてまとめてみました。 経緯 プロダクトが成長して機能が豊富になると、必然的に依存ライブラリが増加し、各ライブラリのアップデートへの追従に苦労しがちですよね。 自分が入社した当時の LAPRAS でもその課題がありました。 当時のライブラリアップデートまわりの環境は、セキュリティアラートに関連する PR のみが定期的に作られ、その PR のレビューも気づいた者がベストエフォートで行うというもので特に何か明文化されたルールはありませんでした。 ライブラリアップデートが遅れると、以下のような問題があります。 セキュリティリスクの増加 新機能が使えないというモチベーションの低下 より大きなライブラリ・FW（例： Vue, Django 等）の
Mock Service Worker で開発用のモックAPIを作る
フロントエンドの開発時に仮の API を使いたいってシチュエーションはわりとあると思います。 そんな時に、Mock Service Worker を使うと便利だったのでまとめます。 Mock Service Worker とは？ Mock Service Worker は、ネットワークレベルで API リクエストをインターセプトして mock のデータを返すためのライブラリです。API リクエストを含む処理のテストや、開発時の mock サーバーの代替として利用出来ます。 テストでの利用については以前こちらの記事でまとめました。 今回は開発時のモック API としての利用について書きます。 開発用の API というと、JSON Serverが有名ですが、Mock Service Worker では Service Worker を使ってリクエストを返すため、別プロセスでローカルサーバーを立
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
