ep.18 UIT 俺得フロントエンド - GraphQL で確認できるブラウザ対応とユーザーシェア | UIT INSIDE

2019/06/21 に公開1080 views

このエピソードについて

@spring_raining が @AlanGDavalos に社内向け Web アプリケーション「Can We Use?」の開発のきっかけと技術構成について聞いてみました。

ゲストについて

Alan さん
- 第二回にて Web Components をテーマに出演
- https://uit-inside.linecorp.com/episode/2

canweuse

そもそも caniuse について
- Web のモダンな機能がまとまっている
- 機能ごとに対応ブラウザバージョンを確認できる
canweuse について
- caniuse の LINE 版ツール
- 実際の LINE App でのアクセス統計を利用して、どの OS の何パーセントのユーザーに影響があるかなどを調べることができる
  - 社内でプロダクトを使うときの Progressive Enhancement の検証に使える
- Alan さんが Web Component を Production で使えるかを調べるために開発

canweuse の技術構成

フロントエンドは LitElement を利用した Web Components での開発
バックエンドとの通信は GraphQL で行う
- canweuse の場合は様々なデバイスデータを柔軟に利用したいので GraphQL がベストマッチだった
- caniuse の生データも同時に入っているので、膨大なデータから必要なデータを取り出すために GraphQL を採用することに
通信量の面でも削減になるので量が多い場合は使ってみるとよさそう

GraphQL の技術事情

元々は Facebook が作り始めたが、より浸透してきている
GitHub の API など、大きなサービスでも GraphQL 対応されつつある
GraphQL 自体は特に専用で作る必要があるわけでもない
- REST の上に乗っける形での採用も可能
- 外部 API ですら良い
Apollo などのクライアントライブラリはキャッシュまで含めてうまくやってくれる
- 状態管理の基盤としても注目されている

canweuse のこれからについて

LINE としてはまずは i18n が大切
- 多くの拠点のメンバーが使えるように
もっと大きなデータを取れるようにすると、社内の需要を調べるのに良いかもしれない
UI も GraphQL クライアントそのままという状態なので、この点もよりフレンドリーにしていきたい
将来的に社内特有の事情にあった機能を作れていけると良い

クロージング

今週のフロントエンド

採用について

使用素材・クレジット

BGM&SE

音声書き起こし

1. オープニング 00:00

Guest 00:02
はい、こんにちは今週もえ、UIT INSIDEをやっていきましょう。え、まず、初めにこのポットキャストについて説明いたします。

Guest 00:11
このポットキャストは、linytsに所属するエジアたちが、毎週最新のフロントエンドの動向について語るためのポットキャストです。

Guest 00:20
最新のweb標準の動向や開発、エムワークの編成は、またurやユリックスに関することまで、全身までのトレンドをキャッチアップすることを目的としています。

Guest 00:31
今回はえ、いつもだとUITの花谷さんがホストを務めていますが、今回は思考を変えて、

Guest 00:38
ちょっと同じくUIT所属の玉だとえ、今回はえ、

Guest 00:43
第2回目に参加されてましたね。アランさんにえ、お越しいただきえ、お話いただきたいと思います。

Guest 00:50
では、よろしくお願いしますよろしくお願いします

2. UIT 社内向けアプリ開発事情と canweuse 00:54

Guest 00:54
と、今回のはい話題についてですけれど、もとUITではプロダクトの開発もまあ、当然

Guest 01:01
活発に進んでいるんですけれども、一方でま。結構規模の大きなえ組織になってきたので、その社内向けのサービスもすごく活発に開発されています。え、ま、その一環として、アランさんはキャンミーユーズというと、サービスを公開されていました。

Guest 01:15
で、え、このキャミーズユーズというサービスがどのようなものかっていうのをまずちょっと教えてもらえませんかね。

Guest 01:21
そうですね、まあ、名前から見るとなんかキャネユースのパクリじゃないかって思う方もいると思うんですけど、まさにその通りですね。

Guest 01:30
そうですよね、

Guest 01:32
で、まあなんかどうどういうもので、どういう風に作ったっていうと、

Guest 01:38
まあ、とりあえずキャナユースはまあ、みんな多分ご存じかと思いますけど、一応そこでは。あの、

Guest 01:44
なんか、webのピーチャーはcssなり、jsなりをなんかどういうデバイスが対応してるかを確認できて、で、そういうデバイスは、まあ、

Guest 01:54
世界的にもまある国にもどこまでなんかユーザー数があるかどうかを確認できるっていうサービスになってるってところですね。はい、そうですよね、

Guest 02:04
でま、それはもうもちろんみんな助かっていますし、多分世界中のデベロッパーたちは。まあ、それをもう毎日のよくつか

Guest 02:14
で、なんかまあ、LINEってほら大きいじゃないですか。もう

Guest 02:20
大きい大きいですすごい大きいと思い

Guest 02:23
で、まあ、もちろんその大きさにもね、ユーザー数も高くて、もちろん、まあ、そういうユーザーのデータもあって、

Guest 02:32
で、どうやって、そのケネユースのあの端末対応のデータと、あのLINEのユーザーのデータをマッチングして、どれだけ

Guest 02:41
なんかある。APIrcssを使ったら、どれだけのユーザー数がその影響を受けるかどうかをま確認できるツールがあったらいいなって思ったところから、まあ始まったってところですよね。そうですよね、はい、

Guest 02:56
LINEのサービスって、そのなんていうんですか。まあ、感覚的にこのバージョンが大体多いなみたいなのは個人。あの、なんか個人の感覚として分かってるんですけど、もま、それを。

Guest 03:07
その実際のそのcssのフィーチャーと照らし合わせて、どれぐらいの割合が

Guest 03:14
まあ使われているかっていうのをすごくわかりやすく、可視化してくれるサービスということですよね。はい、

Guest 03:23
で、そのまあキャンウィーユーズまま大体。今の説明でも、どういう内容かお分かりいただけたかと思うんですけれども、ま、具体的にもう少しどういった情報が分かったりするのかっていうのを教えてもらえませんか。

Guest 03:37
そうですね、まあ、自分もまあ1回聞いてくれた方はもうわかってると思いますけど、一応まあ、ウェブコンポーネ人間と受聴しているところでは。

Guest 03:48
で、それはもちろん、まあ結構最近やっと対応してもらえた。あの、まあAPIでもあるので。

Guest 03:57
だから、まああのそういうのかな。ユースのデータをまあ、個人的にも頻繁に見ていたりするので。

Guest 04:03
で、実際にまあ、元もなんかそういうなんか、ポポーネンツの対応を調べたいから、なんかこれが始まったっていうのもあるんですけど。

Guest 04:12
で、逆にこれを作ろうと思った時にも、まあ、実際にもうこれを完全にはコンポーネンツでやりましょう。っていう話もあって、まあやってましたね。お

Guest 04:23
じゃあ、もう実際にそのウェブコンポに、例えばウェブコンポナンスのま機能を使いたいっていうのをま目指して、そのえたその

Guest 04:33
まあ、実際のまあ、割合からもう数値的に判断できるっていう状況が生まれているわけですね。

Guest 04:40
それは分かり分かりたいからこそ作ってで、逆にそれをコポネで作ったっていう

Guest 04:48
キャーミーユーズ自体もウェブコンポーレンズで作られてるんですね。はい

Guest 04:54
と、まあそんなキャンミユーズですけれども、具体的に技術スタッフとし

Guest 04:59
しているウェブコンポーネントであったりとか、あと、グラフキューエルなど。ま、普段プロダクションでは使われないような技術をえ、今回積極的にま採用されているように見受けられました。で、

3. canweuse の技術構成 05:10

Guest 05:10
こういったのはまあ当然その使いたいっていう理由もあるんですけど、なんかどういった理由で使ってみようかなって思

Guest 05:16
そうですね。まあ、とりあえずまプロンテンドの方は、まあ、ウェポンポーネンツって言っても、あの、実際にここで使ったのはマリッテルメントっていう。まあ、あの前回も話していた。

Guest 05:27
はい、まあ、ウェポンポンズのベイ。はい、クラスっていうのがあって、で、まあ、なんかまあ簡単に言うと、まあ、ウェポンポンズを

Guest 05:36
まあ、リアクトとビーの間ぐらいのやり方で作れるような。まあ、ライブライルと言っても、まあベースクラスでしかないので、それで、まあ一応アプリ全体を作って

Guest 05:49
で、それをまあ、なんかルーターなり色々。なんか他のライブラリーとかで入れてみて、

Guest 05:55
で、実際にAPIの方はまあグラフqlで作ろうと思ったのも、まあ、実際に前になんか私は結構なんかグラフqlに個人的に興味があって、色々教わってたり

Guest 06:08
しましたし。

Guest 06:10
で、実際にまあこれで結局なんかデータが1番大切なのでは。い、やはりあの、そのデータをなんかこう

Guest 06:19
臨機応変になんか使えるためにも、あの、そういうなんかグラフ共有が適してるのかなって思って。あ

Guest 06:26
ああ、なるほど、じゃあ今回のそのまあなんすかね。ま、ユーザーエージェントのま割合的なのをこう。細かく保存するためには、グラフqlが今回適していたっていう。

Guest 06:37
そうですね。なんか例えばあの大体あの、これの中に実際のまキャネユースの元々のデータも入ってて、

Guest 06:48
まあ、それは一応なんかギットハーブなどにあのジェイソン化して登録されてて、あ、そうなんですね、はい

Guest 06:57
で、それを元になんかそのあのフィチャーの対応データを取ってて、

Guest 07:03
で、そこにはまあ色々なデータが入ってるんですよ実はあ、では結構の量ですよ。そうですか、なので、あのグラフキルを使ったのも、まあ、あの、

Guest 07:17
なんかAPIを読み込んでるものが、なんかそのデータをどれだけ欲しいかをま、自分で決めるかっていう話を。まあ、

Guest 07:26
なんか、今のcanbeyousももちろんなんですけど、なんか他の。まあ、サボケの。あの、

Guest 07:34
まあ、アプリなどでなんか使えるんじゃないかなって思って、まあ、実際にそういうふうに作ってみます。はい、

Guest 07:41
そうですよね、グラフqlはそのまですね、データを読み出す時に、クエリーをこう。まあ、

Guest 07:48
指定してま。それのまあ、データが帰ってくるっていうのがま、基本的な感じなので、ま、そういった感じで、その

Guest 07:55
欲しいデータを得意でしてしてで得られるっていうは結構そうですね。僕も直感的に使いやすいなと思っているはすね、はい

Guest 08:05
で、実はまあなんかもっといい点もあって、なんかグラフで、まあ、もちろんなんか自分でなんか欲しい。出ただけ取れるようにもなるんですけど、それに関しても、あの、実際に

Guest 08:17
なんか多くのデータを取ろうとすると、なんか、そのプロパティー数を制限するだけで、なんかデータの量がすごい減って、なんか速度なんかネットの速度が早くない状態でもけ

Guest 08:29
簡単になるほど、そうそうなんかダウンロードするあの量が少ないから。

Guest 08:34
ああ、なんか

Guest 08:35
スピーディーな感じになってしまうので、そうそう、それ、そういうところも結構面白いな。

Guest 08:40
そうですよね、なんか、レストだとなんかもうなんかそういうこの一部のデータだけ欲しいみたいな要求がすごい。

Guest 08:48
そのそれぞれにAPI用意しないといけないっていうすごいめんどくさい状況になっちゃうんで。はい、ああ、そうか、そういうまさにそうそうそうそう、そういう状況でも、まあ

Guest 08:58
あ、そういう状況だからこそ、グラフキは生きるっていう感じなんですね。そうですね、

Guest 09:02
特になんかこのプロジェクトでは、もちろん、なんかけユースのなんか対応データもあって、あのLINEのユーザーのデータもあって、

Guest 09:12
それはまあ

Guest 09:13
なんか関連するものであっても、実際には別々でもけん、結構あの使えるんじゃないかなっていうところもあるので、

Guest 09:22
まあ、全てが欲しいっていう人。まあ、なんかま。こういうプロダクト全体を作るならまあいいんですけど、なんかもっとなんか具体的なやつを作るなら、

Guest 09:32
まあ、もうちょっとなんかデータを絞って、はい、使うのもありなかな。

Guest 09:39
あ。あ、そうですよね、結構そう思います

Guest 09:43
ちょっとその実際のそのセキュリティー的な要件とかまではま、まだあんまりわからないんですけど、そういう制限の取れる情報とかもあんまえとま。必要なものだけ取れるっていう

Guest 09:57
のが簡単にできるっていうことですよね。

Guest 10:01
面白いですねで、まああのまたけるの。もうもう1つのいいところは、あの

Guest 10:09
ま、これは他のなんかな。あのスガとかあの、

Guest 10:14
なんだったっけ。grpcとかを使った人も、なんか、もちろん経験したと思うんですけど、なんかグラフキもあのスキーマがあるからこそ、なんかそのスキーマが。あの、APIのドックスにもなるので、

Guest 10:27
なんかそれを見るだけで、なんかどういい風はにどういうデータを取れるかっていうすごいすごい簡単に確認できるので、

Guest 10:34
いや、クリを見ればもう構造がもうその場でわかっちゃう、素晴らしい、いや、いいことしかない、

Guest 10:42
まあ、悪いところもあるんですよね、まだなんか割と新しめなてのもあるから、

Guest 10:49
確かにそれは時が経つのを待つしかない。

Guest 10:53
あ、それか、まあちゃんとプロダクションでこう。色んなところが率先して使っていくと、どんどん広がる。

Guest 11:02
元もなんか、facebookが作ったものではあるんですけど。はい、最近だと、なんかエットハブとかなどは、はいは、APIをグラフキュール化しつつあって、色々

Guest 11:12
そうですよね。はいな

Guest 11:13
ところが、まあ、あの、なんか、レポジトリのデータなどをもうすごい簡単に取れるようになってて、結構面白いんですよ。

4. 最近の GraphQL 11:20

Guest 11:22
あ、そのギットハブのAPIとして、グラフqlがその提供されているっていう、あれはなんていうんですかね。その既存のAPIは

Guest 11:31
あって、それとはまた別にグラフキュールの行き合いを用意してるっていう感じでしたっけ。

Guest 11:37
はい、そういう感じになってますね。実際になんかグラフキルは結構なんか、あのレストの上になんかもう1つのレイヤーとして載せてわかるはかなりなんかやりやすいみたいなので、

Guest 11:50
結構なんかそういうテクノロジーに興味ある人ま、これ、ちょっとなんかまバケドの話にもなるんですけど、なんかそういう風になんかレストの上のレイヤーとして、なんか登録して

Guest 12:03
で、そういう風になんかもうちょっと

Guest 12:05
なんだろう。あの、レストのAPIが元でも、なんかもうちょっとなんか臨機用変に対応できるんじゃないかなっていう。

Guest 12:13
じゃあ、結構僕はそのグラフェルのatr用意しようと思ったら、もうそれ専用のやつを立てるっていうことしか考えてなかったんですけど、まあ、それは

Guest 12:24
できるけれど、もま一方で、その既存のレストAPIの上に、そのもっとこう使いやすいような感じで、これ、キェルのAPIを

Guest 12:33
用意することも、ちょっとまどうや、具体的にどうやってするのか、まだちょっとわかんないですけど、そういうことも可能であるっていうことですね。

Guest 12:40
ラケルってなんかぶっちゃけ言うと、あの、まあパーサーでしかないんですよね。あいのなんか

Guest 12:49
ま、またちょっとサーバーの話にもなるんですけど、あの、要はなんか、グラフィエルのライブラリーは、なんか

Guest 12:57
栗をパースして、それを1つのなんか、サーバーナイのファンクションに当てはまって、

Guest 13:03
で、そのサーバーのファンクションを読み込んで、データを返すみたいな感じになってて、

Guest 13:08
でも、なんかそういうファンクションはなんかどういうで、どういうところからデータを撮っても別にいいんですよね。

Guest 13:14
例えば、まあ、もう1つのAPIからでもいいし、なんか、エクセルファイルからでもいいし、で食べずいからでもいいし、ジェイズンからでもいいし、もうなんなんでもありっていう感じなので、確かに

Guest 13:26
グラフキルはほんとにそのなんて言うんですかね。クライアントサイドから見ると、それそれのデータを取ってくるっていう仕様でしかない。はい、なので、まあ、

Guest 13:36
そのサーバーサイドは、まあ、別にその今までのレストのatiを裏側で使ってもいいし、まあ、そういう色んな方法で取ることができるっていうことですね。

Guest 13:46
もう、なんか、フロントエンドとしては結構使いやすくて、なんか最近まあ今のなんかサービスでぶっちゃけ。なんか、これをポパンとポストのボニートしと

Guest 13:57
と、鮮度してるぐらいの意味になってるんですけど、

Guest 14:01
実際にあのそういうなんだろう。グラフキール専用のクライアントライブラインもあって、

Guest 14:08
そういうのは結構なんか、キャッシングとか、あのストリーミングなどの対応をすごい。なんか、なんか、うまくやっていてもらってるところがあって、

Guest 14:18
なんかそういうのを使うと、逆になんか時々。なんかリラックスなどのステートマネージメントがなんかはいいよなあな感じで。

Guest 14:28
はい、あったりしますので、結構面白いところもありますね。なんか、最近だと、グラフキルを使おうと思ってる人が多くなってるのも、まあ、多分その

Guest 14:39
こともちょっとうんは影響してるんじゃないかな。

Guest 14:43
そうですよね、あの、まあアクトだけじゃないのかな。あの、アポロっていうライブラリですよね、それをこう。まあ、その

Guest 14:53
データを一応それは読み込むだけのライブなんですけども、その内部ですね。キャッシュとかもすごい面倒をよく見てくれるみたいな。

Guest 15:02
でま、それを使うと、そのまあ今言ったような感じで、そのリラックスをまあ置き換えるっていうか、まあ、そのラックスの機能を一部

Guest 15:12
ポロが肩代わりしてくれるようなレベルまで、すごい面倒を見てくれるみたいな感じになってるんですよね。

Guest 15:18
はい、もうかなりなんだろう、なんか、フロントエンドとしてもな、あんまりなんか、グラフルなを舐めない方がいいかもしれない。

Guest 15:29
最近だと結構まあまあのさあ、さっきの事例のfacebookとか。はい、ヒッドハブの事例もあるんですけど、結構なんか色々な大きな器用とか、まあ、小さなベンチャーとか。でも、なんかグラフルを取り入れてて

Guest 15:43
ま。実際にそのまあ、柔軟性の高いところは評価をされてるので、もしかしたらなんか近い未来で、なんか結構大きな。まあ、あの、多くのサービスはグラフクエルで読み込む

Guest 15:57
必要性は出てくるかもしれないので。まあ、

Guest 16:00
そうですよね、

Guest 16:01
色々とあ、要注意な注意ですよ。

Guest 16:06
もうもう知らないでは済まされないみたいな状況になりつつある。はいはい、ま

5. canweuse のこれから 16:10

Guest 16:14
さっき言いましたように。そうそうですね、キャミユーズ自体はすごいそのまあグラフキェルやったり、webコンコーレンズやったり、すごい挑戦的な機能をまあ、追加していくアプリケーションで、さっきも

Guest 16:25
そうリクエストが飛んできたりとか感じで、その車内でもすごい広まりを見せつつ、ある感じにな

Guest 16:32
っていっても、アプリケーションいられる情報自体もすごいま、我々にとってありがたいものでもありますし、まあ、今後どんどんこう発展していったらなって、個人的には思

Guest 16:41
ですけれども、今後どんな感じで発展させようかなっていう予定とかありますか。

Guest 16:46
そうですね、とりあえず、今のところはこれをLINELINEの

Guest 16:52
色々なチームま、色々な国のチームもあって、で、そういう方々からも、あの、これをなんか自分の国の言葉に訳したいとかっていう。なんか予防もあってま。

Guest 17:03
なんか、今のところはまあ、英語とか日本語しか対応してないので、なんか他の。まあ、LINEに開発者まleの開発者がある国のま言語とかに

Guest 17:15
なんか訳せるがが略せればいいかなっていう思いもあるんですけど、あとはまあ

Guest 17:22
多分なんか今の方では、あのキャナユースのまあなんかライトっていう。まあ、データキャナユースのデータをもすごい。あの、なんか

Guest 17:33
小さくしているものを使っていて、でま。逆に

Guest 17:39
なんかもしかしたら、県内ユース全体的にデータを使う意義はある可能性はなくもないので、

Guest 17:47
とりあえずそれも考慮に入れて、なんかもももっと色々な機能を追加できるのかなっていう思いもあって、まあ、とりあえず一旦

Guest 17:58
なんかは結構率直なものでしたので、とりあえずそうです。最近なんか、それをちょっとこうなんかももっといいものにできる。なんか、ブリクエストが

Guest 18:10
ちょうど来てるところなので、楽しみに会います。自分でも

Guest 18:16
じゃあ、もうぜひぜひそのu愛の面からもま、今そのクリが小さい状態なんでしたっけ。それをもっとこう発展

Guest 18:24
えして、え。キャンはぐらいのままバリエーションが持てるような感じになりたいですね。僕もそうですね、それすごく欲しいです

Guest 18:34
あと、まあかね、ユースにはない。なんか、LINEの社内ののツールだからこその機能もぜひぜひ見つけたいね。なんか、どういうのを入れたらいいのかなって、

Guest 18:46
まあ、これから楽しみに開発しようかなって思ってるところです。

Guest 18:52
ああ、結構そうですよね、あの、一応今回の話題は、その社内サービスまあ作ってみたっていう感じなので、そう。今回はその一応キャンミ言えずにピーチャーした感じですけど。

Guest 19:04
そうですね、これからどんどんまこれに限らずそう。僕もなんかサービス社内向けサービス

Guest 19:10
作っていきたいなっていう気持ちが高まってきました、ありがとうございます

Guest 19:15
いえいえ、こちらこそありがとうございます。

Guest 19:18
とはいということで、今週はアランさんとキャミーユーズについて。はい、話してきました。ありがとうございますはい

6. クロージング 19:20

Guest 19:26
でえ、LINEUITsではこのような感じで、え、javascrptや、フロントインドに関する話題について、日々議論が行われています。

Guest 19:34
で、え、これらの話題は、ギッドハブ1をベースにしてえさい。毎週、最新の情報をえ、共有しております。でえ、これらの話題をこう金曜日に勉強会を行っていまして。

Guest 19:47
の一文字ってこう共有するっていう感じのえ、機械がえ設けられています。今週、話題になった内容で言いますと、例えばそのnpmシクですかね。この前、

Guest 19:59
ちょっと話題になりました。ゼインストールというnpmの今後の戦略についてです。で、これは

Guest 20:07
あれですね。ノードモジュールが今こう左大化してるので、それをこうなんとかして、サイズを減らした。いま、

Guest 20:14
キャッシュをうまくしたいっていう感じのやつが、かんえまこう提案されているっていう話ですね。あとは、ピカcdnこれも

Guest 20:23
なんか結構面白そうですね。はい、

Guest 20:26
まあ、両方とも。なんか

Guest 20:28
そういうパッケージの数がなんかすごい増えてるってところを。まあ、なんか違うやり方でえ

Guest 20:36
ね、そうですよね、

Guest 20:38
それを解決しようって思ってる。まあ、スタイルなんですけど、個人的にはまあ、なんかそういう。例えば、なんかピカのcdmは結構面白くて、

Guest 20:49
まあ、実際になんかちょっとまあ、ある企業にあいの加担してるってところは、まあ、ちょっとあの、あの、あの引かれるところはあるんですけど。はい、

Guest 20:59
でも逆に。まあ、それをなんかみんな使ってたらもうあのある。なんか、ライブラリーとかの労働タイムは、もうそうなんか、なんか、全てのサービスでほぼゼロになる可能性は

Guest 21:11
なくもないので、

Guest 21:12
それこそ新cdnなんでなあ、みんなが使わないと

Guest 21:16
ですよね、結構な面白そうなタイミングになってきてますね。

Guest 21:23
はい、その今までのそのば、もういちいちバンドルみたいな流れが変わりつつあるかもしれない。今後そうですね、

Guest 21:31
はいでま。こういった情報をえ、このページのショートにえ、銀行を貼っておきますので、もしご興味あれば、それぞれ見ていただければいいかと思います。また、このえポットキャストについて、え、ご意見やご感想もお待ちしております。

Guest 21:45
ハッシュタグシャープ、UIT、アンダースコアインサイド、えにえつぶやいていただけると、今後のコンテンツ作成のえ、参考にさせていただきます。ということで、今週はえ、キャンウィユーズについての話題でした。

Guest 21:58
あらんさん、どうもありがとうございますまた