00:00
はい、こんにちは、ゆうやです。
はい、せねです。
えーっと、今日はニュースからいきますか?
そうですね。
というか、寒いですね。
寒い。
なんかこんなノリでいいのか分かんないですけど。
そう、今日あれらしいですよね。なんかマイナス7度?
うそ。
いや、ほんとほんと。で、なんか明日とかマイナス9度とかもできるらしいですよ。
えー、やばいな。
いや、俺マジでバンクーバー住んでね、13年くらいだけど、多分これ2番目くらい寒いですね、俺の知ってる中で。
あ、今年?なるほど。
今年、と思う分かんない。そのマイナス9とかって久々しく聞いてないと思うけどな。
この前、なんか1週間晴れてる時があって。
そうそうそう、ね。
すごい過ごしやすかったんですけど。
めちゃめちゃなんか、あーもうこれあれだなーって春の到来だなーとか勝手に頭の中では思ってたんですけど、
えらい今年早いなーって思っていたら、まさかの北極旗団なんかっていうね。
バンクーバーの人は天気の話をすぐ好きっていうのをなんかニュースで見ました。
はー、マジで?いや、ていうか天気に左右されすぎなんじゃね?っていうのが本音じゃないかなって気がしますよね。
そう、特に冬ですよね。
あー、もうまた雨、また雨って言いたくもなるよね、そんなんね。
はい。で、ちょっと晴れたら、今日晴れたぜ!みたいな。
晴れた!晴れた!奇跡!奇跡みたいな。
そうそうそう、そうなんですよね。なので、ちょっとまあね、天気の話は確かにちょっとしやすいっていうか、そう、まあそれはあるかなと思いますが。
まあ、というわけで、やっていきましょうか。
なんかあれですよね、あの留学系で、なんか結構大きいニュースがあったんですよね。
まあ、そうですね。あのね、結構実はここ1週間くらい俺もかなりバタバタで、実は。
あー、はいはいはい。
そう、っていうのもね、なんか、あのやっぱりコロナ周りの結局話になっちゃうんですけど。
はい。
あのー、1ヶ月はまだ経ってないかな、2、3週間くらい前に、カナダに渡航する奴ら全員2000ドル払って、来た人たち全員なんか3日間のホテル隔離、もう指定されたホテルで隔離。
その後2週間の自宅禁止っていうか、自宅隔離、自宅隔離をしてようやく出れるみたいな感じだったんですけど、感じのことが発表されたんですけど。
はいはいはい。
そう、で、2000ドルしかも払って、で、なんかどこに連れて行くかもわからなくてみたいな感じで、もう今からカナダ来る人たちはめちゃめちゃ大変だよねっていう風になってたのが実は先週くらいで。
そうですよね。あらかじめ予定してた人とかもオプションがつくってことですよね。
そうそうそう。だったのが、ちょうどそれが1週間前か数日くらい前に、インターナショナルスチューデントの人たちに関してはおそらく該当させないと。
それは留学ってことですよね。
まあ留学生ですね。だからまあよかったなっていうことになったんですよ。
じゃあ、該当する人って本当に旅行目的で来る人とかだけなんですか?
そうそう、でもね、あれなんですよね。去年のこと思い出してほしいんですけど、バンクーバーでコロナ流行った後に、3月とか4月になってトロントの方で大爆発したじゃないですか。
ああ、はいはい。
そう、あれやっぱり春休みが原因って言われてるんですよ。
へー、なるほどね。
そう、こっちの春休みって多分日本に比べれば若干長いのかな。で、おまけになんか、州によっては、それこそトロント、モントリュールとかケベック州とかそっちの方面は結構早い時期に旅行行くらしいんですよね、みんな。
03:01
なるほど。
休みに入ると。
だからまあ2月とかその辺にね、トロント、モントリュール、その辺の人たちがどこに旅行行くかって言ったら、もう見ての通りというか地理的な部分の通りなんですけど、ヨーロッパかニューヨークかなんですよね。
まあ近いですもんね。
その辺って、そう、もうクソ大爆発しちゃったとこじゃないですか、コロナが。
だからまあその大流行した、言ったらね、感染源をもう全員その2月3月の時期に持ち帰ってきてしまったっていうのが、結果的に西海岸と東海岸で、東海岸がめちゃめちゃやばくて、西海岸はそうでもないよなっていう。
そうですね。
別れ目に行ってしまったっていうね。
なるほど。
そう、最初はね、やっぱり西海岸の方がやばいって言われてたんですよ、シリコンバレーとかもそうだし、サンフランシスコ川もそうだし、バンクーバーもそうだし、やっぱり西海岸チャイナ系が多いし、アジアから持ち帰った人たちが多いんじゃないか、やばいやばい。
実際感染者数もこっちの方が多い、西海岸の方が多いじゃないか、へーっていうのが東海岸から見られてたんですよ。
はいはいはい。
それがこの旅行シーズンっていうのを境にして、一気に東の方で流行っちゃったんで、そう、カナダ政府としては完全にこの東側も含めて、2月3月4月っていうこのトラベラーの人たちに対して、何とかちょっと帰ってきてほしくない、もしくは出てきてほしくないみたいな。
あー、それでそういう政策を打ったんですね。
2000ドルって、1旅行2000ドル絶対にエキストラでかかるってまあまあな借金じゃないですか。
航空券のね、往復で2000ドルくらいするんです、はい。
一体どこ行けばそんな元取れるだけ行けるのっていう話だから。
いいホテルだと思うんですけど。
いや、嘘でしょ、いやでもその中にはね、なんかPCR検査とかもいろいろ入ってるらしいんですよ。
あー、なるほどなるほど。
そう、なのでまあまあ、全部含めて2000ドル、それでも割高だなって思うけど、まあしゃあないかなっていう。
なるほど。
まあというのが、ついに今日か、あのまあ施行される時期が決まって、2月の22日からかな、始まると。
はい。
そう、まあ言うことらしいので、まあ正直フログ系で海外就職するぞとか、
はい。
あの、大島さんみたいにこっちに来ながらアメリカの仕事するぞみたいな、要するにインターナショナルシューティンとかワーカーにはまあほぼほぼ関係ないんですけど。
あと、それに付随する配偶者とかってどうなんですか?
いや、同じですね。配偶者も結局、あのーなんだっけ、まあそこら辺結構日本と違いましたよね。
日本は永住権とか持ってる人も入れちゃダメっていう風になってたと思うんですけど、
はいはい。
こっちはもうその永住権持ってたりとか、奥さんとかっていうのは当然帰ってくる義務があるというか、まあ役目があるというか。
はいはいはい。
ということで、基本的には別にそういう隔離対象、隔離にはなるけれども、あの入国制限とかかかってないんで。
うん、それはいいですね、じゃあ。
そうそう、そこはちょっとありがたかったっすね、まあ永住権持ちとしては。
はい、あれですよね、個人的な話だと、あのセラさんの奥さんが帰らなくちゃいけない。
そう、帰らなくちゃいけないから、そうなんか、お嫁さんのお姉さんかな、あの結婚式で、
そしてあと日本に、あのどうしても3月、4月に帰らなくちゃいけないってなって、結構てんやわんやでしたよ、やっぱ。
その結婚式も2回ぐらい延期したっていう話を聞いて、
そうそうそうそう。
で、次延期するともう、まあもう次延期できないんでしたっけ、確か。
06:01
うん、そう、できないらしいんですよね。
なのでもう強行突破、まあもちろんちょっとね、親族だけしか呼べないような、ちょっとちっちゃい感じにするしかないらしいんですけど。
本当に残念というか、タイミングが悪いですね、本当に。
まったく、そうなんすよ、なのでまあまあもう今、待ちに待ってっていう形でね、ようやく今になって、
まあ延期にして延期っていうだから、これ以上延期もできないだろうし、ちょっとまあ難しいっちゃ難しいですよね。
はい、なるほど、まあ結果的には大丈夫っていう話だったんですね。
そうですね、今のところは特に大きな問題もなくっていう感じで。
はい、でもなんか最近の動き見てると、なんか最近になってなんかいろいろ発表したりとか、
対策を出してて、なんか、え、むしろ今なの?みたいな、思うところはあるんですけど。
いや間違いない、いやでもやっぱあれだと思いますよ、カナダ側もそうだしアメリカ側もそうだろうけど、やっぱり2月、3月のあの大感染がやっぱり大引いてるイメージじゃないですか、やっぱ。
そうそう、だからまあなんかね、去年の、なんかそれこそ夏以降とかみたいなタイミングよりも、
やっぱりこのね、まあ問題にめちゃめちゃなったこの2月3月の春休み時期とか夏休み時期っていうのをかなり意識してのことじゃないかなという気がしますけど。
うん、なるほど、まあ収まるといいですね、ほんとにもう。
いや間違いない。
ワンクーバーの中で言うと、あの他の家族と会うことができないので、もうずっとセナさんとも会ってないんですよね、実は。
いや間違いないですよ、もうオンライン上だと毎日のように会話してるけど。
そうなんですよね、だからちょっとね、それこそコロナ前のタイミングはほぼ毎週、もう下手すぎは毎日会わせだけど、なんか週2回くらい普通にね居酒屋行ったりとか焼き鳥食いに行ったりとかしてたのに。
打ち合わせという名目の。
うん、どの辺が打ち合わせやねんけ、5分もやってらんわっていう。
そうね、だから早くね、それも。あ、それもあれですよね、なんか延期されましたもんね、また。
されましたね。
いやまあされるよねっていう感じですよね、ボーダーも開かないのにっていう。
じゃあもうオンラインで遊びまくるしかないですね、もう。
間違いない、ちょっと毎日ゲームしましょう。
開き直って。
開き直って、もうそれがそういうことや、そういうものやっていうことね。
はい、じゃあニュースはそんなところで、今日話したかった内容は、このポッドキャストを始めた理由の一つとして、やっぱり日本に住んでると言語が日本語で、エンジニアのリソースもほぼ日本語のものに限られてしまうところがあるんですよね。
確かに。
で、そうなってくると、例えば海外の有名な人が話した内容とかあんまり入ってこなくて、なんかすごい偏っちゃうんですよね。
間違いない、入ってくるとしても翻訳されてようやくっていう感じがやっぱしますもんね。
その翻訳されるのも本当に一部なので、そういうのが難しいなと思って。
間違いないですね。
で、その中でもポッドキャストとか難しいなって、もちろん聞かないといけないので、日本人は読むよりも多分聞く方が増えてとしてるはずなので。
そうですね。
っていうところで、ポッドキャスト聞いて面白い内容があったので、それを紹介したいなと今回思いました。
どんな内容でしょう。
で、このポッドキャストはすごい有名なポッドキャストなんですけども、Change.logっていうポッドキャストで、この回はですね、今年の1月12日の回なんですけど、
ゲストになんとバーセルの社長のヒエルモさんで、そのタイトルがWhat the web could be in 2021 and beyond。
09:09
これからのウェブどうなっていくのみたいな話なんですね。
バーセルはね、僕の友達が実は働いてて。
はいはいはい。
そうそうそうね。
もちろん中で何をやってるとかそんな詳しいことまでは知らないんですけど、バーセルといったらね、やっぱりNext.jsとかを作って、やっぱりウェブの今の業界の本当に中心にいる会社の一つって言っても過言じゃないかなと思うので。
そこのトップがまさかのこういう形で2021年以降のウェブ業界を語ってくれるっていうので、めっちゃ面白そう。
これは絶対チェックしとくべき内容だと思いますね。
特にウェブ業界の人は。
間違いない。
総評として、もうすごいね、ギエルモンさんはね、哲学的な内容を語ってて。
なるほど。
すごいね、英語もまあ難しいんですけど、専門的な用語もすごい使ってるし、すごい話も抽象的で哲学的で。
いやそうなんすよね。
俺もうこのポッドキャスト一応前半15分くらい聞いたんですよ。
はいはいはい。
そうしたらやっぱりね、このギエルモンさんのところをピックアップして話だけ聞いてたんですけど、やっぱり今のウェブの業界がどう思うかっていう部分だったりね。
そのウェブの業界が今どれだけカオスかというか混沌としているのかっていう部分の説明から入り、それこそ本当に抽象的な部分からね、いろんな話にやっぱり膨らんでっていう感じだったので。
なかなかこう1回聞いただけで全部理解するっていうのは結構難しそうな内容だなとは思いましたけど。
難しいですこれは。僕3回くらい聞いたので。
本当素晴らしい。
ちょっと予定をまとめてきました今回は。
素晴らしい。ありがとうございます。
ちなみになんですけど、バーセルはNext.jsを作っていて、そのNext.jsをホスティングするサービスバーセル、元はZEITっていうサービスだったんですけど、ZEITかな。
名前違ったんだ。
名前変えたんですよね。1年、それこそ去年かな。
この間なんかバーセルAPIかなんか落としてなかったですか?
昨日昨日。
昨日か。ちょっとだけ炎上しましたよね。ちょっとだけ。
僕はちょうどリリースしようとして、管理画面開いたらホームページが動かなくて。
ただその公開されているものに関しては問題がなかったので、おそらく裏側のデプロイとかするところがちょっとエラー出たのかなと思うんですけど。
なるほどですね。
そんなホットな。
ホットな内容で。
バーセルはホスティングするサービスをやっていて、競合だとNetifyとかがあるんですけど、でもやっぱNext.jsを作っているので、やっぱそのNext.jsのパワーを一番発揮できるのがバーセルなんですよね。
それはね、本物ですからね。
そうそう。だからNetifyにもNext.netifyっていうライブラリーがあるんですけど、これを使うとNextの機能がよりよく使えるよってやつなんですけど。
なるほど。
でもやっぱこういうプラグインとかライブラリーをかませないと100%使えないので、Netifyとかだと。
一方でバーセルだと作っているところなので100%使いこなせるので、僕らも去年Netifyからバーセルに変えました。
そうなんですね。ラーメンヒロも。
12:00
そうです。
そうなんだ。ラーメンヒロって裏側っていうかNext.js使ってるんですか?
そうなんですよ。
そっか、前なんかそういえば記事書いてましたね。
そうです。ショピファイを使ってるんですけど、フロントエンドをカスタムで作って、ショピファイのストアフロントAPIを使ってるというヘッドレスコマースという形でやってます。
素晴らしい。あの時初めてヘッドレスコマースという概念自体を知ったからね、俺は。
使ったもん勝ちみたいなのあるんですけどね。
eコマースのヘッドレスかかってなるほど。
そうね。だからヘッドレスとかも今流行ってて、ジャムスタックとかっていう文脈なんですけど、そういう風に引っ張ってるのがやっぱりバーセルとかなんですよね。
なるほどね。というような非常に今のウェブ業界を引いて立つような非常に大きい会社の社長さんが一体どんなことを語ってくれたのかっていう部分なんですが、僕はその問題定義の部分1個ほぼほぼ聞けてなくて、どんな内容でした?
そうですね。まずは何個かあるんですけど、まず彼が言ってるのはリアクトがやったことはすごい画期的だったっていうことをすごい言ってて、リアクトのコンセプトでカプセル化みたいなのができるんですよね。
それは何かっていうと、いろんな機能を中に入れ込んでロジックとかを入れて、そのインプットとアウトプットだけを意識すればその機能が使えるっていうことがリアクトでできるんですよ。
つまりコンポーネント思考なんですよね、リアクトって。
そういうことですよね。
それって今までできなくて、それをすることによって再利用性が上がったりとか、例えばFacebookのシェアボタンとかっていうのをコンポーネント化して、そのコードをポチって入れ込むだけで、そのコンポーネントを入れ込むだけでその機能が使えるってことができるんですよ、リアクトは。
そういうことですよね。
コンポーネント化自体の概念って、ちょっと口挟んで申し訳ないですけど、コンポーネント化自体の概念ってまあまあ前から一応あったっちゃあったじゃないですか、リアクト前からね、それこそ考えても。
例えばログイン機能の一個をフレームワークとして一個コンポーネント化しておいて、いつでも引き出せるようにとかっていうのも、ああいうのも別に概念としては同じなのかなって思うんですけど、リアクトだからカプセル化したし、だからそこが画期的っていう部分ってどう繋がってくるのかなっていうのは一瞬疑問には思ったんですけど。
アンギュラーの一系でもディレクティブスっていうのがあって、頑張ればそういうカプセル化みたいなことはできたんですけど、彼が言ってるのはもっと以前のウェブの内容で、ASML、CSSにJQueryを使ってた時があったじゃないですか。
はい、ありましたね、ライブラリーとしてね。
JQueryっていうのは1ページにイベントをオンしていくじゃないですか、いろいろ、クリックイベントとか、なんでそういうコンポーネント化できないんですよね、難しいですよね。
うん、そうですよね。結局トリガーとなるものがあって初めて機能するものですもんね。
はい、さらに言うと、あとは静的サイトとかっていうのは、ミドルマンっていうの昔あったんですけど、ハムルとかで書けるんですけど。
ハムル懐かしいな。
でもできるのは、コンポーネント化できるのは、テンプレートのとこだけ別に作るみたいなのができるんですけど、JSまで1個丸々パックしてコンポーネント化っていうのはできなかったので。
15:07
なるほどね、なるほどね。
そういうのがやっぱり簡単だったのがリアクトかな。
そういうことですね、それを全部総称してっていう部分で非常に画期的だったと。
はい、もっと言えばリアクトって状態指向でもあるんですよ。リアクトのコンポーネントプロップスっていうのを持っていて、そのプロップスであってコンポーネント内容が変わるんですよね。
だからインターフェースだけ向き出しになってるっていう感じで、そのインターフェースのスイッチをオンオフしてあげると中の機能が変わったりとか状態が変わるんですよ。
だからより使いやすいんですよね。
素晴らしい、それだけちょっと業界を変える画期的なフレームワークだったということですよね、リアクト自体。
はい、なので彼もそれはすごい良かったと言っていて、おそらくそれがあったのでNext.jsにリアクトを採用してるんだと思います。
うんうんうん、なるほどね、なるほどね。
なんですけど、もう一人女性の方も喋っていて、あまるさんかな。
あまるさんですよね。
彼女が言ってるのは、リアクトは良かったけども仮想ドームはいらなかったんじゃないみたいなことを言ってて。
なるほどね。
この話も結構賛否あると思うんですけど、仮想ドームを導入したことによって、今までHTMLのツリーを計算しなくちゃいけなくて、それがすごい計算量がかかったんですよね。
で、それを仮想にドームを持つことによって、JSの内部だけで計算できるようになったんですよ。
で、その計算結果を最後にボツッとHTMLに反映してあげるだけなので、というのがリアクトのもう一個良いところだったんですよね。
ただ、その代わり仮想ドームを持つので、皆さん多分ご存知だと思うんですけど、リアクトとリアクトドムっていうライブラリーを入れないといけなくて。
まあね、一個かまさなくちゃいけないから。
それが結構重いんですよね、サイズ的に。
初期のリアクトとかさ、結構持つたりしたイメージ正直ありましたよね。
多分それは通信量がまだ3Gか。
あったようなイメージがある。最初だったよね、本当に。
多分LTEの前とかの時とかは通信量っていうのがすごい大事だったので、それは重かったなと思いますね。
特に最初のロードですね。
なるほどね、なるほどね。
なので、今のスベルトとかっていうのが出てきているので、もしかしたらそこに置き換わるのかなと、僕個人的には今は思っています。
そういうことですよね。
このアマルさんっていう方、Twitterとか見る限りですけど、JSパーティーとかっていう、あれだよね、団体に多分属している方みたいなイメージなのかな。
いろいろやられてるみたいですね。
PMJSとかGDGとか、すごいいろんなオーガナイゼーションにいるなみたいな。
多分インフルエンサーなんでしょうね。
非常にいろんなことをされている方かなと思うので、背景によってはリアクトドームとかそっちの方に対してマイナスイメージを持っている背景にいるのかなってちょっと思いましたんだけど、そういうわけでもないのかな。
こういうのは思想なので、どっちがいいとかっていうのは見るのはすごい難しいんですよね。
いいとこもあれば悪いとこもあるよみたいな感じなので。
確かにですね。
18:01
先に言っていたのが、今ジャムスタックっていう言葉があって、ご存知ですか?
そうですね。ちょっと前からよく聞くようになったんですけど、概念としては一応理解しているつもりなんですが、詳しくは全く知らないですね。
僕はジャムスタックってなんとなくふわっと理解したつもりだったんですけど、
エルモさんが言っていたのは、ジャムスタックっていうのは静的、動的ではない静的に書き出したものをCDNを通して配信しているものがジャムスタックらしいです。正確に言うと。
CDN返したら別になんでもジャムスタックになるっていうこと?
この内容ではそう言っていて、静的であることとCDNを使っているということみたいですね。
うちのサイトとかもCDNのベースで画像認識、画像とか全部書き出して読み込ませているけど、一応ジャムスタックになるんですかね?
静的かどうかはワードプレスですか?
ワードプレスですね。
ワードプレスは動的に書き出しているの?
普通に動的に書き出しているだけだもんね。一昔前のMTみたいなのやってたらそうなるのか。
ムーバブルタイプですか?
あれはクッソ懐かしいけど、静的HTMLとしてサーバー上に置いておいて。
毎回変更のためにビルドが必要だったんですか?
ビルドが必要で、裏側CGIだったしあの時代って。
それも似てると思います。彼が言っているのは、今までってSPAとか、その前も例えばRuby on RailsでVueをレンダーしたりとかって結構動的なのが流行ってたんですけど。
そうですよね。
最近の流れで言うと、全部静的なHTMLを作ってそれをCGIに乗っけるみたいなのが主流になってきてますね。
サーバーサイドレンダリングは今まであったようなRuby on Railsみたいな感じで、
一リクエストに対して何かを返したりする、動的に。
そうですよね。
そうなんですけど、SSGっていうものはビルドの時に全ページをバッと作っちゃうんですよ。
なるほど。
で、それを全ページをCGIに乗っけてくる感じなんですよね。
なるほどね。CGIに返してるから表示も非常に早いし、読み込みも早いしってそういうイメージってことですよね。
そうです。
なんか一昔前に戻ったのかなっていう気がするけど。
そうなんですよね。今だと両方のハイブリッドな動的であり静的であるような機能もNext.jsは持っていて、そういうこともできるんですよね。
静的であり動的でもあるっていうのは、一部の機能は例えば静的で吹き出しておいて、CGIに乗っけておいて、
動的に吹き出さなくちゃいけない部分を切り分けて考えることができるみたいなそういうイメージですか。
そうですね。それはSSGの次の機能なんですけど、ISRっていう機能がありまして、インクリメンタルスタティックリジェネレーションっていう機能があるんですよ。
ISRっていうのは実はそれの言いとこ通りみたいなことをしていて、基本的にはSSGと同じで静的サイトをCDN上にCDNで配信してるんですけど、
例えばブログの内容変えたとするじゃないですか、そのページの。
そしたらSSGだともう一回ビルドするまでその内容って変わんないんですよ。
21:03
なんですけど、ISRの機能を使うとその内容をサーバーがキャッシュしていて、例えば10リクエストごとに内容をまた見に行くんですよ、変わってるかどうか。
変わっていたらそのページを書き出し直すっていうことができるんです、裏側で。
それはサーバーサイル上でやるので、もちろんバーセルとか使ったらそれもすごいシームレスで勝手にやってくれるんです。
へー、すごい、なるほどね。
だからもうほぼ静的なんですけど、ほぼ動的っていうことが今できるんです。
なるほど、面白いですねそれ。だから静的であったことのメリットっていう部分で結局その読み込み速度だったりキャッシュとして残せるだったり、
そういった部分を動的な扱いもちゃんと裏側でしながら実現することができるっていう。
もう話だけ聞いてるともうこれ以上ないよねっていう状況ですよね。
ただそこは正確性とのトレードオフで、10リクエスト後に確認とかになるんで、
必ずしもその内容を変えた次のユーザーが新しいところを見れるかどうかわかんないんですよ。
それはでもブログで例えば例えるのであればなんか記事を編集して画像乗っけてとかってして、
10リクエストごとってリクエストってアクセスされた回数も含むのか。
ということがなるほど。じゃあ更新ボタン押しましたって言ってすぐに変わってるかっていうと、
それはキャッシュのリクエスト数によるよねっていうふうなイメージってことですよね。
だから本当にクリティカルなところだとそれは使っちゃいけなくて。
キャンペーンサイトとかダメだよね。
お金が関わることとか、プライバシーに関わることとかだときついから。
間違いないですよね。
それはサービスの性質に合わせて、そのときは完全にSSRを使えばいいんですよ。
そうですよね。もう完全にそれを同期させてしまってっていう話だもんな。
僕らはeコマースやってて、eコマースってそこまで内容とかちょっと変わってもまだ大丈夫かなみたいなところもあるので、
僕らはそれを良しとして許容して使っています。
なるほどね。eコマースの種類にもよるのかな。
例えばeコマースは言わないか、ホテルのブッキング系とかそういうのはクリティカルだよね。
そうですね。
面白い。確かに時と場合に応じてっていう形で使い分けを考えないといけないってことですね。
でも選択肢がSSRもあるし、SSGもあるし、ISRもあるっていうのが結構面白いところだと思いますけどね、今の世の中で。
これらの使い分けをちゃんとできるエンジニアっていうのが今後必要とされると。
間違いないよね。
僕eコマースやってますけど、例えばAmazonがSSGやるっていうのは絶対無理だと思うんですよ。
意味わかんないことになるよね。
だってページ数何万で多分あるじゃないですか。
間違いない。
ビルドの時間もめっちゃ早いだろうし、そのキャッシュもめっちゃ大きくなるだろうし、
ただ僕らみたいな商品数が常に10個くらいしかないところだと相性はいいんですよね。
なるほどね。面白いな。
本当にサービスの質に応じてっていう形で、そういう話がちゃんとできるエンジニアさんじゃないときついなと思う。
24:00
そうですね。あとは入った会社が最初から違うことをやってるとかもあると思うので、
それを変えるのってやっぱり難しいじゃないですか。大きいシステムとかだと。
確かにね。ある程度スタートアップ色の強い会社じゃないときついかもしれないですよね。
でもまあやっぱりそうだよな。実際でもそれをラーメンヒーローみたいなところでも決めることができるっていうのも流石でもあれですね。
臨機応変感があるっていうイメージがやっぱりしますよね。
そうですね。やっぱりその辺ですよね。サービスとビジネスの観点からどういう技術を使うのかっていうのが本当にこれから求められることだと思います。
なるほどね。だってラーメンヒーローは仮に今後の、ちょっとこんな話をしていいのかあれなんでもしよかったらカットしてほしいんですけど、
ラーメンヒーローが仮に例えば商品数を一気に増やすみたいな方向性でビジネスをかじ切ったとしたら、
ある程度今回の仕様変更っていう部分って足引っ張ることになったりするのかなと思わなくもなかったんですけど、別にそういう予定は今後ないっていうふうなイメージですよね。
しかもね、多分それって満ぐらいがないとなのかなと思っているので。
ああ、まあそうか。結局キャッシュのリクエスト数の部分とかがネックになるかならないかっていうのは全然先の話ってことか。
はい。だからどちらかというとマーケットプレイスとか、こういうオリジナルブランドだとあんまり関係ないかなと思うんですけど。
そういうことね。そんなことよりもユーザビリティ優先した方がいいよねっていうことで。
はい。これもトレードオフなんですけど、とにかく僕は今までSSGを使っていて、
マーケーの方とかが変更するためにビルドしてくれとか言われて、ビルドを僕ポチンと押したんで、それよりは同期的に変わってくれた方がいいなと思って。
なるほど。
ウェブサイトのスピードも早いまま。
まあそうですよね。特に意思決定早めなくちゃいけないスタートアップだと、その1個の流れ、なんか間自体もめんどくさいっちゃめんどくさいのか。
そうそう。だから何かあったときにやるっていうのが一つの案かなと思いますね。
素晴らしい。その素晴らしい提案を大島シュニアリードエンジニアさんがやったと。
ああ、そうです。そういう内容を書いたので、ぜひ記事を読んでください。僕の。
素晴らしい。俺1回読んだんだけどな。あんまり理解してなかった。
ちょっと待って。ISRとか書いてるはずなんだけど。
ごめんなさい。
まあそういう世の中になっていると。さらにアマルさんが言ってたのは、ツールとかも大事だよねっていう話をしていて、そういうふうにNext.jsとかってAll-in-Oneに結構いろいろ入っていて、
例えばみんな嫌いなWebpackの設定とか、その辺しなくてもいいんですよね。あとTypeScriptの設定も自動でやってくれますし。
Webpackから開放されるのが大きいよね。
だから本当はブラウザがもっと進化して、みんなもっと嬉しい標準のツールを使えればいいんですけど。
間違いないよな。パッケージング系のそういうシステムは今もう混在しまくってるし、わけわかんないですもんね。
もっと言えば、やっぱりレガシーなシステムとかも作ってる人たちもいて、そういう人たちのいわなりにグラントとか覚えてますか?
27:04
グラントとかガルプとかその辺の時代でしょ。
で、ビルドしてる人もまだ全然いると思うので。
間違いない。ガルプは俺未だに結構聞くけどね。
やっぱりそうですよね。全然みんながみんな新しいものを使ってるっていうわけじゃないと思うので。
間違いない。懐かしいな。ちょうどそう、だって俺がWeb業界抜けたというか、この業界抜けたときもちょうどその時期でしたもん。
ガルプとかグラントとかそういうパッケージングで開発環境を整えようぜが、全部はWebpackに統一された時代で。
そっから経緯に本に移ったから。
他にもね、周辺のツールとかいっぱいあるんですけど、その辺が揃うことは重要だよねって言ってて。
たぶんWebpackだって今後ずっとあるわけではないと思うので。
そうですね。そうだよな。
それだからあれですよね。あのポッドキャスト上で結構前半の方で、バーセルの社長さんもずっと嘆いてた部分ですよね。
めちゃめちゃカオスじゃねえか、今の状況って。どう思う?みたいなね。テリブルだよねっていう話をね。
またちょっと別のトピックになるかもしれないですけど、そのアマールさんが言ってたのは、
彼女出身がそこなのかわかんないんですけど、インドとかって電波がまだまだないところ、電波が悪い地域がまだいっぱいあるよねって話してたりとか、
あとデバイスの性能が悪いところ。
例えばiPhoneだと数百ミリセックでできる処理を、このXiaomiの安い端末とかだと20秒くらいかかるとかっていう。
なるほどね。
そういうことも考えていかないといけないよねっていうのはアマールさんも言ってました。
すごい。この人アフリカ系でニューヨーク育ちでドバイかなんかにも行ったことがあるみたいな感じか。
なるほど。
いろんな場所で結構活躍されていた方だからこその視点っていう感じですよね。
そうですね。ほとんどのスタートアップというかサービスは国に依存してるんで考えなくてもいいんですけど、
TwitterとかFacebookぐらいまで大きくなると本当にいろんな地域で使われるので、そういうところまでケアしないといけないですよね。
いや間違いない間違いない。ビッグカンパニーというかビッグテックだからならではの悩みかもしれないけれども、大きいとこですよね。
昔の話で言うとTwitterがPWAでめちゃくちゃ軽いやつを作ったっていうのは昔ありましたよね。
ありましたね。
思った以上にPWAが流行らなくて。
そう?GoogleがPWAの専用サイトとかそういうのも作って、PWA一番最初に提唱したのはGoogleだと思うんですよね。
あの時から結構周りだとね、すごいもてはやされていたというか、名前もずっと低いなって。
PWAベースでちゃんと理解をしているエンジニア、デザイナーが欲しいみたいな話っていうのは結構俺の周り実は4年、5年くらい前から多かったですけどね。
なんかね、多分4年前くらいに僕もコンセプトが出た時に、これ絶対来るじゃんと思って、やっぱりみんなってアプリダウンロードしたくないし、
アプリの容量も重いじゃないですか、それよりはウェブベースでアプリが流行るのかなと思ったら、意外と前なんですよね、実は。
30:02
確かにね、いまだに結構アプリ開発したいですって、ネイティブバリバリで書きたいみたいな人も何だかんだ言って多いし。
今流行りのクラブハウスとかも、やっぱりiOSだから流行ったのかなとは思いますけど。
そうですよね。だからもうPWAでやっておけば両方すぐリリースできたんじゃうのみたいな。
でもPWAだとアップストアで探すっていう作業が実はもうみんな慣れてしまっていて、アプリ取ればいい、クラブハウスで検索したらいいよみたいなアップストアで。
っていう方が実はもう楽になってきてるのかなと思うんですよね。
なるほどね。だから慣れこそ最大のユーザビリティってやつですよね。
そうなんですよ。だから昔とかだと、僕が最初に働いた時、2012年ぐらいになって、やっぱりみんなアップストアでアプリを取れないから、そこをどうするかみたいな施策とか考えたんですよ。
マジで?そんな時期あったんですか?
でももうね、さすがにみんなその辺を学習してみんな取れますよね、アプリぐらいは。
その時代でちなみにどうしてたんですか?
アプリ出してましたし、さらにそのウェブ版でも出したので、多分まだウェブの方が主流だったんですよね。
っていう感じで、後でギエルモさんが言ってたのは、ウェブバイタルスっていうのがあるんですよ。ご存知ですか?
ウェブバイタルス?ごめん、聞いたことないわ。
今後のウェブサイトの指標になるものなんですけど、これが本当によくできてるっていうふうに彼は言ってて、
Googleが2020年に発表したウェブページに対してのUXの指標です。
今後この指標がGoogleのSEO検索ランキングに影響してくるかもしれないと言われています。
マジか、やば。これは追いかけないとあかんやつ。
指標は3つありまして、LCP、Largest Contentful PaintとFID、First Input DelayとCLS。
Fumulative Layout Shiftっていうことですかね。
これ面白かったのは、なんとなくLargest Contentful PaintとかFirst Input Delayとか分かるんですけど、
今までもこういうのあったと思うんですけど、なんでこれ大事かっていうと、いくらCDNを使ってHTMLが早く入ってきても、
その後に、例えばFirst Input Delayはユーザーがアクションするまでの時間なんですよ。
そのページのボタンを押せるまでの時間なんですよ。
いくらCDNでHTMLが早く入ってきても、その後操作できなかったらいいUXって言えないよねっていうのがこのFIDなんです。
ちょっとじゃあ一つずつ説明していきますね。
LCPはページ内のメインコンテンツが表示される速度を測る指標。
これはまあ昔からあるものですよね。
そうですね。画像とか動画とか表示されるまでの時間。
FIDがユーザーアクションに対する応答性を表す指標。
ユーザーが最初にページ内でアクションを行った際にブラウザー反応にかかった時間。
クリック、タップ、テキスト入力などっていうのをユーザーのアクションに対してあまりノロノロしてリアクションしちゃダメだよって話か。
33:02
そうですね。特にJavaScriptとかReactで作られているものってリンクとかがオンクリックイベントでできたりするんですよね。
そのオンクリックイベントの中でめちゃくちゃ遅い動作があったら、この仕様が悪くなりますね。
そうですよね。さっきのReact DOMなんかの議論にもちょっと通ずるところはありますよね。
これは押してからなので、そっちは多分LCPだと思いますね。
なるほどね。そっちのほうになってくるのか。
そうなんですよね。LCPに関してはコンテンツがロードされて、例えばJSをパースしたりとかJSをパースしたりとかしてブロッキングされたりするので、この辺ですね。
最後のCLSっていうのは結構面白くて、これは何なのかっていうと、ページの視覚的な安定性を数値化した指標なんですけど。
それの意味が全くわからない。
面白いなと思ったのが、ユーザーが意図していたようにレイアウトのずれがどの程度発生したかを測る指標なんですよ。
なにそれ。CSS上のレイアウトずれとかをこれが勘定するのかな。
あとね、これ例えばページに遷移した時にボコってずれる時とかありません?上に要素が実はあって、それが読み込み中でそれが表示されて最初の認定されたコンテンツが下にボコってずれるのとかあるじゃないですか。
よくありますよね。カラムがずれてたりとかそういうやつでしょうね。
そういうのです。あとは例えばボタンを押した時にAJAX通信をしてエラーを出したりとかしてボコってずれたりするんですよね。エラーのメッセージがいけいけ出てきて。
はいはいはいはいなるほどね。
これまじか。そんなところまで見るようになるの?視覚的な安定性を数値化してそれがじゃあいいからじゃあ何?っていうイメージも正直あるっちゃあるんですけど。
まあ無駄な広告とか出せない男なんじゃないかなと思いますけど。
広告に対して言ってる話なのであれば全然それは意図できるというか、なるほどねっていう風には思うし。
あとは文中に重い画像が入っていて読み進めていったらいきなりそこがボコってずれて違うページに行ったりとかするのはありますよね。
じゃああれなのかな。昔流行ったじゃないですか。大きい大手メディアとかのウェブサイト上で広告が画面いっぱいに画面上が動いてヘッダー上が例えば下にずれてて。
はいはいはい。
広告がボーン出てきてガーン出てきてみたいな。
パララックスみたいなやつですか?
パララックスの進化版みたいな。ああいうのもダメになるのかな。
そうですね。厳密に言うとずれなければいいってことなので最初からそのスペースがあって移動しなければいいとは思うんですけど、この指標に関しては。
いやーまあ難しいよなこれの概念。パララックススクローリング全滅じゃねって俺はちょっと一瞬頭の中では思ったんですけどそういうわけでもないのかな。
この指標がねすごい大切になってくるので僕ももう少しこういろいろ試してみてサンプルのウェブサイトとか作ってどうなったらこう影響出るんだろうとかっていうのを試してみたいですね。
なんかあれですねCore Web Vitalsのチェックツールっていう部分もなんかいろんなところで提供し出すっていうことらしいので。
ちなみに多分バーセルにバーセルアナリティクスってあるんですけどそこで指標が見れたりします。
36:00
素晴らしいバーセルはちゃんとそういうところまで意識ちゃんとしてますよすでにと。
有料オプションなんで。もしかしたらこれありなのかな。千年で言ったのかもしれないんですけど。
なるほどね。お前らこれめっちゃ大事やからバーセルちゃんと使えよみたいな。
なるほどね面白いな。でもなんかデベロッパーツールとかでも提供するみたいですね。
そうですね今までもライトハウスとかいろいろあったんですけど正式にこれが大事だよって言い始めてきてるのでここは絶対マストで意識した方がいいなと思いますね。
じゃあ引き続きサーチコンソールもそうだしちょっといろんなところをチェックしてウェブサイトの機能向上に努めましょうと。クオリティ向上か。
なるほどな。
そうなんです。だから彼が言ってるのはJAMstackとかで静的でCDNで配信は早くなりましたよね。それで本当にUXとか向上してないですよっていうのを見たかったんですよね。
なるほどね。
例えばウェブサイトリニューアルしますっていう会社でアイデアが出てじゃあ今流行りだからSSGしましょうとかNext.jsにしましょうとかJAMstack使ったら早いですよっていうのは間違ってるってことです。
なるほどね。ちゃんとサービス全体の意図とそれこそ媒体のバランスとっていうのをいろいろ見てちゃんと判断しましょうねっていう話をちゃんと判断できなくちゃいけないよってことですね。
そうね。昔ってこういうUXとかがSEOのランキングに影響してくるとかってなかったのでよくはなってるのかなとは思うんですけど。
だって言うたらですよね。ページ速度とか表示速度なんかが検索結果に影響しますよしますよって言われたのも多分言うて数年以内ですね。
そうですね。確かに。
だからそんなここまでやっぱり劇的に変えるってくるスピードがすごく早いなって感じるからGoogleもだいぶ本腰入れだしたっていうことかもしれないですね。UXの方に対して。
そうですね。最後にエクストラの話なんですけどタイプスクリプトいらないんじゃないかってアマールさんは言ってて。
それだいぶ喧嘩売ってますよね。いろんな人に。
アマールさんは結構主張が強い人だと聞いてて思ったんですけど。
なるほどね。
でもこれもすごい理由があって今ダイブスクリプトをやることで型をめちゃくちゃ作ったりとか管理するの結構コストがかかるんですよタイプスクリプトって。
特にストリクトモードとかっていうのもありますし。
そうなるとそれを作るのが仕事みたいになっちゃうところもあるんですよ。
そうですね。もう今標準化しちゃってますもんねタイプスクリプトで書くっていうことがほぼほぼ。
なのでタイプスクリプトもレベルあるんですけど本当にただ型のアシストだけ使うのともっともっと難しい型の機能とか使ってやるっていうのもあるんですけど。
その後者になってしまうとそれが仕事になってしまって本来の目的であるサービスの質を変えるとか改善するっていうのが遅くなったりとかそこにフォーカスが当たらなくなるのは懸念してました彼女は。
39:00
なるほどね。書き方云々とかそういうことでちょっと時間採点じゃねえぞと。もうちょっと本質的なところを見ろと。
特にすなさんもお分かりの通りエンジニアって懲り性なんで。
いや間違いないですよねそれは。
僕もだからたまに型とかで1時間ぐらいを考えたりとかもする時もあるんでこれはいかんと思うんですけどね。
面白いな。教えることはでも一理確かにあるところですよね。
そうそうだから穴勝ち間違ってはいないんですけどいっぱいベネフィットもあるんでタイプスクリフトは。
そうですよね間違いない。そうなんだよな。実際だってもう今JS書くっていう風に言ったらタイプスクリフト書けないとそろそろ就職できないんじゃないかって思うくらいのとこ来てますもんね。
そうですよね。ほとんどもうほとんどじゃないですか最近はやっぱり。
っていうところにちょっと一石を投じる発言ではあったけれどもこんなねめっちゃ大役の場でタイプスクリフトはいらないんじゃないか。
まあそうねまあなるほどね。もともとでもそれさフレームワークもそうだし書き方もそうだしバニラ以外が全部撲滅すればいいみたいなやっぱり思考のエンジニアさんもやっぱりいますしね。
なるほどね。
基本的にはやっぱりサラで書いてあんまりそのなんか凝ったこととかそういう便利機能とかっていうのを入れるよりも本質的なところに目を向けてっていう風な話をする人はね。
まあ一方でやっぱ正しいと思うしね。
そうですね。もちろんねNext.jsとかってすごい簡単ですけど裏側の全部知っている人なんていないですし使ってる人で。
いやー間違いない。
その状態で使うと例えばバグとか起きた時に多分手も足も出ないってことになりますよね。
間違いない。それはでも昔から言われてますよね。フレームワーク以前でライブラリーとかが存在するときからずっとそういう話聞くし。
そんな中今WebアセンブリーっていうのがあってWebアセンブリーっていうのはWebで実行できるコードをバイナリデータをWebが読み込んでそれを実行できるんです。
JavaScriptじゃなくて。なのでJavaScript嫌いな人がすごい多いんだよ世の中に。
なるほどね。
だからそういう人が好きな言語を選んで何でもいいですよGoとかRustとか今だとあるんですけど好きな言語を選んでその自分の好きな言語でWebの開発ができるっていうのがWebアセンブリーの期待されているところですね。
バイナリーにさえできてしまえばどの言語でもいいと思います。
面白いですねこれ。C++とかそういうのもWebアセンブリーに考え直すことができるって話ですもんね。
そうそう。
RustだったりとかJavaScript APIももちろんそうだし。
ずっとやっぱこのWebエンジニアっていうのはJavaScriptに今までずっと縛られてきてしまっているのでJavaScriptも良くないところもいっぱいあるのでそういう人が自分の好きなRustとか新しい言語で書けるのがいいところですね。
ほとんどのブラウザーが対応していてI11以外対応しています。
ほぼほぼ全部ってことですね。
そうですね。
だから僕とかは前思ってたのはGoRangとかすごいシンプルで好きな言語だったのでGoRangのリアクトみたいなフレームワークができて実際にみたいなのがあるんですけどそういうの流行らないかなと思ってたんですよね。
なるほどね。
でも素晴らしいことですよね。
そういう自分の好きな言語好きな媒体もしくは好きなプラットフォーム上でいろんなものをやっぱり開発進めることができるっていう風になればそれはエンジニアよりこれに尽きるというかそういったイメージがあるので是非ちょっと進んでほしいなと思うけど。
42:05
ただこれって実装は進んでいる割には周りでまだ開発実際にやってますっていうのってあんま聞いたことない気がするんですが。
そうですね。僕も聞いたことないな。
実際なんかあるんですかね。サービスこれはWebAssemblyベースで作りましたよとかって。
あるんじゃないんですか。僕知らないような超マニアックなサービスとかありそう。
でもやっぱりそういうマニアックなとこに限定されるってことだよな。
あとはあれですよね。チームとかもともとC++書いてるチームがWeb書きたいときに。
そうかそうかそうかそういうのは確かにね。
新しくJavaScriptを学んだりするよりはC++で書けたりするっていうのはいいかもしれないですね。
これでもどうなんだろうな。今大手とかそういうなんか主要なところがこの技術使ってないっていうことで言うんだったらなんかやっぱり大きい穴があるのかなって勝手に思っちゃうんですけど。
多分ラストのWebAssemblyが一番進んでると思うんですけど今のところ。ラストの中はめっちゃ難しいらしくて言語自体が。
いい言語だっていう評判はすごい高いんですけど、そこに行ってる人が少ないっていうのがあるかもしれないですね一つ。
あとはやっぱりリアクトみたいなデファクトスタンダードみたいなライブラリーが出てないのかもしれないですまだ。
なるほどなるほど。でもあれか一応勧告されたの自体は2017年以降っていうことだからまあまあ時間は経ってるのか。
2015年、違うそう最初の勧告アナウンスが2015年か。結構時間経ってますねそうすると。
あれWebAssemblyのこの話ってその今回のポッドキャストの人が話してたんですか?
そうですねなんかタイプスクリプトの流れでタイプスクリプトを使ってWebAssemblyにするツールがあるよみたいな話をしてました。
なるほどねなるほどね。
という感じですかねまあだから今年はWebVitalとかが大事なんじゃないですか。
なんかすごいちゃんとしたまとめになっているような。
WebVitalはでもこれが本当に検索結果に直結するって言うんだったらぶっちゃけうちもちょっとそれなりに考えないとだと思うし。
ああそうですよね。
間違いない。ちょっと前は本当にね読み込み速度とかのことだけ考えたらよかったからもう本当にメディアだけCDに貸しといたらそれで良いんちゃうみたいなそんなレベルで考えてたんですが。
もしもこのWebVitalっていうのがちゃんと演出しなくちゃよってことになったら速度だけじゃなくってそういう本当にUX全体を考えたウェブサイト設計しましょうねっていうのが指標になると思うから。
でもそれのいいところは実はちゃんとユーザーのことを考えていてもちろんその3つの指標が良い方がユーザーにとってはいいじゃないですか。
それはなんか倫理化になっているので僕は割と気に入りましたね。
こんな感じですかね。
なんかねフォトキャスト結構ちゃんと聞くと面白い内容とかあって掘り出し物のエピソードとかもあって僕も実際次聞きたいやつとかもあるんですよ。
その内容結構面白くて。
JS Partyっていう内容の162回なんですけどAre Web Apps Fundamentally Different Than Websitesっていう内容なんですよ。
45:00
だからそのWeb AppsとWeb Sitesの違いは何なんだみたいな議論で。
ああちょっとそれは面白そうですね。
そうそうそうこういうの面白そうだなと思った。
いや間違いない。あれじゃないあのウェブデベロッパーとウェブエンジニアとコーダーとの違いみたいなそんなイメージが頭をちょっとよぎったけど多分そんな低次元な話じゃないんだよね。
チラッと聞いたんですけどなんかGitHubはウェブアップだみたいな話なんかチラッとしてて。
まあまあ純粋にウェブアプリじゃないのって思っちゃいますけど。
とかなんかもう一人の人は静的サイトはなんかウェブアプリじゃないとかなんかそんなようなことも言ってて。
なんかもうごくごく当たり前の話に聞こえるんだけどそれがもっと深く聞けるんですかねこれ。
僕もちゃんと聞いています。
という感じですかね。じゃあ今回は前半はカナダのバンクーバーのコロナによって今どう規制されているかについて話しました。
後半はバーセルCEOのディエルモさんがウェブの2021年についてどう思っているかについて話しました。
はい素晴らしい内容だったと思います。
はい楽しかったです。
楽しかったですね。
ではまた次回よろしくお願いします。
はいよろしくお願いします。
