音声書き起こし
1. オープニング
Guest
それではえ、UIT INSIDE第3回えーやっていきたいと思います。え、まず初めにえ。このポッドキャストは、LINEUITsに所属する開発者たちが、毎週最新のフロンペンドの動向について語るためのポッドキャストです。
Guest
最新のウェブ標準の動向から開発、フレームワークの変遷、またまたいに関するアップデートまで、種の始まりに、全週までの内容をキャッチアップしていくことをえ、目標としております。
Guest
ええ、今回はですねえーu提所属のジェスラーである。えと、私はたとえと同じくuy提出えー所属のオロントエンドエンジニアのえみさんとともにおえ、お送りしたいと思いますよろしくお願いしますよろしくお願いします。
2. キャスト自己紹介
Guest
ではですね、まずえそうですね。私はいつも自己紹介しているので、一旦いとして、今回みよさんさんの方、自己紹介をお願いできますでしょうか。
Guest
はい、そうですね、そもそもま。今LINEという会社が存在する前から、ライブドアという会社で入社したのが始まりでで、ちなみに、ライブドアの最後の正社員
Guest
です。で、そん時にもうあのま当時nhnって会社だったんですけど、LINEって会社がなかったので、合併するってことがもう決まっていたので、面接する前から
Guest
なんて言うんすかね。合併前に急いで正社員に入れたいなみたいな感じで、めっちゃすごい速さで
Guest
入社できたっていう経緯があります。で、全職はですね。色々な職をやってるんですけれど、1番長いのは、あの国内の日本国内の
Guest
家電メーカーに行って、
Guest
なんて言うんですかね。携帯電話を当時、家電メーカーが作っているところが多かったので、そこのブラウザの検証用のサイトとか、あと、市場からクレームが来るんですよね。
Guest
父さんに対しては、で、それがえ誰のせいなのかっていうのをはっきりさせるっていうような仕事をしてました。
Guest
で、最近はLINEnews主にチャンネル面の担当しています、よろしくお願いしますよろしくお願い
Guest
割とみさんは、ライブドアからっていうことで、ちょっと。自分はまだ入って3か月ぐらいなんですけど、みさん結構ベテランかなと思いますので、色々まなえ。実際、LINEnewsとか、パフォーマンスとか関わるとこもあるんで、まあ、がっつり聞いていきたいなと思っております。
3. FC2 爆速テンプレートについて
Guest
ということで、今週のフロントエンドについて話していきたいと思います。え、今週のえ、フロントエンドですけど、もま結構いろんなトピックがあったかなと思うんですけど、まあ、1番え話題だったのはま、国内的に話題だったのは、fc2のバックス、
Guest
特テプレートの話かなと思っております。まあ、結構素早く表示できるブログテプレートは、
Guest
えーフロントエンドエンジニア的にはブロ、そのブログサービスみたいなのあんまり触る機会ないかなと思い
Guest
ますけど、そのえー点でま、結構爆速テンプレートっていうとこでま。ちょっと話題だったんで、ま、その辺三さんがちょっと内部構造見てみたみたいなとこがあるんでえ。詳しく聞いていければと思います。
Guest
はいはい、
Guest
爆速テプレートなんですが、ばそ。ちなみに、バソテプレートっての正式名称です。
Guest
あ、そうだったんですね、
Guest
バソテプレートっていう続証じゃないですだから、なんつうのfc2はマジでバソって自分で言ってるっていう
Guest
で、ですね、ま、実際に見てもらった人はわかると思うんですけど、あの、かなり早いブログとしては
Guest
そうっすね。割とまあ、パパキパキ動くというか。
Guest
そうですね、まあ、デブトゥーっていうサービスがまえなんてすか、snsですかね。あれは
Guest
そうですね、聞いたみたいなやつですよ、そうそう
Guest
がありまして、あれもだいぶ早かったんですけど、あれよりちょっと。まあ、1歩を取るくらいの速さっていう感じで、通常のウェブとしては、かなり早いアプリとしても、だいぶ早いっていう感じですね。
Guest
で、まあ、ちょっと興味を持って中を見てみたっていう感じです
Guest
で、それはあれですか。あのま、デベロッパーコンソール見て、ソースコード見て、ガリガリみたいな感じでして、
Guest
あ、だから中の人に話を聞いたわけではないのでは。いまあ、ちょっと嘘を言うかもしれないっていう話ですね。あ、全然大丈夫
Guest
でま。大体1日くらい色々中を見てみて、大体わかったなっていう感じのところまでは来たので、ま、簡単にみんなで共有したいなと
Guest
いうところを言うと、結局ですね。いくつかポイントがあるんですけど、割となんて言うかな。普通というか、
Guest
声道の高速化対策をしていて、ていうか、まあ、高速化対策って、真面目にやらない限りは結局ダメなんですよね。あの、固定先でなんとかならないんですよね。
Guest
っていうのがあって、見てみたら、結局1番大きいのがサービスの設計が最適化されてるっていうのが、結局1番大きかったですね。で、
Guest
サービスの設計っていうとなんですか。今、抽象的な言い方になりますけど、端的に言うと、リクエストがそもそもすごい少ない、
Guest
あの、とんでもなく少ないですよ。あの、普通のブログの10分の1行ってないかもしんないです。そのくらいの数しか、そもそもリクエストが飛んでない
Guest
というのと、レスポンスもきょま、極端に早いとまではいかないですけど、あの、かなり早いです。50ミリセック以上、レスポンスに時間かかるapがほとんどないです。
Guest
それ、すごいですね、めちゃめちゃ早いですね、
Guest
だから、そのそもそも素早いんですよね。はい、別に頑張らなくても頑張らなくてもって、フロントで頑張らなくても、普通のウェブとしても早いはずなんです。その時点で、
Guest
というのが、まず1番大きい影響としてありまして。でま中をもうちょっと見てみたら。インスタントクリックっていうえーなプラグイン
Guest
なのかがありましてま、これがさっき言ったデブトゥーでも使ってるやつなんですけど、ちょっとこれ説明がしごいしづらいプラグインなんですよ。
Guest
なんすか、簡単に言うと、pcで言うと、マウスをリンク飛ぶ時にホバーしますと、その時点でもうデータをとってきちゃう。
Guest
要は保ばしてからすぐクリックするわけではないし。実際にすぐクリックしたとしても、それがダブルクリックとか、ドラックじゃないってことを確定するのに、何秒がかかるんですよね。にさ、2300ミリ秒くらいかかるんですよね。
Guest
そうっすね、で、その待ち時間の間に読んで置いてる。そもそも早いので、バックとかその200ミリ秒くらいで読めて、で、実際にクリックした時は、もうキャッシュヒットできるっていう
Guest
ので、早いっていうものなんですけど、それが入っていて、速さというか、体感的な速さは多分こいつが1番影響がでかいです。
Guest
あれですね、あの、他のフロンテンだったら、プリフェッチとかって呼ばれてるのと、大体同じって感じですよね。技術的には、
Guest
だから、逆に言うと見ないページもガンガンとっちゃうって話なんですよ。はい
Guest
ま、いわゆるギガを食うみたいなサイトにはなっちゃうみたいな。
Guest
携帯はだいぶ来ることになると思いますね。で、あとは、ね、サービスワーカーがまあ入ってまして、ただ、キャッシュはあんま使ってなかったんですよね。見たら
Guest
で、今どういうとこで使われてるんでしょう。
Guest
そのバックソテンプレートの話で言うと、最初に読み込む記事を10記事分先に読んでるんですよね。はいはいはい
Guest
で逆に言うと、それ以外はほぼ動いてなくて、
Guest
で、その先に読む1記事分ってブログだから、違うじゃないすか。毎回10記事分がで、なんかそれをどうもサーバー側で動的に選んでるらしくて、だから、サーバーバーカェイズ自体を動的にはらっしゃるっぽいんですよ。
Guest
はいはいはい
Guest
で、サービスワーカーってまェイスなんですけど、サービスアーカーの中身が変わると、自動的に。新しいサービスワーカーに更新されるっていう
Guest
仕組みになってるんですよ。で、キャッシュAPI使う時って、キャッシュのどう制御するかっていうのが、結構毎回大きな問題になってて、あのミスると取り返しがつかないっていうし、
Guest
なってるんですけど、このfc2のバックステンペレットの場合は、サービスワーカー自体が更新されると、取るべきキャッシュも全部毎回更新されると、毎回そのタイミングで破棄すると
Guest
いう感じになってるんでね。シンプルというか、一体化してるんですよね。はいはい、キャッシュ戦略ってものはないっていう
Guest
サービスワーカーが常に更新されて、そこに書かれてるものを取りに行くだけです。っていう
Guest
感じになってて、多分そこで硬さというか、設計の安全性を保証してるのかなって感じはしますね。
Guest
確かに、バリバリで早くしようと思うと、やっぱ事故とか怖いとこですけど、そこで、サブ垢でフルフルで毎回回ってしまうってなると、確かにある程度
Guest
ま盛りやすい感じになって。そうですね。
Guest
そうですね、で、まあ、結局fc2ブログのこのバークソテンプレートに関して言うと、ま、結局ちゃんと真面目に
Guest
ややんないと早くなんないんだなっていう。はいはい
Guest
てことが分かったのと、今言った通り、サービスワーカーで、先頭の10記事以外はキャッシュないんですよ。はい、だから、例えばなんだろう。1年前の記事とかに飛んで、突然飛んじゃうと、もう先に取ってる10件分っても無意味になるんですけど、それでも十分早くて
Guest
だからなんていうんですかね。ファーストロードさえなんとかすれば、体感的にはだいぶ早いんだなと。ウェブというものはっていうなんちゅうのま、ノウハウというか、知見が得られたっていうのが結構大きかったですね。
Guest
結構みんなspaとか作ってモリモリ開化させてるけど、こうシンプルに作ればもちろん早くなるというか、
Guest
結構まあそれですし、ブログとかって、やっぱりブログパーツとかもめっちゃつく使われたり。
Guest
あ、そうですね、遅くなりやすい携帯のサービスでもありますね。
Guest
ま、その辺をシンプルに作ることによって、まあ早いんだなっていうところを出してるみたいなともある感じですかね。そうですね、
Guest
その実装自体がまいあいての多分個人であると思うんですけど。はい、あの、fc2っていうわと有名なところが、fc2ブログっていう割とメジャーなサービスで、
Guest
あの、これでuxをよくします。っていう方向性で持ってきたっていうこと自体が結構大きいなと思っていて、そういうアプローチって基本今までなかったので、
Guest
特に日本では珍しいですよね。だいぶ
Guest
そうですね、結構まどちらかっていうと、ブログサービスとかってなんでしょ。うちの盛る方というか、遅くても盛るみたいな方向にがちですもんね。
Guest
なると、シンプルで使いやすいとか、サクサク動きますよ。っていうのを割と打ち出すサービスって結構あるんですけど、日本だと割と珍しいので、ま、それ自体はすごくポジティブな影響があるなと個人的には思って。
Guest
確かにfc2レベルですら、前例があるみたいなところは。まあ、これからスピード感みたいなところを考えるにあたって、まあ、その
Guest
提案しやすいところとか出てきそうですね。そうですね、確かにっていうのは、結構fc2テンプレートの書簡って感じですかね。そう
4. InstantClick と SPA の相性問題
Guest
そうですね、ただ逆にまあ、インスタントクリックが大きいって話なんですけど、はい、あの、ブログって何気に結構スタティックなんですよ。
Guest
あの、そうですね、1回帰っちゃうと、もう変わらないんですよね、更新が自由ってだけであるので、で、インスタントクリックが割とそういう
Guest
設計というか、そういうストティックなサイトに最適化していて、最適化してるっていうか、導入が簡単なんですね。スタティックなサイトだと
Guest
で、例えばfc2ブロックでも、あのなんていうんですかね。無限スクロール
Guest
はい、インフィニックスクロールで、こう記事をプリフィッチしてくるっていうプルトゥーリフレッシュみたいな感じでていうのもあって、あそこだけ動的に動いてるんですけど、はい、
Guest
なんかそういうのっていちいち書かないといけないんですよ。インスタントクリックって、はい、あっちのオブジェクトにこうひたすら新しいやつをプッシュします。みたいなのがあったりするので、はい、
Guest
だから、結構複雑な動的サイトspaとかssrで作っていて、さらに早くする。あで、これを入れたいです。って言われたら、多分入れれないんですよね。はいはいはい、あの、あまりにもコストが高すぎるので、
Guest
というのがあるので、結構だから、意外に。インスタントクリってなんていうか、そんな普及してないというか、意外に使われてない感じがするのはそのせいなのかって気はしますね。
Guest
なるほど、なるほど、まあでもその分まあ性的サイトだったら入れやすいってとこでま。こういったところで使われると、まあ、実際の候補発揮してるみたいな感じ、
Guest
受け入れるだけで早くなりますからね。単純に個人的には、そのビューロディレクティブとかで、多分同じことができる。はいはい、はずなんですよね、書くと
Guest
そうですかね、ちなみに探したけど、なかったっすよ、
Guest
なんかこれあれですね。この間、リリースされたナクストバージョン2.4では、内部的にそのホバーした。画面に描画されているルーターリンクビjsのユルータリンクを見つけて、
Guest
チャンクを取ってくるみたいなのをしてるんですけど、それはなんか一般化されてないんで、ラストプロジェクトでしか使えないみたいな感じで、
Guest
bjsで使うえないみたいなのが、結構悩みどころだったりしますね。要は、
Guest
あの単純にキャッシュリーやきとかじゃなくて、1回アクセスをしとくだけで、ブラウザ側のキャッシュが効くじゃないですか。そうすね、だから、なんて無意味にフェッチしとくっていうじ、
Guest
とりあえずって感じですよね。もう、
Guest
リンクに接近したら、もう勝めしちゃうみたいなやつなだけでも、多分早くはなると思うんですけど、そうね、
Guest
ま、ネットワークの時間がなくなるんで、結局アプリケーションの時間だけになるんで、その辺はパフォーマンス的にはだいぶ向上してますよね。
Guest
そうですま、ただ本質的には結局フロントでは早くならないっていう体感速度が上がるんだけど、
Guest
数字的には数字的なものじゃないって感じですもんね、実際
Guest
要はないなんて、先に全部用意しとくのか、後で用意するのかみみたいな違いしかないんですよね、
5. 高速化施策の現実について
Guest
オッケーですじゃあね、技術的な導入セレの話次行きます。はいはい
Guest
でま。実際問題は結構世にあるサービスって基本遅くなってしまったり、大化したりするっていうのは、まあ普通のことというか、どうしようもないことなんでそうですね。
Guest
ま、そこら辺をちゃんと考える人がいないってのは、問題は問題なんですけど、
Guest
なので、まあLINEでもある程度まlinというか、まあ、個人的プロダクトでもできればやっていきたいなと思っていますが。ただ、ね、個人的な
Guest
意見で言うと、はい、あのキャッシュAPIがだいぶリスクがあるなと思っていては、特に大規模なサービスに入れるのは、そこをなんとかしないといけないですね。
Guest
そうですね、キャッシュ事故は結構まあ、そもそも今までバックエンドのキャッシュもては、今、フロントエンドよりよく使われてきたと思うんですけど、それでも結構今までいろんなキャッシュ漏れの設定とかで、事故ったりとかよくあったと思いますし、ユーザー情報出たりとかも、
Guest
市場でバグ出た時に再現ができないんですよ。そうですね、あと、動作研修も難しいので、
Guest
結構リスクが高いんですよね。あんまり自由に使うには
Guest
結構まあ
Guest
開発し、開発の時に開発を楽にする。例えば、サービスワーカーのキャッシュ使うとしたら、ワークボックスとか出てきますけど、あれらも結構プロダクションビルドでようやく動くとかが多いですもんね、ちゃんと設定と
Guest
そうですね、ワークボックスだと、あの、なんていうんですかねえ。キャッシュストラテジーが設定、キャッシュストラテジーっていうのは、キャッシュ教心の仕方をどうするかっていう仕組みなんですけど、
Guest
なんか1回キャッシュしたら、もうリクエストしないとか、毎回リクエストの裏でキャッシュを保存しといて、みたいな
Guest
のが選べたりするんですけど、ああいうのがないと素使うのはだいぶきついなと思っていて、あの要はサービスワーカーとか、キャッシュAPIを使う。だって、
Guest
ウェブサービスにとっては、本質じゃないと思うんですよ。そこって、
Guest
はい、
Guest
あの、だから、そこにそんなにコストをかけてやるのはちょっとあんまり良くないなと思っていて、だから、誰でも最適化はしてないけど、ある程度簡単にこけ入れれて、ある程度効果が出ますよ。みたいなものがないと、ちょっと普及しないような気がす。
Guest
はいはいはい、ワークボックスでも、まあ十分コモディティ化しつつはあるけれども、あれよりもうちょい簡単なものみたいなのがあるといいって感じですかね。そうですね、
Guest
ちょっと最近のwebのキャッシュAPIとかもそうなんですけど、あの、APIのレベルがすごい高すぎるんですよ。あの、機能なさすぎるんですよ。はいはい、
Guest
そうっすね、
Guest
個人的にはそのキャッシュ、APIもエキスパイアくらいつけてほしいんですよ。
Guest
そうですね、結構あれですもんね、キャッシュAPI事故った場合、そのす特にサは由来で書いてると、あの、そのそれこそプライオリティトラテジーのプライオリティで、
Guest
キャッシュ優先にしてしまうと、1日ぐらい更新されないとかあるじゃないですか。
Guest
結局だから使えるけど、いろんなフレームワークを使って頑張ると使えますよ。みたいな感じが多くて、ほんとにそれもいいことだった、ちょっと微妙だなっていう。
Guest
確かに、確かにもうちょっといいキャッシュ、APIの形みたいなんがあると使いやすくなるのかなって感じは確かにしますね。
Guest
まあ、解雇感とかもあるので、そこがだいぶネックにはなりますよね。はい、
Guest
あ、それこそ
Guest
まキャッシュをうまく使うま使うベースにしつつも、多分それこそなんでしょう。bhpのスマーティーとかってこう、あの、1回コンパイルしたら使いますけど、ま、消し飛ばしたくなったら、サーバー管理者が消せたじゃないですか。やっぱ、そこが
Guest
クライアントサイトってなると、難しいのは、確かに悩みどころって感じですよね。
Guest
バグが出ると、なぜそのキャッシュがそうなったのかってわかんないとか。はいはい、
Guest
過去に渡って見ていって、まあ、実装を見てみたいな感じになりかねないですもんね。
Guest
下手したら、ジェスが中途半端に読み込まれてて、たまたま変になってたとかもあるので、
Guest
そうっすね。ま、その辺りは結構難しいとこではありますよね。
Guest
ま、あと、ネットがネットとかインフラが実際早くなるので、はい、だから、そっちの具合もありますよね。要はどのくらいリッチな
Guest
理想スの使い方が許されるかっていうのは、結局環境によってしまうので。は。いはい
Guest
まだから、未だに3cのとこもあれば、まあ、これから5gの話がそれこそこの間発表された端末とかだと、もう5g対応します。みたいなこと言ってたりとかするんで
Guest
ま。ネットワーク環境とかもまちまちですし、そもそも日本でも地震幹線乗ってるとき、山山通るときは遅いみたいな話とかありますし
Guest
ま、405時だと、wi-fiより基本的に早いので、そう
Guest
あ、結構その辺にも影響されますよね。
Guest
で、多分そこらへんの。知見もないし、ノウハウもないし、導入事例もあんまりないっていうのは、まあ割と現状ですよね。そうですね、
Guest
やってるとこがやってるだけで、すごいっていう話になるぐらいにはないっていう感じですもんね。
Guest
あと、そのなんていうか、速度改善っていう話で言うとは、そもそもそも新しい技術で何かを解決するのが正義なのかっていう話なんで、
Guest
なんか、新しい技術で新しい対策をするのが必ず正しいのかっていうと、割と、なんかシンプルな古いレガシーな組み方をした方が早いとかっていうのも多分あるんで、
Guest
なんか、あんまりそこに頼るのも良くないなと個人的に思います。そうですね、
Guest
確かにまあ、もっと基本的な部分で基礎を固めてかえなんでしょう。回転できるとこもあるはずなんで、その辺も見直しつつま。それでも無理なものを新しい技術もちゃんと取り入れてっていうのが、まあ正しいやり方な気はしますよね。
Guest
いずれにせよ、基本的にその設計を最適化しないといけないので、結構勇気がいると思うんですよね。あの、エンジニアのざるとこじゃないじゃないですか、基本そこのレイヤーって、
Guest
要は、このプラグインはもう使わないとか、この外部リソースにアクセスするのやめたいとかって、勝手にやることではないんです。
Guest
ま、なんで結構ますね。サービス設計からのぜの時点からまその辺を意識しないと厳しいって感じですよね。
6. クロージング
Guest
今日はですね。えみさんとともに、fc2の爆速テンプレートについての話っていうところやっていきました。え、まあ、なんか自分
Guest
完全に通称みたいなとこだと思ってたんで、ワソ戦プレートって、fc2自身が歌ってるのとか初めて知ったりしたんですけど、まあ、なんか結構
Guest
え中見ていくのとかも面白いかなという感じだったかなと思います。え、LINEのえ提出ではですねえ、
Guest
毎週ですねギットハブ1周ベースでま、最新の技術についてま。今週であれば、ま、fc2の爆速テンプレートについてみたいなところだとかっていうのがえ、
Guest
公開されて議論できる1周みたいなのがえたってえ、日々盛んにえ、これが行われていますとで、えま、今回はえ、fc2の爆速テプレートを1本に絞ってご紹介しましたけれどもま他にもですね。え、いくつか
Guest
えテーマがありましたので、ま、軽くご紹介させていただきたいと思います。ですね、まえとpwaがえーをですねまあ、最近え、googleのプレイスターにあげられるようにな
Guest
だったかなと思いますけど、ま、それをですね。pwaをそのままapkにえ、コンバートできるサービスがえあるよ
Guest
話だとか。まあ、リアクトjcのドキュメントがえまつにでえ、日本語版がどえデプロイされましたよ。みたいな話だとか、ま、あと社員の人がえ、jsmのえ、実装についてえ、ブログを書いたりしたので、まその辺が貼ってやったりっていうとこでしたっていうところです。
Guest
ま、今話した話題についてはですねえ、小ノートの方にえーリンクを貼っておきますので、もしご興味のある方は、そちらから見ていただければと思います。
Guest
ということで、え、ユテンサイド第4第3回は、三好さんとともにえ、fc2のバックステンプレートについて話していきました。え、ありがとうございました、
Guest
ありがとうございました。