音声書き起こし
1. オープニング
Guest
みなさん、こんにちは
Guest
この気持ちは
Guest
え。今週もUIT INSIDEをやっていきたいと思います。え、まず、初めにこのコードキャストについての説明をさせていただきます。
Guest
このコードキャストは、LINEuiティストに所属するエンジニアが、毎週、最新のフロントエンドの動向について語るためのコードキャストです。
Guest
最新のフロントエンドのロはもちろん、えいわやuxに関するようなアップデートまでえ、全週までの内容をえ、キャッチアップできることを目的としております。
Guest
今回はですねえ、いつも通りえ、uypえ、所属のjスラーはたとえゲストとしてえ、LINEニュースチームからおつと
Guest
おふかふかを招待して、えー。リアクトジェースのアーキテクチャマーリについて、え、お話できればと思います。お2人ともよろしくお願いいたします。
2. ゲスト紹介
Guest
では、まずえ、お月さんとあさんの2方。自己紹介お願いできますでしょうか。
Guest
はい、UITs所属でLINEnewsのプロジェクトを担当してます。おつです、
Guest
お願いしますはい、よろしくお願いします
Guest
よろしくお願いいたします。というところで、お2方ともラインニュースで、え、今、メインバー担当されてるっていうところでお話を伺えればと思います。
3. LINE NEWS についての紹介
Guest
早速え、今回の話題に入っていきたいと思います。
Guest
今回ですね、LINEnewsのえ、話になると思うんで、ちょっとLINEnews、リアクトバリバリだと思うんで、プロダクトとソフトコードのえーとか、開発体制についてって、軽く先に聞いても大丈夫ですかね。
Guest
はいはい、
Guest
LINEnewsってまいくつかプロダクトえ機能はあるんですけれども、その中のnewsタブって呼ばれてる機能がリアクトでできてます。
Guest
で、newsタブ、あの、LINEのアプリの右から2番目のタグですね。あの、タブの中身はwebビューでできていて、リアクトが使われてます。
Guest
で、できたのは2年以上前で、その時からま方向転換せず、同じフラリアクトとフラックスを使った設計で成り立っていて、
Guest
最初は2人で作られたんですけど、今は8人ぐらいのチームで幅広いそのリアクト以外の方も含めて、免許を続けてます。
Guest
1番最初からくら、あのリラクトでしたっけ。はい、
Guest
いや、もうここ2、3年ずっとリアクションって感じですね。そうですね、ちなみに、そのflaxっていうのは、フロントのfaceflaxですか
Guest
ね。あの、フラックスユーティルスのライブラリーを入れてます。
Guest
なるほど、なるほど、ありがとうございます。じゃあ、結構まあほんとにオーソドックスなリアクト、プラスラックス
Guest
っていうとこでございます。そうですね、
Guest
ま、ちょっとそんなえま、今え、2年え、2、3年経ってま、今8人。開発してるって中でま。ちょっとアーキテクチャー的なところで、議論が出た
Guest
いうところでま、それがえー。リアクトとまあ、フラックスのアプリケーションにおいてまプロップスのバリレーっていうのが本当に必要なのかどうかっていうところのえ、話題が出たっていうところで、ちょっと今日はその辺えお伺いできればと思います。
4. React.js×Fluxにpropsバケツリレーは必要か
Guest
その問題についてですけど、もえ、軽くえ、どんな内容かっていうのを先に見たいって方は、ちょっと。小ノートに書いてあるえ、リアクトプラス、フラックス、アプリケーションにえ、プロポ
Guest
バケツリレーが必要かっていう。おつさんが書かれているブログがあるので、ま、そちらを見ていただければ、ままdldr的にえ、見れるんじゃないかなと思います。
Guest
あま、ちょっと今回は深掘りしてま、実際え、起きた話ベースっていうとこでえま。今回プロリから始まったっていうとこなので、ま、どういったプロリクが出たかっていうところ
Guest
とまえ、それでま。今までとどういった変更があるかっていうところをえ、追って、え、お2方説明いただけますでしょうか。
Guest
クリックで出てきた内容は、今のリアクトで作られたコンポネントのツリーがあると思うんですけど、そのツリーの中間あたりに新しくコンテナを増やしたいっていうクリックが上がってきました。
Guest
ただ、今まではコンポーネントツリーのルートコンポーネント1番上だけがコンテナになっていて、そこに。複数のストアの情報が全部集まってきて、そこからバケツリレーで、マタのコンポーネントまで
Guest
状態を送り込んでいくっていう設計だったんですけど、それが一気に変わる中間で、自分自身で
Guest
ストアの情報を取ってきて、自分自身で完結するっていうプロリックが出てきたので、
Guest
これってどうするだっけって使っていいんだっけ。っていうのが、課題になり、
Guest
これまではあれですかね。ってことは、もう完全に一本化してやっていたっていうスタイルをまちょっと分割投資というか、それぞれに責務を持たせようっていう感じのプロリってとこですか。
Guest
そうですね、も、
Guest
ちなみにそのプロリクま結構そこって、派閥とかまあ意見とかってま分かれるま、結構ケース、バイケースなところはあると思うんですけど、まどっちかっていうと、これとかま結構色々派閥が分かれると思うんですけど。
Guest
お月さんわたさんはちょっと見た感じ、どんな感じだったとか、ま、どういったところま、
Guest
もちろん、ポジティブネガティブま、医療法。あ、そのステーションによってあると思うんですけど、どういった形で感じたかとかって、ちょっと聞けたりしますかね。
Guest
僕は、初めて見た瞬間には、
Guest
今までの設計破綻しないから大丈夫かなって、ちょっとドキドキしました。結構設計変更にシビアになりがちなので、い
Guest
そうですね。今までと違うことをして、今までの仕組みに支障が出ないかとか。
Guest
変に影響範囲が広がらないかみたいなところは1番最初に気になりました。またさんどうです
Guest
おそらく1年経ってないま、自分より多分もうちょっと経験が少ないんですけど、おそらく大月さんよりも先にクリを見てるんですけど、そん時は
Guest
まあ大丈夫かなと
Guest
思って。でまくり下した方も。普段リアクトも書かれると思うんですけど、ビも多分書き慣れていて、ビクラスビエみたいな
Guest
あ、キテクチャでやっていくものをよく書いてたで、私もよくやったものものっていうと、ビープラスビエが多かったんですけど、ま、そのプレイ見た時にま、それほど違和感は感じなかったですね。
Guest
割とビュースタイルっぽいな、みたいな感じですかね。そうですね、
Guest
なんかぱっとそうですね、なんか、なんとなく今まで自分が書いてきたコードに似てるなみたいな。はいはいもあって、そんなに違和感があ
Guest
なかった。なるほど、
Guest
確かにbeでやるならこうするなって。僕も
Guest
はい、はい、
Guest
確かにそうですね、ありがとうございます。
5. アーキテクチャの見直しから気づいた方針転換の選択肢
Guest
ま、ただその結構えまビービーで書く得をするなっていうところの納得感みたいなんがある一方でま。結構リアクトだと、これって一般的なんだっけ。みたいなのってあったかなと思うんですけど、その辺でなんか
Guest
結構妥当性があったみたいな話とか聞いたんですけど、なんか、どの辺見てどうだったとかって、なんか覚えてらっしゃいますかね。
Guest
僕は、ドキュメントをとりあえず見返そうと思って、リアクトのドキュメントと、あと、フラックユーティーズとリラックスのドキュメント見たんですけど、
Guest
意外とどれもバケツリレーしろよって書いてなかったんですよね。だし、コンテナも1個にしろって書いてなくて、なのでもよく見ると思い込んでたんですけど、
Guest
実はなんだ。必須ではなかったというか、それがベストブラックスではなかったんだなって見直したというか、理解し直した。
Guest
はいはいはい、その界隈の空気感みたいなのって結構あると思うんですけど、ま、それによってまあ結構なんでしょう。そういうオープニングがあると思っていたけど、そうでもなかったって感じですかね。
Guest
そうですね、リラックスとかってます
Guest
とは、スペードがきく1個にまとまってるので、受け取る側も1個なのかなって思い込んでたんですけど、全然そんなことなくて、必要なところで、勝手に
Guest
夕飯はとりなよって書いてたんで、
Guest
そういうもんだと思いました。
Guest
ちなみに、あわたさんはどう思いました。
Guest
そうですね、そのさっき、おつきさんがそのドキュメントを見た時に、バケツではそんなにましちゃいけないともしていても、書いてないというか、みたいな
Guest
話であったんですけど、はいはい、私がそのリアクトの行動ドキュメントの方じゃなくて、結構その検索した時に出てくるサンプルの方とか見ると、結構そのロスのき渡し、やっぱやってるんやってるのを見て、
Guest
なんかこれあらわしいんだよなって思い、やっぱでも、昔、私もそのブラックスの設計じゃないけど、オブジェクト指向的に作ってた時に、
Guest
やっぱなんか親からどんどんあの値を渡していくってことはやっていたんだけど、やっていつつなんかソにしてるつもりで、なんか意外と
Guest
これメ定していくのめんどくさいなみたいなことは思っていて
Guest
ま。最近、そのコンポネントを思考的に作る時にま、結構どこからでもストアにあまそのビュー書く時とかにそういうのどこからでも
Guest
なんか取り行くみたいな書き方は、結構気持ちよくてはいれてる書き方だったから。
Guest
そうですね、フリに対してはそんなに違和感はなかったし、逆にそういう一般にあるサンプルコード見て、プロップスのバケツリレーやってるのを見ると
Guest
かに。そうですね、なんか、威圧的な感じの人としてますよね。
Guest
で、まあ、ニュースの報道を見ると、実際そうやってプロップスを綺麗に渡してて、あ、
Guest
自分は修正はしたことあるんですけど、それに習って書いていてま。そんなすごい嫌だったわけじゃないですけど、まあ、
Guest
そうだよなみたいな。はい、なるほど、なるほど、ありがとうございます
Guest
まあ、そうですよね、結構まあ文献的にはそうでも、会話的にはそうじゃないとかって結構ありがちだと思うんですけど、まあ、結構それが乳日に現れてるかな。
6. 大人数のチームでの課題の吸い上げと合意形成
Guest
なので、どちらを選んでもいい。もちろんえ、まあ、自由自由ではあるんで、まあその変革を行っても良いし、まあ、それともチープするっていうとこがあると思うんですけど、そこでま結構チームとしてま。結構人数的に
Guest
8人いる中のチームってなるとま意見もえ色々あるかなと思うんですけど、そういうとこまどうやって思考していったりしてま。どういった結論出したかみたいなのを聞きたいんですけど、ま、ちょっとその辺教えてもらっても大丈夫ですかね。
Guest
ま、プリ出してくれた人の意見としては、やっぱり
Guest
バケツリレーと患わしくて、なんか影響範囲を分けてるつもりなのに、親から子まで全部そのバケツ渡しを直していかないと実装できない
Guest
で、どうなっていうか感があって出してくれたので、ま、1人は、バケツリレーの反対派
Guest
にした。
Guest
だけど、その方式がま馴染んでるし、ま。いわゆるリアクトのアプリケーションとしては、よく見る形式なので。
Guest
親しみやすさとか、理解のしやすさって意味では維持してもいいんじゃないの。っていう賛成派もいて。
Guest
そうですね。
Guest
ですかね、そうですね、その話ちょうど私の後ろの席で相談してるのを聞きながら、その時に実はその
Guest
フリークあげたの方の意見にそうなんだよねとちょっと相づち行きながら聞いてはいます。はいはいはいはい
Guest
なるほどなるほどえ、ギター、ウインタープライズとかも見せてもらったりしてるんですけど、まあ結構ポートでも議論しつつ、まあ、オンラインでも議論しつつって感じで進めてた感じ。
Guest
そうですね。プリク出してくれた人とは口頭で話したんですけど、はいはい
Guest
まど一応いたかなと思ったの。でも、チーム全員にみんな意見くださいっていう感じで投げて、みんなにひとつことずつ意見もらって、最終的にそれを集約して、どうやってやっていくのがいいかっていう風に。
Guest
メンバー全員で決めた感じですか。はいはい、はいはい、
Guest
なるほど、なるほど、ありがとうございます。その時にちょっと考えた支店支店とか、まあ、あのどの辺
Guest
いろんな選択肢が取れると思うんですけど、なんかどういった考えでやっていったみたいなところってありますかね。そのどこを評価軸にしたとか、ま、どういったところで決めていったみたいなとこって、決定的な部分でも、まちさなものでもいいんですけど、
Guest
なんかあったりしますかね。
Guest
問題ないなら変えてもいいんじゃないくらいの意見が多かった。
Guest
その中のそういう方向だった中で、ちょっと意見がいくつかあったみたいな感じでした。
Guest
観点だと、さっきのそのいは、その設計のよアっていう観点以外には面定しにくくならないか。既存の設計とちょっと違った設計が一部だけ組み込むことで、
Guest
複雑さが増して、免手しにくくならないかとか。
Guest
その形式に慣れてないから、修正の個数が読みにくくなるんじゃないかとかっていうですね。なんか、
Guest
ソースっていうよりは、開発する側の負荷みたいな観点で、も出てきましたね。
Guest
あの意見出た時に、あ、そのみんなに意見聞いた時に、自分はその比較的病者の方が新しいって言いましたけど、
Guest
ま、結構新しいやり方だったから、その既存のメンバー的には、反対の意見がいっぱい出るだろうなと思ったら、意外とそういうポジティブにま変え変えた方がっていう意見も出たのが、結構自分の中で新鮮。はいはいはい、
Guest
まあ、その時にそういう潜在的な
Guest
問題、意識が実はあったんじゃないかみたいな、その発露が現れたのかなって見えたのがちょっと面白かったです。はいはい、はいはい、
Guest
確かにそうですね、なんか多分みんなバケツリレーを煩わしいとはどっかでは思ってて、だけど、やっぱりそこにこう課題感を
Guest
はっきり出すことではなかっただけど、やっぱ誰かがそれは問題なんじゃないってこう声をあげてくれたっていうことだと思うので、
Guest
それは結構
Guest
まプロダクトには多分いい方に進んでますよね。
Guest
確かに確かにまだ結構あれっすもんね、
Guest
割とこう気持ちの話になってしまうと、みんな主張しづらいというか。まあ、変えるのもコストですし、ほんとにみたいな感じになりがちだと思うんですけど、
Guest
ま、結構それがまいいきっかけになったって感じですかね。
Guest
そうですね、
Guest
あと、これ他にも観点あるかなっていう話をは、谷さんに相談したこともあったんですけど、その時にま、テスタビリティテストのシラスターの観点では、どっちがいいんだっけ。っていうのを提案してくれて、
Guest
それも結構刺激的というか、面白い考え方だなって思いましたね。どっちもテストしやすい面とか、ましにくくなる面もあるとは思うんですけど、
Guest
そういう観点でまあんまり、その時は議論できてなかったので、正しい観点にはなりました。
Guest
まあ、じゃあ結構いろんな観点持ちつつもまあえ、どうなんだっけって見ていたって感じですね。
7. NEWS TAB における現時点での決定
Guest
その結果、結論としては、ま、どういった形で進めることになったって感じですかね。
Guest
最終的には、はい、そのプリは
Guest
一旦マージする。はい、取り込むことにしました。はいは、いま、その時は結構規模が大きな修正だったので、
Guest
リリスの時期を見て、今から変更するかってことも踏まえて、一旦取り込もうってことにしました。ただ、その方法がそのバケツリレーだったり、コンテナが1個しかないっていう設計に対してのアプローチとして、
Guest
ベストかどうかっていうのは、その時は判断しきれなかったので、それはおいみんなで考えて、もっといい設計に今後時間をかけてファクターしていこうっていう
Guest
話になりましたね。
Guest
はいはいはい、じゃあ結構まあ、そのプロダクトの都合をちゃんと見つつ、もま改善の第1歩として、取り込ん取り入れていこうで、まあ、結構もりよりよよくしていきたいものに関しては、まあ、これから議論していこうって感じですか。
Guest
なるほど、なるほど、ありがとうございます。そのこうより、良くしていくために、今後どうするみたいなのって、まあ、なんか
Guest
ちょっと今感じてることとかま、今後の方針的なところで考えてることとかってあったりしますかね。
Guest
ま、でも、やっぱこれをきっかけにってところですよね。あの、
Guest
今、おかげリレーになっていくところをなっているところを、まああ、もうちょっとそういうフレーズにあったような、
Guest
コンテナいついくつもあっていいって話なんですかね。あれは、
Guest
うん、いくつあってもいいって話だと思いま
Guest
んで、ああいう形にこれからしていけたらいいのかな、という
Guest
はいはい、
Guest
なんか設計って、やっぱりそのその時点でのベストの設計頑張って考えても、
Guest
仕様が変わって
Guest
たり、膨れてったりしていくうちに、だんだんその設計じゃ合わないって場面ま成長していくとなると思うんですよね。それだと、大きくなっていくと
Guest
ね、なんでま、そうなった時にまチームで合意を取って、みんなで改善していけるっていうな。空気というか、文化ができれば
Guest
いいかなと思ってて、なんでも今の設計がま、今後良くなるか悪くなるかわかんないんですけど、ひとまず
Guest
その課題を出してくれるで、それが一旦取り込まれるっていう経験ができたことは、
Guest
ま、今後に結構繋がるんじゃないかなと思ってます。あとのチームもプロやってるので、ま、こういったこと、ももプロの題材に取り上げて、みんなでやっつけようっていうふうに、きっとやっていける
Guest
んじゃないかなと思うので、ちょっと期待という。なるほど、なるほど、まいいスタートを切れたのかな、ぐらいに今は思ってます。
Guest
なんか、個人的にもちょっとはから、まあ、今回のアテの話は聞いたりとかま、その
Guest
やっぱり問題意識みたいなところとまそこの改善みたいなの結構やる土壌があるよなっていうその感じてたんでま、結構なんでしょう。チーム的というか、すごく
Guest
すごくいい、なんか、その変化があるよな、という風に感じたりしましたね。いや、いいいいいいチームですよね。ほんとになんか
Guest
多分割と個人がその自分の考え方、
Guest
プラス。そのでもチームだからみたいな視点を割と思った議論がなされた感が。
Guest
はいはい
Guest
はいはい、
Guest
そうだけど、まあ、チームとしてとか。あと、運用していくこと考えた場合だと、こうみたいな意見が割と出た感じがしますね。
Guest
あんまり宗教争いっていうか、こう設計の義足争いにはならなかった。
Guest
俺はこうだから、うん、いつもこうしているからみたいな。まてか、自分もそうなんですけど、普段こうやってやってる。あ、ま、
Guest
そうですね、自分は普段こうやってやってるから、こうあるべきよりかはもうちょっと不してうん、いた
Guest
感じですね。ま、そうやろうと思ったわけじゃなくて、なんか割と自然とそういうありました。ニュースの規模を考える、
Guest
はいはい、
Guest
メンバーが揃ってるのがいい、
Guest
結構、そういう議論が盛んに行われるってのは、いい環境ですよね。
8. 今後の改善について
Guest
今回のリアクトのコンポネントのま、コンテナの切り方みたいな話以外に、もうちょっとなんかタイプスクリプトの話、今じゃ、バスクリプトからタイプスプトに変えようって話とかも。え、なんかあるとか
Guest
聞いたんですけど、なんかそういう意味で、今チームがちょっとこれからの未来に向けて、なんかやってる活動とか、
Guest
なんかあったら、なんかどういう感じで考えて、どういう感じで改善してるか、改善をに目を向けてるかみたいなんで、ちょっと聞かせてもらえますかね。そのも、プロとかの文脈もそうだと思うんですけど、
Guest
ソースの面で言うとや、タイプスクリプトとテストを増やす。
Guest
結局、テストとデビューのコストっていうのが、やっぱ課題になっているので、
Guest
まあ、そのテストの前段階として方がついていれば、そもそもテストが必要ないというか、まま間違っていることが分かるとか
Guest
あるので、まずまずタイプスクリプトかなみたいな感じが出ます。
Guest
ですね、モプロやってるのもま、レビューを減らすためにも、プロしながら強引とっちゃって、
Guest
デビューを省くためっての大きくて、はいはい、結構もソースも大きくなって、人も増えてくると、デビューのコストとか赤になんだね、
Guest
感じありますよね。そう、その辺の課題で、うん、どうにかしていきたいなって思ってます。
Guest
いや、結構あれですかねなんか、デフレ対策として、まあ結構そのレビューっていうのが割と今重きが置かれてるけど、そこを削減していきたいっていうのが、結構全体の質感としてあるって感じですかね。
Guest
トスティグヘチェックで、フレチェックするのも、できればテストがあってま。その
Guest
実際にて動かして、テストする時のテストとかを少しでも軽減できたらなっていう考えも、はいはいはい
Guest
いや、結構やっぱまあおっきくなってきて、メンバーも増えるとレビューとかって難しくなるもんですよね。
Guest
しかも、なんかちょっと担当を持っちゃ、なんか、この部分はダメみたいな感じで持っちゃうと、そこやった
Guest
人しかわからないみたいなところになっちゃってると、結構レビューで誰かレビューするだろうということも、はいはいはい、
Guest
行動、オーナー的な感覚が出てくるって感じですよね。なるほど、なるほど、
Guest
まあ初めの方ってま。それこそ、今回LINEnewsのタグ自体は、この初め2人でやってた
Guest
って形で聞いてたと思うんですけど、やっぱおっきくなってくると、だんだん合意形成とかま、その辺りって難しくなると思うんですけど、結構今聞いててま。今回みたいなやり方ま。もちろん、その
Guest
会話的な流れとかは知りつつも、その上でどうやってプロダクトやっていくかとかま、結構み増えたらええ。その
Guest
空きテ茶についてのえ、問題意識に対する改善とかって、だんだんやりづらくなっていくと思うんですけど、まあ、結構そこの動きっていうので、まあえ、面白い観点がきたんじゃないかなと思うんで、
Guest
いい機会でした、ありがとうございました。
Guest
なくなったら、ニュース来てく
Guest
それ、ほんとにほんとに人事、人事異動で話になっちゃうんで、やばいですよ。えーということで、え、今回のユテインサイドはですね
9. クロージング
Guest
LINEnewsにおけるえーリアクト。え、アキテクチャについてのえ、話っていうところで、え、大月さんとあさんの2人にえお聞きさせていただきました。
Guest
LINEdyt室はではですね。ま、結構プロジェクトによってま。経路は違いますけど、こんな感じでえ。日々フロントエンドに関する議論が行われていたりとか。まあ、そのプロジェクトを横断して、部署全体でのえ、交流の機会
Guest
としてgッドハブ1種でえ、議論が行われたりま、最新の情報のえー発信が行われたり。えー毎週金曜日
Guest
えjsラヴン協会っていう名前でま。javaスクリプトに関しての勉強会やっていたりします。
Guest
ま、ちょうどですね、今回のこのポッドキャストの収録も、ジスラビン協会の後っていうことで、ま、結構いろんな話があったっていうとこなんですけど、
Guest
ま、ちょっとえその辺のえ発信してるので、ま、ちょっとその辺の共有。もえ、最後にさしていただければと思います。
Guest
今週のフロントエンドおよびjイスラーベン協会でえ、話題になっていた情報ですけど、もまちょっと今日多くてですね。えお、あの、
Guest
ちょっと盛れる分はえー賞の方に書いておきますけどもま、例えばですね。今日のジェイスラービン協会のえと、
Guest
いや、フロントエンド情報で話してなかったのはま、結構ウェブアセンブリーえーをま使ってま。ワスムでま。処理速度をアップして、パフォーマンスチューティングしたよって話だと、かまちょっとトレンド的な話で言うと、えだだ、
Guest
クロミーム以降が進んでるマイクロソフトウェッジですけど、もえ、公式のプレビュー版がようやく出たっていうところでま、ちょっとクロミーム版のエッジっていうのが、どんな感じでえ、触ってみたいかってことが見れるようになりました。
Guest
あと、かまちょっと変なえ、ユーザーエージェントま、ちょっとご完成の都合だと思うんですけど、エッジのユーザーエージェントがえ、変になってたりしたんで、ま、ちょっとその辺の話とかもあったりとか。
Guest
えま、wcでのえ、hmlとドムの仕様ってのが配置されて、ワットワーキンググループに、統合されますよっては
Guest
とかま色々出てました。っていうところでま、全部一応気になる方は見れるように。え、下の方のえ、初のに書いておくんで、ぜひぜひ見ていただければと思います。
Guest
えーというところでえ、今回のUIT INSIDEは以上とさせていただければと思います。えおすさん、田さん、ありがとうございました、ありがとうございました。