Productivity Weekly (2021-08-11号)
こんにちは。サイボウズ株式会社 生産性向上チームの平木場です。
僕たち生産性向上チームは毎週水曜日に Productivity Weekly という「1 週間の間に発見された開発者の生産性向上に関するネタを共有する会」を社内で開催しています。
本記事はその時のネタをまとめたものです。
今回が第 38 回目です。過去の記事はこちら。
news 📺
Release Support caching for mono repos and repositories with complex structure · actions/setup-node
先日 actions/setup-node アクションにキャッシュ機能が追加されました。キャッシュの設定しなくてよくなるからめちゃ楽になるぞ。と思いましたが、ロックファイル（package-lock.json、yarn.lock）がリポジトリルートになければいけなかったため、モノレポでは使えませんでした（参考）。
が、v2.4.0 でモノレポをサポートする変更が入りました。cache-dependency-path にロックファイルがあるディレクトリのパスを設定することでリポジトリルート以外のロックファイルを参照できます。
また、以下のように書くことで複数ディレクトリのロックファイルのキャッシュを扱うことができます[1]（参考）。
- uses: actions/setup-node@v2
with:
node-version: '14'
cache: 'npm'
cache-dependency-path: |
javascript/mswjs
javascript/strykerjs
僕も実際に実行してみました。結果はこちらです。
モノレポ対応してますます使いやすくなりましたね。ワークフローの記述量が減って良いです。
IP アドレスの範囲のオープン プレビューを有料プラン ユーザー向けに開始
CircleCI Cloud において、ジョブから発生するネットワークトラフィックの IP アドレス範囲[2]を限定できる IP ranges という機能が公開されました。（有料プランユーザ向けプレビュー）
IP ranges を有効にすることで、あらかじめ用意された IP アドレス範囲リストのいずれかの IP アドレス範囲がジョブで利用されます。
これにより、社内ネットワークなどへのインバウンドを CircleCI のジョブからのみに限定できます。例えば CircleCI から社内ネットワーク内サーバにアクセスしなければいけないなどの場合に、一時的にポートを解放するなどの方法をどこかの事例で見たことがありますが、リスト内のアドレスのみ許可することで、よりセキュアにできます。
ただ、IP アドレス範囲リストは他の CircleCI ユーザも利用できるため、IP アドレス範囲リストからのアクセスだから絶対安全というわけではないことに注意が必要です。
GitHub Next | Visualizing a codebase
GitHub Next からリポジトリのコードベースの構造をダイアグラムで可視化するサイト Visualizing Codebases、および、ツール repo-visualizer が公開されました。
Visualizing Codebases を使うことで、コードベースを「指紋」として構造を構造を一目で確認できます。ただ、冒頭でも述べましたが、ブツブツがたくさんあるので、トライポフォビア（集合体恐怖症）にはきついかもしれません。
とりあえず気になるリポジトリを調べたいならば、記事中の Explore for yourself! または Visualizing Codebases ですぐに確認できます。
また、githubocto/repo-visualizer アクションを使うことで、簡単に CI に組み込んでリポジトリ上に画像を置けます。僕も実際に自分のリポジトリに組み込んでみました。とても簡単でした。
大規模な OSS などのリポジトリでは、どういうファイルがどこに配置されているか、大元のソースコードがどこにあるのかといったコードベースを把握するのは大変です。そういったリポジトリにコミットしたい場合に活用できそうです。
know-how 🎓
Continuous Integration Benchmark Metrics
CircleCI 社の CI に関するメトリクス、データを基に図を作ってみたという記事です。
Continuous Integration - Benchmark Metric と名付けられた図にはコミットからデプロイまでの一連の流れと、それぞれのフェーズやスパンで最適とされる時間、レートが載っています。
例えば Build Time の場合、Build Time の範囲（ビルドから CI の通過まで）と、最適とされる時間（Best: 0:02 min、Median: 3:27 min、Bottom: 28:00 min+）が図上に載っています。
CI の改善点を共有する場合などでこういう図があると便利かもしれません。
JavaScript で文字数を length で数えるのはやめようの実例
JavaScript で文字数を length で取得すると期待した値が得られないことを実例を通して説明している記事です。
例えば漢字の 𠮟 は見た目上 1 文字ですが "𠮟".length は 2 を返します。この記事では Prettier が文字数を length で数えていたために起きたバグとどうやって解決したのかも書かれており、対策方法を参考にできます。
正直なところ僕は length が文字数ではなく Unicode コードユニットの数を数えることを知らなかったので普通に length で文字数を数えちゃってました。（MDN Web Docs にも普通に載ってた。）これから気をつけていこうと思います。
tool 🔨
ブラウザ拡張機能を作成するためのテンプレートをつくった
以前ブラウザ拡張を作るためのリポジトリテンプレートである antfu/vitesse-webext を紹介しました。こちらは Vue3、Windi CSS などのフレームワークが同梱済みで正に今すぐ拡張機能を作れるスターターという感じでした。便利な反面一部のフレームワークを取り替えたいという場合に面倒だったり、もっとシンプルなテンプレートが欲しいと思ったりしました。
この記事で紹介されている HikaruEgashira/browser-extension-ts-template はもっとシンプルで最小構成と言えるブラウザ拡張機能テンプレートです。
もともと有名なブラウザ拡張テンプレートとして fregante/browser-extension-template がありますが、これを TypeScript 化したとのことです。
シンプルな拡張機能テンプレートを求めている場合はこちらの方が使い勝手が良いかもしれません。
koneta 🍘
Productivity Weekly で出たネタを全て紹介したいけど体力が持たない、または、そんなに言うことがなかったネタを一言程度で書くコーナーです。
-
GitHub Actions: Self-hosted runner events are now included in the Audit Log | GitHub Changelog
- GitHub Actions の Self-hosted runner でジョブを実行したり停止して処理が止まった場合、監査ログへ記録されるようになりました。
- Enterprise プランのユーザのみが利用可能です。
-
The Cloud Forward Podcast by Alibaba Cloud: Our Newly Launched Podcast Series! - Alibaba Cloud Community
- Alibaba Cloud がクラウドコンピューティングがデジタル世界を変革する革新的な方法について議論するためのポッドキャストを始めました。
- 第 1 回は 2021 年のテクノロジートレンド TOP10 がテーマとのこと。
- Spotify と Apple Podcasts で聞くことができます（英語ですが）。
あとがき
先週号です。またもや遅くなってすみません。先週はずっとお休みだったので、今週の月曜日に仕事を始めた時感覚を取り戻すのが大変でした。ちなみに僕は早起きができなくなってしまいました。直したい。
8/28（土）に Open Developers Conference 2021 Online というカンファレンスがあるのですが、生産性向上チームが登壇します！生産性向上チームの活動に興味のある方はぜひお越しください。他のセッションも面白そうなのが揃っています。楽しみですね。
生産性向上チームでは毎週こういったネタを共有する会を行っています。そんな生産性向上チームが気になる方は下のリンクをクリック！
Discussion