ep.65 好きな技術では妥協しない！LINEのフロントエンドエンジニアの技術選定 | UIT INSIDE

2020/10/23 に公開4072 views

このエピソードについて

@g4rds が、 @daisuke.yamamoto と @uhyo_ に、Vue 3 や React / TypeScript の技術選定とその理由について聞いてみました。

ゲスト紹介

@daisuke.yamamoto
- Data Visualization チームフロントエンドエンジニア
- チームでは、Vue.js を主に利用しており、 RC から Vue 3 を開発に投入している
@uhyo_
- LINE 証券フロントエンドエンジニア
- TypeScript コントリビューター
- LINE 証券では React/TypeScript を利用しており、 React 17 や Recoil を Production 導入している

React/Vue と TypeScript 対応

React の TypeScript 対応
- React はご存知 TypeScript-First で記述できる
  - React 自体が facebook/flow で記述されていることに由来
  - はじめから Type Friendly な設計がなされている
- Router の型などについては後述
Vue の TypeScript 対応
- Vue 3 でコンポーネントの型が改善、Vuexの改善、TSXサポート、テンプレートの一部サポートなどが追加
  - ただテンプレートの型については完全ではない
  - まだまだ React に追いついているとは言えない状況

フレームワークを取り巻くエコシステム

React
- Router、状態管理、テストスイートなどどれも自分で選択
- Router
  - LINE 証券では React Router を利用
    - 型定義が弱いので uhyo としては uhyo/rocon を使いたい
- 状態管理
  - LINE 証券では統一的なオピニオンがあるわけではない
    - 最近は Recoil の導入を始めた
    - 直接的に Recoil を使うのではなく、ラップした Custom Hooks を利用
- テストスイート
  - React Testing Library を利用
    - Enzyme は利用していない
Vue
- Vuex, Vue Router, Vue Test Utils など必要なものが一通り揃っている
  - すべてがオフィシャルで提供されている
- Vuex は 4.0 で型が改善などアップデートも
  - Vue Router の path などは string or string[]
- Vue Test Utils は enzyme 寄りの BFF コンポーネント改善ツール
- このあたりは 2.x から変わらず、 3.0 にあたっての追加などはなし

React v18 と Vue v3 のこれから

React について
- 10/20 に React v17 がリリース
  - https://reactjs.org/blog/2020/10/20/react-v17.html
- React v18 では Concurrent Mode が導入される
  - 非同期に対するコンポーネントの取り扱いが大きく変わる

使っている技術の弱み

React
- React の良さでもあるが、オフィシャルなエコシステムが存在しない
  - 結果として CSS in JS など、好みが分かれる部分がプロジェクトによってバラバラになる
Vue
- TypeScript 対応はやはり React と比較して弱い部分がまだある

Refs

LINE 新卒採用 2022
- https://linecorp.com/ja/career/newgrads/engineering/
キャリア採用はこちらから
- https://linecorp.com/ja/career/position/475
BGM&SE
- 魔王魂/騒音のない世界/OtoLogic

採用について

使用素材・クレジット

BGM&SE

音声書き起こし

1. オープニング 00:00

Guest 00:00
こんにちは、

Guest 00:01
こんにちは、

Guest 00:03
今週のUIT INSIDEを始めたいと思います。UIT INSIDEは、ユーザーインターフェースと、テクノロジーを愛する開発者のためのポットやトです。

Guest 00:12
最新のウェブ標準の動向や、フレームワークの変遷、またまたuiやuxに関することまで、

Guest 00:19
毎週フロントイントの情報を発信していくことを目的としています。ハッシュタグはハッシュ、UIT、アンダースコアインサイド。

Guest 00:27
ご意見やご感想はいつでもお待ちしておりますので、お気軽にツイートしていただければなと思います。

Guest 00:34
今回は私、潜水とともに、うょさんと山本さんをゲストに

Guest 00:39
ビアとビーの特徴と使用感、そして、今後について話していきたいと思います。うさんと山本さん、よろしくお願いいたします、

Guest 00:49
よろしくお願いいたします

Guest 00:50
お願いします。

2. ゲスト紹介 01:01

Guest 01:01
では、まずはゲスト紹介ということで、うひょさん自己紹介お願いいたします。

Guest 01:06
はい、私、右京は去年2019年の4月に新卒でLINEに入社しまして、

Guest 01:13
それから、ずっとLINE証券というサービスのフロントエンドを開発しています。

Guest 01:19
twitterなので、私をご存知の方も、もしかしたらいらっしゃるかもしれないんですけども。

Guest 01:23
結構タイプスクリプトが好きで、タイプスクリプトの記事を書いたり、最近はタイプスクリプトにコントリビュートしたりしています。どうぞ、よろしくお願いします、

Guest 01:33
よろしくお願いしますよ。ひろさんのLINE証券では、リアクト広く使われてるんですよね。

Guest 01:40
そうなんですよ、

Guest 01:42
なるほど、なるほど、

Guest 01:43
ということで、ひとさんはリアクトタントということで、今回お呼びしておりますので、よろしくお願いします。ありがとうございますでは、次に山本さんお願いいたします。

Guest 01:52
はい、データビジュアラデーションチームの山本と言います。社内ツールのフロントの開発を担当しているチームになります。

Guest 02:01
で、ここでフロントは基本的にビーjでspaで書いてるという感じですよろしくお願いします。

Guest 02:09
なるほど、よろしくお願いいたしますということで、えもんさんは、ビータントということでお呼びして、はい、

Guest 02:15
書いて、

Guest 02:16
しかもあれなんですよね。データビジュアライゼーションチームでは、ビュー3がまだリリースされてない段階から買っていらっしゃったとか。

Guest 02:24
そうですね、アルファの時から使ってます

Guest 02:27
お、アルファからなんですね、はい、すごいですね、やっぱ社内向けシステムだからということで。

Guest 02:34
はい、なるほど、なるほど、そういう感じです。素晴らしいですねで、このビュー3とかについてもですね。後半の方でお話ししていきたいと思いますので、

Guest 02:43
また、後ほどお話きて聞いていきたいと思います。

Guest 02:49
それでは最初にですね。近年、スタンダードになってきたタイプスクリプトについて、ちょっと話していきたいなと思います。

3. React/Vue と TypeScript のイマ 02:50

Guest 02:57
で、まずはですね、リアクトとこのタイプスクリプトについて話していきたいんです。

Guest 03:02
ま、僕自身ですね。今携わってるプロジェクトでも、リアクトとタイプスクリプという環境で。

Guest 03:10
今仕事してるんですけど、やっぱりリアクトってタイプスクリプトとの神話制、すごい、非常に高いなと感じてます。

Guest 03:19
ほょさんは、このタイプスクリプトとのシバスでどうお考えですか。

Guest 03:25
はい、タイプスクリプトとリアクトのま新話せ、私もとても高いと思います。そもそも、リアクトっていうのが

Guest 03:34
ま、コンポーネントを最近は関数で表現するようになってまして、まあ、外部からプロプスとして渡されたデータ

Guest 03:42
を引数として、受け取ってま。レンダリング結果をま戻りしとして返すというインターフェースになっているので、

Guest 03:51
ま、それに対して、リアクトファンクション、コンポーネントっていう方をつけるようになってるんですけど、もま、こういうインターフェースがすごくタイプ、スクリプトで

Guest 04:01
肩をつけやすいことを意識されているな、という風に思います。

Guest 04:07
確かにまそうですよね、ですね、

Guest 04:09
はい、またですね、もう1年かそれ以上前にリアクトfoxっていうのが導入されたんですけど、も。うん、あれも。

Guest 04:19
まあ、タイプスクリプト、あるいは型システムとの神話制というのを、とても意識されて作られているインターフェースになっていると思います。

Guest 04:28
なるほど、こうタイプスクリプトとの神性を事前に考えながら作ってた感じなんですね。なるほど、

Guest 04:35
そうですね、実はリアクトってタイプスクリフトじゃなくて、フロータイプを公式に採用しているので、

Guest 04:44
どちらかというと、そちらとの幸せだったのかもしれないんですけども。まあ、どちらもカシステムという点では同じなので、

Guest 04:53
タイプスクリフトとの相性も非常に良くなっていると思います。

Guest 04:58
なるほど、なるほど、確かにそうリアクトってこう、panjavascriptな感じ

Guest 05:05
ま。何か受け取って、それを返してみたいな。あの、それが1つのコンポーネントになってて、

Guest 05:10
まあ、すごく片付けやすいですよね。で、そうか、僕がコンポーネント作る時に片付ける時でも、

Guest 05:17
まあすごく書きやすいフックも書きやすいし、その辺すごくいいと思います。そうですね、さっき、今タイプ

Guest 05:25
リアクトの内部で、型システムタイプスクリプトじゃないっておっしゃってたと思うんですけど、一応それ僕全然詳しくないので、ちょっと詳しく聞きたいんですけど、

Guest 05:36
ですね。ま、javaスクリフトにタイプル対する型システムって、今タイプつける人が非常に有名なんですけど。うん、うん。

Guest 05:44
あ。それと、フロータイプっていうのも競っているのがありまして、実はこのフローっていうのは、facebookが作っているやつなんですよ。あ、そうなんですね、

Guest 05:54
なるほど、

Guest 05:55
タイプスクリフトは、マイクロソフトなのに対して、フローがfacebookですね。うん、うん、ご存じの通り、リアとfacebookが出してるやつなんで、

Guest 06:04
まある種必然的にま、リアクトはこうフローに乗っているような状況になっているんです。

Guest 06:10
なるほど、そんな感じなんですね、ちなみに、そのフロータイプっていうのは、タイプスクリットとま同じような感じなんですか。

Guest 06:20
そうですね、かなりまタイプスクリプトと似たことができるようになっていると思います。

Guest 06:27
うん、うん、うん、うん、

Guest 06:28
ちょっとごめんなさい。私はあまりフロに詳しくなくて、タイプスクリフトはものすごいなんでしょう。こう変態的なというか、

Guest 06:36
ゲートが可能な方。システムなんですけど、フロータイプがどこまでそれに食いついてるのかってのは、私もあんまり詳しくはないですね。

Guest 06:45
なるほど、ただ、

Guest 06:46
そう結構なことができるという風には聞いています。

Guest 06:50
確かにタイプスクリプト、ポリアクト柄使う時もやっぱタイプスクリプト。あの、

Guest 07:03
読み込むと。

Guest 07:04
けど、そうじゃなくて、内部ではフロータイプっていう別の型システム使ってるんですね。

Guest 07:10
そうですね、リアクトのソースコードそのものは、フロータイプで型チェックされているんだと思います。

Guest 07:16
なるほど、そのアウトプットしたものは、まな違いです。

Guest 07:25
ありがとうございますでは、次ビュートタイプスクリプト話していきたいんですけれど、

Guest 07:31
ま、僕自身こうビーでタイプスクリプトを使ったことないんですけど、この辺実際どうなんでしょうか。ってもん、

Guest 07:40
そうですね、リアクトを少ししか使ったことないんで、比較するのが難しいんですけど、まあ、ビューは正直まだまだ部分

Guest 07:49
あるのかなと思います。そうで、そうですね、私も今回ビュー3でコンポジションAPIを使って、それで初めてタイプ作るとと一緒に

Guest 07:59
使ったんですけど、うんで、だいぶ書き味は良くなって、新性も高まったかなと思うんですけど、まあ、それでもまだ

Guest 08:08
弱い部分もあるのかなと思いますね。

Guest 08:12
確かにこう、ビテテンプレートっていうところがあって、その中にもjs書いたりする。はいしますもんね、そこの型情報って、

Guest 08:20
どんな感じになってるんですかね。今起こして、

Guest 08:23
今あそこのtsのサポートはないと思いますね。あ、

Guest 08:26
そうなんですね、これ。エディタの拡張機能、例えばvsコードだったらピーターとかあると思うんですけど。はい、そこで保管していく。

Guest 08:34
そうですね。そうですね、

Guest 08:36
もうビーのこうランタイム的には、ちゃんとビューのコンポーネントには、プロパティのタイプとかもつけられる。あ、それでいうと、ビューの

Guest 08:46
タイプ、コンポーネントのプロップのタイプってこうタイプスクリットで書いてる時は、こタイプスクリプトの方で書けるでしょうか。

Guest 08:55
うんと、そうですね、ま、今までのプロップスのオブジェクトの指定にま型を。

Guest 09:04
ああずの後ろにかく感じです。

Guest 09:08
うん、なるほど、なるほど、あ、そうなんですね、

Guest 09:10
はい、

Guest 09:11
じゃそこそこ良さそうですね、なるほどです。今、ビュー3のコンポジションAPIだと思いますけど、まそこ。

Guest 09:21
やっぱ結構そのコンポジションepiって、タイプスクリプトのことを意識して作られてる面もあったりするのかなと思うんですけど。はい、やっぱ

Guest 09:30
かなり今までのAPIと違って、タイプスクリプトのチマ性が非常に高い感じですかね。

Guest 09:38
まあ、そう思いますねあのま、コンポジションAPIのrfcに書かれてるなんですかね。モチベーション

Guest 09:47
ま、大きな2つのうちの1つがダイブスクリプトの幸せだと思うので、ま、それは大きいかなと思うんですけど。

Guest 09:54
はい、ちなみにそのは1個。はい、スクリプトじゃない方のモチベーションって、

Guest 09:59
あ、もう1個は。機能とか関心ごとにコードがまとめられるので、再利用性も高まるっていう話です。

Guest 10:07
今までは、必然的にオプションごとに行動をまとめる必要があったんですけど、ま、そうじゃなくなったよという話でし。

Guest 10:16
すいません、ありがとうございますはい、こんな感じですかね。なるほどですで、結構ビュートタイプ、スクリプトのままだまだ

Guest 10:27
タイプスクリプトとの新足りない部分はあるんだけれども、今かなり良くなってきているという感じですかね。

Guest 10:34
でも、あれなんですよね、まだ、コンポジションAPIって、公式のビのドキュメント的には、アドバンスな感じなんですよね。うん、そうなってますね、

Guest 10:44
なるほど、でも、データビジュアライゼーションチームではもうほとんどコンポニョンAPIで書かれてますか。

Guest 10:51
ビーさんになってからは、基本的にはそうです。

Guest 10:54
なるほど、はい、なんですね、

Guest 10:56
ま、このコンポジションAPIについては、また後ほど今後の話のところでいけたらなと思います。

Guest 11:03
はい

4. フレームワークを取り巻くエコシステム 11:07

Guest 11:07
えではですね、次に、このフレームワークのエコシステムについて話していきたいです。で、今度は先にビューから話していきたいんですけれど、

Guest 11:17
こうビューテこうビールーターとか、ビーxとか、あと、ビューテストユーティです。とか

Guest 11:23
まそうか、色々公式のエコシステムが豊富だなと思うんですけれども、この辺どうですか。

Guest 11:31
そうですね、便利に使わせてもらってますっていうの、はい、

Guest 11:35
やっぱり結構公式のこのエコシステムを使ってる

Guest 11:39
そうですね。はい、そうです。まあ、全部は基本的にオフィシャルのものを使ってま足りない部分は多少

Guest 11:48
感じです。うん、うん、うん、うん、

Guest 11:52
確かにそうですよね。ちなみに、こうリアクトってこうテスティング系で言うと、ま、2種類あるんですけれど、ビとかにはいこう。オフィシャル以外

Guest 12:01
のこう、コミュニティ性のライブラリとかってあったりするんでしょうか。

Guest 12:07
ああ、どうなんでしょう、あんまり詳しくないんですけど、まあ、ほぼテスト言うてる一境なのかなという認識なんですが、なるほど、なるほど、ちょっと詳しくはないです。はい、

Guest 12:18
なるほどではあれですね、もうほとんどビューのエコシステムに乗って、

Guest 12:24
ま、あまり関心事が

Guest 12:26
多くな。

Guest 12:27
そうですね。そうですね、あの、ucli使っても、その辺も全部セットアップした状態でインストールしてくれるので、

Guest 12:35
ま、それに乗っかって帰っちゃうっていう感じが多いかなと思いま。

Guest 12:39
なるほど、やっぱそこすごくビの利点ですね。すごくこうビーのエコシステムってしっかりしているので、こうビーの公式がなってくれた

Guest 12:49
この線に従って進んでいけばま。bcliでプロジェクト作って、で、ビーの公式ライブラリーを使って、これで

Guest 12:59
実際にカスタムしていかなきゃいけない、作っていかなきゃいけないところだけに専念できるっていうのは、まビいいところですね。なるほど、なるほど、

Guest 13:08
では、次リアクトの話していきたいんですけれど、まリアクトってこうエコシステム

Guest 13:16
な話でいくとまビリアクトルーターで、公式ではないでしょうか。

Guest 13:22
そうですね、リアクトルータは証券でも使ってますけど、これは公式ではないんですね。

Guest 13:29
そうなんですね、確かに、このリアクトルーターって、なんか公式ドキュメントドキュメントが公式じゃない感じなん。リアとトレーニング

Guest 13:38
まなちゃんはいところそうやっぱそこがあの作ってるんですね。そうですね、でも、証券でも、このリアクトルーターを使ってらっしゃる

Guest 13:47
そうです。まあ、リラクト向けのルーティングライバルのデファクトみたいな感じになってる。ライブラリですので、

Guest 13:54
証券でもここで導入しています。うん、うん、うん、

Guest 13:58
そうなんですね。ちなみに、このリアクトでいうルーター系って、この後ろさん何か

Guest 14:06
ライブラリみたいなの作られていましたよね。じゃあ、その話

Guest 14:10
よくご存じですか、ありがとうございます。そう、証券でリアクトルーターを使っていて、思ったことなんですけど、

Guest 14:20
やっぱりまだタイプスクリプトの神話制が良くないなって思ったんですよ。

Guest 14:27
ルーター系ライダルなので、リンクを貼るときに、このurlに対してリンクを貼るみたいなことを書くんですけど、もまurlを対抗したりしていても、カエラーが起きたりしてくれないし、

Guest 14:39
urlにパラメーターをつける時、なんかもパラメーターを付け忘れても、パエラーが起きてくれなくて、とても辛いなという風に最近思っていて、

Guest 14:50
なので、その辺を改善してま。非常に型システムとの神話性が高い、ルーターライブラ、リ

Guest 14:56
リアクト向けるタライブラリとして、ロコンっていうのをこの前作りました。残念ながら、まだ証券で採用したりはちょっとしていないんですけど。

Guest 15:05
あ、そうなんですね、まだなんですね、

Guest 15:08
残念なことに

Guest 15:09
でも、まあ、今後ロコンこう人気になってきて、証券でも使われるようなこともあったりするんですかね、

Guest 15:17
確かにそうなってほしいですね。

Guest 15:20
確かに、リアクトルートのそのまリンクとかさっき言ったリンクもそうですしま。リンク系、特にリンク系の方、システムって

Guest 15:30
あるとすごく便利ですよね。クエリとか、渡すプロップ系とかもそうですし、その辺もまた入ってくれるとすごくありがたいですね。

Guest 15:38
はい、

Guest 15:39
特にクエリーって結構あの受け取る側で片付けるだけでこう渡す時にこうどうこうみたいな話ってない

Guest 15:49
そうなんですよ、

Guest 15:51
確かにここはすごくあるといいですね。ちなみに、これ、ビールーターってどうなってますか。この辺、このピンクに

Guest 16:01
リンクする時にまクエリとか渡すと思うんですけど、その辺てたいか、タイプスクリプトの方とかあったりするんでしょうか。

Guest 16:09
そうですね、クエリーは

Guest 16:14
ま、ストリングになっちゃうと思います。全部ま、ストリングがストリングの配列かになると思い。

Guest 16:20
なるほど、はい、そうなんですね、そうですか、ビールビュールーターのリンク。なるほど、そうなんですね、はい、では、ちょっと話戻して、

Guest 16:30
ビュールビュールとリアクトの話にちょっとまた戻ります。けれど、

Guest 16:35
まリアクトルーター以外にもま色々状態管理とか、デスピングとか色々あると思うんですけれど、特にま、やっぱ

Guest 16:45
今、上体管理リアクトの状態管理って今熱いですよね。ま、リアクトのリラックスか

Guest 16:55
ま、それもありますし、他にもなんだっけ、飛んだな、なんでしたっけ。もう1個のリラックスじゃなく、

Guest 17:04
今流行りの

Guest 17:07
あ、そうです。そうですりこいいです。

Guest 17:10
そうリだ状態か、リアクトの状態管理って、リラックスだけじゃなくて、最近リコイル出てきたじゃないですか、長券では、リコイルって使われてますか。

Guest 17:20
あ、実はちょっと導入してみたんですよ、

Guest 17:23
お、そうなんですね、どうでした。ええ

Guest 17:26
いや、使い心地はとってもいいですね。個人的にはリコイルが

Guest 17:30
うんうんうん。

Guest 17:32
何よりも、リアクトフックとの神話性がすごく高いところが気に入っています。

Guest 17:38
そうなんですね、やっぱフック確かにもリラックスも一応フックはあるけれど、ええま。それよりももっといい感じだったりするんですか。

Guest 17:48
そうですね、フックと一緒に使われることが前提のAPIになっていて、

Guest 17:56
いわゆるカプセル化っていうんですかね。そういうのがすごくやりやすくなっているんです。

Guest 18:02
なるほど、確かに、今までのこのリラックスのフックス的には、こうコンポーネントの中で、

Guest 18:10
リラックスのフック読んで、デート取ってきて、それをフックに渡すみたいな感じの流れかなと思うんですけれど、

Guest 18:18
ええもえた。

Guest 18:19
リコイル使うと、このフックスの中でステートを取り出してっていうことが

Guest 18:27
そうですね。リコイルのAPIも、色々なフックスとして提供されているんですけど、

Guest 18:33
我々はあんまり。そのリコイルの服装を生で、コンポーネントから使うということがなくて、リコイルの

Guest 18:41
フックをラップした、カスタムフックっていうんですかね。そういうのを使ってまリコリのステートマネージメントをすることが多いです。

Guest 18:50
そうなんですね、服の中でこのステート読んでま。もう、コンポーネントは、このじゅ、グローバルなステートには関心を持たないみたいな

Guest 19:00
感じがそうですかね。

Guest 19:01
そうですね、コンポーネントはこう我々がカスタムフックとして作った、なんか、便利なフックを使ってればいい感じにま状態が取れる

Guest 19:11
みたいな状態で、まその便利な服の裏で、こうり越えるとやり取りしているみたいな感じです。

Guest 19:18
おお、それはすごく良さそう。それで、実際のところは使ってみたっていうところで、まだリラックスとかの方が多いですかね。

Guest 19:28
ま、まだリコイルってまだ0.0何十みたいな感じ。はい、公式リリースはまだ全然最近だと思うんですけれど、

Guest 19:37
まだ使われては本格的には使われてない感じ。

Guest 19:40
現時点では、そのリコイルを作ったコードというのが、リリースされていないんですか。近々、プロダクションに載せる予定でおります。

Guest 19:48
そうなんですね、もうプロダクションに。え、あ、そうなんですね、

Guest 19:51
そうなんですよ、

Guest 19:53
もち、これはもう

Guest 19:54
これはもうユーザーに見えちゃうところなんですけれども、はい、もちろん、テストとかは入念にした上で、思い切って

Guest 20:02
ま。リコイルを使って作ったものをユーザーに届けてしまおうと思っています。

Guest 20:06
おおいいですね、それ、すごく楽しみですね、もう、それくらいもう安定してるって感じなんですかね。

Guest 20:12
はい、我々が使ってみた感じはとても安定していると思います。

Guest 20:18
いいですねま、状態管理これがり、リアクトの状態管理ってなんか色々。今選択肢あるんですけど、今後どんどん

Guest 20:26
もっといいものが出てくるかもしれないですね。

Guest 20:29
はい、私としてはちょっとリコイルをしていってみたいです。

Guest 20:33
いいですね、ありがとうございます。ちょっともう1つだけこう。テスティングの話なんですけど、僕はい、これすごく

Guest 20:41
気になっていて、リアクトのテスティングって、リアクトテスティングライブラもありますしと、エンザムあるじゃないです。

Guest 20:50
僕らのチームでは、エンザイム使ってるんですけれど、証券ではどっち使ってらっしゃいますか。

Guest 20:56
ああ、証券ではリアクトテスティングライブラリーの方を使ってますね。

Guest 21:01
そうなんですね、確かに今僕らエンザイム使ってて、フックのテストがすごくやりづらいなっていうので、結局

Guest 21:10
なんか自慢でラップコンポーネント作ったり、もしくはレトテスティングライブラリーから引っ張ってきちゃったり、みたいなことしてて、

Guest 21:18
やっぱテスティングライブラリーの方がいいですかね。ちょ、あの使い心地的にはどいいですか。

Guest 21:25
すいません、エンザ部を使ったことないから比較はできないんですけど、もはいまあ、リアクトテスティングライブやれば、

Guest 21:31
まあ、使い方もわかりやすくて、かつ。まあ、テストに必要なものがいい感じに揃ってるなという印象ですね。

Guest 21:40
なるほど、そうなんですね、この辺、テスティング系はまた再考した方がいいかもしれないですね。

Guest 21:48
エンザイム、トリアクトテスキングラブあり、どっちを採用するか。

Guest 21:53
なるほど、そうなんですね。あと、この間、UITのスラックチャンネルでも話題に上がりましたけど、リアクトの環境構築って

Guest 22:03
ま。ビューだったら、こうビcliでパッとできるです。けれど、マリアクトだったら、こうクリアットリアクトアップとかもあるし、

Guest 22:12
もしくは自慢で作ったりとかもすると思うんですけれど、これは長剣ではどっちでやられてますか。

Guest 22:19
証券では、クリエイトリアクトアップは使っていなくて、ですね、必要な設定を全部自前で書いていく感じですね。

Guest 22:27
あ、そうなんですね、証券では、グレートリアドアップではなく、てま使ってらっしゃるってことですね。

Guest 22:33
そうですね、個人的にはですけど、クリエイトリアクトアップがあんまり好きじゃなくて、

Guest 22:40
ま。エジェクトをしないのは、ちょっと。中身で何やってるかわからないから、良くないなと。個人的には思ってるんですけど、

Guest 22:47
かといって、イェクトしちゃうなら、最初っから自前で書いた方が見通しよくないと、ちょっと思わないでもないというか、うん、

Guest 22:54
うん、確かにそれもありますね。確かに。あと、環境構築で言うと、ネクストジェースとかもあったりするじゃないですか。はい、あれって

Guest 23:04
まspで作るんだでも、ネクストジーでもsp作れますもんね、これでもですね、ネクストジーは、使ってらっしゃるって感じですかね、

Guest 23:14
まあ、使おうと思えば使えると思うんですけど、今は証券では採用していないっていうところですね。ネクストジェイズは

Guest 23:21
そうなんですね、確かにうちも全然ネクストジース使ってないんですけど、ネクストジェースもかなりまこん。今後、

Guest 23:29
今度、ネクストジェースのカンファレンスもあると思うので、11月ですかね。それも、またごく楽しみにしてるので、そこで、何か

Guest 23:38
ゲームチェンジな感じのネクストジェースのアップデート入るかもしれないですね。

Guest 23:43
それで言うと、

Guest 23:44
ビューってこまビュージーだけではなくて、ナクストジースあると思うんですけど。はい、データビジュアライゼーションでは、

Guest 23:53
ナクストは使ってらっしゃらないですか。

Guest 23:55
うちのチームは基本的には使ってないですね。

Guest 23:58
なるほど、もうナクストナクスでこう、オフィシャルなエコシステムって、すごく色々プラグインあったりすると思うんですけど、はいますごくその辺ナクストっていいよなと思っているんですけれどは、いま、

Guest 24:11
ナクストとビューって、多分ナクストでも一応spで作れますよね。

Guest 24:16
そうですね、

Guest 24:21
そうですね、ま、大きなそのメリットにあのssrがあると思うんですけど。はい、社内ツールなので、そこはあんまり気にする必要がなくて。

Guest 24:30
確かにまあ、そうですね、使ってないというのが今のところあります。

Guest 24:34
なるほど、ssrしたいんだったらなく、ストでそうじゃなかったらビでいいですよね。みたいな話ですね、そうです、なるほど、そうなんですね、ありがとうございます

5. 「コレカラ」の話 24:47

Guest 24:47
ではですね、と続きましてまリアとドビのこれからのお話していきたいと思います。

Guest 24:54
ま、今まではこうリアクトドビュー、今まで使ってきたこの使用感みたいなところ。お話してきたんですけれど、そうではなくて、これからのお話ま。これから

Guest 25:04
こうどんどんアップデート入っていくと思うんですけれど、どういうアップデートが予定されているのかま、どういう風に

Guest 25:11
書いていくべきなのか、みたいな話をしていければなと思います。では、先にリアクトからお話聞いていきたいと思います。リアクトって

Guest 25:19
ま

Guest 25:20
ついま今日はえつい昨日ですね。ま、昨日公開されるときは昨日ではない

Guest 25:28
昨日って表に違うつい先日ですね。10月21日

Guest 25:34
ですね。と、17リリースされたと思うんですけれど、まリと17って新機能なくて、

Guest 25:41
こう

Guest 25:41
リアと18以降のこのアップグレードアップデートをこう容易にするっていうところの

Guest 25:51
まリアと17のんそうですね、リアと17だったと思うんですけれど、まリアと17ってこれ

Guest 26:01
どんな感じですかね。証券では、まだリアクト16で使ってますか。

Guest 26:06
ええ、予約とは失礼しました。証券はリアと16なんですけど、

Guest 26:11
実はま一部だけ、すでにリアと17にアップグレードしてしまいました。そうなんですか、

Guest 26:18
リアクト17が出た当日におあ、とりあえずグレードするのは今しかないと思って、ちょっとパーとリアクト17にやってしまいました。

Guest 26:28
そうなんですねえ、結構すんなり行きましたか。17は

Guest 26:32
そうですね、特に何か壊れたりすることもなく、ま17に上げても問題なく動いていますね。

Guest 26:39
うん、そうなんですね、昨日、あのリアクト17のドキュメント色んな感じ。確かに、新機能っていう新機能はなかったんですけれど、

Guest 26:48
ま1番僕の中で

Guest 26:50
ま、これ

Guest 26:51
結構大きい変更だなって思ったのは、このイベントリスナーがこのドキュメントではなくて、リアクトがマウントされるルートの要素

Guest 27:01
に。はい、全部つくようになったみたいな本稿があったと思うんですけど、これすごく大きいですよね。

Guest 27:08
そうですね、ただ、メインはリア島とまリアクトの関係ないじゃ。バスクリット、ライブラリー

Guest 27:14
が関わる時に何か壊れそうなもので。うん、うん、幸いにして、我々証券ではあんまりそういうのを使っていなかったので、

Guest 27:22
そんなに大きな問題にはならなかったかな、という感じです。

Guest 27:26
なるほど、そうなんですね、でも、僕この間あったのがリアクトの中でこう別のライブラリ使ってて、こうリアクトの

Guest 27:36
ま要素ャットのバーチャルドムではなくて、こうリアルドムの方に、

Guest 27:42
このリアクトがマウンドされてるアプリケーションの中で、イベントリスト、イベントリスナー入れちゃってて、はいで、それ。僕らリアクトのコンポーネント的には、ドキュメントで取らなきゃいけないから、まあ、絶対そのライブラリの方が

Guest 27:55
早く取ってしまうみたいな問題があって、それで、これわざわざこのドキュメントのルートのところで全部待ち構えてる

Guest 28:04
ま、リアルドムにイベントリスナーをセットしないみたいなところって、これはどういう意図があるんですかね。

Guest 28:12
ビューだと、このそれぞれのリアルドムに、このイベントリスナー入ってたと思うんですけれど、

Guest 28:21
なんかわざわざドキュメントにまとめドキュメントというか、ルートに集める意味ってなんかあったりするんですか。

Guest 28:30
どうなんでしょうね、私もそんなに詳しいわけではないんですけど、リアクトって、イベントシステムの周りも

Guest 28:37
結構裏で、ごちゃごちゃやっている印象があって、そうなんですか。いわゆるま生のドムのイベントバブリングっていうのはあるんですけど、はい、まあ、それをか

Guest 28:47
前にそのまま使っているわけではないというか、裏でこうリアとが何らかのエミュレーション的なことをしてるんじゃないかなと思うんですよね。

Guest 28:56
へえ、そうなんですね、いや、もう完全にもう

Guest 29:00
真のバーチャルドムというか、まあ、生ドムとはべ完全に切り離されたところで、またイベントのバブリングが起きている

Guest 29:09
そうなんだと、まあ、私は理解してます。

Guest 29:14
なんか、パフォーマンス的な話もあったりするんですかね、なるほどですちなみに、まきる利益と18

Guest 29:22
でこう、色々新しい機能増えると思いますし。うょさんもその辺聞いたとかにまとめてらっしゃったと思うんですけれど、

Guest 29:30
はい、

Guest 29:31
何かリアクト18で来るかもしれない新機能でま。なんか大きいものってあったりしますか。

Guest 29:40
そうですね、リアと18が確定したわけではないんですけども、今期待してるのは、コンカレントモードっていうやつです、

Guest 29:49
コンカレントモード、ちなみに、それはどういったものに

Guest 29:54
まざっくり言ってしまうと、まリアクト本体に非同期処理の扱いがいい感じに組み込まれるという風に理解しています。

Guest 30:04
うん、なるほど、

Guest 30:06
例えば特にリアクトでもまコンカレントモードに対するま、エクスペリメンタルなリリースみたいなのが既にされていて、それに対するドキュメントも用意されているんですけど、

Guest 30:18
1番大きいのがページ繊維の時の

Guest 30:21
移り変わり方ですね。今、リアクトでページシェインするときって、主に2通りのやり方があると思うんですけど。というのは、

Guest 30:30
新しいページに新しいページのコンポネントをレンダリングしてま、そのコンポーネントが何かデータ必要だったとしたら、

Guest 30:39
atiコールみたいなのを発火して、で、そのAPIイコール返ってきたら、ページの中身がそのデータを使ってレンダリングされる

Guest 30:48
みたいなことをよくすると思うんですけど。はい、これはそのレンダリングされた新しいページの中で

Guest 30:55
まAPIを発火できる、つまり、データを必要とするコンポーネントは、APIを呼ぶっていう利点があるんですけど、うん、その一方で、新しいコンポレントをレンダリングしてからま、ローディングは開始するので、

Guest 31:08
必然的にこうローリングを何かレンダリングしなきゃいけないという欠点がありまして、確かにその一方で

Guest 31:18
新しいページに遷移しようってなったら、その時点でAPIを発火して、

Guest 31:23
結果帰ってきたら、新しいコンポーネント、その結果とともにレンダリングするみたいな。やり方も1つ選択肢としてあって、

Guest 31:34
そうすると、まあ前の画面にとどまったままま、APIのローリングを待つことができるという利点がある一方で、

Guest 31:44
まあ、その新しいコンポーネントでデータが必要なのに、それを別のところでAPIコールして配置しなきゃいけないという欠点があ、

Guest 31:53
うん、確かに確かに

Guest 31:55
まこの胃腸一端な状態が、コンカレントモードで解決されるというふうに理解してます。

Guest 32:01
へえ、そうなんですね、ま、それは何かコンカレントモードでんどういう風に、それを解決しますか。コンカレン

Guest 32:11
トモード、あま欠点を補うってことで、このそのレンダリングするコンポーネントの中で、aprを呼ぶんですよね、

Guest 32:19
そうなんです、新しくレンダリングされた次の画面のコンポーネント

Guest 32:25
で、ま、APIを発火するんですけど、はい、そこで、コンパレントモードではま、コンポーレントがサスペンドっていうものをすることができるんです。

Guest 32:35
サスペンドは、まだ非同期処理が終わってないので、ちょっと待ってっていうのをリアクト本体側に伝えるんですね。となると、

Guest 32:43
新しいコンポーネントがまレンダリングされます新しいコンポーネントはま、データを

Guest 32:51
のローリングを開始して、まだローリング終わってないので、ちょっと待ってってサスペンドします。うん、うんするとですね。

Guest 32:59
1回リアフトで、新しいコンポーネントがレンダリングされたんですけど、それがサスペンドしたっていうことで、どには前の画面の状態がまだ残った状態になるんです。

Guest 33:10
すごいっすね、

Guest 33:11
そうなんですよ、新しいやつをこォレントレンダリングしたはずなのに、画面上にはまだドムが残っている。このサスペンドっていう仕組みが、

Guest 33:21
コンカレントモードでは、リアクト本体に導入されまして、新しいコンポーネントが

Guest 33:30
レンダリング制しました、

Guest 33:32
新しいコンポーネントのローディングが終わったら、コンポーネントは、サスペンド終了しましたっていうことを、リアクト本体に伝えます。

Guest 33:41
すると、そのデータを使って、無事に新しいコンポーネントが共にレンダリングされると

Guest 33:48
なるほど、なるほど、それをすごくいい。変更ですね、それ、すごく大きな機能ですね。なるほど、サスペンドっていうやつを返すと、

Guest 33:57
前のレンダリングされていたページが連打されたままになる

Guest 34:03
そうです。そうです

Guest 34:04
ちなみに、そのきるコンカレントモードでま、今から何か意識しておく必要のあることってあったりしますか。

Guest 34:14
はい、根本失礼しました。コンカレントモードは、また結構大きいブレーキングチェンジになると思うんです。うん、うん、

Guest 34:23
特に今関数、コンポーネントなんかはその関数、コンポーネントが関数として呼び出されるイコール、その関数が

Guest 34:33
失礼しました。イコール、そのコンポーネントがもう呼び出されるということになると思うんですけど。うん、うん、ごめんなさい、違いますね失礼しました。

Guest 34:42
半数、コンポーネントが関数として呼び出されるイコール、そのコンポーネントがもうレンダリングして、ドムに反映されるっていうことになると思うんですけど、

Guest 34:52
コンカレントモードでは、それが崩れてしまっては、関数が呼び出されたんだけど、

Guest 34:58
まその関数、コンポーネントがサスペンドしてしまったが、故にまだそのコンポーネントの内容はどもに反映されないみたいなことが

Guest 35:08
起こるので。なるほど、関数コンポーネントの処理の中で、自分はもう絶対ドムでレンダリングされるぞって思って、何かドムと直接インターラクトしてしまうようなことが起こると

Guest 35:20
ま、コンカレントモードでは、実はそうではないかもしれないので、ちょっと壊れてしまうということが起こると思います。あ、

Guest 35:28
なるほどま、今後コンカレントモードに切り替えるかもしれないっていうところで、まその辺を意識して書いていけるとですね。確かに、データペッチ系がすごく

Guest 35:39
なるほど、そうですね、対策としては、ちゃんとまレンダリングされてからすべきことは、確実に遊説フェクトの中に入れるっていうのが

Guest 35:48
我々が今できることですね。

Guest 35:51
なるほど、ありがとうございますでは、次ビのお話きたいと思います。

Guest 35:58
ま、ビュー、先月、ビュースリリースされましたね。で、データビジュアライゼーションチームでは、ビュー3を今がっつりやってらっしゃるということで、ま。まず、ビースってビー2と比較してま。どういった点が

Guest 36:11
この変わって進化したのか、ちょっと教えていただけますか。

Guest 36:16
はい、まあ色々変わってるとは思うんですけど、やっぱり大きいのはコンポジションAPIかなと思ってます。

Guest 36:23
で、まあ、コンポジションAPIがあることによって書き方変わりますし、それによって、そのタスクリプトとの神話性があるので、

Guest 36:32
まあ、そこの部分がやっぱり1番大きいなと書いてと思います。

Guest 36:36
うん、うん、うんうん、

Guest 36:37
確かにすごくコンポジションAPIってま、僕、今までまビュー3ってコンポジションAPIがくるくるっつってま、なんか、1年以上

Guest 36:45
ちょっと待ってたところあると思うんですけど、僕もえ、そうなんだなって思って、すごく期待を胸に待ってたんですけど、

Guest 36:52
ま、なんか結構のびのびになっちゃって、つい先月っていう感じだったと思うんですけれど、ま、やっぱコンポジションAPI今すごく完成されてる

Guest 37:00
っていうことなんですかね、すごくいい感じです。

Guest 37:03
そうですね、個人的には存在pと比べて、書き味は良くなったなと思います。

Guest 37:09
オプ、今までこう全部今まで書いていたオプション、jpiで書いていたものをまると、そのままコンポジションAPIに移せるものなんですか。

Guest 37:19
ま、書き換えるには、がっつり書き換えないといけないので、え、そうですね。既存のものを映すメリットがどこまであるかはちょっと。

Guest 37:29
まあ、ビュー3でもオプションgpは使えるので、その辺のメリットはよくわからないです。はい、

Guest 37:35
なるほど、なるほど、そのまま残しておくっていうところがはいるんですね。ま、今ってコンポジション、API、

Guest 37:42
コンボションAPIだけでも完結はしないんですかね。他、今やカクションズ

Guest 37:47
が完結すると思います。

Guest 37:49
あ、そうなんですね、はい、じゃあもうこれからはもう完全にコンポッションAPIで書いていくっていう感じなんで。

Guest 37:54
まあ、そうですね、共存できるので、適材適所で書けばいいかなという感じなんですけど、ま、タイプスクリプト使うなら、コンポジションの方が能性高いと思うので。

Guest 38:04
まあ、うん。個人的には撮影が主流になってもらえると嬉しいな、という風に思い。

Guest 38:10
なるほどま、今まだドキュメント的にはこうアドバンスな感じ。

Guest 38:15
コンポション、apaがのデフォルトというか、スタンダードになるという感じなんですかね。デタビシュアライゼンションでは、もうコンポジション、apaがスタンダードですよね。

Guest 38:25
そうですね、我々のチームでは、もうその新しくビュー3を適用しているプロダクトに関しては、コンポジションAPIで書いてるんですけど、ビー自体のデフォルトがどっちになるかは、

Guest 38:35
わからなくて、やっぱりま。確かに、コンポジションの方がアドバンスだと思うので、オプションズの方がときやすいと思いますし

Guest 38:44
ま、ビュージェースの良さってとつきやすさが結構大きいかなと思うので。

Guest 38:49
そうですね。フレームワークとして、どちらがこのレフォルトになるかはちょっとわからない。

Guest 38:54
なるほど、そうなんですね、確かにビューってこう。テンプレートもあって、スクリットもあって、しかもスタイルもあってっていうこう関心事がこうか分かれてる感じでで、しかも、スタエースの部分も

Guest 39:07
オプションgpi使えば、データはデータだし、コンピューティトはコンピューテートだし、メソットメソットで完全にリアクトみたいに、ごちゃ混ぜになってない

Guest 39:17
ところがすごく分かりやすくていいようなと思うので、ま。確かに、そのこの今までの方向性をはぶらして、

Guest 39:25
ポッションAPIにシフトしていくかっていうところは、まだ微妙な感じなんですかね。

Guest 39:30
まあ、そうですね、

Guest 39:32
そうなんですね、

6. 使っている技術の弱みって？ 39:35

Guest 39:36
では最後にですね。それぞれ今まで

Guest 39:39
こうビュートリアクトそれぞれ使ってらっしゃったと思うんですけれど、それぞれま、なんかリアクトとそれビューそれぞれに対しても、なんかこれちょっと違うよなみたいな、

Guest 39:49
もっとこうこうだったらいいないいのになみたいなところあったら教えていただきたいんですけれど、この辺うひろさんどうでしょうか。

Guest 39:59
やっぱり、公式のものがあまりないなっていうのは、ちょっと弱みかな、という風には感じています。

Guest 40:05
何をするにもま、これをやるときは間違いないというのがあまりなくて、まいくつかの選択肢が結構発生してしまうんですよね。

Guest 40:14
代表例がcssjsとかうんだと思う。

Guest 40:20
こう人によって、各々の考え方があったりして、個人的には自分で考える余地があるので。好きなところでもあるんですけど、

Guest 40:29
リアクトを使う側としては、そういうのがないのは、ちょっと辛いのかなって思います。

Guest 40:33
確かにそうですね、結構リアクトって選択の連続というか、ま、それに絞ればそれでいいんですけれど、ま、確かに

Guest 40:41
そうだ、一緒に迷うポイントが多いっていうのが、まあ確かにリアクト一緒に弱みなのかな。確かにそうですね、そうですね、ありがとうございます

Guest 40:50
では、山本さん龍の方はいかがでしょうか。

Guest 40:54
やっぱり、tsとの幸せは、ま、リアクトの方がだいぶ先を言ってるのかな、という気はしますね。コンポジションでまts使ってみて、

Guest 41:03
やっぱりdsで書くことのなんて言うんすか。恩恵というのはすごく実感してるので、まそこの神話性が高いのは結構羨ましいポイントだとは思います。

Guest 41:13
確かに、タイプスクリプとあると、すごく保管効くし

Guest 41:18
まそうです。信頼性も上がるし、そうメリット大きいですよね。はいまでもいう今、コンポジションAPIもきましたし。もうどんどんタイプスクリットの神話制というところ、行新も意識してるのかなと思いますので

Guest 41:30
は、いまさらに流も良くなっていくのかなと思います。

Guest 41:33
そうです、そうなってほしいですね、

Guest 41:35
なるほど、

Guest 41:36
ありがとうございますというわけで、今回はリアクトとビの特徴と使用感、

7. クロージング 41:41

Guest 41:45
そして、今後について話していきました。ラインのフロントエンド開発、組織UITでは、このようなフロントエンドに関する議論や、キャッチアップを日々行っております。

Guest 41:55
ビューススタディや、ゴールデンウィークの自由研究など、社内の学習企画から始まったコンテンツも多くありますので、今後も発信していければなと思います。

Guest 42:05
また、

Guest 42:05
ポットキャストを通じて、ラに興味を持っていただいた方は、ぜひぜひカジュアル面談からでもご連絡いただければなと思います。つい先日ですね、新卒採用

Guest 42:16
開始いたしますので、僕もまだアルバイトのみなので、まだ新卒ではないので、

Guest 42:21
この新卒採用。僕も応募いたしますので、ぜひぜひ皆さんもよろしくお願いいたします。

Guest 42:27
正の株に、求人への連絡連を掲載しておりますので、気軽にご連絡ください。それでは、本日はうさん、山本さん、ありがとうございました、

Guest 42:38
ありがとうございました、

Guest 42:39
ありがとうございました。