YT YouTube2Text

YouTube2Text → Transcripts → Unleash Next.js - LayerX Web Frontend Night

Unleash Next.js - LayerX Web Frontend Night — Transcript

by LayerX 公式 · 2,359 words · 2,359 segments · language ja · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00え時間になりましたので始めさせて
0:02いただきます皆さんあのおみいただき
0:04ありがとうございますそれではじゃあ
0:06えっとレアXWeフロンドナイト始めて
0:09いき
0:10ますえっと本日司会えっとやらせて
0:13いただきます松本俊と申しますと2022
0:17年2月にリアクに中途入社しましてえっと
0:20暴落シリーズの開発をやってます初の司会
0:23であの非常に今日緊張しているんですが
0:25はい皆さんよろしくお願いいたします
0:31はい簡単に会社紹介えっとちらっとさせて
0:33くださいえっと私レアXえっとこちら
0:38ミッションにえっとはいやっておりまして
0:42えっと何をしてるかってところなんです
0:44けれども主に3つ事業やっておりまして
0:46主にその暴落事業ではえっと経理やバック
0:50オフィス向けにえっとサースのプロダクト
0:52を展開しており
0:54ますはいで今回のイベントについてえ簡単
0:58に説明ですとそもそもなんでこのREX
1:01WEBフロントエンドナイト始めたの
1:03かっていうところなんですけれども2点
1:04ありましてREXの行動指針の中にベッド
1:07テクノロジーと得ってものがあるんです
1:09けれどもまこの観点からえっと定期的に
1:12イベントを活動することによってえっと
1:15フランドの裾を広げていきたいっていう
1:17ところとあとはそのどのように技術を活用
1:20して価値あるプロダクトを作っているの
1:22かっていうところをリアXだけではなく
1:24社会の方交えてえと知見を共する場合が
1:26欲しいなというところでこのイベントを
1:28作らせていただきました
1:30で今回のテーマなんですけれどもと
1:32アリッシュNEXTJSというところで
1:34えっとNEXTJSを取り上げてと各社
1:37どのようにこのNEXTJSをサダー限
1:39活用してるのかっていうところをえっと
1:41今日は深かっていければなと思っており
1:43ますはいで今回のイベントのお願い4点
1:47ありましてえとイベントのハッシュタグは
1:49とREXアワフロントエンドですで感想や
1:53コメントなど是非ハッシュタグをつけてX
1:55などに投稿いただけると嬉しいですまたと
1:58えっと登壇者の絵の質問もXでこちらの
2:02ハッシュタグでえっと投稿いただければ
2:05えっと後半のパネルディスカッションの際
2:07にと拾わせていただきますで会場について
2:10はえっと通路中央にトイレがあるのとと
2:12WiFiはえっとこちらになっていますし
2:14あと後ろのホワイトボードにも一応ID
2:17パスワード記載がありますあとま今後
2:20イベントをやっていく中でま継続的に改善
2:22できればなと思っておりますので
2:24アンケートの回答も後ほどご協力お願い
2:27いたしますお願いいたしますはい
2:30度です
2:32ねはい本日のタイムテーブルこちらで
2:35えっと20時までえ各登壇者様の発表が
2:38あり休憩挟んでパネルディスカッションで
2:41アンケート挟んで最後懇会の時間にさせて
2:44いただき
2:44ますはいでそれではじゃあイベント始まり
2:47ますよろしくお願いし
2:57ますえっとめ
3:00のプレストさんのNEXTJSのページ線
3:03を重力の止めるよろしくお願いいたします
3:30えっとえ初めましての方もえっともしご
3:34存知で見てくださってる方もえっと
3:37プレストですよろしくお願いしますえっと
3:39ネキストJSのページ遷移を全力で止める
3:41という発表をさせていただきますよろしく
3:44お願いし
3:47ますちょっとごめんなさいあのスキップし
3:50たスライドが入るという不具合を起こして
3:52しまったんで申し訳ないです
3:55えちょっと待ってくださいねや
4:04表示がフルスクリーンにならないと
4:07いうどしてこれが表示されちゃうの
4:13だろうこれかあごめんなさいえ指定しまし
4:16たえっとプレストですでえっと私はえっと
4:19請求所受け取り仕訳というチームにいまし
4:22てあのエンジニアをしてますえっとそれは
4:24えと経理の方が利用するプロダクトなで
4:27それの開発をしてまして
4:32あなるほどごめんなさいちょっと手って
4:37しまいましたがえっとそしてフロント
4:39エンドでえっと主にえっと開発しています
4:42けどま全部やるようなそういうタイプの
4:44エンジニアですえちなみにえっとシミは
4:46主に写真とスプラトゥーンと子供と
4:49出かけることなんですけどあの写真は
4:51ちなみにこの背景のこんな感じのったりと
4:53かしますでえっと爆というかまってなんか
4:59あのイメージ的にちょっとヌクスとかビュ
5:01のイメージ強い方もいらっしゃるじゃない
5:02かなと思いますえっとですけどネキストと
5:05いうのはえっとそうですね新しい
5:08プロダクトにおいてはリアクトとか
5:10ネキストJSをま採用していたりもしまし
5:13てでえっとこれまでネクソで作ってきた
5:16アプリも将来的にネキストJSにあの移行
5:18することを検討していたりとかします
5:21で私たちはですねあのフロントエンドの
5:25えっと環境をまよくしていってえっとなん
5:29ですかねも楽に快適にワクワクする体験を
5:31まユーザーないし開発者に届けていきたい
5:34んだというようなそんなビジョンを掲げ
5:36たいかもしていますでそこの中でもですね
5:38えっとベッドテクノロジーというものに
5:40触れていましてまあのそうですね技術に
5:43投資してあとより良くするまそういう観点
5:46からまリアクトを使ってまあの採用して
5:49よくしていきましょうというような流れが
5:50えっとあったりとかしまし
5:54たでちょっと話急にごめんなさいがらりと
5:58変わるんですけどもあのあの皆さん保存さ
6:01れませんけど大丈夫ですかダイアログって
6:04実装したことありますちなみ
6:08に1/3ぐらい1/4ぐらいそうすよね
6:13あのある人はあると思いますあの変更の
6:17保存漏を防ぐUIというわけなんです
6:20けれどもえっとまこの主にこの2つに分け
6:23られると思っていて片方はあの勝手に保存
6:26してしまうあの自動保存とか下書き保存の
6:28ホルダに入とかなんかそんな感じのもので
6:31もう1つはこの今出した確認ダイアログ
6:33ですねでえっとまククってただあのB
6:37tobのサズなのでまあの例えばその申請
6:41とか財務情報みたいなあの保存し忘れまし
6:44たとかあの意図せず保存してしまいました
6:46みたいなのが発生するととても困るような
6:49まそういう情報を扱っていることもあり
6:51ますとまそういうようなあのBBのサスで
6:54はですねこの確認ダイアログの実装って
6:56いうのはまちょっと逃れることができない
6:58運命なのかなと私はえっと思ってい
7:01ますででちなみに実装したことある方あの
7:06にお聞きしたいんですけど戻る進むボタン
7:08でもこのダイアローグちゃんと出せてまし
7:10たかって
7:12いうあの質問をさせていただきたくてで
7:16なんでそんなこと聞くかというとですね
7:18ネキストジスでこれをやるのめちゃくちゃ
7:21めっちゃくちゃめんどくさいと私は思って
7:24いてであの実際あのNEXTJSのッ見に
7:29行くとですねなんかあのフィーチャー
7:31リクエストとか言いながらあのいやあの
7:33ページルーターでページ000のイベント
7:35欲しい欲しいんですけどできないですかと
7:37かアップルーターであのページに止めて
7:39くださいみたいなそんななんかあの
7:42ディスカッションができていてなんか
7:43すごいアプボートもいっぱい溜まってるん
7:45ですけどなんかあのここのスレッドの中で
7:47はですねなんかオオなかなんかこうやっ
7:49たらうまくきますみたいなオオ実装が提案
7:52されていやそれではうまく行かなかった
7:54ですねみたいなそれはひたすら無限ループ
7:56されていてちょっと不毛な状態になって
7:57ましたとでまとはいえあの爆を作っていか
8:01ないといけないのでえっとあごめんなさい
8:04ま全がまページ専をキャンセルしたいと
8:06いう話なのでないものはまベッド
8:09テクノロジーなので作っていきましょうと
8:11いうことで今回はその作った話をさせて
8:13いただきたいと思い
8:15ますで作ったものは大体こんな感じでまア
8:20ルタならあのいわゆるアレアTSX
8:23ページズならあのページズの以下のあの
8:26AppTSXの中にあのナビゲーションが
8:29プロバイダーというなんかあのやつを1個
8:32セットしていただくとこのユ
8:34ナビゲーションガードというやつを
8:37呼び出すことによってま例えばこのホーム
8:39がイチェンジだったらえっと保存してませ
8:43んがみたいなメッセージを出しますみたい
8:45なことができるようになっていますで
8:47しっかりあのカスタムダイアログを出す
8:49こともできるように作ってあるのであの
8:52そんな感じで使えますというのが下の例
8:55ですでただめちゃくちゃめどくさいって何
8:58やったんやなっていう話が残っていると
9:01思ってましてえっとそれをこれから紹介し
9:04ていきたいと思いますまこれは主に3つの
9:06白を通してま解決しましたという感じ
9:10ですでじゃそのハックの話をする前にあの
9:15P繊維ってそもそも何があったっけって話
9:18を先にあの紹介するとこの3つになると
9:22思っていますえ1つはあのブラウザーが
9:25HTMのドキュメントまっと落としてきて
9:27ページ全体を勝手に書き換えるSP的で
9:29ない繊維と呼んでるものですでこれの
9:32ケースはもうあの非常に簡単であの
9:34ビフォーロードというイベントが飛んで
9:36くるのでこれをキャッチしてなんかあの
9:38適当にプレベンデフォルトみたいなのを
9:40するとあのブラウザネイティブの
9:42ダイアログが立ち上がりますみたいなこと
9:45ができるようになってるというかこれしか
9:47できないんですねこれ以外何もできないん
9:50でまあのこれこのmdnに書いてあるこの
9:52スニペットを貼ってあのページ専は止めれ
9:55ました終わり以上
9:59いや以上じゃないでしょう以上じゃない
10:02ないんですよねあの問題はあのこの右の2
10:05つSPA的な画面潜入をした時にどうやっ
10:08て止めるかって話になってきますとでその
10:12話をするためにはちょっとヒストリー
10:14APIをおさいしないといけないんで
10:15こちらにえっと書きましたでhisy
10:19APIを使うとつまりアプリ側でその
10:22URLバーの内容とかあのをえっとページ
10:26選まURLバにあのにれるURLの内容と
10:30かのまあの履歴とかページ遷移を自前で
10:33その管理することでまブラウザにその
10:35HMLドキュメントをフッチさせずに
10:38えっと履歴だけJSから書き換えます
10:40みたいなそういうことができる仕組みに
10:42なってますえこれを使うとあのURLを
10:46遷移させたい時はこのプシュステートで
10:48あのスタックに1個積むっていうのをやっ
10:50てでリアクトの側でえっと表示内容をこの
10:54コス123のページのものに書き換えて
10:57あげるみたいなそういうことをすることに
10:58よってSPAを実現することができると
11:01いうようなものになってますでえっと
11:03プッシュステートとかリプレステートで
11:05えっとスタックを書き換えるだけでなく
11:07えっと進む戻るのボタンが押された時は
11:10このスタックの現在位置をえっと下にし
11:12たり上にしたりつまり戻ったり進んだり
11:14するするような操作もえっと実装されて
11:17ますでえっと戻るボタンが押された時に
11:20えっと気づかないとアプリ側が気づかない
11:23といけないんでそれはポップステート
11:24イベントというものが飛んできてえっと
11:26そのポップステートイベントがを受け取っ
11:28たら
11:29えっとリアクトに表示されてる内容を
11:32えっと前のページのものに戻してあげる
11:34みたいなことをすればえっと完成という
11:36ことになりますというもの
11:39ですでここまでは良くてで最初にその
11:45アプリ内のリンクでジャンプした時の動き
11:47をえっと紹介したいと思いますでアプリ内
11:51のリンクはえっといわゆるあのリンクタグ
11:54を使った方多いと思うんですけれども
11:57ルタードPUSHが中で叩かれででその
12:00結果Appルーターのえっと内部状態内部
12:03で持ってるURLみたいなものがま更新さ
12:05れて結果新しいページが秒がされて
12:08History.PUSHStateで
12:09URLも書き換わるみたいなこんな流れに
12:12なっていますでただえっとま今回はこの
12:16フースンを止めてしまいたいんですけれど
12:18もえっとアルーターの内部状態が書きを
12:21戻すのめちゃくちゃ面倒くさいことしか
12:25正直えっと思いつかないのでもうここで
12:27止めてしまいたいですとで止めてしまい
12:30たいと思ったんで早速ソースコードを読み
12:32に行くとですねなんかあのプッシュって
12:33書かれた関数の中になんかいきなり
12:35リアクトのスタートトランジションが
12:37呼び出されてしまっていてえっとここ
12:40れってどこで飛べたらいいのみたいな感じ
12:41のまあの要は割り込み機能が何もないよう
12:44なソースコードが書かれていましたとでと
12:46はいえまそんな泣き言は言ってられないの
12:49でまハックで解決しますというのが今回の
12:521つ目のハクでそれはコンテクスト系入れ
12:56ルーターをえっと差し替えてしまうという
12:57ものですでえっとコンテキストというのは
13:01ですねあのえっと皆さんがユーズルーター
13:04を何気なく呼び出して使ってらっしゃる
13:06そのルーターはえっとアルター
13:08contexプロバイダーというえっと
13:11ものを通してえっと提供されているものな
13:14んですけれどもえっとこのコンテクスト
13:16プロバイダーはですねえっと2個書くと
13:191番内側に書かれたものがえっと適用さ
13:22れるつまりえっと今回で言うとアプリって
13:24書かれたところにえっと置かれた
13:26コンポーネントで使われるのは公式
13:28ルーターでよなくてラップしたルーターの
13:30方になるというえっとま上書きみたいな
13:32ことができるようになってますとでまこの
13:35方法であの2位のそのカスタムのルーター
13:38の実装に変えられるんでえっと今回は
13:41えっとそれで置き換えましたとでプッシュ
13:45関数を置き換えたものプッシュとか
13:48リプレースとかの関数を置き換えたものに
13:50するんですけどもこの方法を使えばえっと
13:53まあの普通書き換えるっていうとあの
13:55ルータードPUSHイコールなんかニの
13:58関数みたいななんか超上書きみたいなこと
14:00をえっと思いついてしまうかもしれないん
14:02ですけどえっとこの方法ならそういう破壊
14:05的な変更せずにえっと差し替えられるんで
14:07えっとエコなハクですよねっていうそう
14:09いうメリットがあり
14:11ますでえっとこれでアプリ内のリンクの
14:15繊維はもうあのバチッと完了してあとは
14:18えっと戻る進むボタンを通りかすればいい
14:20ということになりますが実はこれが
14:22めちゃくちゃえっとしんどいですという
14:25感じになってますえ具体的にはえっと
14:29ヒストリーのえっとごめんなさいえっと
14:31ブラウザの進む戻る進むボタンを押された
14:34時どうなるかというと実は最初にURLが
14:37書き換わるんですねヒストリーAPIの中
14:39のえっと状態も変わってURLも変わって
14:42でポップス製とイベントが来てそこで
14:45初めてアプルーターがそのえっとルーター
14:48の状態更新と描画っっていうあのことを
14:51やるという風になってますとでつまりこれ
14:54が何を指するかと言うとえっとあで大事な
14:58こととしてそのポップセトイベントないし
15:01そのURLが書き換わるというえっと部分
15:04はえっとキャンセルする方法が一切提供さ
15:06れてないんですねえつまりポップステート
15:08イベントをもうえっとアップルーターに
15:11来る前に握り潰すしかもはや方法はないと
15:14いうことになりますとでかつえっともし
15:17握り潰せたとしてもURLは戻ったURL
15:20のままになってしまうんでそれをどうにか
15:23しないといけないという感じになりますと
15:25で具体的にじゃあそれどうすればいいんだ
15:28話なんですけどえっとポップステート
15:30イベントを横取りして握り潰した上で
15:33ネキストジェスが気づかない間に
15:36ヒストリーを元の位置に書き出すみたいな
15:39あのすいませんちょっと今会場から出生
15:43みたいな出たんですけどまそういうことを
15:46やればあのできますよできますでできるん
15:49ですよでえっと1つ目はえっとイベントを
15:53握りつすって話だと思うんであの握り潰す
15:56と言ったらあのキャプチャリスナー
15:58思い浮かべる方もいらっしゃいますよね
16:00ねっていう話なんですけどえっと
16:04キャプチャリングリスナーえっとご存知
16:05ない方説明するとえっと普通のリスナーは
16:08えっとあ左が普通のリスナーで右が
16:11キャプチャングリスナーなんですけれども
16:13キャプチャングリスナーの方はえっと普通
16:16のリスナーよりは先に呼び出されるんです
16:18ねでその呼び出された中でストップ
16:20プロパゲーション呼ぶとえっと普通の
16:22リスナーはえっと呼ばれなくになるという
16:24ようなことがえっとできるんでこの方法を
16:26使えばまネキより先にストップ
16:28プロパゲーションすれば
16:30えっとイベントぶんどれだろうというそう
16:33いう発想でした
16:36ががえっと実際やってみたところなんか
16:40chromではなぜか動かなかったんです
16:42よでなんで動かないかすごいラギしてたら
16:45えっとすごいあの簡単なデバックをすると
16:48なんかキャプチャーしたはずのリスナーが
16:50なぜか後で呼ばれるっていうえ先で呼ば
16:53れるんじゃなかったのかよみたいなことが
16:55起きてしまいましたとででもファイア
16:57フックスとサファリは問題なかったんです
16:59よねでまこうしてまクムでは動かない
17:02ソースコードを書くという実績をついに
17:04解除してしまいましたという感じでしたで
17:07そそんなあの泣き言もまた言ってられない
17:11のでえっと今回はストップイミディエイト
17:13プロパゲーションというやつで止める方法
17:15に変えてびますという感じですでそれなん
17:17やねんて話なんですけど普通のえっと
17:20ストッププロパゲーションだと例えば今回
17:22ウンのアイベントリスナーを3回読んでる
17:25んでえっとこの3個のイベントリスナーは
17:28全部呼ばですね例え途中でストップ
17:30プロパゲーション呼んだとしても全部呼ば
17:32れるんですけどこのストップ
17:33イミディエイトプロパゲーション下の方の
17:36呼び出しだとえっとそれが呼ばれた後の
17:39イベント後に登録されてるイベント
17:40リスナーは全てえっと呼び出されないと
17:43いうことになりますまつまりネキストジス
17:45で早くイベントリスナーをさせばえっと
17:47ネキストジスにイベントが届く前にぶれる
17:50ということになるわけですでまたネキ
17:53ジェスのアプルーターのコード読んでみた
17:55んですけど今回ユフクトって書いてあった
17:57んでフェクトより早いものといえばそう
18:00ユーズレイアウトエフェクトですよねと
18:02いうことでえっとこれでえっと先にえっと
18:05イベントリスナーをさして分ることに成功
18:08しましたという感じですあごめんなさい
18:12古いスライドで握り潰せたのでえっと残る
18:16こととしてはですねさっきあの最初に説明
18:18した通りえっとURLは書き換わった状態
18:21になってしまうという話をしましたえそれ
18:24を元に戻さないといけないのでえとそれを
18:27計算して元に戻しに
18:29んですよでただ
18:31えっとちょっとこれ詳しいことを全部説明
18:34するとあれなんですけどとにかく
18:36ヒストリーAPIでもNEXTJSからも
18:39えっとないしそのえっとあ取れなくってで
18:43かつえっと新しいナビゲーションAPIと
18:45いうものもあってそこからは実は
18:47インデックスが取れるようになってるん
18:48ですけどえとサファリとハイハックス
18:51サポートされたいされてないのでまつまり
18:53今いるあの今どれぐらい戻ったのか進んだ
18:56のかっていうインデックス情報は取れない
18:59ということが分かりましたと厳しいんです
19:02けど厳しいとか言ってたら完成しないんで
19:05あの今回はもうあの大人しくヒストリード
19:08プシュテートをまると上書きすることにし
19:11ましたこれが3つ目の白ですでえっとな
19:15どういうことなんて話なんですけどあの
19:18左下に書いてあるソースコードにあるよう
19:20にですねヒストリープッシュステートさ
19:22れるたびにえっとインデックスの値内部で
19:26持ってるインデックスの値を1個増やし
19:28ながらえ積むということをやるとえっと
19:31ヒストリーのもヒストリーに入ってる
19:33カスタムのステートの情報の中に
19:34インデックスの値こ012って感じでま
19:37つけることができますと感じですま本当は
19:40ちょっとあの戻ったりとかした時に
19:42インデックスを元に戻すとかなんか色々
19:44やってはいるんですけどとにかくこの方法
19:46を使えばhisy.5であの例えば2つ
19:50戻されてえっと0になっていたらえっと
19:532-0して2を進めるつまり1人.52で
19:58元の1に戻せますよねっていうようなそう
20:01いうような実装をしましたという感じに
20:02なります
20:04まと3つ発行を通してようやく出来上がり
20:07ましたえっとここの
20:10あのあのNPMのあの名前から
20:13インストールできるんで是非ご利用
20:15くださいという感じですでまとめます
20:17えっとまつまりえっと全人類がページ専を
20:20やっぱり止めたいですよあの全人類は言い
20:24すぎなんですけどBBサズでは多分ほぼ
20:27必須級のあのになると思ってますでま
20:30ベッドテクノロジーなんでないものは作り
20:32ましたという話でしたえそのためにはです
20:34ねあのまリアクトとかあのリアクトの
20:37コンテクストとかアップルーターとか
20:39ヒストリーとかの間に割り込むことで解決
20:41したんですけどますなわち何が言いたかっ
20:43たというかと言うとライブラとか
20:45フレームワークとかAPIの使用を把握し
20:47て構造をしっかり読めばですね大体何でも
20:50解決できるはずだという話をしたかったと
20:53いう感じになります以上です
20:58[拍手]
21:01プレトさんありがとうございましたえ
21:04とてもベッドテクノロジーな発表ではい
21:06聞いてて非常に面白かったですえ次が
21:10えっとターボパックデイと題しまして
21:13えっとフロッピーさんの方
21:16からはい発表お願いいたします
21:36はい
21:37こんにちはひろピーと言いますよろしくお
21:40願いしますでえっと今日はえっとターバ
21:42パックtodayということでえっと
21:44ターボパックの話をしようと思いますま
21:47NEXTジスみんな色んなところで話され
21:49てるんでいいかなと思ってターボパック
21:52ですえっとみんなバンドラ何使ってますか
21:56ねウェパック使ってる人
21:59おビート使ってる
22:03人タブパック使ってる
22:07人ナイスですそうえっとターボパックは
22:11えっとまだまあNEXTJS以外では使え
22:15ませんよね一応そのターボパックcli
22:18っていうのがえっとNEXTJSの
22:20クレートの中に入ってるんでえっと頑張っ
22:22て使おうと思ったら実は使えるんですね
22:23あのデムのホットモジュリプレイスメント
22:25か動くのでなんですけどま基本的には使っ
22:29てないはずですなんで今日話し
22:32ますえっと今日のえっと話したいこととし
22:35てはそもそも今後タワパックがこう
22:38nexsのですねこうデフォルトになるん
22:41ですけどどう変わっていくかっていう話と
22:44あとは今のじゃあターボパックってどう
22:46いう状況なのかっていう話をできればいい
22:48かなと思い
22:51ますまず最初にえっとターボパックえっと
22:54ターボパックはえっとまずウパックの
22:56えっと光景となるえっとラストで書かれた
22:59バンドラーですでえっと少なくともえっと
23:02ウパックのローダー自体はえっとまタワ
23:05パックが提供してる分は利用できますです
23:09けどそのまウパック中のそのイベントって
23:13あのタバブルっていうこうイベントの
23:15えっとなんて言うんでしょうそのWパッが
23:17提供してるプラグインとかに提供してる
23:19そのイベントのえっとライブラリーがある
23:21んですけどえっとターボパックの中では
23:23そういうものはないのでそのウパックの
23:26えっとWパックプラグインがターボパック
23:28で利用できるってことはえっとないと思っ
23:30てますかほぼ無理だと思ってますそのなん
23:33でかって言うと中身のそのasコンていう
23:35のを使ってたんですけどウパック側がで
23:37えっとここに書いてある通りそのSWCに
23:40切り替わるのでえっと諸々ずれるからです
23:42ねでえっとJSとえっとTSの
23:45トランスパランデフォルトはSWCこれは
23:48えっとま多くの人はご存知だと思うんです
23:50けどラストで書かれたえっとま
23:54トランスパランFYとかえっとCSSとか
23:57も含むんですけど
23:59タパックの中ではえっとデフォルトは
24:01jstsでCSSも一応使えます
24:04オプションででえっとCSSのパーサー
24:08えっとそれはえっとライティングCSS
24:11これはえっとパーセルパーセルて昔ま今も
24:14あるんですけどこうえっとまウパとえっと
24:18ま横に並んでたえっとバンドラーですねが
24:22えっとこのオーガナイゼーションが作って
24:24いるそのライティングCSSっていうのが
24:26ありますこれはこれもラスト性ですね
24:28ラスト性でそのポストCSSがのえっとま
24:31ポストCSSとま同じイメージで考えて
24:33くださいCSSのパーサーですただその
24:35ポストCSSよりもえっとライティング
24:37CSSの方が今の時代その今のCSSです
24:41ねのえっとなんて言ですシンタックスとか
24:45ああいうものをえっともっとサポートし
24:47てるプラグインとかではなくてその
24:48ライティングCS自体がサポートしてるの
24:51でえっとまこれを使うのは分かりますただ
24:54そのま例えばテールウンドとかってみんな
24:57使うと思うんですけどあれてポスCSS
24:58経由でしか今使えませんなんでえっと
25:01テイルウンドウとかがえっと使えないのは
25:03まずいのでえっとまこれが理由かわかん
25:05ないですけどまほぼ多分これが理由だと
25:07思うんですけどテルウンド使うためにその
25:09ルートにポスCSSコンフィグを置いとく
25:11とまウパックのローダーとしてえっと
25:13ターブパックが呼びますなんでえっと
25:15ライティングCSSじゃなくてえっとタワ
25:18パックの中でポストCSSローダーが動く
25:20感じですねま実ポCSローダーではないん
25:23ですけどでえっとランタイムとか
25:26フレームワークはえっとまブラウザーの
25:28JSで他にはえっとwazmとえっと
25:31リアクトこれはえっとサーバー
25:32コンポーネント含みますとあとNEXT
25:34GSとまMDXまここら辺はあれですね
25:37MDXが入ってるのNEXJSがMDX
25:39使ってるからだと思ってますでえっと
25:41インポートはえっとまコJSとesmで
25:44えっと部分的にAMDありますけどま多分
25:47AMDあんま使わないのでいいかなと思い
25:48ますでえっとスタティックのアセットで
25:52えっとこれはまJSONとかSVGとか
25:54avifとかまWEPとかそういう画像系
25:57ですよねとかとフォントとかアイコンは
26:00使えますでえっと今までえっとWeb
26:03Packでやる時ってまファイルローダー
26:05とかURローだとかこう色々使うと思うん
26:08ですねなんですけどタパックはえっと今後
26:12例えばそのなんだろうなこうリアクトとか
26:14そういうフレームワーク自体をえターボ
26:16バックがサポートバンドラーがサポート
26:18するっていう感じですでま今ちょNEXT
26:21JSが中にいるんでそのタワパックの中が
26:24中にネクソジスが入ってるんですけどこれ
26:25は悪くまではプラグインとしての扱いなん
26:27でこはコアの部分はnexsは参照しませ
26:31んその参照っていうかnexsがコアの
26:33部分には入ってこきていませんでじゃ
26:36そもそもなんでタワパック作ったのって
26:38いう話ですねえっとまウパックとタワ
26:40パックの作者のソっていう方がいるんです
26:43けどまこのこの方がま2021年ぐらいに
26:45まパフォーマンスずっと話しててまずっと
26:47ではないですパフォーマンスのことを気に
26:49しててまウパのパーシスットキャスチング
26:51これはファイルキャッシュですねそのウ
26:54パックで生成したチャンクをそのウパック
26:57でメモリー上にしかで持たなかったんです
26:58けどそれをファイルとして出すファイル
27:00システムとして出すことによってその2回
27:02目のビルドとかは早くなるっていうもの
27:04ですねとかがもうえっとこれの一環でした
27:07でまウPackはえっとま11年前に使
27:09作られたんでま結構大規模な回収が必要
27:11だったんですねなんであのまそもそも
27:15難しいだろうということでえっと特にその
27:19破壊的な変更が必要さっき言った通りそれ
27:22なんでかていう例えばえっと中身のその
27:24ウパ中で使ってるasはコンを使ってるん
27:27ですけどそれがSWCに変わるとかここら
27:29辺でもう完全にプラグインが壊れるので
27:31できないんですね基本的にはなんでこう
27:34いうメジャーリリースでV6のメジャー
27:36リリースでえっとこういうことをやりたく
27:38ないっていうのもありあったらしいですで
27:41えっとまタブパックとそのウパックよく
27:43えっとJSのチャンク見てもらうと分かる
27:45んです結構出力形式で似てるんですねなん
27:47ですけどまえっと移行としてはそのウパ
27:51からタパックへの移行はまあいいではでき
27:53ないだろうとは言っていまし
27:56たでえっとターボ
27:58えっとこれはえっとインクリメンタルビル
28:01ズって呼ばれてを含んでるものですねで
28:03このターボエンジンってじゃ何なのかって
28:05言うとその今まで今までのウパックとかっ
28:08てそのファイル単位のキャッシュとかを
28:10やるんですけどえっとまベゼ結構参
28:14Googleのベですねをえっと参照した
28:16らしいんですけどえっとこのターボ
28:17エンジンはそのファンクションレベルまで
28:19全部キャッシを取りますでえっとま
28:22ファンクションが常に同じであればそのI
28:25がですね同じであればえっとそれは回1回
28:28目のビルドとかだデブ開発とでも何回も
28:30ペジリローした時にその2回目何も変わっ
28:33てなければそれはえっともうビルドせずに
28:36そのままスキップしてえっとキャッシュを
28:38利用するっていうことですねをえっとやり
28:40ますでえっとまこの画像これあの公式から
28:44撮ってきたんですけどまあ多分クラウド
28:46マークがあるのはおそらくそのまターボ
28:49レポターボレポっていうあのまよくモノ
28:52レポとかまモノレポなでも使えるんです
28:54けどとかで使われてるこうキャッシュです
28:56よねあのビルドの結果とか全部キャッシュ
28:58するシステムがあるんですけどえっとそれ
29:01との神和性がかなり良くなるで特にその
29:03ターボレポってゴラからあのラストに
29:05切り替えたんで特に扱いやすくなっていて
29:08でえっとそこのえっとリモートでターボ
29:11ターボレポってそのリモートにキャッシュ
29:13上げることができるんですけどそれをその
29:15えっとタプパックでもそのそれぞれの
29:18チャンクをこうリモートに上げることに
29:20よってえっと開発境とかえっとCIとかで
29:24こう共有ができるま開発環境ってのは個人
29:26のローカルですよねとでもでき
29:28まただ基本的に早いんでまあんまリモート
29:31でキャッシュしなくてもいいかもなとは
29:33思って
29:34ますでえっとただえっとなんで今まだ
29:39えっとNEXTJSの中のビルドでえっと
29:43タブパックは使えないかっていうのは
29:45えっと理由があってそのインクメンタル
29:47ビルドドっていうのと最適化っていうのに
29:50はえっと多くのことで対立しますそれは
29:54なんでかって言うとそのデブモードの時
29:57っていうのはまあ
29:58とりあえず早くビルドして早く結果を返し
30:02てっていうのでそのバンドルサイズを気に
30:04しないからその極論全部ビルドすればいい
30:07んです
30:08ねでえっと全部ビルドするってことは
30:11つまりその差分ビルドとかさっきのえっと
30:14ここの部分っていうのはすごい完結になる
30:16んですよなんでかて言うとその釣り上で
30:19絶対に落ちるんであの全部ガーってややる
30:23ことはできるんで下から上に上げるだけで
30:25終わりっていう言い方ですねができるんで
30:28あのなんでしょうすごいシンプルなんです
30:30ねただ本番っていうのは最適化が重思って
30:36か最適化をやんないといけないわけですよ
30:37ねだから高速化よりもそれよりもパンドレ
30:40サイズを減らしたりとかそういうところを
30:42えっとに注力しないといけないでそうする
30:46とそのインクリメンタルビルドに対する
30:48最適化の課題が明らかになってきたんです
30:50ねでそれは何かって言うとその
30:52アプリケーション結構その後から話すん
30:55ですけどこう
30:58よくあるそのバンドリえっとバンドルする
31:00時にある最適化って大体全体図分かって
31:03ないとできないことが多いんですでえっと
31:06なんでその局所的な部分だけを見てこれは
31:09差分がないとかが言えないんですねなんで
31:13その部分的にビルドえっとその
31:15インクリメンタルビルズをその部分的に
31:18こうやってえっと見てくのが結構難しいと
31:20いうのがえっとえっと課題として上がって
31:23きてましたでえっとまそれはなんでかて
31:26いうとこに書いて通りその
31:27アプリケーションの全の最適化とかその
31:29最適化することによって結構インポート先
31:31は変わることがあるんですねそれはそ後
31:34から説明するんですけどその例えば
31:36ファイル名が変わるとかこういうことが応
31:39にあるという感じですねなんでえっと
31:43アプリケーション全体をこう調べ
31:45るってことはそのインクリメンタルビルド
31:48に反するんですよこれってなのでえっと
31:52トレードオフが今出てきてるっていう状態
31:56ですじゃあどう最適化があるかって言う
32:00とこの大まかにこの8つかなと思ってい
32:05ますでえっとまツリーシキンこれ多分皆
32:09さん知ってると思うんですけどあの使われ
32:11てるエスポーツだけを残すなんで不要な
32:15コードはソスコードから消えるでまもう
32:18ちょっとえっと実はそのデットコード
32:20エリミネーションもこの釣りシキンに若干
32:22入ってるんですけどあのまそれをちょっと
32:24別で分けましたでえっとエキスポート
32:28マグリでこれはそのエキスポートされた
32:31ファンクションとか変数とかをまよくま
32:36当たりますけど読みやすいように関数名
32:38ってなんだろう長く書くじゃないですか
32:42長いのかなゲットなんたらみたいなだけど
32:44バンドルする時にそのゲットなんたらって
32:46すごい不要なんで基本的にAとかBとかC
32:49とかDとかそういうえっと名前に
32:52切り替えるんですねでそうすると名前を
32:55切り替えるとそれを使ってたファイル全部
32:58書きかわっちゃうんです
32:59ねなんでえっとごめんなさいえっと今赤色
33:04と黄色のマークがついてるんですけどその
33:06赤色はまず全体を見ないとわかんない最適
33:09化ですとでえっと黄色っていうのはその
33:12特定のインポートだけをえっと見る最適が
33:15ですでえっとこのツ神器がさっき言った
33:18通り全体を見て全体で使われてなかったら
33:21削除するんで全体を知らないといけない
33:23ですねこれってでエキスポートマング
33:25リングはその関数あくまでもポされた変数
33:28とか関数名を変えるだけなんでその
33:31インポートしたファイルだけを書き換えれ
33:32ばいいんですねなんでえっと部分的な影響
33:35でモジュールIDSこれはえっと全ての
33:37モジュールズにそのユニックなIDを付与
33:40していきますえっとwebpackとかま
33:42タワパックも同じなんですけどこう即自
33:44関数の中のえっと引数でそのオブジェクト
33:47を渡すんですねでそこに例えばそのえっと
33:50まファイルデとイッTSF.TSBAR.
33:56TSみたいななえっとファイルがあった時
33:58にこれをそのABあまあ123ですね
34:02デフォルトはその数字なんで123とかに
34:04するんですよファイル名をでこれが
34:06モジュールididて呼ばれてるものです
34:08でえっと開発時はこれはファイル名になり
34:10ますねなんですけどえっとまこういうのも
34:13結局これはえっとうんと1番ルートの
34:17ファイルに影響が出るので全体の影響が
34:19あってかつそのインポート先インポートし
34:22たえっとインポートされるファイル名の
34:24IDが変わるんでインポートするやつも
34:26そのファイル名に引きえっと引っ張られて
34:29ファイル名が変わるんでえっと両方ともの
34:31影響があるでチンキでこれはあれですね
34:33えっとWeパックでいうスプリット
34:35チャンクスて呼ばれてる機能でその
34:38えっと例えばリアクトっていう
34:40ライブラリーがあったらそれをAファイル
34:42Bファイル両方とも使ってたら両方とも
34:44共通行でリアクトを剥がすわけですよね
34:46そのAにもリアクトBにもリアクトを
34:48入れるとこれは無駄なのでリアクトだけを
34:50外に出すでこれもえっと全体を知らないと
34:53共通で使われてるかどうかわかんないので
34:55えっと
34:58全体に影響があるっていうことですであと
35:01はスコープホスティングこれはえっとま
35:04実行順序が担保できる処理例えば
35:06インポートしたんだけど別ファイルで
35:08インポートしたんだけど絶対にこれは縦で
35:10なんてその順序が担保されてる例えばその
35:15インポートしたやつが実行され
35:16るっていうのがえっともう別当な場合は
35:18これはファイルが1個になるんですねコン
35:20カットされるんですよっていうのがこれが
35:22スコップホスティングでファイルが減るの
35:23でえっとなんて言うんでしょう圧縮され
35:26るっていですねでこれも全体を知らないと
35:28できないでえっとデトコド
35:30エリミネーションこれは多分えっと多く
35:32知ってると思うんですけどま利用されて
35:34ないコード削除まJSとターサーとかです
35:38かねアアリファとかターサーとかですかね
35:41でミニフィールドシートバッグ
35:57もそうなんですけどこう生成される時に
35:59JSのファイル名がなんかよくわかんない
36:01ハシ値になってるっていうのがえっと
36:03コンテントハッシュこれもインポートに
36:05よって変わりますそのファイルを
36:06インポートするのでみたいな感じで結構
36:09そのま赤色のやつが特になんですけどま4
36:12つぐらい全体に影響があるのでこう部分的
36:15に
36:16えっとキャッシュをキープするっていうの
36:19が全体に反するんですよねなんでえっと
36:22難しいというのが今の課題として当たって
36:25い
36:25ますでえっとここからちょっとNEXT
36:28JSの話なんですけどごめんなさい残り何
36:30分ですかねすいません時計持ってくれ気に
36:33せず話しいただいざすいませでえっと
36:37ちょっとこっからえっとNEXTJSの話
36:39なんですけどそのターボリポジトリーから
36:41えっとターボレッポっていうリポジトリー
36:43に元々タブパックって入ったんですねま
36:45さっきったターボエンジンを共有したりと
36:47かなのでなんでなんですけどそのNEX
36:49JSのリポジトリーへ移動しましたで
36:52えっとタパックは今も開発中でその
36:54NEXTJSの対応を優先するために移し
36:56たということです
36:58なのでえっとNEXTJSのものではな
37:00いっていうのはあくまでもえっとあって
37:02コアは特にフレームワークには依存しない
37:05なのでえっとNEXTJSのえっとものは
37:09別のクレートになってる感じですねで
37:12えっとNEXTJSのなんでえっと
37:16NEXTJSの中でターボパックのその
37:19APIインターフェイスとかがえっと安定
37:22次第別のリポジトリーを移してそのビュー
37:24とかスベルトとかのサポートを将来的に行
37:27ていくとのことですなのでその安定化され
37:30たらえっとあということですでえっと安定
37:34化されたらそのNEXTジスのデフォルト
37:36がえっとウパックからタワパックへ
37:38切り替わりますただこれはメジャー
37:40リリースでえっと書き換わると言ってるの
37:42でえっと直近ですとえっと来月かな来月の
37:4610月24日にネクストカフがあるんです
37:48ねでまネクストカフの時にま切り替わりは
37:53多分しないんであと1年後とかになると
37:54思うんですけどあのまそののリリースで
37:58少しはあのなんだろう今プロダクションも
38:0096%まで安定してるのであのなんだろう
38:04プロダクションでもえっと
38:05エクスペリメンタルで使えるとかはあるか
38:07もしれませんでえっとウパックのサポート
38:09は引き続きやるのでまデフォルトが変わる
38:11だけなんでおそらく
38:12えっとWebパッの設定をNEXT
38:15コンフィグで書いてる人は一旦Web
38:17パックのフラグをつつける形になるかなと
38:19思ってますま多分2年後ぐらいだと思うん
38:21でとりあえず大丈夫かな1年後か1年後と
38:23かになると思うとりあえず大丈夫かなと
38:25思って
38:26ますで今のNEXTJS内のステータスと
38:29してはまNEXTJSのみで利用可能でま
38:56645600mmま7100あるらしいん
38:58ですけどそれの96%のえっと688は
39:03通ってますでえっと今やってるのはじゃあ
39:05本番に必要なその最適オプションの実装
39:08先ほど言ってたえっとまモジュールID図
39:11はあるんですけどえっとミニファイとか
39:13そこら辺ですかねとかのえっと実装がまだ
39:16必要なのとあとえっと先ほど話してたその
39:19インクリメンタルビルドのキャッシュって
39:21いうのはオンメモリーでえっと今はやっ
39:23てるんですねあまえオンディスク入ったん
39:26ですけどま安定してないって意味ですなん
39:27でその永続的なオンディスクのキャッシュ
39:29を実装でえっとあとはまメモリの使用量が
39:33ちょっと上がってるらしいんでそれとあと
39:34はNEXTスクリプトワーカーズとか
39:37えっとまフルバックノードポリフィールズ
39:39とかはままだサポートしてませんとで
39:42えっと先ほど1番最初に話したんですけど
39:44そのWePackプラグインがえっと基本
39:46的には基本的だ使えないですねそのAPI
39:49が変わるんで使えないんでえっと人気の
39:51あるプラグイン例えばHMLWパック
39:53プラグインとかああいうプラグインは
39:54えっとタブレポがえっとサポートするとの
39:56ことです
39:58ですでえっとNEXTJS中でじゃターボ
40:02使うかって言うとえっと配分配分ターボを
40:04デブでつつけるだけですでえっとNEXT
40:07コンフィグの方はえっと
40:08エクスペリメンタルの中にターボっていう
40:10えっとものが入ってんでそこでえっと記載
40:13していきますただちょっと書き方が変わっ
40:16てるのでそのウバからとなんでちょっと似
40:19てるようで実は違ってるその例えばモ
40:21ルっていうのがないとかアズとかは
40:23ないのであのここら辺はま変わってるかな
40:25と思っております
40:30でえっと今あるオプションとしてはえっと
40:331234568個ぐらいかな8個ぐらいの
40:35オプションがありますとでまえっと
40:37エクステンションズとかエリアスとかで
40:40このローダーズっていうのはえっと
40:42NEXTJSあごめんなさいタープバック
40:44があの内部で再実装したりしてるローダー
40:48とかですね登録されてるローダーだけを
40:50使うことができますでちょっとこの
40:52ローダーいようと思ったんすけどえっと
40:54手元のPCがノートが見えないであの
40:57ちょっと忘れましたけど8つぐらいあった
40:59気がしますでえっとあとルールズはえっと
41:02webpackのルールズと似てますねで
41:04えっとユSWCCSSは先ほど話したその
41:07SWCってそのCSSもえっとまやれ
41:10るっぽいのでえっとそれができるフラグで
41:12デフォルトはフルスですねあとはメモリー
41:15リミットとツリーシェイキングツリー
41:16シェイキングはえっとまモジュール
41:18フラグメントとエポーオンリーの2つの
41:20モードがあるらしいですえっとモジュール
41:23IDストラテジーこれは先ほど言ったその
41:25モジュールの名前えっとモジュールの名前
41:28がえっとファイル名ではなくてえっと数字
41:32にえっとしたりと
41:34かルートはっとそのルートファイルの
41:37ところですみたいな感じでえっとまだ今
41:39これだけしかオプションがないのでその今
41:42あるWeパックのもし設定ウパックの設定
41:44を書いてた場合ですよねクストコンフィグ
41:46に書いてた場合にえっとま配配ターボつけ
41:50てその痴漢できるかっていうともしかし
41:52たら少ないかもしれない特にプラグインが
41:54ないのであのプラグインパプラグインを
41:57使ってる人は配ハターボでは使えないって
42:00いう状態に今なってい
42:02ますでえっとタパックの中でネジスのため
42:06のタワパックということでそのタワパック
42:08の中にそのランタイムっていうのが設定さ
42:10れてますでえっとまこれちょっと今まで
42:13ウェパックと違うんで書いといたんです
42:14けどそのまランタイムはそのブラウザーと
42:17ノードジェスの2種類があってその
42:19ブラウザーの中にはさらにエッジっていう
42:20のとドムっていうのがありますとでこれで
42:23そのエッジとドムによってそれぞれその
42:25チャンクの読み方が変わるのでこの2種類
42:27があるとのことですなんでえっとなん
42:31だろうなそのウパえっとNEXTJS今
42:33作ってはいるんですけどそのチャンクの
42:35ロード自体は結構
42:37えっとフレームワークによって変わる可能
42:40性はあるかなと思ってますでえっとじゃあ
42:43ポストCSSとかそのウパのローダーて
42:46どうやって読んでるかって言うとま
42:48ローダー自体はJSで書かれてるんでその
42:50IPCでnojsのワーカープールで実行
42:53していますという風にやってんのでその
42:56ウパで用意されたローダーとかは使えます
42:59あとはえっとNEXTGSの固有の変換
43:02例えばそのサーバーコンポーネントとかま
43:05サーバーアクションズですよねここら辺は
43:07えっとまNEXTカスタムトランスフォー
43:09マーっていう別のえっとライブラリーに
43:11分けているので先ほど話したそのタブ
43:14パックがNEXTJSのためのものではな
43:16いっていうのはこういう意味ではあるかな
43:17と思っていますではなんでタブパックって
43:21早いのかって言うとそのネイティブesm
43:23を利用しません例えばビートとかは
43:25ネイティブesmを利用するんですけど
43:27これはそのノードモジュールとかが大量に
43:29なるとそのスクリプトがいっぱいできる
43:30わけですよねでそうすると全体的にページ
43:32が遅くなってしまうんでタパックのえっと
43:34ストラテジーとしてはネイティブesma
43:37を使わずにえっとそのページに必要なJS
43:39をえっと事前計算してそれをバンドルして
43:42ブラウザーに渡すっていうことをやって
43:43ますなので規模が大きくなればなるほどタ
43:46パックの方が早くなるっていう感じですね
43:49ま理論上ですであとはえっとそのサーバー
43:53とかブラウザー例えばえっとまnexos
43:56とかもそうですよねSSRしたりとか
43:58えっとブラウザーでコード書いたりとかに
44:00対してその今まではえっとバンドラーとか
44:03がこう別にしないといけなかったんですね
44:05なんですけどタパックでそのもう
44:08ブラウザーとかサーバーとかをえっと一元
44:10的にそのグラフを作っちゃうモジュール
44:13グラフですねいわゆるっていう単一グラフ
44:15を作ることによってそのオプティマイズを
44:17最適にするえっとチャンクの分割とかを
44:19最適にするっていう書法を取ったので
44:22えっとまNEXTJSみたいな
44:24ライブラリーとしてはいいかなウェブ
44:26フレームワーク基本的なウェブ
44:27フレームワークとしてはいいのかなと思っ
44:29て
44:30ますえっとじゃあまとめということでま
44:33現状でもNEXTGSNEXTJSのデブ
44:36ではえっとタブは利用可能ですでえっと
44:38ビルドも96%えっと通過してるんです
44:41けどまだ最適が周りがえっとその
44:44インクリメンタルビルドとのえっとと相性
44:48が悪い部分もやっぱりあるのでそこを今
44:50えっと解決してる途中ですでえっとタ
44:53パックへのデフォルトの切り替えはえっと
44:55NEXTジスのメジャーで変わる予定なの
44:57でえっと1年に1回大体10月とかですか
45:00ねでえっと変わるんではないかなと思って
45:02ますでNEXTconfig.JS内の
45:05WEパッの設定は現段階では読めない読ま
45:07ないてから多分読めないですねあと将来的
45:10も多分読まないって意味ですのでえっと今
45:13NEXTJSの中でNEXTJS
45:15コンフィグの中でこうパックの設定を
45:17めっちゃ書いてる人はターボにはえっと
45:20ターボに移行するにはちょっと力が必要か
45:22なっていう印象ですえっとタパックと
45:25えっとターボレポでまキャッシュリモート
45:26で使う未来はまあるかなとは思ってます
45:30えっと最後にまだNEXTJS以外では
45:31使うのは難しいとりあえずNEXTJSの
45:34プロダクトがえっとステーブルになるまで
45:36はえっとNEXTJSのリポジトリーから
45:38は出ないのでえっとまあ1年とか2年とか
45:42かかるんじゃないかなっていう印象
45:44ですはい以上ですありがとうございます
45:48ありがとうございました結局タパックどう
45:51なったんだろうと個人的に思ってたので
45:53非常に勉強になりましたありがとうござい
45:55ますはいなんか情報ここまで詳細に知れる
45:58んだなっていうのもはいとても個人的な
45:59いい気づきでしたありがとうございました
46:01ありがとうございますそうしましたら次
46:04えっとすぐさんの方からお願いいたし
46:07ますはいすいませんちょっと僕あのデモが
46:10あるんで繋ぎ直します
46:59大丈夫そうです
47:03かあはいじゃあ
47:07えっとすごいなんかどれぐらい話せるのか
47:10わかんないですけど
47:11あの気にせず大丈夫です僕の方からはあの
47:15バーセア出してるAISDKっていう
47:18ライブラリーがあるのでまこれちょっと
47:20最近遊んでるのでこの話をできればなと
47:22思ってますでaiskはですねなんとこう
47:26AIっていうパッケージ名でねどうやって
47:28撮ったんだろうと思ったんですけどで
47:30インストールできるあのバセルが作ってる
47:32あのsdkライsdk
47:35でいわゆるま最近出てるllmのあのに
47:39対する扱いをま楽にして使いやすくしまし
47:43たよみたいなものでNEXTDSだけじゃ
47:46なくて他のそのあのフレームマークとか
47:49スベルトとかそういうのでも使えますよっ
47:51ていうのが一応売りなのでパーセル性です
47:53けどまフレームワーク依存なしで使えます
47:55とででリアクトの場合はそのサーバー
47:58コンポーネントとかサーバーアクションと
47:59かこっちにも対応していてあのいわゆる
48:02llmってこうバーってなんかストリーム
48:04であの文字が流れてくるようなそういう
48:06ストリーム機能を持ってますという話です
48:09でもあの今日の話は別にそのllmは使わ
48:12ないですでバセルaisdKってすごく
48:17いいんですけどあのまいくつかこう機能が
48:19ジェネレートテキストは普通にあのなん
48:22でしょllmのこう問い合わせてその
48:24テキストの結果を得るようなそういうやつ
48:26なんですけど
48:27ジェネレートオブジェクトはこうスキーマ
48:29を与えるとあのまいわゆるこうスキーマの
48:33llmの機能を使ってあのま我々がこう
48:37求めたこうスキーマで結果を得てその
48:39オブジェクトを得ることができるみたいな
48:41そういうえものでこれもまストリームで
48:44撮ったりとかできるっていうのもすごく
48:46素晴らしいんですけどでもう1個あの
48:48llmの
48:52アブストラクトGPTOpenAIとか
48:56あとそののジェミニジェミニーとかあと
49:00なんかま色々こう色んなとこから出てると
49:03思うんですけどあのアスロックのやつとか
49:06でそれを全部アブストラクトして同じよう
49:09なコードで書けますよみたいなところも
49:10一応いいとこですねであと最近なんか
49:12ミドルウェアの機能もついたんでちょっと
49:14なんかllmの処理になんか共通の何かを
49:17差し込みたいみたいなそういう
49:19ミドルウェア機能もついてますでもう1個
49:21はそのスリーブvaluとかストリーマル
49:24UIみたいなこうなんか値とかUIをこう
49:28ストリーミングする機能がついてて元々は
49:30そのllmの結果をこうストリーミング
49:32するためのそういうものだったんですけど
49:35なんかそれがなんか独立して作られてます
49:38で今回ちょっとここにフォーカスして
49:40llmの他の機能は無視してこのストリー
49:42マブvaluのとこにフォーカスして話を
49:44しようかなと思ってます
49:47で
49:49えっとクリエイトスマブvalとか
49:52クリエイstreamableUIま使っ
49:54たことある人はまあ多分もうイメージ湧く
49:56と思うんですけどあのま実はAIと関係
49:59なくてそのサーバーサイドから
50:01クライエントにこうストリームする機能を
50:03あの汎用的に提供するものになってますで
50:07ちょっとね簡単なでも使ったことある人は
50:11なんかこんなものがって感じなんですけど
50:14一応このサーバーアクションに対応してる
50:17のが非常にいいところでえっとですねこれ
50:20あのちょタイただのタイマーなんですけど
50:22ストリームでタイマー流してみようみたい
50:24なあの最初のデモです
50:27でこのいわゆるこうゲットタイマーって
50:31やつがサーバーアクションなんですけど
50:32この先に行くとこのまサーバーアクション
50:35に入っていきますでゲットタイマーの
50:37ところでこうここでストリーマルval
50:40リューっていうの作るんですよでこれで
50:42ストリーム作ってなんか自分の自由な型
50:45適当に型を作ってでもう本当になんか
50:49サーバーサイドでやることじゃないんです
50:51けどインターバルであの1秒気にこう
50:54ストリームアップデートしてこの残ってる
50:58時間を返していくみたいなそういうこうで
51:01最後こうあの0秒になったらインターバル
51:05消してストリームダンするみたいなそう
51:08いうサーバーサイドのコードですでこっち
51:11受け取り側何をしてるかって言うとこのま
51:14サーバーアクションで得られたこの
51:15ストリームですねこいつをえっとリスブル
51:19valていうなんかまそのクランズサイド
51:21のコードがあるんですけどこいつに渡すと
51:24シンクイテレあイテレータブって言うん
51:28ですかシンクイテレーションになるので
51:30これをアウトで回していきますそうすると
51:33こストリームアップデートするたびにこう
51:35話が流れてくるていそういうやつですね
51:38なんでこれまうまくいくとこう
51:40カウントダウンしてどんどん秒が減って
51:42くってのサーバーサイドから受け取
51:44るってやつですですねでこれちょっと
51:46動かし
51:49ます今回ま色々番を使ったりターボパック
51:53さっきのターボパックを使ったりとかして
51:55ますえっと
51:57これでえっとあれChromeが出てこ
52:02ないこれかChromeえっとこれででも
52:061
52:08がコンパイルして動くのでこんな感じで0
52:13ですねスタートするとサーバーにこう送っ
52:15たやつがこう流れてくるこれどん今
52:18サーバーからストリームで流れてきてる
52:19やつ
52:20ですでちょっと待さい
52:24ねどんな値が流れてきてのかていうとです
52:27ねまこっち見せた方がですね
52:30えっとこれまサーバーアクションなんで
52:33こんな感じで普通にポストしてまチャンク
52:37ストリームこバーって流れてきてるどうも
52:40こんな感じで流してますよみたいなのが
52:42あるのでこれ受けてそのこっちで答えを
52:46表示してるっていう感じになってますはい
52:49でこれがデモ1でえ次のデモがです
52:54ねこのデモ2ですね今度はスリーブUI
52:59っていうのがあるんですよこれは何をする
53:01かっていうとリアクトの普通に
53:03コンポーネントサーバーサイドのリアクト
53:05サーバーコンポーネントをあの返しますっ
53:09てやつ
53:10ですなのでま今回は単純になんでしょうね
53:14まさっきのカウントダウンを
53:15カウントアップに変えてま3の倍数か3が
53:20つく数字だったらちょっとこう燃やして
53:22みるみたいなもうこれ知らない知らない人
53:25もいるかもしれないも時代的に年齢が
53:29ばれるんですけどえっとでこれをちょっと
53:32動かしてみましょうっていうの
53:35でデモ2の方です
53:39ねでこれスタートするとこれもストリーム
53:43が流れてきますと見てるとこんな感じで
53:47ちゃんとなってますね
53:50899
53:52101112かね13となってますねでこ
53:56見ると分かるんですけどまこうちょうど
53:58このなんかコンポーネントが帰ってきてる
54:00んですよねなんかJSONになってでそれ
54:03をこうクラントサイドちゃんと
54:05レンダリングできてますよっていう感じの
54:08デモになってますなのでまこんな感じで
54:11あのAI関係なくストリームをこう
54:14サーバーから流しながら遊べますよって
54:16やつでもう1個デモがあってもうちょっと
54:20なんかね実用的なテムをちゃんと作らない
54:22とダメだなと思ったんであの
54:26CSVをあげてちゃんとそれをこう処理し
54:29てる様子をストリームしましょうみたいな
54:32のを一応作ってますこれはなんかCSVを
54:35上げると1行ずつこうあの値をチェックし
54:38てあの処理をするでその結果を流れるよう
54:42に普通こうアップロードドってこう
54:44アップロードした後に処理中ですてなって
54:45最後にできましたダンとかエラーこれでし
54:48たって出るんですけどそれはなんか
54:50ちょっともっとストリームでこう
54:52インタラクティブにインタラクティブじゃ
54:53ないかもっとこうリアルタイムにを表示
54:57するみたいなやつで実際これま動かす方が
54:59いいので動かしたものをちょっと先に
55:01動かす
55:02とえっとこれこアップロードするとま
55:07こんな感じでこう1個ずつ処理されてこう
55:101個ずつなんか管理しますとかエラー出て
55:12ますとか出てきてこんな感じちゃ
55:14プログレスがちゃんと出ますみたいなそう
55:16いうやつこれも全部ストリームでやってい
55:18てこれがまどんなコードかと言うとえっと
55:22ですねこれはストリーマルvalでやって
55:25いてえっとですねまアップロード今回その
55:29サーバーアクションなのでこのフームに
55:32フームのアクションにこうサーバー
55:34アクションて設定できるのでまこれで
55:36サブミッシブ
55:38するところはまだこう何でしょうね
55:42クライエントサイドのコードなんですけど
55:45ここでそのえっとですねアップロード
55:49ファイルっていうのがサーバーアクション
55:50になってますなのでまここでアップロード
55:54サブミッシブ
55:56でサーバーアクションになってこの先が
55:58サーバアクションになってる感じです
56:00ねでまちょっとこうストリーマルバリュー
56:04でこう値行の値がどんどん返ってくるので
56:08それをま更新してるって感じなんですけど
56:10でクリエイトストリーマルバリって普通に
56:12見るとあの同じ同じ型の値をこう更新し
56:17ながら返すみたいな風な使い方に見えるん
56:20ですけど実はただのJSをこう垂れ流し
56:22てるだけなんであのまわり以前の状態維持
56:26する必要がないので今回はその行の結果を
56:291行ずつボロボロ返してるみたいなそう
56:32いうコですなんでこっちで見ると分かるん
56:34ですけどこうストリーマルバリー作ってで
56:37こうプロセスファイルってやつでこあの
56:39注意しないといけないのはこれあの
56:42ストリーマルバリューって処理する前に
56:43返しちゃわないといけないですよねこれで
56:46返すとクライアントが受け取るのででそこ
56:48にさらにこうアンクの処理をこう書いて
56:51こうバックグラウンドで実行するみたいな
56:54なんでこれアンク処理なんで実際にねこの
56:56中身はまシンクなんですけどアウトせずに
56:59まそのままシンク実行してでここでま色々
57:04変えこう処理をしてるとCSVパースして
57:07パースしてまちょっとスリープしてみたり
57:10しあのこれデモ用のスリープなんですけど
57:13でこうこの音ローサクセスとかオロ
57:16フェリアとかでそのローの状態を更新して
57:21でそのローの状態更新するとこのステー
57:23トってやつがストリーマルバリーなんです
57:25けどここにこうどの行そのアップデートさ
57:29れた行だけをこう返してるんですよねで
57:31それをクライアントで受けてそれぞれ更新
57:34してるという感じになってますなんでこう
57:37もう1回ここでやるとまちょっとさっきの
57:41処理をイメージしながら使うともこんな
57:43感じでストリームして変えてきたものが
57:46なっててで実際そうですねネットワークの
57:50状態を見ると見るとです
57:54ねここのこれですねこんな感じで各行が
57:59ストリームでどんどんこ流れてきてる
58:01みたいな感じ
58:03ですはいなんでこれがこう1行ずつ処理さ
58:08れるたびにこう返してきてるという感じで
58:10ストリームの結果が返せますというはい
58:13そういうデモですはいでまこのストリーム
58:19あこれストリーマブルバリュですねスマブ
58:21valuは非常に汎用的であのま本当に
58:25JSONをを返せるただ単にだけのものな
58:28のでま連続的である必ま必要はないですし
58:33あのあとですね面白いのがそのストリーマ
58:36ルバリューてこう今さっきあの返却してた
58:40とこがあると思うんですけどストリーマ
58:42ブルバリューをえっとここですねステート
58:46バリューみたいなここのJソンて実はこう
58:48複数のストリーマブルバリューを入れても
58:50いいみたいな感じなんですだここでこう
58:52もう1個スマルバリューを作って別のやつ
58:55を入れでも一応その別々にちゃんと
58:57ストリーム受け取れるようになってるので
59:00あのクライエント側でも別々に処理できる
59:02みたいな感じで結構汎用性高いあと
59:05http1.1で動作するんでま内部的に
59:07はそのトランスファーエンコーディング
59:08チャンクを使って垂れ流してるだけなので
59:12httpしても動作するとでサーバー
59:15アクションでも使えてアクラブ受け取れる
59:17のでま非常に使い勝手がいいですよという
59:20話ですはいそんな感じですなのでま皆さん
59:25ちょっと使ってみてくさllmを使わなく
59:27てもあの面白いので使ってみてくださいて
59:30いう感じですはい以上ですありがとう
59:32ございまし
59:35たCSVインポートのスリム方でも非常に
59:38分かりやすくて見てて楽しかったです
59:39ありがとうござい
59:41ますそうしましたらえっと最後クラミさん
59:44の方発表お願いいたします
59:56はい
1:00:42あとそしたらっと僕の方からLT始めさせ
1:00:46ていただきたいと思いますよろしくお願い
1:00:48し
1:00:50ますあありがとうございますえっとまず
1:00:53簡単に自己紹介ですこの緑色の丸い
1:00:57アイコンで活動しているクラミと言います
1:01:00gitHUBとかXで同じIDを使って
1:01:02いるのでまもしよければフォローとかお
1:01:04願いしますでまウブフロントエンジニアを
1:01:09やっていてま今日NEXTで対された会な
1:01:12のでちょっと自分とNEXTの関わり
1:01:15みたいなのを2行で書いてきましたなんだ
1:01:18かんだNEXTJSもう彼これれ5年
1:01:20ぐらい使ってる気がするのでえっと古い頃
1:01:24からで言うとゲットイニシャルプスGet
1:01:26サーバーサイドプスGstaatプスだの
1:01:29isrだので最新のAppleRSCだの
1:01:32一通り全部なんかやってきた気がしてます
1:01:36えRSCっていうところになってくると
1:01:39えっとまAppルタ割と最近の機能の話に
1:01:42なってくるんですけどこいつについては
1:01:43去年の6月ぐらいからかなAppルタを
1:01:47あの実際に使うっていう案件でえっとま初
1:01:50挑戦してきたみたいな感じですねでま
1:01:55そんなAppleの話
1:01:57でまいい話ばっかりじゃなくてですねま
1:02:00困ることは結構色々あるんですよね
1:02:02Appleはやっぱりえちょっと地味に
1:02:05困ったこと3つここに書いていますま
1:02:08やっぱりキャッシュの挙動難しいよね
1:02:10みたいな話とか下2つはえっとNEXT
1:02:13本体というよりは他のライブラリで
1:02:15組み合わせた時の話ですねえっとデータ
1:02:17ドックオブザーバビリティで使うデータ
1:02:18ドックの連携で苦労するとかえMSWモ
1:02:23サービスアカですの連携で苦労するみたい
1:02:25な話を
1:02:26ちょっとあげてみましたま他にも困った
1:02:28こといっぱいあるんですけどちょっと今日
1:02:30あのあげたのは3つですえ実はこの3つ
1:02:34選んだのには理由があってこの3つ共通し
1:02:36てる点があるんですねはいということで
1:02:38今日の本題です俺のフェッチは汚れまくっ
1:02:40て
1:02:42ますあとあの今日皆さんすごいいい話され
1:02:46ている中最後にこんなことを言うのは
1:02:48すごく申し訳ないですけど本当今日の話
1:02:50半分か8割ぐらい僕の愚痴ですねなんで
1:02:54特に有益な結論とかないです本当ごめん
1:02:57なさいでえっと緩和球大ということで元に
1:03:01戻りますえさっきえっと3つライブラリー
1:03:05あげましたねNEXT本体とデータドッグ
1:03:08とMSWえこの共通点フッチが汚れて
1:03:12るって言ったんですけどそうです
1:03:14GlobalDIS.fchにモンキー
1:03:16パッチを当てている3兄弟ですなんで
1:03:19フッチAPIってまあの昨のウェブ
1:03:22フロントでものすごく人気者なんですよね
1:03:26でまウェブ標準だし
1:03:29あのまインターフェイスが統一されてて
1:03:32えっと何ですかノード以外のまBANとか
1:03:37deoとかああいうとこでも使えるしまあ
1:03:40いい側面いっぱいあるんですけどま
1:03:41グローバルディスフェッチにモンキー
1:03:43パッチ当ててる時点で最悪なんですよねで
1:03:45えっと今日はそんなフェッチパッチが衝突
1:03:47する話をお届けしたいと思い
1:03:50ますということでまずはえっとネスト本体
1:03:53のフェッチパッチのおさいから
1:03:56えネクJS特にあのAppルータて
1:03:59ページズルーターじゃない最近の開発の方
1:04:01ですねえっとこのキャッシュがいっぱいあ
1:04:03るっていう話は割と有名かなと思います
1:04:05なんかキャッシュが何種類もあってどれが
1:04:07どういう挙動してるのか分かりづらい
1:04:08みたいな記事は結構もうここ12年で
1:04:11いろんなとこに出てきてるんじゃないかな
1:04:13と思いますなのでこの4種類全部を紹介
1:04:15するっていうことはしないんですけど
1:04:17えっとまずこの4種類のうちの1つ目
1:04:19リクエストメモズって呼ばれるキャッシュ
1:04:22はこのフェッチパチと絡んでますこれ
1:04:24ネクストのドキュメントに貼ってあった図
1:04:26そのものですねリクエストメモリーズの
1:04:29概念図
1:04:30です1番左側のこの部分がいわゆる
1:04:33レンダリングの時に呼び出されるえ
1:04:36サーバーコンポーネントとかレイアウト
1:04:38コンポーネントって呼ばれるやつですね
1:04:41こいつらがまあの好き勝手にルート
1:04:44レイアウトはえっとBのリソースを取って
1:04:46きたりこのジェネレートメタデータはBの
1:04:48リソースを持ってきたり普通の
1:04:50コンポーネントはまCを持ってきたり
1:04:52みたいな好き勝手にフェッチするわけです
1:04:54よでこの好き勝手に置してやつ全部並べる
1:04:56とこの真ん中みたいになるんですけど
1:04:58よくよく見たらえっとBとCとA被り
1:05:00まくってんじゃんって言ってじゃあ1個で
1:05:02まとめた方がいいよねって言ってえこう
1:05:05まとめるデープするってやつですねこれを
1:05:06まリクエストメモリーズとえ呼んでい
1:05:11ます今ネストのフェッチをパッチして
1:05:15るっていう言い方をしたんすけどま若干
1:05:17これ語弊があるというかえっと今の
1:05:20NEXTのバージョンV14系においては
1:05:23まどっちかというと実はこれリアクトの
1:05:24コードにこのフェッチのパッチが入ってい
1:05:27ますがえリアクトの1番最新になりそうな
1:05:3119ではこのパッチのコードって削除され
1:05:34て同じえパッチのコードがえっとネスト側
1:05:38に取り込まれていますなんでこの656
1:05:425058っていうプルリックが
1:05:44えっと新しいリアクトの取り込みとネスト
1:05:47のフェッチパッチ適用っていう同時にやっ
1:05:49てるプルリクだったりすんでま結局の
1:05:51ところえネクストがフェッチパッチしてる
1:05:54と言えるんじゃないかなとと思い
1:05:56ますはい次アルターキャッシュ天王のもう
1:06:001柱ですねデータキャッシュ君
1:06:02ですでさっきえっとこの言ったリクエスト
1:06:05メモリーズはいわゆる1個のレンダリング
1:06:07の中で共有されるキャッシュっていう話
1:06:11だったんですけどこのデータキャッシュは
1:06:13もうちょっと
1:06:14え広範囲に及ぶキャッシュというか
1:06:17いろんな人のレンダリングで共有される
1:06:19キャッシュですあ概念図で言うとこういう
1:06:22感じですかねえっとリクエストメノイズの
1:06:25後にまデータキャッシュ見に行ってあれば
1:06:28使うよと
1:06:30かこっちは割と分かりやすくてですね
1:06:34NEXTのドキュメントを覗いてみると
1:06:36フェッチの時になんか謎のNEXTって
1:06:38オプションが出てくるんですねでここで
1:06:40例えばえ再検証までの期間3601時間に
1:06:43したいとかあとはまリバリーとする時のえ
1:06:47やりやすいようにタグを打っておきたい
1:06:48みたいなことがえ拡張されていたりします
1:06:52もちろんこんな本来のフフというか
1:06:55いわゆるフッチAPIにNEXTトって
1:06:57いうオプションないのでこれはあの
1:06:58フェッチをパッチされているっていうこと
1:07:00ですよ
1:07:03ねでまそれぞれオプトアウトできるでき
1:07:06ないみたいな話はあるんですがあのいずれ
1:07:08にせよですねまデータキャッシュとか
1:07:10オプトアウトできるんですけどこの
1:07:12NEXTがフッチのAPIをパッチするっ
1:07:14ていうこれ自体はそもそも不可費だと思っ
1:07:17て
1:07:18ますでここまでがま前提っっていう感じで
1:07:22実際に僕が困った愚痴の話に入っていくん
1:07:24ですけどま1個目がデータドック
1:07:27APMAPMアプリケーション
1:07:29パフォーマンスモニタリングの略で多分皆
1:07:32さんもプロダクトでなんか運用してる時に
1:07:34は何かしらのAPMとかを
1:07:36使うのがもう普通になってるのかなと思い
1:07:39ますデータドック以外で言うとそうですね
1:07:42ニューレリックとかセントリーとか標準的
1:07:44なやつ言うとオープンテレメトリとかかな
1:07:47で特にAPMって言ってる場合に1番
1:07:51欲しくなるのがですねこの分散トレースっ
1:07:53て呼ばれる機能ですよくこういうフレーム
1:07:55グラフとか言われるので可視化されてる
1:07:57あいつですここのイメージはえっと1番上
1:08:02の赤いところがNEXTJSのサーバーで
1:08:05えっとま青いところがなんかのマイクロ
1:08:07サービスというかバックエンドのサービス
1:08:09ですねでここに対してえコンポーネント
1:08:13だったり何だったりからえっとフッチをし
1:08:16てデータを取ってくるみたいな時にこの
1:08:18赤いサービスに来たリクエストと青い
1:08:21サービスに来るリクエストが元々は1個の
1:08:24リクエストだったんだよっていうこう
1:08:25紐付けをするっていうのがこの分散
1:08:28トレースの強みなんですねでこの分散ト
1:08:31レースって一般的にどうやって実装され
1:08:33てるかって言うとですねこの青と赤の境界
1:08:36のここここでえっとHP通信をしている
1:08:39場合このhcp通信のえっとヘタにですね
1:08:43えまいわゆるログIDみたいな
1:08:45トレーシングIDとかって呼ばれるんです
1:08:47けどみたいなものを仕込んでおくことで
1:08:49この赤と青が紐づくとまそんな風にあの
1:08:52なってますえこのhcpの時にヘッタ
1:08:57押し込むとかえっとオブザーバビリティの
1:08:59ための測定の準備をすることをあの軽装
1:09:02する英語で言うとインストメントってやつ
1:09:04ですねするって言うんですがこの計装を
1:09:07初期化するっていうのじゃNEXTの場合
1:09:08どこでやるのって言うとインスルメント
1:09:10いうのが推奨されてますこれインスン
1:09:14インストルメントTSのドキュメントで
1:09:17実際ここの例を書いてるあの見ると分かる
1:09:20通りえパーセルスラオテルとオープン
1:09:22テレメトリーの軽装の初期化をしてますよ
1:09:24ねまあなのでデータドックのsdkを
1:09:29インスルメントTSで初期化するってのま
1:09:31四国全頭なえっと1番こうパーセル側が
1:09:35考えてケースに近しい使い方のはずなん
1:09:37ですけどま問題って言ってる側には察しが
1:09:40つくとり動かねんですよ
1:09:43えあ一応あのNEXT名誉のために言って
1:09:46おくとえっと今年の頭ぐらいには治って
1:09:50ますで結構データドックの周側でも割とま
1:09:56なんで動かねえんだみたいなのがワワチ
1:09:58なっててで正直いろんな問題があの絡まっ
1:10:02て動いてないっていうのがあるんですけど
1:10:05あの今日の話フェッチパッチの話に関連し
1:10:07て言うと起きたことの最悪のところがです
1:10:09ねこのネクストとバックエンドサービス感
1:10:11のスパンが紐づかない要するにこれとこれ
1:10:14が紐づかない何を言ってるかって言うと
1:10:17HPヘッダーにトレーシングIDが仕込ま
1:10:19れ
1:10:20ない要するに分散トレースとして致命的
1:10:23っていうやつですね
1:10:26でしたえ実際さっきのこの1周から辿っ
1:10:31てったnextjsのプリクとかを
1:10:33よくよく読んでるとなんで取れなかったん
1:10:36だろうなって見てるとですねまNEXTの
1:10:37共同としてすごく大雑把に説明すると
1:10:40こんな感じのことになってましたえ
1:10:42NEXTJSがサーバーを起動する時に
1:10:44まずFAPIを記憶しますでNEXTが
1:10:46インスーTSをキックする時にえその中で
1:10:50呼ばれるDDトレースこれがデータドック
1:10:51のsdkですけどフェッチをパッチします
1:10:53パッチが2回出てくるですねで3番目これ
1:10:57は普通のアプリケーションのコード実行
1:10:58する時のイメージですけどこのななぜかは
1:11:02よくわかんないです
1:11:03けど1で記憶したフッチAPIにパッチを
1:11:07当てて利用するんですねなのでここの2番
1:11:10っていうのはなかったことになって
1:11:12ますまそりはあの分散トレスされるわけ
1:11:15ないですよ
1:11:17ねでその次MSWが使えない問題です
1:11:22MSWもあの割と有名なライブラリーです
1:11:24し以外のところで使われてる方も多いん
1:11:27じゃないかなと思いますが年のたの説明し
1:11:29ておくとえHTP通信をモクするための
1:11:33ライブラリーですねさっきのデタドッ
1:11:35APMはこの赤と青の通信を補足するって
1:11:38いう話でしたけど青を実際に実行せずに赤
1:11:42で折り返したいみたいなま開発時に開発時
1:11:45とテストですねに使われるライブラリー
1:11:48ですモックMSW何の略かっていうと
1:11:52モックサービスワーカーっていうぐらいな
1:11:54んでブラウザがではあのサービスワーカー
1:11:56を使ってHP通信インターセプトしてるん
1:11:58ですけどノJSの場合はそうじゃないです
1:12:02あの素朴にフチパッチを当ててSCP通信
1:12:06をインターセプトしますまなんとなくここ
1:12:07でこの先の話想像つきますよね
1:12:10もうなのでえっとNEXTJSのえ
1:12:14リアクトサーバー環境で動かせ動かす
1:12:16モジュール要するにサーバー
1:12:17コンポーネントとかサーバーアクションで
1:12:19MSノドが利用できないという問題が発生
1:12:22するわけですね
1:12:26この1周は結構昔から立ち上がっていてな
1:12:3013なんでアルタ出て割と最初の心ぐらい
1:12:33かな2023年
1:12:35の2月ん1月とかですか結構前ですよねに
1:12:40立ち上がってるなんならMSWの
1:12:41バージョンが1の頃から立ってる集か
1:12:46なで例えばサーバーコンポーネントでま
1:12:49こんな感じのまルートレイアウトとかでも
1:12:51いいんですけどえMSWノードから
1:12:54セットアップしてきてえハンドラーを書い
1:12:57て使いますみたいなコドを書いてみると
1:13:00あの一瞬動くんですよ一瞬動くっていうの
1:13:03は最初の画面を開いた時には動くんだけど
1:13:05えっとまリロードするとかコードちょっと
1:13:08変更するとかした瞬間にここのハンドラー
1:13:11が空ってマジでこっちのJSを取ってくる
1:13:14みたいな挙動になったりし
1:13:16ますえこの問題もまようやく先月の末先月
1:13:22のどっかぐらいかなこの68193って
1:13:24いうところで
1:13:25修正が入ってるんですけどこっちはですね
1:13:28多分まだあのいわゆる14.2.0みたい
1:13:31なネクストの安定版の方には含まれてない
1:13:33んだと思いますなのでま次の
1:13:37えっとさっき来月ネクストコンフがあって
1:13:40そこでV15でそうだよねみたいな話が他
1:13:42の方からもありましたけどまその時ぐらい
1:13:44には入ってくるのかなとは思うのでえ問題
1:13:47としてはまあの収束しつつはあるんです
1:13:50ねでこっちのプルリを眺めてみるとですね
1:13:54このルに
1:13:56えhmr中にえっとユーザーランドの
1:14:00フェッチパッチを許容しますみたいなこと
1:14:02が書いてあるんであのhmrホット
1:14:06モジュールリプレイスメントとえサード
1:14:08パーティ側ここではMSWノードなんです
1:14:10けどのフッチのパッチが衝突してたなって
1:14:12ことがあの見て取れ
1:14:14ますなんやねhmrキャッシュって感じ
1:14:17ですよね最初にあのリクエストメモイズと
1:14:19データキャッシュの話したんですけど
1:14:21まだまだあのフェッチパッチして
1:14:22キャッシュしてるやつがいるんですねはい
1:14:25第3の資格サーバーコンポーネンツhmr
1:14:27キャッシュです
1:14:29ねこいつも結構強いキャッシュでよくよく
1:14:32読んでみるとキャッシュノーストアって
1:14:34書いてあってもキャ
1:14:36あのえフェッチの結果適用するぜっていう
1:14:39やつですhmrなのでいわゆる
1:14:42あのなんだろう開発中にサーバー
1:14:45コンポーネントをちょっと書き換えた時に
1:14:47えフッチの部分変えてないんだったら
1:14:50リクエスト飛ばさずにそのまま使えばいい
1:14:51んじゃないっていうまそういうこう
1:14:55まよく言えば優しさですよね悪く言えば
1:14:58余計なおせかかなっていう気もし
1:15:02ますでさっきあの前段で僕APMの話して
1:15:06そこでインストルメントョケースが動く
1:15:07ようになったよって話があったんで一応
1:15:09補足しておくとこのNEXのV14系で
1:15:12あればですね一応インストルメントケース
1:15:15を使えばMSWノードを動かすっていう
1:15:17こと自体はできるんですけどまその場合は
1:15:19ですねインストルメントションって
1:15:21サーバー機動時に一発だけ動くみたいな
1:15:25ことなのでえっとデブサーバーで
1:15:27組み合わせてもそのハンドラを書き換えて
1:15:29もそれは反映されないみたいなことがある
1:15:31のでえっと開発利便的にこう便利に使いた
1:15:35いってなるとあのまた別の発をする必要が
1:15:38あったりしますまちょっと不向きだって
1:15:40ことですねあの頑張ればできます
1:15:44え今日してきた話ってそのいわゆるサード
1:15:48パーティーのライブラリーどれもそこそこ
1:15:50有名なライブラリーでみんな使っ
1:15:52てるやつかなと思うんですけどまそいつと
1:15:56えネクストのフェッチのパッチが衝突し
1:15:58たりしたっていう話なわけですねという
1:16:00ことはまネクストがそもそもフェッチ
1:16:02パッチしなきゃこんなことになんなかった
1:16:03んじゃないのみたいな見方もできると思い
1:16:06ますしま実際結構なあの当初から反対の
1:16:10意見も強かったんじゃないかなと思ってい
1:16:12てえっとリーロビンソンもですねこれ去年
1:16:14の12月ぐらいかなフェッチの拡張を
1:16:17やめるつもりだみたいな投稿は書いてあっ
1:16:19たりはするんですねえま15でこの
1:16:22フェッチのデフォルト挙動みたいなのはあ
1:16:25勝手にキャッシュするみたいなは実際緩和
1:16:27されてはいるんですがまただ今日の全あの
1:16:31最初の方で説明してきた通りまリアクトの
1:16:33フェッチパッチを取り込んでいたりとか
1:16:35hmrのキャッシュみたいな機能があった
1:16:37りっていうことを考えるとまそうそうこの
1:16:39フッチAPIをバッチするっていう行為
1:16:41自体をネクストがやめるっていうのはま
1:16:44あったとしてもまだいぶ先なんじゃないか
1:16:46なと思っているのでまフェッチが汚れ続け
1:16:49ていくことはもう許容していくしかないの
1:16:52かなと思っていますえ
1:16:55これは僕がそのAppleタの開発してい
1:16:57た時V13とかVとかでやってた時にあ
1:17:00もうフェッチパッチどうしようもねえなっ
1:17:02て思った時にしぶしぶやっていたワーカ
1:17:04ラウンドですね要するにネクストが
1:17:06フェッチを認識するより前に自分の当て
1:17:09たいパッチを当ててしまうっていうま俺の
1:17:11俺の方で先にやらせろみたいなですねま
1:17:13そもそもグローバルディスのにパッチを
1:17:15当てるところでなんかこう順序を気にし
1:17:17てる時点で負けてるんですけど負けてるの
1:17:19は100の承知なんですけどまこれぐらい
1:17:21しかやり方がないっていう話ですねで
1:17:24例えばノードオプションで言うとえっと
1:17:28esmの場合でちょっとノードの
1:17:30バージョンがいくつから使えたか忘れたん
1:17:31ですけど配分配分イポートっていうところ
1:17:34の先にSMの名前書くと
1:17:37えっと最初にインポートするファイルとし
1:17:40て認識されますしcjsの場合だったら
1:17:42配分配リクでcjsのコードを書けばあの
1:17:46同じことができますしあとはまNEXTの
1:17:48カスタムサーバーの機能使っちゃえばえ
1:17:50自分でネクロードする前に2のあの
1:17:53モジュール読み込めるのでえっとま俺の
1:17:56パッチを先にやらせろ合戦に勝てるわけ
1:17:59です
1:18:00ねまはっきり言って本当にひどいワーク
1:18:04ラウンドだと思ってるんですけどまこれが
1:18:061番マっていう感じですということで
1:18:09えっと今日のまとめですまあの話した通り
1:18:12NEXTフェッチにパッチを当ててて
1:18:14例えばリクエストメモリーズだったりとか
1:18:16ベータキャッシュだったりとかhmrの
1:18:18キャッシュっていうところに活用してます
1:18:20NEXTV155でも多分フェッチに
1:18:22パッチが当たることそれ自体はえ引きき
1:18:25実行されていくんだと思ってますMSW
1:18:27ノードとかDDトレースみたいなペッチを
1:18:30パッチすることでえいい感じに動いてる
1:18:32ソリューションみたいなのと衝突するって
1:18:34いうことはあの用意に起きますし実際
1:18:36NEXTV14では起きるのでえこれは
1:18:39注意しといた方がいいのかなと思ってます
1:18:41ま現代的なフロントエンドみたいなこと
1:18:43言ってますけど正直こうこういうのを見
1:18:45てると本当に白票の上でギリギリ鳴いたっ
1:18:48てるんだなみたいなこと思ってなんか誰に
1:18:50ぶつければいいんだろうみたいな気持ちに
1:18:52なりますよねはいあと参考資料ですね
1:18:55えっとこの下のブログいいいいタイトル
1:18:59ですよねWhyパッチングGlobal
1:19:01is
1:19:01ハーフこれ書いたえっとこの作者の方はえ
1:19:05MSWの作者の方でまネクストだったりと
1:19:09かえっと他のフレームワークがやっぱり
1:19:11ペッチにパッチしてる話があるんですけど
1:19:13まそれに対するこう悲しい辛いみたいな
1:19:16ですね魂の声みたいなのが読めるのでま
1:19:19興味があったら読むのお勧めします以上
1:19:21ですどうもありがとうございました
1:19:24ありがとうございございました非常に有名
1:19:26なレアフレーマークがフッチにパッチ当て
1:19:28ていてあのとても非常にモテモテだなと
1:19:31思いまし
1:19:32たありがとうございましたそうしましたら
1:19:35えっと今から5分えっと20時25分まで
1:19:39休憩の時間にさせていただければなと思い
1:19:42ます
1:26:53た
1:26:57オッケーですかあそれではパネル
1:27:00ディスカッションの方に進め入っていき
1:27:02たいと思いますあのちょっと全体的にあの
1:27:04時間が押してしまってるんですがパネル
1:27:06ディスカッションの時間を大事にしたいの
1:27:08で
1:27:11あの20時40分までのお手だったんです
1:27:14が10分伸ばしてえっと20時50分まで
1:27:16ディスカッションの方やっていきたいと
1:27:17思いますよろしくお願いします
1:27:24[拍手]
1:27:26はいちょっとえじゃテーマの方に移らせて
1:27:31いただきますえといくつかちょっと自分の
1:27:33方でテーマピックアップしてまして今回
1:27:36あのアンリッシュっていうえっとタイトル
1:27:38の通りま力を解放させるってことがま需要
1:27:40なのかなという風に思ってるんですけれど
1:27:42も結構いろんな今日の発表の内容をお伺い
1:27:45するとやっぱりフレームワークとして結構
1:27:47難しい部分もたくさんあるのかなと感じて
1:27:49ますそんな中であのフレームワークとして
1:27:51の力を最大発見するために自だと思ってる
1:27:55ことちょっとお聞きできればなと思い
1:27:58ますそうしましたらじゃあちょっと手前側
1:28:02のすさんの方
1:28:04からいただけたりしますかなるほど
1:28:08僕は多もフロントエンド1000人の
1:28:11エンジニアじゃないんでちょっとあんまり
1:28:14的を得たことは言えないかもしれないです
1:28:16けどなでしょうねまNEXTJSとか見て
1:28:19てももうサーバーコンポーネントとか
1:28:22サーバーアクションとかなんかそういうの
1:28:25が増えてきてもうもはやフロントも
1:28:27サーバーも一緒になって考えるみたいに
1:28:29なってきてるんでま全体をこう最適化する
1:28:32というか最大限を発揮しようとするとま
1:28:36フロントエンドていう領域じゃなくなるの
1:28:39かなみたいなのをま最近感じてるんでま逆
1:28:44に言うとNEXTJSとかで本当にもう
1:28:46サーバーのコードも普通にスムーズに書い
1:28:50て連携できるようになってきてるん
1:28:52でもうフロントエンドエンジニアが全部
1:28:55やればいいじゃんみたいな感じの風になっ
1:28:58てきてるからもうだからバックエンド
1:29:00エンジニアいらねえよみたいな感じでこう
1:29:04フロントエンドの人がグイグイこう出張っ
1:29:07てくれば最大限発揮しつつこう自分たちの
1:29:12世界がやってくるんじゃないかと思って
1:29:14ます
1:29:17けどあり分
1:29:26順番があのはいプレストのお願いします
1:29:29そうそうですねちょちょっとなんか今の話
1:29:31と続かないかもしれないんですけどなんか
1:29:33フレームワークってま何かの意図を持って
1:29:36あのあるユースケースまないしあの広い
1:29:39ユースケースかもしれないですけどに対し
1:29:41てなんていうかまあの一定の枠組みを提供
1:29:44するまフレームという名の通りだと思って
1:29:46いてでそうするとまあの最大限の力を発揮
1:29:49するってこはつまりえっとその
1:29:50フレームワークのデザインされた意図
1:29:53みたいななんていうかこういう風に使うと
1:29:55こういう風にうまくいくんだっていうこと
1:29:58をまあのインターフェイスからも
1:29:59読み取れるとは思うんですけどまそういう
1:30:01とこをこう意識しながらあの考えていく
1:30:03みたいないうようなことをすればあの発揮
1:30:07できやすいのかなと思っていますでそう
1:30:10いう意味で言うとあのあなんかすごい
1:30:13ぶっ掛けたこ行っちゃいますよいや
1:30:15ネキストジスってあのさっきちょっと
1:30:17ちらっとその話したんですけどあの
1:30:19パブリックなインターネットからアクセス
1:30:21される時に素早くこうリスポンスを返す
1:30:24みたいなあの方にどちらかとと向いてる
1:30:26アプリでBTBサースで使っていいんだっ
1:30:28けって一瞬思っちゃったんですけどでも
1:30:30あのまそういう意図を意識した上でまあの
1:30:34よりあのそうですねBTBのサーズでも
1:30:36向いた使い方をすればま発揮させることは
1:30:39できるんじゃないかみたいなのが自分の
1:30:41考えですあありがとうございますそ
1:30:43フレームワークの意図みたいなのプレサ
1:30:45さんはどういう風に感じ取ってるという
1:30:48か情報収集してるんですかそうすね
1:30:54これめちゃくちゃなんだろうなあの
1:30:57トリプルアクセルみたいなこと言いそうに
1:30:59なるんですけど感覚みたいなあのいやでも
1:31:02あのなんていうかまデザインじゃないです
1:31:05かやっぱインターフェイスそのものがその
1:31:08例えば
1:31:09あのまサーバーコンポーネントもその
1:31:12関数を通してあサーバーアクションか
1:31:15ごめんなさい関数を通して呼び出せるよう
1:31:17にしますっていうのとかもなんていうか今
1:31:20までのそのあの普通のJSの書き方ででき
1:31:23ますよみたいなあのデザイン来
1:31:27たデザインだと思ってい
1:31:30てまその分なんか複雑さをその中に
1:31:33閉じ込めてくれているなんでそこをなんて
1:31:36いうかそこに複雑さが存在しているけどま
1:31:38あのま簡単にしてくれてるんだよなみたい
1:31:41なことをこう意識するとか例えばそういう
1:31:42ことま含まれるかなと思いますありがとう
1:31:45ございますそしたらくみさんの方お願いし
1:31:49ますこうやって喋る
1:31:52入っトークでもさせられるのかなって思っ
1:31:55て焦っちゃいましたけど何の話何してでし
1:31:57たっけあ最大限発揮するために重要なあで
1:32:00もそうですねえっと僕もその今えっと
1:32:03おっしゃっていただいたやっぱり良い
1:32:05フレームワークって使っていれば勝手に
1:32:08そのフレームワークの設計者が考えている
1:32:12思想に乗れるだと思うんですよねえなので
1:32:16その何でもできるすごく便利なライブラ
1:32:18リーっていうのとフレームワークの違いは
1:32:21やっぱりそこかなと思っていてで
1:32:24そういうのをあの知って使うのとあ知って
1:32:29というかま想像してこうかなって思い
1:32:30ながら使うのとそうじゃないとりあえず
1:32:33インストールしました使いましたっていう
1:32:35場合では大きな差が出るんじゃないかな
1:32:38みたいなのはやっぱりあのAppleター
1:32:40の話で言うとえっとリアクトサーバー
1:32:43コンポーネントってま何のためにできたん
1:32:46だっけみたいなのをそのま作った人って
1:32:49要するにリアクトチームリアクトデータ
1:32:51チームの人たなのでまリアクトデータチ
1:32:53チームの人たちが喋ってる動画探してあ
1:32:56そういうことがしたかったのねだからこう
1:32:58なってんのねなるほどねみたいなのをま
1:33:00結構車内の人と話し合ったりしながらあ
1:33:04だったらこういう風にアプリケーション
1:33:05作るといいのかもねあだからNEXTの
1:33:07キャッシュでこうなってんのねみたいな
1:33:09あの壁打ちとかをよくやったりはしてい
1:33:12ますでもう1個ま重要というか
1:33:15その今日の話とかでもあったんですけどと
1:33:19はいうまく動かねみたいな時にやっぱり
1:33:21フレームワークがどう動いてるかをの内部
1:33:25を知れる例えばえっとウパックとかタブ
1:33:28パックがどういうJSのコードを吐いてる
1:33:30んだろうって自分で読んであの読もうと
1:33:33できる調べられるのとそうじゃないので
1:33:36えっとどこまで自分がやっていいんだろ
1:33:38うっていうこうアクセルの踏み込み方が
1:33:39全然変わってくるのでまそういうスキルっ
1:33:41ていうのはなんだかんだというかこの時代
1:33:43だからこそというかあのまヒストリーAP
1:33:46どうやって置き換えようかなとかま
1:33:48フェッチにパッチどうやって当てようかな
1:33:49みたいなの全部一緒ですよねうんやべえん
1:33:52ですよ使ってる技術が全部
1:33:54やべえんだけどやばいことしないとあの
1:33:57上司から怒られるわけだからそのなんか
1:33:59こうアクセルどこまで踏んでいいのかな
1:34:01みたいな見極める力も一方で必要かな
1:34:04なんてことを思ったりしています
1:34:07はい
1:34:09はいこれ最後めっちゃ不利ですねなんか
1:34:12もうみんなが言ってくれて僕特に言うこと
1:34:15ないんですけどそれだめでしょだめか
1:34:17えっとそうですねただあのま先ほどから
1:34:21話し上がってる通りでそのNEXTJSの
1:34:24思想で言うとまやはりそのパフォーマン
1:34:27スっていう面はすく考えられてると思うん
1:34:30ですねまなんでその分キャッシュが難しい
1:34:33とかうんそう最適化をもうフルでやると
1:34:36ああいう感じになると思うんですね今の現
1:34:38段階ではなんですけどまもちろんPPRと
1:34:41かも今後あるとは思うんですけどなんで
1:34:44その自分たちの作るサービス例今NEXT
1:34:48GSだともう完全に2Cでめっちゃ
1:34:50アクセスが来るこうサービスでも全然
1:34:52耐えれるようなデになってるじゃないです
1:34:54かただ先ほどおっしゃった通りその2Bで
1:34:56はそこまで必要ないはずででそこまで
1:35:00えっとやるかどうかっていうこう見極め
1:35:03その例えばキャッシュが難しいからこの
1:35:05キャッシュはオフにしようとかでそうする
1:35:07ことによってま例えばそのNEXTだっ
1:35:09たらこうデブでは動くんだけど
1:35:10プロダクションにビルドするとこう
1:35:13スタティックに変わるからあの結果が
1:35:16変わるとかこういうことってよく
1:35:17キャッシュはあるんですねなんですけど
1:35:19そのフルルートキャシュとかのせいてです
1:35:21ねなんですけどあのそういうものををこう
1:35:25やっぱ2Cで今フルになってるやつを自分
1:35:28たちは2Bだからこのキャッシュとこの
1:35:29キャッシュはオフにしようとかでそうする
1:35:31ことによってその扱うみ簡単になるわけ
1:35:34ですよねそそうなんかよくわかんないバグ
1:35:36とかも踏みづらくなりますしなのでそう
1:35:38いう風にそのサービスにあったあのま
1:35:41フレームワークの中のフレームワークの中
1:35:44にあるこうレベル設定とかもえっとできる
1:35:46ようになればいいのかなとはなんでえっと
1:35:49先ほど皆さんが言った通りそのフレワーク
1:35:51の思考そのどういう風な想で作作られてて
1:35:54それを自分たちのサービスでどうやって
1:35:56マッチさせようかっていうのはあのま
1:35:58えっとエンジニアとしてえっと必要な力か
1:36:01なと思ってますあありがとうございます
1:36:05確かフレームワークの思想をえっと意識
1:36:07するっていのは非常に大事だなと感じまし
1:36:09たあともう1点ちょっと気になったのは
1:36:12あのリアクトチームのあの話とかを
1:36:15キャッチアップしてるって話があったと
1:36:17思うんですけどもなんかフレームワークを
1:36:19使ってて壁に当たった時とかになんかその
1:36:22リアクトチームのど見るってのもちろんだ
1:36:24と思うんですけど他に何かやられてること
1:36:25とかってあったりします
1:36:28かあのどいいんです
1:36:32けど指しろ
1:36:36や私はソースコード読んでしまううん自分
1:36:40もそのタイプです
1:36:46ねってるいいの最後の方が最後の方があれ
1:36:49だよ難しくなるよ前のと一緒僕はあの
1:36:54ソースコードを読んでる知り合いを見つけ
1:36:56て聞くですね
1:36:58うん知り合いに聞く強い羨ましい環境です
1:37:04ねなんかさっきそのあの実際作った人の
1:37:09から話を聞く話聞いてなんか確かにそうだ
1:37:11よなて思ったんです
1:37:14うんそういうのってどこで繋がったりして
1:37:17思ですかあそ話を聞くっていうのはあの
1:37:20ちょ直にこう聞くではなくてそういうま
1:37:22例えばリアクトだったらえなんだろう今は
1:37:26もうないのかF8みたいなイベントとか
1:37:29ああいうところでこうダーンて発表とかが
1:37:31あるじゃないですかまそういうところで
1:37:34えっとそもそも現状の課題とは何かみたい
1:37:36な説明とかを大体入ってるけどまそういう
1:37:39のを聞いてあそれを解消したかったのね
1:37:41みたいなのをあのキャッチアップする
1:37:43みたいな意味合いですねだからあの問題を
1:37:46来た時というよりはもっとあの全般的な方
1:37:49の話はそっから仕入れることができまって
1:37:51話ですねうんうんちょっとちゃいましたあ
1:37:54ありがとうございます他あるよって方
1:37:57いらっしゃいますかね一緒なんだよえっと
1:38:01そうですねソースコードを読むです
1:38:03ありがとうござい
1:38:04ますはいまそっからその多分これみんなと
1:38:08一緒なですけど多分そっからま一緒を辿っ
1:38:10たりとかまうんうんやっぱ自分で手が加え
1:38:13れる部分ってそのソースコードから見た時
1:38:15にそこまでない可能性の方が全然あるので
1:38:17そしたらま1周追ってとか1周立ててとか
1:38:20そういう感じになるのかなと思ってます
1:38:22うんうんうんありがとうござい
1:38:24りそうなりますよねうんそこに気づく
1:38:30とヒロッピーとランチするでだいぶ解決し
1:38:34ますよなんかその大体すごい知ってるんで
1:38:36ヒロッピーがそのソスとリアクトの19何
1:38:40変わるんですかねって言ったら多分1時間
1:38:41ぐらいずっと話してくれるんでそういう
1:38:44理解が深まるそうですねこいこ話しまし
1:38:49たありがとうございます
1:38:55えっとこのテーマに関してあの聞いてる方
1:38:57からなんか質問とかある方いますかこの
1:39:00観点で聞いてみたいとか大丈夫ですか
1:39:05ね早いんですけど2つめのテーマの方
1:39:08にあのフロントエンドとてもあのサバ
1:39:12コンポーネントとかアプルーターとか釣り
1:39:14かり早いなっていう風に感じてましてあの
1:39:17中着的になんかフロントエンドの技術を
1:39:19なんかどのように捉えてるのかなっていう
1:39:20ところとあとその持続的なシステムを作る
1:39:23にあたってなんか意識してることあれば
1:39:25この2点を聞きしたいなと思うんですが
1:39:27えっとじゃあ今回はひろぴさんの方
1:39:31から質問2つあってちょっと待今今ですよ
1:39:34ね
1:39:41はい早い方がこれ最後の方が良かったね
1:39:44最後です
1:39:47かすいませんちょっといきなりのもなっ
1:39:50ちゃうかもしれないんですけど
1:39:53そうですねまもちろんその中京中長期的に
1:39:58そのフロントエンド技術をどうやって
1:39:59組み込むかっていう話で言うとま今の時代
1:40:03の話になってししまうのかもしれないです
1:40:05けどそのNEXGS入れていればその
1:40:08NEXGS1個フレマーク入れていると
1:40:10例えばあのパーティータウンとかあの
1:40:13ウェブワーカーでこうGTMとか動くもの
1:40:15ですよねとかああいうのをサード
1:40:17パーティー系も全部入ってますしなん
1:40:19だろうな結構フレームワークがサポートし
1:40:21てくれてるんでそのフロントンの技術ま
1:40:25このフロントンの技術っていうのがどう
1:40:26いうものをちょっとさすのかが結構難しい
1:40:28んですけど例ライブラリーとかはあんまり
1:40:30入れなくてもいいかなと思っててで例えば
1:40:32そのフロントエン例えば新しいCSSの
1:40:35そのネストとかうんああいうシンタックス
1:40:37に関しては
1:40:39あのあ難しいな今の言い方結局僕テイル
1:40:43ウンド使っちゃってるから使ってないんだ
1:40:45けどまだけどそのそういう新しい
1:40:49シンタックスとかはま使ってもいいかなと
1:40:51は思いつつまやっぱりそのCSSに関して
1:40:54はそのダウンパイルが難しいのでJSと
1:40:56違ってなんであのCSSに関しては
1:40:58ちょっとまだ組み入れる段階ではない部分
1:41:01もやっぱあるレイヤーとかは入れれるん
1:41:03ですかねうんうんでえっとなんでどう
1:41:05取り組んでいくかって言うとやっぱりその
1:41:07えっとこ例えばJSとかでこう新しい信託
1:41:11例えばユージングとかそういうのですよ
1:41:12最近入ったものだとうんうんうんうんで
1:41:15えっとそういうのとかはえっと使ってはく
1:41:18行きたいっていうやっぱ気持ちあってただ
1:41:22結構その特にに関してはやっぱこう
1:41:24ユーザーの使ってるユーザーのその環境に
1:41:26依存する部分がやはりあるのでその使える
1:41:30ものと使えないものっていうのはやっぱ
1:41:31区別してえっと積極的に取り組んでいき
1:41:33たいのとえっと持続可能なシステムを続
1:41:39可能なシステムを開発するために意識して
1:41:42いる
1:41:43ことそうですねあんまり外れたことはやん
1:41:47ないようにしてるのとすごいありきたり
1:41:49ですね
1:41:51あのこれ持続的なシステム開発これなんか
1:41:54プロダクションとかでいいんですよねあ
1:41:55そういうことですはいま僕の場合は結構
1:41:57もうパッケージあんま入れないようにして
1:41:59てうんそのなんか何でもどんどんその
1:42:03パッケージ入れてくともう
1:42:04レノベイティングカラー
1:42:23まあとはそのNEXJSとかで言うとま
1:42:25やっぱりあの特に
1:42:28そのま実験的な機能とかがやっぱあると
1:42:31思います例インスルメントとかもそうです
1:42:33よねうんあれも実験的な機能で入ってるん
1:42:35ですけどそのあいうところでえっとはまり
1:42:38やっぱはまる可能性結構やっぱ僕もはまっ
1:42:40たんですよ実DDトレスやつでであのそう
1:42:45いう時にあのはまんないようあはまっても
1:42:47いいようにやっぱりソースコードは読んで
1:42:49るっていうのはやっぱありましたその
1:42:50NEXJS自体のソースコードですねうん
1:42:52うんうんうん
1:42:53っていう感じでちょっとごめんなさい全然
1:42:55考えてなかったんでいえありがとうござい
1:42:57ます薄い話でしたはい交代
1:43:00ですあそのNEXTデースの行動を読んで
1:43:03いくってのはその自身の興味のあるところ
1:43:05ベースでなんか掘っていくような感じなん
1:43:07ですか僕はそうですねそのはまった時は
1:43:11もう読まざるを得ないので読むんですけど
1:43:14基本的にはターボーパックしか読んでない
1:43:17です
1:43:19ねなんで本当に好きなところだけ読んでる
1:43:23コの方がやっぱ多いですね結構やっぱ
1:43:25ネクスは量が多いので全部読むこと結構
1:43:27大変なんですうんうんうんうんなんであの
1:43:29部分的にっていう感じではあるんですけど
1:43:31やっぱ日先ほどの1つ目の話と一緒です
1:43:33けどやっぱはまった時はソースコード読む
1:43:34んでその箇所に関してはやっぱ読むうん
1:43:36うんうんうんで特にはまりやすい部分は
1:43:38事前に読んでたっていうのはちょっとあっ
1:43:40たっていう感じですかねうんうんあ
1:43:41ありがとうござい
1:43:42ますあくみさんのお願いします今ひろっ
1:43:46ぴーさんの話聞て思ったんですけど僕
1:43:48はまらないとソスコと呼ばないんでてこと
1:43:49はネクストに好きな部分僕ないんだな
1:43:55はい何でしたっけ
1:43:58えっと下の質問から行くとまとにもかくに
1:44:03もえっとごそっとと捨てやすいコードの
1:44:06塊りを意識するみたいなことはフロントで
1:44:09は特に注意してますねなんで実はこういう
1:44:14関数エクスポートしてたけど誰からも
1:44:17インポートしてないとかま昔のCSS
1:44:20えっと本当に10年前とかの話だとなんか
1:44:251個のでっかいCSSにクラスいっぱい
1:44:27書いてあるけどえっと全然読んでない
1:44:30じゃんこれみたいなのをうんそれこそ俊蔵
1:44:33さんとかよくそういうのやってましたよね
1:44:35昔あ僕と俊蔵さん昔あの同じ会社だったん
1:44:38であの年さんがそういう仕事したの知って
1:44:41と言ってるんですけどやっぱフロントって
1:44:44そのやっぱいいだねとかこれ無駄じゃんと
1:44:47かあとまABテストみたいなやつですね
1:44:49もうちょっと真面目なやつで言うとまそう
1:44:50いうのとかあるんでまそういう時にまテ
1:44:53本当にこうテストコードとかそういうのも
1:44:55含めてえっといかに捨て
1:44:58やすいコードとして周りの人に書いて
1:45:01もらうかみたいなことは割とその
1:45:03プロダクション開発っていう意味だとあの
1:45:06どんなライライ使ってても意識はしてるか
1:45:09もですね中長期的にフロントの技術をどう
1:45:12組み込んでくかっていうところはまあ
1:45:15なんかあんまり真面目に考えたことなくっ
1:45:18てもう最後はお前が使いたいって言ったら
1:45:21使えばいいじゃんなんです
1:45:23別にJS使わなくたアプリケーション
1:45:26作れるわけじゃないですかでもまアルタ
1:45:28使ってみたいから使ってんですよねうん
1:45:31うんなの
1:45:33でまあ自分でやれるって信じてやればいい
1:45:37んじゃないですかねうんうんうんうん核が
1:45:39大事というところであとそのチームとして
1:45:43その捨てやすい行動各の大事にしてるって
1:45:45話がだったと思うんですけどなんかそれを
1:45:47くみさんだけじゃなくチームとしてそれを
1:45:50なんだろう確実に捨てやすいものを作って
1:45:53くってのはなどういった工夫の上でなんか
1:45:56そういったなんだろう
1:45:58な文化というかそういうの進とさせてるん
1:46:01ですかまなんか非な例というか簡単なやつ
1:46:06で言うとまこれは皆さんもよくやると思う
1:46:08んですけどそのフロントのコンポーネント
1:46:11を作る時に何でしょうあのハイジェとか
1:46:14ああいうのを使ってえっとコンポーネント
1:46:17のディレクトリを作ったら何でしょうね
1:46:19あのインデックスTSXとインデックス
1:46:21テストTSXとCSSモジュールだったら
1:46:23インデックスCSSモジュールズとみたい
1:46:26なのをこう自動で生成しておけば
1:46:29コンポーネント捨てようと思ったらその
1:46:30ディレクト捨てるだけっていうのが勝手に
1:46:32できてる状態にはなりますよねうんうん
1:46:34うんでもちろんそのそこまで簡単に自動化
1:46:38できないようなものとしてはえっとこの
1:46:40テストコードの使うデータってこういう
1:46:42とこに書いた方がえっと重複は多いかも
1:46:45しれないけど実は捨てやすいよねみたいな
1:46:47とかはまペアプロとかモブプロとかまそう
1:46:49いうのを通してまそれこそその文化みたい
1:46:51なうんうんうんうんでまなるべくみんなに
1:46:54知っていってもらってその教えた人が今度
1:46:56は次の人にえそういう指摘をできるように
1:46:59なってくれたらいいなみたいなことは考え
1:47:00てるって感じですかねうんうんうんうん
1:47:02確かにピアプロモプロ有効活用できそうだ
1:47:04なと思いましたありがとうございますそ次
1:47:07プレストさんの方お願いし
1:47:09ますなんか確かにミシの方に来ると難しく
1:47:12なっます
1:47:13やっぱりいや多分あのあのそうまさにあの
1:47:18お二方がおっしゃっていただいた話なて
1:47:21ちょっと正直思っちゃったんですけどあの
1:47:23そうですね多分あのあの元の質問の意の中
1:47:28に多分ライブラリーの選定とかみたいな話
1:47:30も多分入っていたかと思ちょっとなんか
1:47:32そこに補足するとなんかそのあのまなんか
1:47:37信じていいものとちょっとやばそうなも
1:47:39のっていうのはまあの確実にあってなんて
1:47:42かその例えば
1:47:45えっとまあのネキストJSで新しい機能が
1:47:49出ましたて言ったらまあの世の中のその
1:47:53なん何万人何十万人わかんないですけどの
1:47:56エンジニアがそれを使っていくってことに
1:47:58なるのでまあのいややっぱり無理でした
1:48:01ごめんなさいみたいなことはあるかもしれ
1:48:03ないけれどもなんか急に投げ出されたりと
1:48:05かすることはないわけですよねなんかそう
1:48:08いう意味でのなんてか信頼性とかあの安心
1:48:11感っていうのはあるので例えばそれは信じ
1:48:13ても大丈夫なんですけどただあのそうじゃ
1:48:17ないなんかちょっとあのあの個人で例えば
1:48:20頑頑張っているけれどもちょっとスが最近
1:48:23厳しいなみたいなとかはちゃんとあの
1:48:24見極めないと例えばいけないっていうのは
1:48:27まよくある話だと思うんですけどまそこの
1:48:29なんていうかうん将来将来にあたってこれ
1:48:32は本当に
1:48:33あのなんていうか支えられていくものなの
1:48:36かっていうのはいろんな多角的な面から
1:48:38それ見てまあの使うかどうかは判断して
1:48:41いくべきなのかなっていうのがなんか自分
1:48:43の力考えてることって感じですうんうん
1:48:45うんうんあれ今の聞いてと思ったんです
1:48:47けどSWCって割とメンテナス少なく
1:48:50なかったでしたっけ
1:48:53うん
1:48:54まあえっと少ないかって言われるとその昔
1:48:58よりは減ったんですけどそのノーJSで
1:49:00TSが使えるようになったのは最近ですよ
1:49:02ね1ヶ月ぐらい前うんであれはその内部
1:49:05SWCでそう内部SWCなんですけどあの
1:49:09まオーサーとかはえっとギットハブに
1:49:12やっぱいるのでえっとやってますとまずで
1:49:16えっとなんで少ないかって言うと今
1:49:17オーサーがあのターボパックで忙しいん
1:49:20ですねちょうどこの釣りシェイキング実装
1:49:22してたんですけど
1:49:23なんでその仕事で結構そのNEXTジスの
1:49:26リポジトリーでラスト書いてるんですよ
1:49:28なんで多分そう見えるかもしれない昔より
1:49:30も減ってるっていうのはそういう意味です
1:49:32ねなすか一応アクティブではある一応とか
1:49:34アクティブではあります
1:49:36ね回答になって
1:49:39ます
1:49:41はい最後すぐさんからお願いします別に
1:49:44いらない
1:49:46けど
1:49:49あひピに聞くと何でも答えてくれるんで
1:49:53いいですよ
1:49:55ねそうですねなんかフロントエンドの技術
1:49:58をどう組み込んでいくかまフロントエンド
1:50:00の中にどう技術を組み込んでいくのかって
1:50:03いうのとフロントエンドの技術そのものを
1:50:05こうプロダクト全体にどう組み込んでいく
1:50:07のかとまあ2つなんかあるかなと思うん
1:50:09ですけどまやっぱりそのなんかサーバー
1:50:13サイドを浸食し始めている最近の流れで
1:50:16言うと結構そのプロダクト全体でいうその
1:50:19フロントエンドというかまNEXTJSと
1:50:21かその辺りの立ち位置が変わってきてる
1:50:23なっていうのを感じるのでま中上期的には
1:50:27そのその辺の立ち位置がこうどうどの辺り
1:50:30でこう定着していくのかなみたいなのは
1:50:32結構見ていった方がいいのかなとは思って
1:50:34いてまなんかちょっと車内とかでも喋っ
1:50:38てるんですけどそのもうbffいらないん
1:50:40じゃないのみたいなうんそのサーバー
1:50:42コンポーネントとかサーバーアクション
1:50:44あるんだったらbffいらないじゃんとか
1:50:46そういう話もまフロントエンドの立場から
1:50:48すると出てくるまネイティブアプリとか
1:50:50そういうのを考えるとまそそそれだけでは
1:50:53ないんでなんまbffがいらないってなら
1:50:56ないんですけどまそういう風になってき
1:50:58たりとかするんで結構その辺のこう
1:51:00プロダクト全体で言ところのいわゆるの
1:51:03ノードとかタイプスクリプトとかま
1:51:06フロントエンドウブの立ち位置が変わって
1:51:08きてるなっていうのを感じててまここは
1:51:11なんかやっぱり世の中の流れを見ながら
1:51:13いろんな考え方あるんだなって今まで通り
1:51:15こうあの分けていくっていうよりはそう
1:51:19いうこうそう統合総合的ななんかいろんな
1:51:22ものを見た上でこのぐらいで線引きして
1:51:25技術を使っていきましょうねみたいなこう
1:51:27勘所がやっぱ必要になってくるかなって
1:51:29いううん感じなのとまそのフロントエンド
1:51:32を強い人たちがそのサーバー
1:51:33コンポーネントとかそのサーバーサイドの
1:51:35動きを取り入れようとするとまま全体的な
1:51:39技術で言うとこうじゃバックエンドのたと
1:51:41話してどういう風にしていこうかなみたい
1:51:42なのこうフ点の人が多分話していかなきゃ
1:51:44いけなくなるんでまそういう知識とかを身
1:51:47につけてそこのその最適なあのバランスを
1:51:50見つけていくみたいなのはやいかなきゃ
1:51:53いけないのかなっていうのは思ってい
1:51:56ますで持続的なシステム開発っていう意味
1:52:00で言うとやっぱりま先ほど話された通り
1:52:02そのリプレース可能なコンポーネントを
1:52:04どう作っていくかっていうところが
1:52:06やっぱり尽きるかな技術とか例えばま極端
1:52:10な話そのネクストジェスじゃなくなる時代
1:52:13も来るのでそういった時にそのリプレース
1:52:15できるよねっていう状態にちゃんとしてお
1:52:17くっていうのがやっぱり重要かなと思っ
1:52:19てるのでまそれをこうどれぐらいの流まで
1:52:21こう完璧に作り込むかってのあるんです
1:52:23けどま例えばこのページをまっとこう別の
1:52:26フレームワークに書き換えたいってなった
1:52:28時にあのまそれをこう書き換えた後にそれ
1:52:32が正しく動いてるって状態をこうなんか
1:52:34なんらかこう外から検証できれば
1:52:37リプレースできるのでうんまそういうの
1:52:39コンポーネント単位にしろそのま
1:52:41ファンクション単位にしろあのページ単位
1:52:44にしろなんかまやっぱりそのリプレースし
1:52:46た時にこう動作保証しているっていう状態
1:52:48を外からあの維持できるっていうのが多分
1:52:52可能のシステムなのでまま技術的には
1:52:55やっぱりねどんどん移り変わり早いんで
1:52:58本当にNEXTも15出て16出てアプ
1:53:00ルーターじゃないのが次次の次ぐらい出て
1:53:02くるかもしれないそうなった時にうーって
1:53:04なるんでそのまあなんかそのあのここれ俺
1:53:09たちのこの検証システムがあればもうここ
1:53:11書き換えても動くってちゃんと保障でき
1:53:13ますよみたいのがあるとまあのアップto
1:53:16デートにちゃんとついていきながらあのま
1:53:19みんなハッピーな状態がにご維持でき
1:53:22るっていうんのはあるかなと思うのでま
1:53:25テスト書こうねって話なんですけどあのま
1:53:28テスト書くかまなんらかこう外からその
1:53:31動作を保証できる仕組みを用いるのがいい
1:53:34んじゃないかなとは思ってますうんうん
1:53:35うんうんうんあありがとうございます
1:53:37なるほど
1:53:4014分
1:53:44かてる
1:53:46ね5分もバしてしまったでちょっとパネル
1:53:50ディスカッションすいませんこれでお
1:53:52終わりにさせていただければと思います
1:53:54ありがとうございまし
1:53:56たすいませタイムマネジメントが下手くそ
1:54:00でそそうし
1:54:06た次がアンケートかちょっとアンケートの
1:54:11方画面に移すのでえっと解答お願いします
1:54:14というところとオンラインの方は
1:54:16えっとアンケート
1:54:20あるこれか
1:54:23アンケート映したのでオンラインの方も
1:54:25ですかね含めて回答お願いし
1:54:30ますもらいましょう
1:54:35か知ら
1:54:43ないあ大丈夫です
1:54:53JA
1:55:43アンケートの回答終わった方からあの後方
1:55:45にあるあのお酒あの食べ物を持ちいただい
1:55:48てあの本身会の方に移っていければなと
1:55:50思いますので
1:55:52思っておりますはい
1:56:26そうしましたオンラインの方はこちらで
1:56:28配信の方終わりにしたいと思います
1:56:30ありがとうございました

About this transcript

This page contains the full transcript of Unleash Next.js - LayerX Web Frontend Night by LayerX 公式, generated from the public captions YouTube serves with the video. The transcript has 2,359 words across 2,359 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to translate the transcript into 100+ languages.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, translation to 100+ languages, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.