2023年2月に開催された企画「UIT新春Tech blog 2023」の記事について、記事の執筆者である@spring-rainingと@naoto.ikunoが話しました。
@spring_raining
こんにちは、UIT INSIDEの玉田です。今回も、UIT INSIDEを始めたいと思います。
UIT INSIDEは、ユーザーインターフェイスと、テクノロジーを愛する開発者のためのポットキャストです。
最新のウェブ表示の動向や、開発、フレームワークの変遷、uiやuxに関することまで、
@spring_raining
毎週フロントエンドの情報を発信していくことを目的としています。さてえー、今回はですね、先週 開かれましたえ、uit、新春テックブログ2013について話そうかなと思います。
え、これはですね、まあ、私が勝手に始めたものなんですけれども、毎日こう。uitのメンバーの融資によって、
@spring_raining
ブログの記事を1日ずつ公開していくというミニアドベント、カレンダー的なものを2月。はい、先週やりました。
でま、その中でま、今回、今年は4つ記事が公開されたんですけれども、その中でま色々と話を 聞いてみたいなと思っています。
@spring_raining
でえ、今回はですねえっと、4日目のlinenews、フロントエンドの自動テストの改善のえー、記事を書いていただきました。いくノさん お呼びして、2人で話をしていこうかなと思いますそれではよろしくお願いします
@naoto.ikuno
よろしくお願いします。
@spring_raining
はい、ではま4つ記事が今回公開されまして、今回えー2人なんですけれどもでは、 じゃあまそれぞれ。まず、どった記事を書いたかっていうところを紹介させてください。で、 えー、私はですねえ。タイトルギット、サブモジュールを使って
@spring_raining
マルチ1ポジトりなモノレポを管理するというタイトルで、えーブログ記事を書きました。これはですね、 えっと、まあ、モノレポはご存じかなと思うんですけれども、モノレポを既存のプロジェクトに導入する上で、 まあ、元々がそのマルチリポジトブのプロジェクトだったものをいかに、まあ、こう環境を破壊せずに、モノレポか
@spring_raining
を進めていくか、という内容になってます。で、まあそのための手段として、えーっとギットリポジティブ自体は 複数維持したまままそれをえー、ギュットサブモジュールで繋いででま見掛け上、モノレポカ をするみたいな内容になっています。はい、でまこれが結構参考になるかどうかはちょっとわからないんですけど、も
@spring_raining
ま結構モノレポ化でなんて言うんですかね。こう、新規プロジェクトでやるぞっていう感じで、導入されがちな ものかなとは思ってるので。まあ、もしマルチリポジトリな結構大規模なプロジェクトでも、こういったモノレコ化 一応できますよ。みたいな例になっているかなと思いますので、よかったら見てみてくださいというはい、内容になっております。
@spring_raining
もうちょっと内容を紹介すると、モノリポカのツールとしては、えーっとターボレポーですね、あれをえ導入 ししてます。で、まあ、うーん、まブログの 図を見てもらうとわかりやすいかなと思うんですけれども、まその親1つ親リポジテルを作って、で、それのギットサブモジュール
@spring_raining
としてま。既存のリポジトリを繋いでいくみたいな感じになっていて、ま、これによってま。元々その それぞれのリポジトリーごとに、まあ、ロックファイルとかあったりして、すごい。あの インストールが遅かったり、依存関係を解決するのがすごいめんどくさかったり、複数のリポジトリーの
@spring_raining
差分を維持していくっていうのが結構難しいっていうところをまあ解決しようとしたっていうのができてま。結構今のところは うまくいってるのかなという感じですね。で、ただまあこれまだ リリースできてなくて、あと、1ヶ月後ぐらいにちゃんとリリースまで持っていく予定なんですけれども、まあ、それができると
@spring_raining
なかなか良い体験が待っているのかな、という期待ですね。これは、私が結構前から やりたいとは思ってたんですけど、なかなか大規模だったんで、こうタイミングとかも図らないといいけなかったりしたんですよね。なので、結構 あのあるあるだと思うんですけど、いろんなこう新規開発とか、機能改善とか、他のプロジェクトと
@spring_raining
並行して、こういう回線って進めるのかなと思うので、どのタイミングで。まあ、切り替えるのかってのは結構 悩みどころかなとは思うんですけども、今回の限っては、あのー、タイミングがまあ、あるタイミングを待ってって感じではあったんで、 楽しみです。
@naoto.ikuno
なるほど、
@spring_raining
では、イクノさんのフロントイン部の自動テストの改善の話をちょっと軽く 話してもらってもいいでしょうか。はい、
@naoto.ikuno
僕はえーっとuit新春テックブログの4日目の記事を書いたのですが、 えっと、linenewsのブロントエンドの自動テストに関する話を書きました。えーっと、というのも、えっと、linenewsは、去年 2022年の3月からの半年で、えっと、テストファイルを結構増やしてそうですね。カバレージも
@naoto.ikuno
33パーから64パーまで改善するっていう取り組みをしたので、えっと、その時にどういうところに気を付けたのかとか、 あとはま、どういう感じでテストを書いたのかっていうのをえーっと記事としてまとめたまとめました。
@spring_raining
はい、ま、あのー、そうですよね。カバレッジが33.6から64.4これ あの0から33よりも33から64の方が絶対大変ですよね。あー、そう
@naoto.ikuno
ですね、結構大変でしたね、
@spring_raining
これはえっと、半年間こういう継続してテストを書いていくっていうことを進められたんですかね。
@naoto.ikuno
そうですね、あのー、機能回収の方がなんか若干手が空き気味になったタイミングがあって、ちょうどそれが半年ぐらいあったので、 そのタイミングでガーっと書いてしまおうと思ってやった感じです。
@spring_raining
うん、うん、うん、うんま、それは結構ま。私のプロジェクトでも、あの新規開発が空いてるタイミングで、こういうのを進めていくとか、 よくあるかなと思います。ま、私の例だと、大体12、12月にあのガットを進めた感じなんで、結構。まあ、 知き感としては、同じ感じでやっていたのかもしれないです。うん、結構あのー。記事の中で、テスティングライブラリー
@spring_raining
を使う例などが紹介されてますけれどもどうですかね、感想としては良いですか。
@naoto.ikuno
そうですね、えっと、テスティングライバリー結構なんだ、哲学がなんだろ、裸に合っていて、すごい使いやすかったですね。
なるべく実装の詳細をテストしないっていう哲学の元に、テスティングライバリー結構書かれてるところがあって、 実装詳細部分をリファクタリングした時に、テストが落ちないとか、そういうところに記を配られてるので、なかなか書きやすくて、読みやすい
@naoto.ikuno
テストがかけたので、個人的には結構満足してます。
@spring_raining
うん、うん、うん、そうですよね、テスティングライブより、やっぱり結構人気ではあるんですけども、そういったところが結構人気の 1つなのかなと思います。うん、いや、私もあのテストすごい 書きたいんですけれども、ちゃんとあのやっているところが見られると、すごい
@spring_raining
ちゃんとしているなっていう、ざっくりした感想ですけれども、なかなかやっぱりそうですよね。フロントインドって、結構なんて言うんすかね。テストファースト っていう考え方は、そんなに一般的ではないかったりっていうところは、まあ、これあのー、あれですよあのー、 良い悪いではなくて、あの感想かん。あの、私の感想としては、そういうところは、フロントエンドは今回、そのテスティングライブラリーとかも結構
@spring_raining
割と思想としては、それに近いのかなとは思いますね。あの、あれですよね。最初の方に意図しない、ブレイキングチェンジを 防ぐためにテストを書くみたいなことが書かれていてま。そういう意味で言うと、まあ、これもすごい難しい話ではあるんですけれども、 機能開発して、どのステップでそのテストを書くかっていうところとかも、やっぱりなかなか
@spring_raining
こういう。まあ、あの、今回の例だとま既にあるコードに対してこうテストどんどん変えていくっていう感じだったと思うんですけれど、そうすね、 うん、うん、うん。こういう機械を作っていけると、やっぱりいいなとは思いますね。
あとは、そうですね、あの、どういう優先度でテストを書いたとかはあったりしますか。
@naoto.ikuno
そうですね、えっと、1回なんだろうこう要素を全部書き出して、で、それぞれテストが書いてある書いてないっていうのを 洗い出してでま、それで1回優先度はつけましたね。
@spring_raining
それで言うと、
@naoto.ikuno
えっと、やっぱ1番ユーザーに見られる部分から書くっていうのは意識しました。
linewsで言うと、えっと、タブがいくつかあるんですけど、トップタブとか、国内タブとか、コロナタブとか。
その中でも結構トップタブがやっぱり1番見られてるので、そこの特に上の方から順番にテ数を書くとか。うん、そういう風にはしてましたね、
@spring_raining
ありがとうございます。うん、うん、うん、いや、すごい納得感のある
@spring_raining
えい記事かなとはい思います。あ、そうですね、あと2つ記事 この場で紹介しておきますね。えっとも、もう2つえーっと、2日目と3日目のはい記事がありまして、 えっと、2日目がlineドクターフロントエンド開発の流れという記事です。で、これはあのーまlinedクtrという
@spring_raining
え、サービスがありま。それの開発について紹介されているんですけれども、結構あれですね。あの 企画デザインからこうデプロイまでの流れがこうどういった流れで紹介して、あの開発しているとかっていうところは、 これ結構あのーま、lineのプロダクトで、普遍的なあまり、あの大体同じような流れで
@spring_raining
開発が進んでいくのかなっていう感じがあって、結構あのフロントインド もそうですけれども、これからにゅ入社したりとか、されたりする方の参考になったりとかするのかな、とか、 あの、私がこうなんて言うんすかね。こう、就活する前に見ていると、ちょっとイメージがかりやすい感じでは
@spring_raining
ありますよね。結構深いそうですね、あの、なんてうんすか、こうび。あのー。チケットを発行してみたいなのは、 まあ、あのうっすらとは知ってたんですけれども、こうなんて言うんすかね。ジラとか、そういうツールがあってみたいな。そういったところは、結構 意外と知られてないま、そのえん、エンジニ以外、アには意外と知られてないところかもしれない。うんっていう結構詳しい
@spring_raining
qaの話とか、開発のサイクルがわかりやすくなっているかなと思います。
@naoto.ikuno
確かに、あんまりこういうちゃんと普段何やってるかみたいなこと書いてる記事って見ない、見てない気がしますね、 言われてみれば、
@spring_raining
うん、そうですよね、あのー、結構会社によっても違ったりっていうところがあるかなとは思うんですけど、 なんかもう逆に当たり前すぎて、みんな書かなかった、確かするかもしれないそうですよね。
この記事の例だと、特にそのジラとかはそもそも使ったことがないっていう人も多かったりすると思うので、
@spring_raining
こういったツールがあるのかとか、あと、qaのためのツールとか、そういったところもま、これもフロントインドエンジニアが直接見るっていうよりは、そのqa エンジニアが作成したものを、あのちょっと見るみたいな感じではあるんですけども、こういったツールはあるっていうのは、会社なんで、当たり前です。けれども、 そういう意外と知られてないところかなとは、そ、エンジニア以外には知られてないところかなとは思いますよ。確かに、うん
@spring_raining
えーっとで、3日目の記事がえ性的リソースをcdn配信する 社内、サービスサービスのフロントインドを作り直した話という内容です。で、 ちょっとこれあのイメージがつかみづらいかもしれないんですけれども、えっとーま、uitにはアビスという
@spring_raining
ツールがありまして、これはあのー、そのフロンテインのエンジニア、多分、社内全員使ったことあるツールになってるかなと思います。で、これが デプロyツールがあってま、それのフロントエンドを作り直したっていう話です。で、 結構まあそのアビスというツール自体がなんて言うんすかね。そのデプロイツールになるので、結構フロントインド
@spring_raining
の中でも特色のあるチームなんですね。で、そのデブ7チームというのが、そういうcdnへのデプロイとか、そういった あ、バックエンドではないですけれどもまし。フロントエンドエンジニアのためのツールみたいなのが多く使われているんで、ま。例えば、 この記事の中でも、あのー、その環境、フロントエンド
@spring_raining
の技術せ環境移行のために、あのクバネティスのマネージドサービスが社内にはあってま、それを使います。みたいな、そういった話が あったり、結構まあ、フロントインドよりも手広くされている話はあったりします。
あと、もちろん、あのフロントエンドの回収の話なので、ま、どういったnxt3を使ってるんですよね。を使っていたりっていう話
@spring_raining
であったりとか、まあ、uiをこういあのカラムをどういった感じで配置したかっていう話があったりとかっていう 感じですよね。これ、しかもあのー、ほぼ 個人的な開発。あの、勉強を兼ねて開発してっていう話だったので、なかなかこう力強い
@spring_raining
内容になっていると思います。うん、確かにではそうですね、あのー、もし 何かイクノさんが気になった記事があれば、この場で聞いてみたいかなと思うんですけれども、そうですね。
@naoto.ikuno
えっと、じゃあ、タマダさんの聞いていいですか。あ、はい、なんかこれ最終的にモノレポにするつもりの 一時的なポリレポなのか、それとももうこのまま進めようという感じなのかってこれどっちですか。
@spring_raining
えーっとですね、まあのー、現状ではあのぷりポリレポを維持する。なるほど、つもりです。で、 あのま、ちょっと理由とかも書いてあるんですけども、結構組織があの複数あるんですよ開発組織が複数あって、 で、あのま2つ目の理由とか特にそうなんですけれども、あのー、そのリポジトリ単位で、そのコミットのための権限みたいなのが
@spring_raining
制御していてっていう理由もあってま。そういったのは、やっぱりモノ立ポだとま できるのかな。いや、でもなんかめん。
@naoto.ikuno
確かにめんどくさそうでありますね。
@spring_raining
そうそう、あの、元々のポリレポからあの移行するほどのモチベーションは、今のところないっていうところは ありますよね。多分うんまでも世の中にはモノレポだけれども、そういった こ。コミット権限とかの管理とかをやってるプロジェクトもあったりするのかな。それは、ぜひ話を聞いてみたいですね、
@naoto.ikuno
気になりますね、なんか、一定の需要ありそうだから、他の他社でもやっていそうですもんね、これ、何かしら工夫がありそう。
ちなみに、他社はやってたりしないんですか。その事前に調べた段階では、
@spring_raining
あ、これはあのー、調べたところはありますね。あの、そうですね、あのー、結構 普通にあのモノレポとかで、エンジニアリングブログとか、他の他社のログとかを検索してると結構出てくるので、 そういったところを参考にしつつも結構あのモノレポってなんていうんすかね。結構段階的なものが
@spring_raining
あって、こういったかんここの例だと、そのフロントエンドエンジニアだけの モノレポではあるんですけれども、結構あのちゃん。あのー、突き詰めると、そのフロンテインのエンジニアだけじゃなくて、バックエンドも巻き込んで、 全てこのレポかせるみたいな事例とかもあったりして、それはそれであの興味深いなとは思いますよね。
@spring_raining
結構そこそうなってくると、あの組織とかの話になってきて、こうそい。そういう感じになってくると、 開発のフローとか、そういったところも変わってくるのかなっていうところがあって、ちょっと話はすごく聞いてみたいなとは 思っています。
@naoto.ikuno
確かに、まあでもそれやってしまえば、ある程度メリットもあったりしますもんね。api側型的に自動生成とかできたり、 なんかそういうところは恩気ありそうですけど、まあ、確かにフローとかは難しくなりそうですね。
@spring_raining
そうですよね、あのー、lineの場合だと、まあ、あの伝統的なフロントエンドとサーバ、再度分離した開発体制っていうのが 一般的ですし、あのー、ま、そのapiの方とかも一応オープンapiの情報経由で取ってきてはいるんですけれども、まあ、 こう非同期なものなので。
@naoto.ikuno
そうですね。
@spring_raining
うん、うん、いや、でもそういうのもやってみたいですよね。それこそ、 あのーま、こういうプロダクションリしするようなプロジェクトではない。それこそ、20パーセントルールでできるような ところかもしれない。そういうところから始めていくと良いかもしれないですね。ま、これ。もし、あの、私がやることになったら、
@spring_raining
またポットcastで話そうかなと思います。
@naoto.ikuno
聞いてみたいです。
@spring_raining
えー、今回はえーuit、新春ンテックブログ2023のま4つの記事について、えーしよいと話していきました。
LINEのフロンテインド組織uitでは、このような技術的なキャッチアップを日々行っております。
UIT INSIDE以外にも、毎週の社内勉強会で、フロンテインドの情報交換を行っています。
@spring_raining
今後も、UIT INSIDE通して、このような情報を外部に発信していけたらと思います。
また、えーこのエピソードのご意見、ご感想もお待ちしております。ハッシュタグは#UIT_INSIDE、 エピソードのご意見やご感想はいつでもお待ちしておりますぜひツイートしてくださいそれでは、イクノさんありがとうございました、
@naoto.ikuno
ありがとうございました。
