フロントエンドの新しいリンターBIOME
今回もスコットと、今回ゲストに フロントエンドエンジニアのレノ
を迎えて、フロントエンドの話を していきたいなと思います。レノ
ちょっと軽く自己紹介よろしくお願いします。
レノ はい。改めまして、フロントエンド
エンジニアをやっているレノと申します。 最近はちょっとスクラムマスター
が多いので関心がありつつ、こちら側 と兼務しながら開発の効率をどんどん
上げていこうというふうな形で、 TimeTreeのほうでいろいろとやらせて
いただいております。よろしくお願いします。
おだしょー よろしくお願いします。めっちゃ
しっかりした自己紹介だった。めっちゃ しっかりしてた。今回、最近レノが
取り組んできてくれたものということ のお話をしてもらおうかなと思うん
ですけれども、前提として僕フロントエンド 何も分からないものとして、何も分からない
マンとしていろいろ質問していくんです けれども、そこについてちょっと
レノに解説をしていただこうかな と思います。今回フロントエンド
では、いわゆるリンターとかフォーマッター というものにBIOMEっていう新しい
ものを導入したということですよね。 これまでって何使ってたんですか?
そのリンターとかは。
おだしょー これまではESLintとPretierを使っていて、
ESLintのほうに関してはTimeTree 全体で共通のコンフィグを用意して、
それをレノで使ってあげて、一部 必要なところは書き換えてあげて
というような形の運用をしていました。
おだしょー ESLintとPretierって知っている
単語が出てきてよかった。そこから 乗り換えたというわけですけれども、
どうして乗り換えたかみたいな 背景というか、ESLintとPretierじゃ
駄目だったんですか?みたいな話、 質問してもいいですか?
おだしょー まず1点目が、実行速度がDust性の
プラグイン、BIOMEがDust性になる ので、実行速度がすごく速くて、
それでちょっと個人的に前々から 関心があって、個人開発とかでは
少し触ったことはあったんです けど、ちゃんと運用というふうに
考えると、ここがチャンスかな と思いやったような形になりますね。
おだしょー こういうツール系って、すごい
最近ラストめっちゃ盛り上がって ますよね。
おだしょー そうですね。これもこれも
ラストに移行して、それもバックソック みたいな。
おだしょー EXAとかBATとか、これまで
よく使ってたLSとかCATのリプレイス ツールとしてもラスト性みたいなのが
いっぱい出てきてるし。
おだしょー ありますね。BATとか。
おだしょー そう、めっちゃ盛り上がってますよね。
その中で、いわゆるリンターのツール としてBIOMEというものがあります。
ラスト性だから速いですよという ところが強みとして一番出てくる
というところ。
おだしょー そうですね。
おだしょー 他にも何かいいことって あったりするんですか。
おだしょー 残り2点目、3点目はこれを理由に
変えたというところになるんです けど、1個が他のPrettierのコアメント
ラーの方、鈴木壮介さんという 方がいらっしゃるんですけど、
その方がTS会議というカンファレンス でPrettierとかBIOMEを比較してみて
どうかという話をしていただ いていて、Prettierよりも速いから
すごい便利という話をしており まして、ESLint、Prettierサイドから
BIOMEはこの辺が駄目だという話が 出てくるかと思いきや、結構初期設定
簡単にできて、すごい速いし便利 でいいよという話がされていて、
ただ一部ESLint側からまだ移行 できていない一部のルールだとか、
あとカスタマイズ性みたいなところ でいうと、そちら側にまだ分配が
上がるので、その辺りを超えられる のであれば、本番側で運用してあげても
すごい体験が良くていいよという 話があったので、それが1個の大きな
理由になっていましたね。
これを元にやりたいですというのを フロントエンドのチームメンバー
に投げたような背景もあります。
ライバルツール側から褒められる っていうか、いいコミュニティですね。
ESLintとPretierからの乗り換え
スピードは大事ですよね。
僕も初めてPrettierとか触ったとき 体験めちゃくちゃ良くて、
これはいいなと思ってたんですけど、 それよりもさらに速いし、
体験としては良くなりますよね。
後ほどその実行時間の変化とかも ちょっとまたお伝えするので、
もう1個っていうのを聞きたい。
もともとの先ほどタイムツリー全体で プロジェクトで使えますコンフィグが
あったっていう話をしたんですけれども、
ESLintのコンフィグのアップデートで フラットコンフィグっていうものが
メジャーバージョンのアップグレードが 導入されて、それの対応で
フラットコンフィグで対応するための対応が もろもろのESLintのライブラリで
必要になってしまって、 あそこは結構時間がかかりそうというところと、
対応していないものがあったり、 アップグレード時間がかかったり
というところで、ちょっとしんどいねみたいな話も 少しチームから上がっていたので、
きっかけとして1個またバイオーム 触ってみてもいいんじゃねっていう風が
吹いたような形になりますね。
あるあるですね、その大きい巨大ライブラリに 付随するいっぱいのプラグインが
全然対応していなくてアップグレードできない っていう話はあるあるですよね。
あるあるですね。
その機運で乗り換えたっていう感じだったんですね。
大きくはこのポイントになりますね。
なるほどです。
ちなみに乗り換えって直感的には すごいめんどくさそうだなとか
大変そうだなってイメージあるんですけど、 目の作業をしてみてどうでした?
基本はドキュメントとのにらめっこが割と多くて、
バイオーム側に、バイオームで ES Lint から乗り換えられるように
変更を取り込もうみたいなコンペがありまして、
バイオーム以外にもいろいろ参加している ライブラリがあったんですけど、
結局そのバイオームが優勝していて、
そのコンペで ES Lint でよく使われているものが
使えるようになっていたので、 そこの日書き表も含めて
ドキュメントにもろもろ書いてありまして、
使っているものに関してはそこを見ながら オンにしてあげたりオフにしてあげたり
っていうところのチューニングをしてあげるのが ほとんどの作業でしたかね。
意外と高発ツールだからっていうのもあるんでしょうけど、
マイグレーションもやっぱりサポート しっかりしてるっていうところなんですね。
これは一部ネックなところがあったんですけど、
リアクトの中で使っていた Dependencies Array っていう
Use Effect とか Use Fallback みたいな関数の中で、
依存の配列、この中に使われているものは何かっていうのを検知して、
それをクイックフィックスしてくれる機能が ES Lint にはあったんですけれども、
それがちょっとまだバイオーム側では クイックフィックス対応していないところで、
そこが結構良くないなっていうところと、
フロントエンドのメンバーからも これ欲しいっていう声が結構上がっていたので、
対応待ちっていうところになりますかね。
じゃあちょっとあれですね、フィーチャーのリクエストとか。
もう一周とかできてるのかな。
一周はもうずっと語られる。
同じ気持ちの方が。
やっぱりいるんだ。
なので一部ちょっとその意向に伴って 我慢するポイントが出てきてしまったところは、
どうしようもないかなとは今思っているんですけど、
そのまま移行は簡単めというか、
ポチポチポチポチ気合でやれたかなと思います。
なるほど。
実際移行してみて、
一つレノの感想とチームメンバーからどうだったのか っていう2点で聞いてみたいんですけど。
僕個人の感想で言うと、
すごいやっぱ体験が良いってところが、
ローカル上でもCI上でも、
待ち時間がないってやっぱり快適だなって思います。
そうか、CIも早くなるんですね。
そうですね。
あと、ESLint、Pretierって両方分かれているんで、
それぞれ実行する必要があるんですけど、
Volume、両方ガチャンコしたようなダイブラインがあっているので、
その辺りのファイルを例えばESLintで一周全部見て、
Pretierで一周全部見て、2周する必要があるんですけど、
Volumeは一周しながら両方見てくれるんで、
すごいそこも削減されてくれて。
なるほど。そこも早いっていうか、
ループが1個減るっていう感覚に近いですね。
そうですね。ループが減るだけでだいぶスピードが。
実際の時間なんですけど、
今、タイムツリーのウェブサイト、
静的なコーポレートのサイトと、
アプリケーション、実際カレンダーのサイトと2つあるんですけど、
そこの時間ちょっと比較してみて、
静的サイトの方に関しては、
CI上で33秒から15秒ぐらいということで、
約50%強減って、
もともと1分、2分ぐらい?
もともと30秒ぐらいでしたね。
もともと30秒ぐらい。
バイオームへの移行
15秒半分ぐらい。
ウェブ版のカレンダーのタイムツリーが、
3分40秒から1分50秒ぐらいまで、
半分以上ですね。
削れてくれたので、
すごい早くなったっていうところが、
実際の数値からも分かる通り、体験できて、
そこがすごいいいなって感じですね。
それは早いことは正しいですもんね。
チームのメンバーからの声でいうと、
スピードに関しては皆さん体験良くなった、
という声は多かったんですけど、
先ほどちょっと言ってた、
クイックフィックスに関しては、
みんな欲しい欲しいという声が上がっていたので、
そこが一番のネックですかね、
今のところは。
結構開発活発なんですよね。
何かいずれ対応されそうな感じありますけど。
そうですね。その雰囲気は結構感じているのと、
タイムツリーのフォーマット
今はコパイロットもあるので、
最悪そこにカーソルを当てて、
1秒ぐらい待っとけばパッと出てくるので、
一旦僕はそれで回避しているような形になりますね。
なるほどですね。
なるほどな。
でもそうですね。
こういうツールの乗り換えって、
なかなか優先度が上がらないところだと思うんですけど、
コスト感とかも合わせてパッと乗り換えられて、
すごい良い事例だなと思って聞いていましたね。
はい。
僕としても良い体験、良い経験ができたと思っています。
そうですね。
コストエンドもずっとこういうのをやっていますね。
そうですね。
ツールが2,3年に1回入れ替わるみたいな感じはすごいある。
スピード感早い早いって。
早いですね。
結構まだエンジニアとしての歴がそこまで長くないので、
そうかなと思っていたんですけど、
最近今6,7年目ぐらいエンジニアになってきて、
確かに早いなと思い出しましたね。
こういうのって1回入れたらなかなか、
特にリンターとかはあんまり入れ替えないイメージあるけど、
もっと早くしてやるぜみたいな、
そういう人たちがやっぱりいるっていうことですよね、コミュニティの中にね。
そこにこだわり持ってやってくれる方は、
僕は難しいバーってなっちゃうタイプなんで、
尊敬の感情しかわからないですね。
難しいところですね。
ESリンター側でラストにするみたいな力技もあると思うんですけど、
そういうのをゼロから作り直すのって大抵のプロジェクトでは失敗するので、
新しいプロジェクトを通してやっちゃうっていう感じで、
ライフサイクルが回っているというか、
そういう感じですね。
ESリンター側もプリンター側も、
スピードに関しては日々改善をしようという取り組みをしているんですかね。
そういうのもあるんですかね。
そういうのもあるんですかね。
そういうのもあるんですかね。
スピードに関しては日々改善をしようという取り組みをしているらしいので、
そちら側がまた早くなって追いかけっこみたいなパターンもありえるかもしれないですよね。
そちら側がまた早くなって追いかけっこみたいなパターンもありえるかもしれないですよね。
いや、絶対あると思いますね。
いや、絶対あると思いますね。
Rubyとかだったりすると、
ちょっと前までコマンドラインのインタープリターが
Pryっていうツールがいいって言われたんですけど、
もともと組み込みでIRBっていうツールもあったんですけど、
Gemで書かれたPryがいいって言われてたんですけど、
最近IRBもいろいろ機能追加されてて、
IRBでいいじゃんみたいな流れになってきてたりとか。
確かもううちもIRBに乗り換えたかな。
そうですね。
とかあって、本家が巻き返すみたいなことも全然あると思うし、
それはそれで切磋琢磨することはやっぱりいいことだと思うので。
それはそれで切磋琢磨することはやっぱりいいことだと思うので。
少年漫画のような熱い展開ですね。
本家がいろいろ持ってくれると安心感はやっぱりありますけど、
ありすぎて思うところもあるんですよ。
このバランスって難しいですよね。
難しいですよね。どこまでサポートするのかみたいなところってね。
なるほど。
ちなみにちょっとこのバイオームの話から
逸れるかもしれないですけど、
次これ導入したいなみたいな思ってるものとかってあったりします?
次。
次というか今僕が取り組んでいるものが
ちょっとタイムツールの中では新しい取り組みというか
ライブラリの乗り換えみたいな形でやっているんですけど、
Next.jsを使っているプロジェクトは結構多くて、
そこでAppRouterを使っていこうというところで、
今Webサイト、コーポレートサイトの方で、
今Webサイト、コーポレートサイトの方で、
もともとSSGでNext.jsのPagesRouterで動かしていたんですけど、
もともとSSGでNext.jsのPagesRouterで動かしていたんですけど、
プラスAppRouterにもしようというところで、
今プルリクすごい大きいのが成長していてて、
やっと大きいのがついたんですけど、
プラス5000、マイナス6000ぐらいのでっかいプルリクができあがりましたね。
やばいやつができてますね。
次はそのAppRouter。
次はそのAppRouter。
AppRouterって、
それ以上やると話が膨らんじゃうかもしれないので、
AppRouter移行しましたって話をまた例のにしてもらおうかなと思うんですけど。
乗り越えたらぜひ。
AppRouter。
AppRouter広げると広くなっちゃうんですけど、
あとはReactサーバーコンポーネントっていう新しい仕組みがまた生まれたので、
あとはReactサーバーコンポーネントっていう新しい仕組みがまた生まれたので、
ここはちょっとキャッチアップしながら、
チーム全体でお勉強会やるかね。
ちょっとずつやっていければと。
本当にバージョン最初の頃ちょっとだけ触っただけなんで。
これもうついていけてないですね。
勉強しないと。
本当勉強しないとだめだなこれ。
覚えることがめちゃくちゃ増えちゃいましたねフロントエンドは。
フロントエンドはできることがいっぱい増えて、
楽しそうだなって思うと。
勉強しないとついていけないっていう領域でもあるので。
勉強しないとついていけないっていう領域でもあるので。
とまとめると ESLint プリティア からバイオームに移行しましたよ
という話ですね これ今1個のプロジェクト だけなんですか ちなみに
いや もう1個共通のコンフィグを また同じように作ってあげて もう
そうですね 8割方のプロジェクト は移行完了してるような形になって
ますね
もう横展開も進んでるっていう 感じで タイムツリーはバイオーム
でフォーマッターしてますという ところですね ほぼ こういうツール
の入れ替えとかも なかなか日常 要は事業のコードを書きながら
っていうのを並行させながら難しいん ですけど 曖昧曖昧にちょっとこういう
のがあっていくっていうふうに 進めていけたらなと思ってます
し 実際そういうのが進んでる っていうのが見れてよかったな
と思います 今回は例の移行についての話 していただき ありがとうございました
ありがとうございました
はい じゃあ今回はこんな感じで 終わりたいと思います ありがとうございました
