音声書き起こし
1. オープニング
@potato4d
こんにちは、UITの potato4d です。ユーザーインターフェースと、テクノロジーを愛する開発者のためのWeekly Podcast 『UIT INSIDE』。 今週も始めていきたいと思います。今回はですね、 11月17日、18日で開催される。Tech-Verseロン、直前エピソードということで、今回のTech-Verseにて、発表されるフロンテンドステッションについて。LINEの質問者を集めて、
@potato4d
その見どころをご紹介いただこうと思います。本日は皆さんよろしくお願いします。では 早速ですね。Tech-Verseの紹介に移っていきたいんですが、その前に全員の自己紹介をさせていただこうかなと思います。今回からはですね、 質問者が4名おりますので、それぞれ簡単に名前や部署、監督、プロダクトなど聞ければなと思ってます。では、まずホリさんからお願いします
@jaycompsci
はい堀純一郎です。LINE株式会社で、 lニュースで、フロントエンドエンジニアをしていますよろしくお願いします。部署は10になりますねあ、デブジチームwブgです。はい、
@potato4d
よろしくお願いしますでは、次いくノさんお願いします。
@naoto.ikuno
はい、LINE株式会社のっとUIT、算室、フロント、エンドデvhチームのグナウトです。 担当プロダクトは、ホリさんと同じくliニュースをしています。よろしくお願いします
@potato4d
よろしくお願いしますでは次柴ばささんお願いします。
@yukishiba
はいLINE株式会社、京都開発室のK3チームというUITのチームにいます。柴坂です。 担当プロダクトは、LINEミュージックのwebアプリケーションです、
@potato4d
よろしくお願いいたします、
@yukishiba
よろしくお願いします
@potato4d
では、最後に奥村さんお願いします
@showkittie
奥村裕太と申します。えっと、LINEから出前館に出向して、今出前館のフロントエンドチームのマネージャーをしています。で ま、出前館も色々プロダクトはあるんですけど、担当プロダクトとしては、出前間のtc向けのサービスのウェブと、あとはbffになりますよろしくお願いします
@potato4d
よろしくお願いします。はい、本日はこのご名でやっていきたいと思います、よろしくお願いします
2. Tech-Verse とは？
@potato4d
では早速ですねTech-Verseとはなんぞやというところから、ご紹介させていただければなと思うんですけど。テックバウスはですね。このエピソードが配信される翌日の17日、18日から始まるラインと、ヤフーの合同での技術カンファレンスと なります。オンラインでの開催となっておりまして、 時点で総勢8は8のセッションが公開されており、2日間にわたって、それぞれのテーマごとでえセッションが公開される予定となっております。
@potato4d
当日はリアルタイムでの配信となるので、ぜひぜひ。皆さん、リアルタイムでご参加いただければなと思うのですが、今回はですね。。各セッションの中でそれぞれ質問の時間というものが設けられていて、 各質問の代表者が折書の内容について深掘りするトーク、タイムみたいなものが設けられております。 で、今回ですね、出演いただいている4名のゲストの方々はですね。それぞれ、担当のセッションがありまして、と、どんどん質問行っていく予定なので、担当者の皆様にセッションについて、どんどん情報を教えてもらおうというのが、今回の
@potato4d
そとなっております。実際のセッションの紹介の方に行きたいなと思うのですけども、そんなセッションについて、それぞれ質問者さんに簡単に見どころであったり、こういうところをぜひ ぜひ聞きに来てくださいっていうのをご紹介いただこうと思うのですけど、では、自己紹介の時と同じくホリさんからお願いしてもよろしいでしょうか。
@jaycompsci
はい、私がと質問者に ウェブフロントエンドのトラックの中にある。えっと、2日目ですねd2の4時から5時までの枠で、 タイトルが『Core Web Vitalsの良好URL数を99%以上に維持してきた方法』というヤフーのマツウラさんのセ種になります。私が、あの、LINEニュースの パフォーマンスを向上させるっていう責任を持って、今仕事していまして、そのえっと、一環でコアウェブライタルズを導入したりとか。 えっと、その数字をあのトラックし続けているんですけれども、それで、今回あの質問した役を得ることに
3. Core Web Vitalsの良好URL数を99%以上に維持してきた方法
@jaycompsci
れました。とこのセッションは、主にとコアウェブバイタルズについてのことと、 あとは、ページエクスペリエンスっていうえっと、ツールがあるんですけれども、それについてを、技術的な観点からは、 話してくれる予定だと思っています。で、えっと、それをあのヤフーの仕事カトログっていうプロダクトで
@jaycompsci
改善に使ったようで。えっと、それについて聞くことができる内容になっています。
@potato4d
了解ですじゃあ、かなりコいバイタル、そのまま実例みたいなところにフォーカスしたイベントになってる。あ、じゃあ、えっと、セシになってるって感じ
@jaycompsci
ですね。ですかね、っと、ヤフー。仕事カtログは、あのpagexparnsっていうのが、googleが提供しているツールで、 それのえっと、指標が基本的にはコアウェブバイタルズなんですけれども、それを向上させたというセッションですね。
@potato4d
あ、ちょうどあれですかね。こeブァイタルスの工場とかに、課題持ってる人におすすめできそう、セッションですかね。
@jaycompsci
そうですね、あのコアウェブダイタルズはと3つある。今だと、そのlcpっていう 1番大きな画面上の要素がロードされるまでの時間、つまりローリングスピードですね。体感のローディングスピードの指標だったり、 fidっていうあの、クリックした後に、イベントが始まるまでの時間なのね。スポンスの速さの指標を、
4. ヤフー全社横断「Webパフォーマンス改善」の取り組み
@jaycompsci
あとは、clsっていうレイアウトシフトが起こる。ガタつきがないっていうのなんですけども、特にlcpっていうのが結構ローディングスピードなので、重要な指標で、yhooの仕事カタログでも、そこを向上させたりとか したあの実例が聞けるので、こうアブライtsをこれから導入しようとしている人とからし始めて、ど、どうやったら、あの数値を上げていけるかっていう。 えっと、課題を持ってる人にはいいセッションだと思ってます。あとは、seoの目的でも、あのコアウェブタイトライタスは重要なので、
@jaycompsci
あのseoが重要なプロダクトの。えっと、担当してる方もあの聞くといいかもしれないと思ってます。
@potato4d
了解しました では、こべベバイタルスに課題ある人よ。水曜とか決めるある人はぜひぜひ見に来ていただければなと思います。でで、2の16時から17時ですね。 ほりさん紹介ありがとうございます次ですね、いくのさんの方からお願いしてもよろしいでしょうか。
@naoto.ikuno
僕は、デイツの浜田さんの『ヤフー全社横断「Webパフォーマンス改善」の取り組み』というセッションに参加をします。 こちらのセッションは、多くのサービスを抱えるヤhoーにて、えっと、全社的にウェブパフォーマンスを改善するというセッションだそうですち、プロダクトの改善ではなくて、全社 全体での改善なので、えっと、数値的な改善を行って改善するにとどまらず、例えばまナレチン共有とか、組織的な改善とかも
@naoto.ikuno
行っているそうです。えっと、ま、単体のサービスの改善にも役立つ話のようなので、ぜひご覧ください。
@potato4d
ありがとうございます そうです、なんか、こう全体に波及させるこう、横の横展開みたいなのって、まず。1本の自分のプロダクトでのちゃんとした改善ができてこそみたいなところだと思うんで、なんかこう。横向けの活動は を知ることによって、逆に自分の単一プロダクトにも価値を提供できそうな感じはありそうですね、
@potato4d
だ、あれですかね。もちろん、自分の部署以外にもとか、自分のプロダクトチーム以外にも、パフォーマンスの取り組みとか、発揮させたいって人にももちろんおすすめできそう
@naoto.ikuno
ですかね。そうですね、だと思います。他にも、そもそも1つのプロダクトでも、結構大規模になってくると、複数リポジトに跨がってるとか、そういうケースも増えてくると思うので、 なんかそういう時にも十分役立つかなと思っています。
@potato4d
ぜひ、ファォマス周りなので、ホリさんの担当するものと合わせて、お聞きいただければいいんじゃないかなと思っております。では、次シバサカさんお願いします。
5. ヤフーショッピングのフロントエンドを支える共通配信技術
@yukishiba
はい私が担当するセッションが『ヤフーショッピングのフロントエンドを支える共通配信技術』ですねday2の3時からのセッションです。 サイト内のあのー、どのページでも、共通のuiってありますよね。あの、具体的に言うと、ヘッダーやフッターの部分、そういうのが該当すると思うんですけど、これを
@yukishiba
そのページの種類ごとに別々のチームが別々に実装してたっていうの 問題があったそうで、そのコストとか品質面で問題があったのを共通で配信するようにしたっていう内容のセッションになります。 私は今の業務ではspa作ってるんですけれど、も、ま、昔はweb制作の現場にいて、同様の課題に直面したことがあるんですよね。
@yukishiba
それだけに、あのこのテーマに現代の技術をもって、どう解決するかっていう1つの回答を示してくれる、いいセッションだなと思いました。 このセッションでは、マイクロフロントエンドっていうキーワードが出てきます。マイクロサービスっていうのがま1つのトレンドではあると思うんですけども、 フロントエンドもマイクロサービス化することで、特にそのヤフーショッピングのような複数のチームで別々の画面を作るっていうプロダクトでは、
@yukishiba
メリットを出しやすいのかなという風に思いました。で、実際どんな効果が出たのかとか、 また、どんな実装になったのとかとか、注目できればなと思います。
@potato4d
ありがとうございます。確かに、マイクロフロンテンとってかなりこう。話題に上がることは度々あれどこう実践しているプロダクトの話とかって聞ける機会があんまりないんで、 なかなかいい学びが得られそうでは
@yukishiba
ありますね。そうですよね、あの、私の担当プロダクトがLINEミュージックなんですけど、競合他社でマイクロフロントエンドで有名なサービス、某サービスが ありまして、あのまうちのサービスではまだあまりあの導入するとかいう話はないんですけれども、まりちょっと 気になる部分ではありますね。
@potato4d
なるほど、そういう縁もあって、質問者に行っての
@yukishiba
いいです。そうですね、
@potato4d
ぜひ。皆さんマイクロフロンドインドに興味あったりしたら聞きに来ていただければと思います。では、最後にクムラさん紹介お願いいたします。
6. Reactと共に進化するGraphQLクライアントRelayの活用事例
@showkittie
はい、質問させていただくのは、『Reactと共に進化するGraphQLクライアントRelayの活用事例』という、えっと、一休のタノさんのセッションとなります。 で、えっと、まざっくり言うと、リレーをなぜ採用したかって話と採用して何が良かったかっていう話です。 で、僕の担当してる出前館っていうサービスは、サバ画がマイクロサービスになっていて、
@showkittie
で、フロントとしては、bffを持つような構成になっているんですけど、そのクライアントとbffかの通信で、実際にプロダクション環境でGraphQLを 採用していて、で、もう一年半とかたつ ので、まあ色々課題も出てきていて、それも踏えて今回質問させていただこうと思っています。と、セッションの
@showkittie
中身に触れると、えっとま。今回、一休3の新規プロダクトの技術選定の話 でまなんで。えっと、そもそもなんでGraphQL採用したのかとか、あとは、ネクストjs採用したとか、そういうリリエ以外の話もあります。 ま、こういう方におすすめだよっていうポイントでいくと、やっぱり最近こうGraphQLを採用しようっていうプロダクトもそれなりに増えてきてる印象なんですけど、
@showkittie
まそん中で、グラフtュエルクライアントって何がいいんだろうって、麻両シが結構多いのかなと思っていて、 リレーは1つの候補としては、もちろん上がるとは思うんですが、あのドキュメントが結構少なくて、 なんていうか、そのどういう風ななんていうか、プロダクトの採用イメージになるのかっていうのがわかりにくい部分があるのかなと思っているんですけど、
@showkittie
ま、このセッションでは、そんなリレーの具体的な機能について、コードとか、プロダクトの画面とかも交えながら説明がされていて、 なんで結構自分のプロダクトに採用したらどうなるんだろうみたいなイメージが湧くようなセッションになっているかなと思っています。 あと、ちょっと個人的に期待してるところで行くと、えっと
@showkittie
で、マカは。今、クライアント側のライブラリは、アポルクライアントを採用しているんですけど、 そのssrの時にパフォーマンスがちょっと悪化する原因にもなっていたりとか、あとは、ライブラインのサイズが大きいとかで、結構デメリットが 出てきていて、なんで他の選択肢も検討したいなっていうの、ちょうど思っています。
@showkittie
で、デマカントイキって、実は何度か勉強会させてもらっているんですけど、 そん中で結構GraphQLの話を結構されていて、一休社内で多分グラフqの採用事例ってかなり多いのでま。色々採用実績がある中で、 その知見を踏まえて、リリアにたどり着いてると思うので。えっと、その辺り詳しく聞けると、結構深い知見が得られそうだなっていうところを期待しております。
@potato4d
じゃあれですかね。結構技術選定でGraphQL、クライアントどうしようかって悩んでる人は、もちろん、実際のなんかリエの現場でのこうこうみたいなのをし、知りたいっていうところまで含めて結構あれですかね。ブラフqエルに関わる人だったら、 誰でもこう楽しめそうなとか、学びがありそうなセッションに
@showkittie
なってますかね。そうですね、多分クライアントに限らず、結構GraphQLの課題って共通してる部分が 多いのかなっていうのを思っているので、多分グラフq採用しているとか、採用検討してる方にはすごくおすすめだなと思ってます。 あの、このUITインサイトでも、昔、リコイルリレーの話とか。その要は、グラフqエルを交えた時に、状態管理ってどうしたらいいんだろうとか、
@showkittie
なんか、後はまグラヒより前だと、キャッシュを。なんかどの期間どの範囲で持つかとか、多分結構 そういうところでま。クライアントに関わらずま、共通の課題になってくるのかなと思っているので、その辺り興味のある方はぜひ見ていただければと思ってます。
7. クロージング
@potato4d
ありがとうございますぜひぜひ。皆さん、ギロフケールに関わる人は、こちら聞きに来ていただければなと思います。 というわけで、今回の4名ブの担当セッションの紹介が終わりました。 ショノハットの方に、urlが貼ってある、Tech-Verseの公式サイトの方に行っていただきます。と今回、質問者が担当しているもの以外のセッションの情報も、載っております。
@potato4d
ぜひですね。皆さん、改めて、Tech-Verseのウェブサイトの方を見に行ってですね。お気に入りのセッションを見つけていただければなと思います。 今回、質問担当は企業交換するような形で。私たちは、ほとんどヤフーの事例について話すような形になっているんですけど。もちろん、我々LINEの方からも論テのセッションもありますので、ぜひぜひ 来ていただければなと思います。というわけで、Tech-Verse、直前企画の見どころ紹介は、これで終わりたいと思います
@potato4d
ありがとうございました、
@showkittie
ありがとうございました。
