ツール・ド・フロントエンド2024（フロントエンド班の開発環境や興味のある技術を調査してみた）

こんにちは、チームラボのフロントエンド班に所属している速水です。
今回、フロントエンド班内でツール・ド・フロントエンドというイベントを行ったので、その一部を紹介させてください。フロントエンド班の雰囲気が少しでも伝われば幸いです。

ツール・ド・フロントエンドとは

フロントエンド班内で、開発環境や生産性の上がるツール、興味のある技術やテーマについて紹介し合うイベントです。
2016年からほぼ毎年行われていて、流れとしては、みんなで各テーマに関して自分の使っているツールや技術を下記のようにドキュメント上に記載し、意見を交換していく形です。

調査結果

開発機のOS

Windows に一票も入らず、 Mac に票が集まる形になりました。

使用しているエディタ

VS Code が、やはり強い結果となりました。
エディタの選定基準として「 GitHub Copilot が使えるかどうかが大事だよね」や「 Google 社が新しく開発した Project IDX について」の話題もあり、面白かったです。

エディタの拡張機能

様々な拡張機能が挙げられましたが、上位は Git に関する拡張機能（ GitLens 、 GitHub Pull Request など）が占めました。
また、チームラボでは多言語対応を求められるプロジェクトが多いので i18n Ally も2番目に票が集まりました。

エディタのテーマ

票は、結構バラバラに割れましたが KTRZ Monokai 、 Planet Zero 、 GitHub Dark などのダークテーマが人気であることがわかりました。
最も票が集まったのは、色彩が見やすく昔から多くの開発者から支持されている Monokai でした。

エディタのフォント

自分の予想では、Mac 標準の等幅フォントである Menlo に最も票が集まると思ったのですが、 UDEV Gothic JPDOC に票が集まりました。
自分も実際に UDEV Gothic JPDOC をフォントに設定して使ってみたのですが、ユニバーサルデザインフォントなので視認性が高く、確かに使いやすかったです。

普段使いのブラウザ

やはり Google Chrome が圧倒的に票が集まる結果となりました。

ただ、比較的新しい Arc も10票集まっており、UI/UXの革新性や生産性向上のための機能がすごいんだなと改めて感じました。
4票の Vivaldi は、カスタマイズ性やプライバシー保護の機能が評価されていそうでした。

ブラウザ拡張機能

上位には、会議室の確認ができるものや勤怠を管理できるラボ独自の拡張機能が入りました。
3番目にランクインした Sheets Row Highlighter は、Googleスプレッドシートのカレントセルの行(列)をハイライトできる便利な拡張機能なのですが、実はフロントエンド班のエンジニアが開発したものになります。めっちゃ便利なので使ってみてください！！

推しのパッケージマネージャー

Node.js 標準の npm に最も票が集まる形となりました。
プロジェクトによって、最適なパッケージマネージャは変わってくると思いますが、安定性やコミュニティの大きさが評価されたのかなと自分は、思いました。

ただ、昨年には Yarn の v4 がリリースされたり 、 Bun も v1 をリリースしており これからどう移り変わっていくのか気になりますね。

趣味として学びたいフロントエンド技術

プロジェクトで多く使われる React / Next.js を差し置いて、 Three.js が1位 、 Astro が2位という結果になりました。
フロントエンドの業務をを主にやっている者としては、リアルタイムの3D描画を実装して、インタラクティブなウェブ体験を提供できたら非常に楽しそうですよね。自分もthree.jsは学びたいです。

2位の Astro は、先日発表された State of JavaScript でもランキングが上がっていたので、改めて勢いがあることを感じました。

趣味として学びたいフロントエンド以外の技術

1位は Rust 、2位は パスキー 、3位は Flutter ・ Figma の順に票を集めました。

Rust に関する自分の知識は、可愛いカニのキャラクター（ Ferrisくん ）がいて、エンジニアからの評価が高い言語くらいのイメージでした。
今回の結果を見て自分も調べてみたところ、パフォーマンスが高く、安全性の高いシステムプログラミング言語で、低レベルのシステムプログラミングからウェブ開発まで幅広い分野で利用できるようで、それが開発者の興味を引いているのかなと感じました。

パスキーは、従来のパスワードの代わりに生体認証などを使って安全かつ簡単にログインできる新しい認証方法で、様々なサービス（Adobe Creative CloudやAmazon、iCloud、LINE、dアカウント、ニンテンドーアカウントなど）でも採用されており、これからどんどん広がっていくと思われる技術なので、学んでおきたいですね！
デザインツールである Figma とアプリ開発にに使われる言語である Flutter は、領域を跨いで活躍していくために実用性の高いものなので人気なのかなと思いました。

技術情報ソース

最新の情報やトレンドをいち早く収集できる Zenn や x に票が集まる形になりました。
JSer.info や Cybozu Frontend Monthly にも多く票が入っており、フロントエンド班ならではかなと思いました。

また、情報収集の仕方としても、メールを購読して受動的に情報を受け取ったり、 Podcast からラジオ感覚で情報を収集したりと自分の知らない情報の収集の仕方があり、すごい面白かったです。

使用しているキーボード

使用しているキーボードの結果は、 Niz Keyboard に最も票が集まりました。
ただ、特定のブランドやモデルに偏っておらず、個々の好みや用途に応じて選ばれていそうでした。

自分自身、こだわりはなく Apple Magic Keyboard を使っていますが、 話を聞いていると、選ぶ観点としてはデザイン性だけでなく、打鍵感やカスタマイズ性、健康面の考慮など様々な観点があり、こだわり始めると沼になって行くことがなんと無く理解できました。笑

皆さんの使用しているキーボードやおすすめのものがあればぜひコメントしてみてください！！

まとめ

今回は、フロントエンド班で行ったツール・ド・フロントエンドというイベントを紹介させていただきました。
記事にまとめたのは、ほんの一部で他にも「使っているマウス」や「生産性が上がるアプリ」など様々なテーマがあり、盛り上がりました。

このイベントを行うことによって、チーム全体での生産性が向上したり、各々の興味のあることが新たに発見されたとで、コミュニケーションが活発になるなどいい影響があったと思います。

ぜひ所属しているチームで行ってはいかがでしょうか！！