ep.86 Chrome extension - そしてサーバーサイドエンジニアの Web フロントエンド活用術 | UIT INSIDE

2021/05/21 に公開1102 views

このエピソードについて

@spring_raining がLINEのサーバーサイドエンジニアである @dayflower と @kazuki-ma に、サーバーサイドエンジニアがフロントエンドを開発することやChrome extensionの活用例について聞きました。

サーバーサイドエンジニアが作るChrome extenision

社内で実施されたGW自由研究発表会
- @dayflower さんがICOOON MONO (https://icooon-mono.com/) からアイコンをクリップボードにコピーするChrome extensionを作成
他にも業務の一環でChrome extensionを作成する事例あり
- 業務中の不満解決やスピードアップのために作る

サーバーサイドエンジニアがフロントエンドを開発する機会

実はいろんなところでサーバーサイドエンジニアが開発する
- 社内向けの管理ツール
技術スタックの変遷
- 各ページごとに独立したシンプルなJSをビルドして読み込み
- Vue CLIなど、開発環境の整備に合わせて複雑化が進んでいる
- メンテナンス性のためにあえてコピー&ペーストで実装される箇所

Refs

LINE インターンシップ
- https://linecorp.com/ja/career/newgrads/engineering/
キャリア採用はこちらから
- UIT: https://linecorp.com/ja/career/position/475
- サーバーサイドエンジニア (DP): https://linecorp.com/ja/career/position/2374
- サーバーサイドエンジニア (OA dev): https://linecorp.com/ja/career/position/2316
BGM&SE
- 魔王魂/騒音のない世界/

採用について

使用素材・クレジット

BGM&SE

音声書き起こし

1. オープニング 00:00

Guest 00:02
こんにちは、えUITの玉田です。今回も、UIT INSIDEを始めたいと思います。

Guest 00:09
UIT INSIDEは、ユーザーインターフェースと、テクノロジーを愛する開発者のためのポッドキャストです。最新のウェブ表示の投稿や、開発、フレームワークの変遷、

Guest 00:19
urやuxに関することまで、毎週フロントエンドの情報を発信していくことを目的としています。

Guest 00:27
ハッシュタグはシャープUIT、アンダースコアユサイド、エピソードのご意見やご感想はいつでもお待ちしております。ぜひぜひツイートしてください。

Guest 00:37
はいで、今回はですね。ゲストの方としてお2人お呼びしています。で、今回は社内の方なんですけども、uytではない方、2人を呼びしています。え、レイフラワーさんと松田さんです。はい、

Guest 00:51
では、今回はよろしくお願いします

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

Guest 00:53
しくお願いします。

2. 自己紹介 00:59

Guest 00:59
では、まずはお2人の自己紹介をえ、それぞれお願いしたいと思うんですけれどもで、フラワーさんからはい、わかりました、お願いします。

Guest 01:09
はい、開発四センターのデベロッパープロダクト室というところで、えー。外部開発者向けのプラットホームの開発をしているデイフラワーと言います。

Guest 01:20
ま、デイフラワーっていうより、社内的にはあのおじさんって呼ばれてるんで、

Guest 01:24
このおじさんです。はい、

Guest 01:26
おじさんで、はい、呼んでいただいて

Guest 01:29
大丈夫ですかりました、はいはいはい、よろしくお願いします

Guest 01:33
よろしくお願いします。

Guest 01:34
LINE開発イオセンターのお開発チームでさ、同じくサーバーサイドのエンジニアをしている。まだです。

Guest 01:42
ま、特にハンドルネームもないので、まださんとかってよく言われております。

Guest 01:47
はい、

Guest 01:48
ではまださんですね、はい、それでは2人さんよろしくお願いします

Guest 01:52
よろしくお願いしますします。

3. dayflowerさんがGWに作ったChrome extension 01:56

Guest 01:56
今回はまあの自己紹介でも、お分かりの通り。2人ともテンドエンジニアではないですね。で、

Guest 02:05
なぜお2人をお呼びしたかっていうことを紹介する前に、ちょっと。まあ、イントルというか、

Guest 02:10
この前社内であったイベントについて、ちょっと紹介させてください。

Guest 02:16
社内でですねこの前えゴールデンウィーク中にま、色んな自由にいろんなことを

Guest 02:22
みえもので、定めてで、それに対してこう発表するみたいな技術的なことでもま、そうでない内容でも全然構わないみたいな、結構自由な。まあ、lt大会みたいな感じのイベントが

Guest 02:36
ありました。で、そこでですね。デイフラワーさんが、ゴールデンウィーク中にクロームテクエクステンションをえー作ったっていうところで、

Guest 02:45
私がそれにちょっとあの声をかけてきたという。はい、次第です。ではですね、まあ、サーバーサイドエンジニアの方なんですけど、も

Guest 02:55
ま、今回そのクロークステンションを作ったということで、ちょっと。じゃあ、どういったものかっていうのを教えてもらってもいいですかね。

Guest 03:02
はい、

Guest 03:03
そうですね、どういうものかっていう以前に、なぜそもそもそも、クロームエクステンション作ったかっていう、なんか、モチベーション的なところ。はい、説明させていただきたいんですけど、

Guest 03:13
あの、結構最近ちょっと自分のなんだろうな。タスクとして行動を書くっていうより、なんか、そのプロジェクトの

Guest 03:21
ドキュメントを書いたり、スペック書いたり、設計したりっていうことが多いんですけど、なんか、その時にやっぱ図を入れる

Guest 03:29
ことになると思うんですけど、その図を書くと、あのなんだろうな。ダイヤグラムズとか書く時に、はいはいはい、なんかどうしても、例えば

Guest 03:37
aさんとbさんがやり取りします。みたいな図を書いていて、

Guest 03:41
で、あのうちの会社ウィキを使って、そういうドキュメント書くんですけど、元々ひょひょあの用意されてるあの

Guest 03:49
図があんまりいいものが揃ってないんで、なんかいいもんないかなって探してて、あの、もちろん、あの

Guest 03:57
イラスト屋さんとかすごく有名なところもあるんですけど、なんかあれを入れると、どうしてもなんかなんか車内受け狙ったプレゼン

Guest 04:06
感じになっちゃうんで、

Guest 04:07
もうちょっと硬いやつないかなと思って探してたんですね。そしたら、あの、アイコンもっていうサイトがありまして、なんかそこで

Guest 04:15
6000個以上のなんか、モノクロのアイコンがあって、あ、ここのアイコン使いやすそうだなと思って。

Guest 04:22
で、調べてみたら、なんか。しかも利用条件も。あの、なんか、クレジットとか

Guest 04:28
り、使用条件に違反しない限りは、そのクレジットとか許可なしで使えるみたいな感じで。あ、これいいなと思って、あの、

Guest 04:36
自分のそのドキュメントの図にバンバン貼ってたんですね、ただ、なんか今今そのサイトで

Guest 04:42
その図を貼ろうと思う図というか、イラストを貼ろうと思うと、一遍ダウンロードしてきて、張らなきゃいけないんで、ちょっとめんどくさいなと思っていて、

Guest 04:51
右クリックで簡単にそのイラストをコピーして、図に腫れ、あの右に腫れたらいいのにと思って

Guest 04:58
うまくできないのかなと思って、あの見てみたら。まあ、cromxtationを作れば、そもそもそれできるやんって思って、あの、

Guest 05:07
開発したっていうとこはモチベーションですね。なのでは、機能的にはそのアイコンモノさんのサイトで、あのアイコンのページを開いて、そこで、あの

Guest 05:17
別ウインドウでアイコンが出てくるえ、ボタンを出すような拡張になっていて、そこでまん自分であのコピーすると、そのまま

Guest 05:27
svg形式で、ぺろっとえー。生の方に腫れるみたいなく、機能はごく小さくて、

Guest 05:34
あの大したことないっちゃ大したことないんですけど、これで割とそのドキュメント作成のあの

Guest 05:42
パフォーマンス上がりまくりみたいな感じの、はい、エクステンションを書きました、という感じです

Guest 05:48
めちゃくちゃ便利そうですね、あの画像が大量にこうダウンロードされる

Guest 05:53
そうなんですよ、なんか、地味に地味にめんどくさいので、なんかはい

Guest 05:57
ま自分が使ってて便利だったらいいなと思って、一応開発した感じなんですけど、はい、自分自身はすごく便利に使ってます。

Guest 06:05
いやいや、なんかモチベーションとしては、最高な感じがしますね。なんか、ありがとう、自分の作用のためにっていういや、でもこれ結構

Guest 06:15
なんすか。便利そうっていうか、やっぱりどどうですかね。crmエクステンションっていうのは、

Guest 06:23
こういうさ作業をすごい業務業務の作業とかでもすごいやっぱりよく使われますかね。

Guest 06:30
あ、僕はあんまり使わないんですけど、あの、もう1人。あの、

Guest 06:34
参加していらっしゃる松田さんの方が、もっと業務に直結したエクステンションつか作ってらっしゃるんで、その紹介を受ければいいなと思ってます。

4. 業務で使うために作成する便利Chrome extension 06:44

Guest 06:47
どんな

Guest 06:48
なんかいきなり振ってしまって申し訳ないんですけど、なんかその結構便利クロームエクステンションを作られているという噂を

Guest 06:58
どんな感じですかね。ドームでは

Guest 07:02
で、まあ、うちの会社とかだとよくあると思うんですよ。あの、チケット管理システムと、あのジットハブっていうの

Guest 07:09
をま駆使して仕事をしてるんですけど、まあ、よくあるのが、そのチケット番号なんとかを修正します。っていうプロリをなでてで、

Guest 07:19
なんか番号だけ書かなくて、リンクも腫れやみたいなことをまあ、自分は思うんですよね。で、

Guest 07:26
ああ、でもせっかく番号発売してるから、なんか、番号だけだったら、コピーアンドペースと楽だから、番号だけでやりたいじゃないですか。

Guest 07:34
で、そういうのあるので、リクエスト番号だけ、あの、デッドハブに貼られてたら、それを

Guest 07:42
とりあえずリンクにするっていうのを作ってまして、ポットでスワンで見えない

Guest 07:48
のは承知ですけど、ちょっとここにいるお2人には、ちょっと画面共有してもいいですか。

Guest 07:52
はい、

Guest 07:53
こんなものですっていう感じでどうぞどうぞ、まあ、よくあるのがあのLINEは123みたいなタイトルを使って、あの

Guest 08:02
はい、

Guest 08:02
プリクエストありがちなんですけれども、

Guest 08:07
まそうですね。そういうプロリクエストが流れてると、あの、そのLINEは123というところはリンクになっていて、クリックすると、チケット管理システムの方にま飛べると

Guest 08:20
ま、それだけと言えばそれだけなんですけれど、もま、これが各

Guest 08:25
昔はサーバーサイトチームでま。プロリクエストの先頭には、チケット番号ちゃんと書こうっていうようなルールにはしてたんですけど、

Guest 08:32
書いても特に本人は得をしないし、むしろめんどくさいだけなんで、まあ、なんとなく入れてくれない人多かったんですよね。

Guest 08:42
ですよ、まあ、書いたらちゃんとリンク貼られて、まあ飛べるので、まあ自分も便利になるし、

Guest 08:50
まあ、レビュアーとしてもまあ便利になるっていう感じなんで、まあ、チケット番号をちゃんとプレリクに書いてくれる率っていうのは

Guest 08:59
上がるような。まあ、エクステンションを作ったりしてます。

Guest 09:04
はいはいはい

Guest 09:05
いや、便利そう

Guest 09:11
結構そうなんて言うんすか。ギッドハムのま

Guest 09:15
ところだと、ある程度だとなんなんて言うんすかね。その1周点プレートとかはあると思うんですけど、なんかあんまり微妙にこう途中で守られなかったりとかですね。ありがち

Guest 09:27
なんかありがちだと思うんで、結構そ。そういうところで、クロームエクステンションで、こう制御するなんていうんですか。このチームの

Guest 09:36
改築環境を向上させるっていうのは、すごいあれですね。ま、今の今時だと、ほんとにそういう業務ってほぼ

Guest 09:45
cromってかまブラウザを通して、まあやってることなので、そういったところにこうアプローチできる点として、めちゃくちゃやいなと

Guest 09:55
思いました。そうですね、てか、むしろ私があんまりクロムクステンションを活用してないっていう、あんまり

Guest 10:02
いう。多分、数的に言うと、だいぶ少ない方だと思うんで、なんか、

Guest 10:10
自作とかそうそうでないのも含めて、なんか活用していきたいなっていう気持ちがあります。はい、

Guest 10:18
サワーサイドで、じゃあ、逆になんか難しいことを考えずにまちょっとぴよぴよしたポーズなんですけれども。いや、もう仕方ないやろうと思いながら、ちょっと頑張って。いろんなサンプルをコピペしながら、次はで作らせていただきました。

Guest 10:33
いやいや、でもすごいすごいなんかあれですねたの頼もしいですね。エンジニアとしてすごいそういうこうなんてす、

Guest 10:41
工夫なんすかね、手作業ではない工夫で、ちゃんとあの解決するところがすごいエンジニアっぽい感じがしていいです。

Guest 10:51
cromxテンションってこう開発する上で、もちろん複雑なプログラムになってくると、あれかもしれないんですけど、なんか、

Guest 11:00
それこそウェブパックとかって、ビルドとかしなくても、なんか1つコンテントスクリップみたいな書けば。それで

Guest 11:07
こう裏技で読み込まれてる内容がちゃんと変わったりするんで、割とそのコチがいいというか、コスパがいいというか

Guest 11:16
いう感覚はありますね。

Guest 11:20
ま、確かにそうですね、最初の1歩はめちゃくちゃ確かにファイル1つ用意は1つではないですけど、まあ、いくつか用意するだけで

Guest 11:29
生きるっていうところは、

Guest 11:32
うんうん、うん。しかも、あの、必ずクロームとか、そのモダンブラウザで動くんで、なんかバベルとかも気にする必要なくても、

Guest 11:40
もうサポートしてる。あの、新しめのフィーチャーもガンガン使っちゃうみたいな感じで、気なんかきうことなくかけるみたいなところはあります。

Guest 11:49
そうですね、

Guest 11:50
あとまui作るのめんどくさいとよく思うんですけど、まあ、クロムエクステーションしとけば、まあ、メリックリックして、メニューにちゃんとなるみたいなのは、特にそんな考えなくて勝てるんで。

Guest 12:01
あ、はいはいはい、そっかそうですよね。なんか、フロントエンドの知識っていうか、そのjavascriftの知識と

Guest 12:10
なんて言うんすかね。ドムドムとか、htmとか、なんかそういうフロン。あの、uyの知識がなんか結構ごっちゃにされがちですけど、クロームエクステンション

Guest 12:20
だと、その後者の方は確かになんかはぶ省けるっていうか、あの飛ばして実装できますね。

Guest 12:30
もう、なんか改めて考えてみるとすごいあれですね。その

Guest 12:37
フロンテレジア以外にもすごい式の低いっていうのは

Guest 12:41
思いましたね。はい、

Guest 12:42
うん、うん、ありがとうございますはい、で、皆さん結構あの今回話していて、すごい

5. Backend engineerがfrontendを実装する機会 12:47

Guest 12:51
おっと思ったのはすごいなんて言うんですかね。今回の会話とかでも、ウェブパックとか、バベルとか、フロンテンデニジア以外の方からバンバン出てきて、ちょっと

Guest 13:02
割とドキッとしてるんですけど。で、今回そ、そういうところも今回聞いてみたいなと思っておりまして。

Guest 13:09
で、今回そのフロントエンドンジニアではね、バックエンドエンジニアがフロントエンドっていうのを実装するのかっていうのを

Guest 13:18
を今回聞いてみたところ、結構ま、そういう機会があるっていうところを耳にしまして。

Guest 13:25
で、2人が。まあ、そういうバックエンドエンジニアなんだけれども、フロントエンドの開発を

Guest 13:32
するっていう機会みたいなのに、ついてちょっと教えてもらいたいなと思います。どうですかね、

Guest 13:39
そうですね、じゃあ私からですけど、自分のその

Guest 13:45
開発してるプラットホームとしては、勿論、社外向けのえーとか、管理コンソールを開発していて、そこは当然。UITのエンジニアの皆さんに

Guest 13:54
フロントエンドを作っていただいてるんですけど、

Guest 13:57
あの社内向けの管理ツール、すごく簡単な機能のものであれば、まあ、バックエンドエンジニアが自分たちで。フロントエンドのコードまで

Guest 14:07
書くっていう感じになってますね。

Guest 14:12
ま、結構部署によると思うんで、松田さんのその大江開発室だとどうなのか、ちょっとわからないですけど、

Guest 14:19
どうですか。自分もまあ、そのユーザーさん向けま、自分だと、oaの管理者さん向けの

Guest 14:26
画面を作るっていうのが多いですよ。まはま、基本的にプロにお任せして、社内ユーザー向けのまあ、あの管理ツール

Guest 14:35
ま、結構やっぱサーバーサイド開発者がま見みまででやるっていうことが多いと思ってます。まあ、自分はといえ、なんか

Guest 14:45
意識があんまり高いのが低いのか。あれ、なんでパベルとか全然使えないんですけど。でも、

Guest 14:52
使えないと言いつつも、もう必要に応じて、もうなんか、もうこれが2021年だから仕方ないと思って、いろんなものを使わせていただいてます。

Guest 15:03
なるほど、なるほど、ありがとうございます。そうですよね、あの、多分あの、これを聞いてる方も、ある程度の規模の会社

Guest 15:12
に所属されている方だと、すごいあの感じていることだと思うんですけど、すごいなんて言うんですかね。その、バックエンドのツールっていうのが、

Guest 15:20
非常にあるお数多くあるんですよね。で、そういうなんていうんですかね。目に見えるところっていうフロントエンド

Guest 15:29
だけではないところっていうのも、私がその新卒であの入社した時、後にすごい実感したんですけど、めちゃくちゃ画面が

Guest 15:39
あるんですよね。で、それを誰が解決してるかというと、そうそうなんですよ。LINEだと、バックエンドエンジニアの方が

Guest 15:49
バリバリと開発されているということで、

Guest 15:52
ま。プロダクトによっては、多分その社内

Guest 15:54
のツールについても、そのプロとUITの方が作っていることもあるとは思うんですけど、まあ、そこまでじゃない規模のものだと。そうですね、あの、バックエンド

Guest 16:04
の人も、あの開発に携わる感じです。

Guest 16:08
うん、うん

Guest 16:09
で、幸いの頃に、あの、なんか、今はその社内のフレームワークというか、あの衣とか使うと

Guest 16:16
なんとなく見た目として、それっぽい。はい、ちゃんとした管理がっぽいものができるんで、なんか、バックエンドエンジンとしては、そこまで複雑な行動を書かなくても、なんか

Guest 16:26
ちゃんとした見た目の管理画面ができるんで、はい、そんな大層なプログラムを書いているわけではないです。はい、

Guest 16:35
確に確かにそうですよね、これっていうのは、あの、何LINEのし提供しているcssらえ、フレームワークなんですけれども、結構

Guest 16:45
その子はもうかなり普及しているど、どうですかね。実際使いが手的には

Guest 16:53
ま、もしs自体はブート、その時代はブートストラップベースだったんで、はいはい、割となんだろう。学園のエンジニアも、なんか自分たちではブートストラップぐらいはま、触ったことあるみたいな。エンジニアが多いので、

Guest 17:08
抵抗感なく導入することができて、しかもLINEっぽい見た目にちゃんとなるっていうところで重宝したりしてます。

Guest 17:16
そうですね、よく使わせてもらってます。なんか、まあ分からないことがあって、簡単に

Guest 17:23
ちょっとインターネットで調べてしまうんですけど、インターネットでも情報が返ってくるので、便利です。ブートストラップベースなので、

Guest 17:32
確かにそうですよね。なんか、バックエンドツールって、大体スのブルブートストラップのイメージです。けれども、確かにそうなんか

Guest 17:40
LINEっぽいなんですよね、すごい見せられないんですけれども、そうそういうツールはあります。はい、

Guest 17:48
そうですよね、うん、結構じゃあバリバリ開発されているという

Guest 17:58
ああ、でもそこまでバリバリなんだろうな。もちろん、そのフロントエンジニア間違えたごめんなさい。バックエンドエンジニアとしての採用を考えた時に、

Guest 18:08
一応。もちろんUITっていうフロントエンドの組織もあって、じゃあ、バックエンドのエンジニアとして、必ずしもフロントエンドの知識を要求

Guest 18:17
するわけにはいかないというか、する必要はないと思っているので、ま、得意な人はもちろん、その

Guest 18:24
バックエンドエンジアだけど、フロントエンドの技術が得意な人はそそぎコで

Guest 18:30
くれるといいし、まあ、そうじゃない人はまあ他の人に任せるとかでもいいし、ま、あるいは、そこからさらに苦手な人も学習できる規模感の

Guest 18:40
そういう規模感のあのなんだろうな機能しか。まあ、開発してないので、バリバリフロントエンドをやってるというよりは、

Guest 18:47
まあそこそこの規模のものをやっているっていう感じですね

Guest 18:52
まあのフロントエンドは開発されているけれども、まあ、それは適材適所適所という。そうでね。まあ、なるほど、2人はじゃあその中でも結構

Guest 19:03
いやいや、そんなことはないで、

Guest 19:06
実際あの、今その自分が触ってる。プロダクトのその社内ツールについては、

Guest 19:12
あの、一応僕はチームリーダーだったんですけど、もっと得意な人にできるだけ、そのフロントエンドの知識に左右されない

Guest 19:21
レベルに左右されないようなやり方でできないかな。っていう相談をして、これ何年も前になるんですけど、その時はその

Guest 19:29
ビージを使っていて、今もビージ使ってるんですけど、じゃあ、そのビルドシステムというか、webパックとか

Guest 19:39
をセットアップするのって、結構そのバックエンドエンジニアで、その知識がない人には辛いんで、じゃ、そこそこの手間をなくしたら、

Guest 19:47
あの、ある程度どのレベルのバックエンドエンジニアでも使えるんじゃないかっていうことで、その導入当初としては、あの理由の

Guest 19:56
シングルファイブ、コンポーネントをこうウェブパックでまとめるみたいな。spaのものではなくても、機能ごとに画面を分けて、

Guest 20:04
全部htmのテンプレートと、じゃ、バスクリップと別に読み込むみたいな形でやるっていう形にしてるんで。なので、

Guest 20:14
全然そのはい、僕あ、僕自身がすごくバリバリ書いてるっていうよりは、そういったより得意な人が

Guest 20:22
引いてくれたレールの上に乗って、あの実を見真似で、それこそやってコピペして、似たような機能があったら、コピペして持ってくるみたいな形でやってるだけなので。

Guest 20:32
はい、

Guest 20:34
ありがとうございます。そうですね、じゃあ、もうちょっとフロントエンドの情報開発環境みたいなのに、突っ込んで聞いてみたい

Guest 20:45
ですけど、さっきさっきのあのいや、

Guest 20:48
はい、一応スロフレントエンドのポッドキャストなので、なんか聞いてみたいなという気持ちがあり。いや、もちろん、あの、知ってる範囲で構わないんですけれども、そういうなんていうんですか。ページ

Guest 20:59
単位で、そのベースを作るみたいな、そういうところっていうのは、今でもそうなんですかね。それとも、なんかこう色んなこう

Guest 21:10
技術的なあのいなんて言うんすかね。そのもうちょっとこう進歩させたい

Guest 21:17
て言ってるとか、なんか、こういうトレンドの代わりみたいなの。

Guest 21:20
ああ、それで言うと、やっぱりその

Guest 21:23
なんだろう。機能ごとにページを分けちゃうと、やっぱり同じ機能は全部コピペコピペになっちゃうんで、あのテンプレート側のコピペになっちゃうし

Guest 21:30
ま、javascript側もコピペになっちゃうんで、ちょっと辛いなと思い、始めているところはあります。ただ、

Guest 21:38
そ、もう既に書かれたコードがいっぱいあるんで、それをエイヤーで変えてくのも大変なので、い

Guest 21:44
タンは多分今のまま進んでいくのかなと思ってます。

Guest 21:49
ただ、あの、なんだろう。その今携わってるプロダクト以外で、結構新しい機能を開発するときに、その

Guest 21:57
画面のプロトタイプみたいなのを作ることはあるんですけど、そういう時は、なんかビーのubuibcliか

Guest 22:06
で、はいはいはいさくっとテンプレートというか、サクッと作って、プロトタイプを作って、こういう感じの

Guest 22:13
動きになります。みたいなのを作ったりはすることはありますね。

Guest 22:17
おお、そうなんですね、すごいなんか結構なんかそう

Guest 22:26
もうそれまいいってしまえば、裏側だけつから使われるものなので、なんかそういうコピピ上等みたいな、そういうこと

Guest 22:36
かと思いきや、でもま、ほんとになんか、ウェブフロントエンドエンジニアっぽい流れをすごい

Guest 22:45
たっていってるって。

Guest 22:46
いや、そんなことはないです。

Guest 22:49
のレベルの高さに、僕はすごいなんかびっくりしているというか、なんか俺の話話せることは何もないと思ってる。

Guest 23:01
いや、でも、結構コピエ上とって本当に悪い話ではなくて、実際に今まであまり損したことはなくて、その今のさ。プロダクトではそのはい損したことはなくて、多分

Guest 23:13
ちゃんとしたUITの人が1から入って、あの入って1から多分書き直したら、ちゃんとこう構造化された

Guest 23:21
アプリケーションができるとは思うんですけど、そのあと、じゃあ、そのバックエンドのエンジニアがメンテナンスしていくときに、ここになんか新しい

Guest 23:29
機能を追加したいって言った場合に、じゃあ、どこのファイルを触ればいいのか、みたいなところが明確にはこう分かりづらいのかなと思ってるんで。

Guest 23:40
なんか、コピペはコピペで、もちろん、あの良くないところも多いけど、そういった意味では、コピペも悪くないのかなと思っています。

Guest 23:48
はいで、技術的に僕がどうのこうのって話で言うと、単純にこれは

Guest 23:54
あの逆にビューとかのその取り巻く環境がすごくここの数年で進化して、それこそビcliで

Guest 24:03
すっとこうあの、なんなんですか。あの、buiで

Guest 24:09
プロジェクトはウィザード形式で作ってくと、もうはいはい、それだけで、なんかそれっぽいものができるような時代になったんで、それに乗っかってるっていう

Guest 24:18
だけですね。はい、話が2つになっちゃいましたけど、

Guest 24:22
ありがとうございます。いや、でも、あの前半ところとかも私もすごいあの共感するところです。特に、なんか、その

Guest 24:32
バックのの鶴とかって、なんかメントなメンテナンスのこととか、もももちろん考えないといけない

Guest 24:39
でし。ただ、それでもその開発のリソースが限られてるみたいな状況でなると、全然ありというか、むしろそっちの方が

Guest 24:49
私も適しているんじゃないかな、という気持ちになりますね。そうですね、まださんとかは

Guest 24:58
どうですかね。なんか、oaとかめちゃくちゃそういう系のツールが多そうな。さっきのそのあの、

Guest 25:06
クロムエクステンションの話でもいいですけど、なんかあったりしますか。やは、

Guest 25:13
今のところではまあそうですね、やっぱり社内ツールは作るし、まあ、ビューとかも一部使われてたりはするかもしれないですけど、ま、

Guest 25:23
コピペ上等はやっぱり重要で、まあ、あんまり難しいことはせずに、まああのなんですかね。ま、状態は持つし、

Guest 25:33
まあ、社内ツールとはいえ、なんだかんだで、あの、色んなAPIを

Guest 25:38
ジャバスクリットのコンテキストから呼ぶんだけど、まあ、サブミットしたら、まあ、一旦ステートリセットして、ページリロードがかかるぐらいの。なんか、そういったなんか

Guest 25:47
ノリで作ってます。いや、ほん

Guest 25:51
あ、意外に区切りというか、しく、仕組みは意外に同じだったんですね。大a側も

Guest 25:57
そんな感じで、なんか社内ツルなので、まあ、ほんとにシングルページアプリケーションでやるぞみたいなステート持ちまくるっていう感じではないですね。

Guest 26:08
そうですよね、APIでその都度取ればいいっていうのは、究極のステート管理ですね。絶対に、サーワーサイドとフロントエンドで、ステートの帰りが起きない。

Guest 26:20
なんか、ちょっと高級なテンプレートエンジンを使ってるぐらいな感覚っていうのが、だから、近いかもしれないですね。そうですね、うん、うん、

Guest 26:30
なるほど、なるほど、

Guest 26:31
何か紹介できたりすることあるのかな。ちょっと難しくて、

Guest 26:38
なんかjsとか1番書いたので言うと、あの社内ツールなんだけど、それをまあそのまま

Guest 26:47
APIとしても使いたいみたいなことがあって、まあ、機能としては当然、あのはい、社内の別のサーバーに提供したりするAPIを

Guest 26:56
はいま、ちょっと手元でも、もちろん試したいけど、そのために何かするのは毎回何かするのって大変なので。ま。画面も欲しいけど、あの

Guest 27:07
パスとかとしては、2つ作りたく当然なくて、なんか、サーバー向けのAPIとか、まあ、

Guest 27:16
そのやっぱり呼び方の隆字とか雰囲気ってあるじゃないですか、それと、

Guest 27:21
自分のデバック用の画面で呼ぶためのまり字とか、雰囲気をなんとか合わせられないかなと思って、結構頑張った記憶はありますね。

Guest 27:32
あ、結局あったり合わなかったりで、まあ、なんだかんだで、あの、自分から作った管理画面からだと

Guest 27:40
が違うっていうと、具体的には難しいんですけど。ま、例えば、サーバートゥーサーバーのAPIだと、デリートAPIって当然。あの、

Guest 27:49
まあ、レイトメソッドで呼ぶんですけど、はい、すごい簡単に自分で画面作るときはやまあ、ポストで

Guest 27:57
デリートしたいみたいなことを思ったりとか、なんかそうですね、はい、こら辺のミスマッチなんとかならないのかなって

Guest 28:04
思ったりして、苦労してた時期はありました。なんか、結局そんな結論はなかったんですけど、

Guest 28:11
なんか、あのフロントエンドの話で言うと、最近だと、バックエンドフォーフロントエンドっていう技術はあありまして、なんかなんて言うんすかね、その

Guest 28:21
さ、それこそテンプレートだけみたいな機能をもう1つサーバー用意して、それはほんとにフロントインド

Guest 28:30
の延長戦にで開発するで、そのバックエンドフォー

Guest 28:37
なんて、フロントエンドのためのパックエンドサーバーみたいなのがそ。あの、直接そのAPIを叩くみたいな、そういう技術スタックがあったりとかして、なんか

Guest 28:48
ちょっとちょっとずつなんかこう。サーバーサイズと、フロントエントの教会がなんかわかりにくわかりにくいってか、まあまあどっちが

Guest 28:58
どっちがっていうのをこうどっちが持つのかっていうのを進捗し合ってるみたいな感情

Guest 29:09
なか。でも、そういう話を聞くと、バックエンドエンジニアとしては、逆にこう我々の領域。もし、寝食されてるんではないかっていう。あ、あの不安みたいなのも

Guest 29:19
ちょ、なるほどなそうないです、私も全く逆の感想をしました。

Guest 29:25
ふふ、

Guest 29:26
フロントエンドの領域をめっちゃ攻めていってるなと。そうですよね。うん、

Guest 29:35
まあ、1つなんかあのUITのアピールっぽい内容になってい

Guest 29:40
なってしまうんですけども、最近結構そういうところ、割とUITでもなんかね、課題感として持っていてですね。まあ、

Guest 29:49
そのフラックエンドのエンジニアが、フロントエンドの情報交換みたいなのをやりやすくしたいみたいな要望をこう

Guest 29:58
し、吸い取りたいっていう、うんとこのモチベーションがあってですね。例えば、最近だとまだ始まったのか、ちょっとわかんないんすけど、オフィスは。

Guest 30:09
って言ってま。つまり、その車内でなんかこういう質問を受け付ける時間帯みたいなのを設定してみたりとか、そういう

Guest 30:17
のフロントエンドエンジニア以外の人にフロントエンドの知識を提供するみたいな、そういう取り組みを始めようとしているという、

Guest 30:26
それは、どういった質問を受け付ける感じなんですか。

Guest 30:30
あ、それこそ、ウェブパックのセットアップとか、そういうところ、はい、想定してますね。なんか、なんで多分

Guest 30:40
ももう少し時間が経てば、状況が好転するのかなと期待しています。私も

Guest 30:46
へえでも、バックエンドエンジニアとしては、なんかどっちかっていうと、そのま、もちろん技術的なところも知りたいんですけど、なんか、フロントエンジニアとしては、

Guest 30:55
こういったAPIの設計の方が嬉しいとか、そういう方を知りたいかなみたいな、逆

Guest 31:02
なるほどなるほどです。はい、

Guest 31:04
インターナルAPIで、サーバートゥーサーバーで呼び出す場合は、なんかこういう。なんか、エンティティーの設計で、こういうAPIの分け方でっていう。なんか、まあ、大体

Guest 31:14
みんな共通した意識があるんですけど、やっぱそのフロント向けって、やっぱりなんだろうな。ビに直結してる部分があるんで、

Guest 31:22
なんか、完全にそのサーバートゥーサーバーのつもりで設計すると、実はフロントエンドにとっては、あの辛い。

Guest 31:30
頑張んなきゃいけなくて辛いから、ほんとはこういう風に渡してくれると嬉しいみたいな、

Guest 31:35
そういった本音というかと、その辺が聞けると、はいはい嬉しいかなっていうのはあります。

Guest 31:41
ああ、そうですね、そうっていうと、私的にはそんなに不安みたいなのはないんですけど、たまになんかそのなんて言うんですかね。サーバーの

Guest 31:52
実情になんか合わせてし、あのAPIが作られるみたいな、まあまあまあよくあることかなと思うんですけど、そういう時にどういう

Guest 32:01
解決策を持てばいいのかっていうのは、なんかもうちょっと話し合えるのかなとは、うん、今、今はちょっと思いましたね。

Guest 32:09
なんか、1つの画面作るために、サーバーのAPIなんか、100回叩かなきゃいけないみたいな。設計をすると、多分はいはい、トレンドとしては困るんだろうな、みたいな

Guest 32:19
いうところはあって、こういうとこ。ウェブフロントエンドに限らず、多分ネイティブアプリの場合もそうだと思うんで、問題意識は似てるところはあるのかもしれないですけど。

Guest 32:30
ま、それこそまgrpcとか。うん、あのグラスケールとかうん、入ってると思うんで。まあ、でも

Guest 32:37
そういうところっていうのはやっぱりなんかこう。規模が会社の規模が大きくなっていくと、こうどんどんと。まあ、コミュニケーションを

Guest 32:47
取りづらい環境になっていってるのかなっていうのは、

Guest 32:52
そういう。まあ、でもそれを回避するために動き出して、親友というところですね。

Guest 32:58
今、ちょっと話出ましたけど、まあ、グラフトエルはともかく、なんかその

Guest 33:03
jrpcとか、うちの会社のスリフトとかも。まあ、よくよくあるんですけど、まあ、フロントエンド的には

Guest 33:11
なんかどどうなんですか。なんか、サーバーサイド的には、もしレストじゃなくて、スリフト10rpcで脱せして、

Guest 33:20
それで画面作ってもらえるなら、ちょっと興味があるというか、やってみたい感じはしていて。

Guest 33:26
はいはい、なるほど、私はめっちゃモチベーション高いです。

Guest 33:37
おい、じゃあ、新機能はjrpcかな。

Guest 33:42
あれと、田さんもoaの開発をやってらっしゃるんでした。

Guest 33:46
あ、そうですね、はい、なるほど、おい、

Guest 33:49
じゃあ、新機能はぜひ

Guest 33:55
この場で決まってしまった。

Guest 33:56
ふんふんふん

Guest 34:00
ま。なんか今今この30分でももう話が出たぐらいなんで、もっとコミュニケーションした方がいいってのは

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

Guest 34:16
なかなか規模の大きいところになると、途中から変えるっていうのは難しいけど、まあ、それをやっていかなきゃ。なんか前には進めないので、

Guest 34:25
な。また、できればなと思います。

Guest 34:29
そうですね、うん、なんかタイミングがあればと感じになってしまうんですけど、まあ、

Guest 34:39
いや、ちょっとあれですね。また、新しいプロジェクトが

Guest 34:44
ぶちったどうしましょう。

6. クロージング 34:52

Guest 34:52
はい、では、今回はサーバーサイドエンジンの方に、フロントエンドの開発について聞いてみました。

Guest 35:00
LINEのフロントエンド組織UITでは、このような技術的なキャッチアップを日々行っております。

Guest 35:06
UIT INSIDE以外にも、毎週の社内勉強会やえ、今回、あのゴールデンウィークのテカのようなフロントエンドの情報交換を行っています。

Guest 35:15
今後もUITサイルとして、このような情報を外部に発信していきたらと思います。

Guest 35:22
最後に、現在LINE株式会社ではえ、新卒中と採用とに大募集しています。

Guest 35:28
このポットキャストを聞いて、ラインに興味を持たれましたら、消耗と1番下にある求人ページから、ぜひアクセスしてください。

Guest 35:35
はい、それではえおおじさんでいいんですかね。デラさん、あとまださんありがとうございました、ありが

Guest 35:43
ありがとうございました。