1. kkeethのエンジニア雑談チャンネル
  2. No.146 朝活「続・Next.js 13..
2022-11-30 28:09

No.146 朝活「続・Next.js 13」をダラダラ読む回

00:03
はい、11月25日金曜日ですね。 時刻は朝9時を回りました。
ちょっと昨日に引き続き、今日も喉の調子があんまりよろしくなくて、今日も不快な音を多く出してしまうかもしれないです。申し訳ないです。
はい、では今日も始めていきましょう。いめめめのkeeth、このくわはらです。 じゃあ本日も朝活をやっていきたいと思います。
本日もですね続きまして、Next.jsの13ですね。 公式ブログの続きを読んでいこうと思っています。
はいで、昨日はですね、ぐだぐだしてしまって大変に申し訳なかったんですけど、
なんだっけ、App Directoryですね。ベータ版のApp Directoryの4つの項目ですね。
レイアウトと、リアクトサーバーコンポーネンツと、ストリーミングと、あとデータフェッチングですね。
の4点について、つらつらと書かれていたので、それをダラダラと読んでいったという感じですね。
で、今日はその続きで、 イントロデューシングターボパックアルファーですね。
はい、こちらアルファーなんでまだまだここからいろんなことが起きると変化すると思うんですけど、
新たなバンドラ、ターボパックというところから今日は入っていきたいなと思っています。
話題にはもうすでに出てますし、皆さんも名前ぐらいは聞いたことあるんだろうなというところなんですけど、
まさかのビートが出たのにビートよりさらに速いと言ってて、しかもビートよりも10倍速いと言ってて、
本当か?ってところがちょっとあったりするんですけども、マックス値が多分10倍以上速くなったというだけであって、
デフォルトとか、いつものようなやつではそんなに速くならないでしょうとはいえ、
でも数倍速くなったんだろうなというところで、なんか興味はあるなって感じでした。
まあ、じゃあそこから今日は入っていきたいと思います。
えーと、ではでは、プテラノーズさんですね。おはようございます。ご参加いただきありがとうございます。
じゃあ今日もダラダラ続きやっていきたいと思います。
ターボパックの紹介、アルファ版です。
NEXT JS-13にはそのウェブパックの後継となるラストベースの新しいターボパックというのが含まれています。
はい、これも前日ありました通りですね。ラストベースだというところ。
なんか今は世間は猫もシャクシもそういうバックで動くもの、ターミナル上で動いたり、
裏でシュクシュクと動いてくださるものはなんかひたすらラストになってきたんですかね。
まあ、最近学生さんから逆に聞かれました。なんでこんな急にラストなんですかねっていう。
その人はずっと数値計算であったりとか、いわゆるデータアナリスト的な職業を目指していて、ずっとそういう研究室にも所属していたので、
なんで今さらこんな世間的にラストなのっていうところが疑問だったらしくて、
ぶっちゃけ僕もその回答についてはある程度予想抜きを出ないよっていうところでいくつか思うところを語ってみたんですけど、
まあ本当になんでなんだろうっていうのが気になったりはしますけど、まあでも今はラストベースになって、
まあ早くなったっていうのは正直嬉しいですよね。やっぱなんだかんだいろんなものが早くなったので。
僕が今ちなみにラストベースで置き換えたもので一つは、ノードジェイスのパッケージバージョン管理ですね。
パッケージバージョン管理ツールですね。昔はあのいわゆるエニエンブン的なものの一つにノードエンブンってあったと思うんですけど、僕はそれを使ってたんですけど、
03:05
最近あのラスト製のVOLTAってものに変えましたね。やっぱ早いですね本当に。とにかくそれが嬉しいっていうので、僕は今VOLTAに変えてます。
はいまあこんなような感じで、いろんなCLI系のツールがラストになったなって感じですけど。
はい余談でした。ウェブパックっていうのは30億回以上ダウンロードされています。これ累計でしょうね。
30億ってのはすごいですね。ウェブパックはウェブを構築する上でもちろん欠かせない存在にはなりますけど、
JavaScriptベースのツールで最大限のパフォーマンスの限界に達してしまいましたよと。
それはありますよね。ウェブパックでやることとかやれることはかなり増えてありますし、とても素晴らしいことではあるんですけど、やっぱり限界はありますよね。
で、next12ではラストベースのネイティブなツールへの移行での開示をしましたと。
で、バベルからの移行を行って17倍高速なトランスファイルをまず実現しました。 次にTarsarを置き換えて6倍高速なミニフィケーションですね。
ミニファイルを実現できるようになりましたと。6倍高速のミニファイルって結構すごいですね。
で、今でこそはネイティブでバンドルするときなんですと。はい。で、Next.jsでTurbopack Alphaを使用しますと、次のような結果になりますと。
ウェブパックの700倍の更新速度になり、ビートの10倍高速のアップデートになり、コールドスタートがウェブパックの4倍高速化になりますというところですね。
はい。やっぱりコールドスタートが4倍高速化も結構地味に嬉しいですよねこれね。
というような結果になりますと。Turbopackすごいな。そんな早くなったんですね。
で、続きまして、はい。Turbopackっていうのは開発時に必要な最低限のアセットのみをバンドルしているため、起動時間が非常に早いのがやっぱり特徴です。
本当ここですよね。コマンド叩いて起動つってパンと立ち上がるというのは本当に体験としてかなり良かったですね。こんな早いんやっていう感じです。
もちろん立ち上がった後もサクサク動いてくれますし、それはウェブパックも同様だったと思いますけど、
動くんですけどその後画面に更新版をまたレンダリングしてまた立ち上がり直すっていうところのスピードが早いんですよね。
Turbopackって開発時に、3000個のモジュールを使用したアプリケーションの場合、例えばですね。
場合、Turbopackの起動時間は約1.8秒です。Beatは11.4秒、ウェブパックは16.5秒ですというふうに言っています。
これはダミーっていうか、ダミーな適当なモジュール3000個用意したものを立ち上げたんでしょうね。
1.8秒がTurbopack、Beatが11.4秒。すでにもう約10倍ぐらいの差が出ていて、ウェブパックが16.5秒っていうところですね。
Turbopackはそのサーバーコンポーネントだったり、タイプスクリプトだったり、JSX、CSSなどをもちろんサポートしています。
アルファ版の期間の間はまだ多くの機能がサポートされているわけではでもないですよと。
06:00
今言ったものは対応してますけど、基本的にこれはリアクトとかNextが本来対応していたものをなるべく優先的に対応したという。
そういう他のサードパーティーだとエコシステムとかいろんなもののツールとの連携はまだまだ未対応だよということはそうですね。
ローカルのインテレーションを高速化するためにTurbopackを使用したフィードバックっていうのはぜひぜひお待ちしてます。
公開したし使えるようになっているんで皆さんぜひ使って叩いてくださいというところですよね。
これはもう何か潔くていいなと思っています。ユーザーにしっかり叩いてもらって意見をもらうというか、
ついでにバグも教えてほしいっていうのはわかりやすくていいなと思います。僕らがすると逆に言うとOSSに貢献できているっていう実績もできるんでね。
結果、お互いがウインウインな気がします。 で、注意書きが1個あってNEXT.jsのWebpackは現在NEXT.DEVのみサポートしています。
なるほど。DEVしかやってないんですね。ビルドはまだできてないんですか。 もしサポート機能を見たい場合はそのサポート機能を見るっていうような別のページですね。
Supported FeaturesっていうTurbo.buildっていう公式サイトがあってそこのサポートフィーチャーズっていう
ページがあるのでそこを見てみてくださいということでした。
で、またTurbo.packによるNEXT.buildのサポート追加も今は絶賛取り組んでおります。
今すぐNEXT.jsでNEXT.DEV--Turboっていうのを実行しTurbo.packのアルファ版をちょっと試してみてくださいということでした。
ああはいはい。じゃあもうすでにオプションつければ別にTurbo.packでの実行も試せるってことですね。これはでも気になるな。
そんなになんか複雑なものではなかったり本番環境ではなかったりするアプリケーションがもしあるんであればそれ1回NEXT.jsを
13に上げてみていつも通りNEXT.DEVを起動した時間とNEXT.DEVのTurboっていうオプションをつけた実行を試してみてもいいかもしれないですね。
どんだけ速くなったかすごい気になるところです。 以上今のがTurbo.packのお話でした。
まあとにかく新しいのだし速くなったしすげーぞっていう口調を書いたそうですね。 まあなんか夢の夜の話でした。
では続きましてNEXT.IMAGEですね。 皆さんがよく使うコンポーネントトップに上がるだろうと、はい上がるものだろうそのうちの一つNEXT.IMAGEがまた変わったそうですね。
NEXT.13では強力な新しいイメージコンポーネントが導入されレイアウトシフトなしで簡単に画像を表示したりオンデマンドでファイルを最適化し
パフォーマンスを向上させてすることができます。 NEXT.jsコミュニティのサーベイでは調査ですね。
70%の回答がNEXT.jsイメージのコンポーネントを実運用で使用しコアウェブバイタル図を向上させたというふうに回答しています。
NEXT.13ではそのNEXT.IMAGEをさらに改良していますよということでした。 これ多分海外の方とか全世界含めて70%の回答者がやっぱNEXT.jsのイメージコンポーネントを使っていると言っているので
良い話だなと思いましたね。 結構こと細かく設定できたりするというのがやっぱりなんだかんだありがたいなと思います。
結果これを使うことでコアウェブバイタルの点数を向上させることもできたというのであればそれはとても良い話ですね。
09:04
新しいイメージコンポーネントというのはその次のような特徴があります。 1、2、3、4、5個ありますね。
1つ目、クライアントサイドのJavaScriptをまず削減できました。 2つ目、スタイル設定と構成がより簡単になりました。
3つ目、デフォルトでALTタグっていうのを必要とし、よりアクセスしやすくなりました。 アクセシビリティ向上だったんですね。
4つ目、ウェブプラットフォームとの整合性ですね。 これもいい話ですね。
最後5つ目、ネイティブの遅延ロードによりハイドレーションを必要としないため、より高速になることができる。
はぁーね、ハイドレーション使わなくなったから余計に速くなった。 あ、余計じゃないですね。さらに速くなったと。それはそうだよ。
ハイドレーションに必要しなくなった。 遅延ローディングするからということですね。
使い方とかその辺に関しては公式のイメージコンポーネントのページがあるので、そこを見てみてください。
もしくはその実際に自分の方でデプロイしてみるとか、バーセルが公式で出しているトライアウトっていうページがあるので、
いわゆるボイラープレートのページですね。 持ってきてもらって自分の手元でビルドしてもらったらどうでしょうかっていうところでしたね。
はい。 ちゃんと公式がそういう例を出しているリポジトリがあるというのも結構いい話ですね。
で、あとアップグレーディングNextImageToNext13にあげたい場合ですね。 古いイメージコンポーネントっていうのはNextLegacyImageっていうところですね。
Nextスラッシュレガシースラッシュイメージに名前が変更されてますよということですね。 これはパッケージの中身の方ですね。
私たちはNextスラッシュイメージの既存の使用方法をNextスラッシュレガシースラッシュイメージに自動的に更新するコードモードっていうのも提供しています。
例えばこのコマンドルートから実行するとあなたの.スラッシュページズディレクトリーでコードモードが実行されます。
コマンドっていうのはちょっと音読で申し訳ないですね。 npx space at next slash コードモード space
next-image-to-legacy-image ははははははは でspace最後.スラッシュページズですね。これはターゲットですけど。
という風に叩くと一応コードモードが実行されて、その辺を失えば書き換えができてくれますよってことでした。
この辺も詳しくはそのコードモードのページがあるのでその辺を見てみてくださいと。たしかにNext.jsのコードモードをちゃんと眺めたことがなかったので、
これはこれで改めて眺めたいなという感じがありますね まあまあソースコードだらけなのでちょっとこの浅かいで浅かつで読むのはちょっとあれなんですけど
もしくはまあ公式ドキュメントいろんなものがあるのでその辺も見てみてください ということでしたはい
というところですねとりあえずいろんなものが改良改善されたっていう感じではありますが具体的に どういう感じの解説が改善が起きたかっていうのはあのやっぱドキュメントを見るのが確実だろうな
っていうのはわかりました とりあえず紹介に当たりますよねとですね
僕は僕的にやっぱ最後のその5点目ですねハイドレッションなくなって高速化したっていう のがとてもいい話だなと思いますね
レジローディングも裏の方で吉谷にやってくれてるっていうのであればそれはそれで 嬉しい話ではあります
12:04
ただ一方でブラックボックスが増したっていう捉え方もできるのでほんと凝ったこととか アプリケーションになんか固有のなんか
要件が入った時に急に沼になりそうな気もするんですけどまぁその場合はもう使わ なくていいんじゃないって話もあります
基本的にはあのリアクトもネクストもウェブ標準というところに沿った機能実装したり とか開発者体験というところに沿ったあの
機能追加というのをしているはずですのでそこから外れるってことはよっぽどなんか 日というか特殊な要件だったりするのでその場合はもう
ネクストの用意したものに乗らなくて自分たちでイメージをコントロールすればいいん じゃないのって気はしますね
はいということで以上今のがネクストイメージでした続いて 新しいやつですねこれアットネクストフォントっていうコンポーネントですね
はい次はここ行きましょう ネクストJS13では全く新しいフォントシステムというのを導入しています
カスタムフォントをごめんなさい合計4つありますね 4つあって一つ目がカスタムフォントを含むフォントの自動最適化です
2つ目外部ネットワークへのリクエストを削除し プライバシーとパフォーマンスを改善しますと
3つ目あらゆるフォントファイルに対応する自動セルフホスティング機能というのを内蔵していると 最後4つ目ですね
css のサイズ調整プロパティを使用してレイアウトのズレを自動的にゼロにしますと へーこれありがたいですねそんなことを勝手にやってくるんですね
でこの新しいフォントシステムによってパフォーマンスとプライバシーを考慮したすべての google フォンツっていうのを便利に使用できます
google フォンツなんですねはい css とフォントファイルっていうのはビルド時にダウンロードされ 残りの性的アセットと一緒にセルフホスティングされます
ブラウザーから google にリクエストが送信されるということはありませんと言ってますね はぁ
なるほどグーグルフォントを使うときは本当にこのネクストフォントっていうのを使うと あのネットワーク io も1個減るのでそれは結構大きい話ですねこれは
でえっと使い方的にもそんな感じになってますねえっとインポートで フロームの中にアットネクストスラッシュフォントスラッシュ google っていうのがあるんで本当に
グーグルフォントを内蔵している感じですねこれ そうすると逆にネクスト13そのものの容量増えるんじゃないですかね
いくらジップにしたところでサイズ容量増える気がちょっとしましたね 最初からとってこれるそのグーグルフォンツー
全部持っているとはさすがに思わないですけどいくどこまで持ってんだろうなこれ すごい気になると思う
はい まあいい
この辺はまたちょっと後中身中身のソースコードで見れたらちょっと嬉しいですけどどう なるかわかんないのでまぁそれを見ましょう
でどう使い方的にはソースコード産業会であってさっきのそのインポートで 波かっこですね
波かっこでインファーを受け取ってフロムネクストスラッシュ フォントスラッシュグーグルですね
でコンストインファーイコールさっき読み込んだインファーを実行してインスタンスを作っておくと 作ったインファーインスタンスを
html のタグの方のアトリビューですねクラスネームイコールなんちゃらって感じで指定して あげれば別にいけますよということですね
15:04
でまたカスタムフォントにもちろん対応していてフォントファイルの自動セルフォスティングと そのキャッシュとプリロードにも対応しています
はい まあ使い方もさっきのみたいな感じで
インポートでローカルフォントとのインポートしますとフロムアットネクストの スラッシュフォントスラッシュローカルの方ですねさっきはグーグルだったけど今度はローカル
っていうものを読み込みを置くとそのローカルフォントっていうオブジェクトを受け取ってそれが 関数ですねこれそれを実行して
引数の中身にオブジェクトでソースで自分のカスタムフォントのファイルのパスを指定しろと 実行するとまたインスタンスを受け取るので受け取ったインスタンスをまたクラスネームで
アトリビュートに指定してあげると 使い方はさっきのグーグルフォントとほぼほぼ一緒って感じですね
これはでもありがたいですねAPIとかインターフェースがグーグルだろうとローカルフォントだと同じ 書き方でいけますよっていうのはかなりありがたい
昔のnext-linkはAタグとかをマニュアリーですね 手入力で入力したんですけどそれが必要なくなるって言ってるんですかねこれは
でnext-13ではリンクってリンクタグですね リンクタグっていうのは常にAタグをレンダリングしてその下のタグに
プロパティですねプロプスを転送できるようになりましたよというふうに言っている 具体的なソースコード書いてあるんでそっち見た方が早いねこれ
昔はそのリンクタグでhrefイコールなんちゃらみたいなパスを指定してあげて その下にさらにAタグで文言とかを指定してあげてたんですけど
今はnext-13ではわざわざAタグを書く必要がなくなったよって言ってます 勝手に最後コンポーネントをjsxからjsにレンダリングする時に
Aタグを挿入してくれますよということだそうですね これは地味な改善ですけどソースコード量も期日
僕らが書くコード量は若干減るし書き漏れとかがなくなったとしても同じように動いてくれるので 書かなくなったってむしろありがたいですねこれはね
そんなところですねそれ以外特に変化はないと とにかく書かなくて良くなっていくぐらいの感じですね
なんかもうちょっと大きい変化があったのかなと思ったんですけどそんなわけではないのかな これは まあでも詳しいところはあの
このリンクコンポーネントのimprovedページが公式ドキュメントにあるのでまぁそっちを見てみてくださいと もちろんサンプルのソースコードもあるのでそっちも見てねってことでした
であとはアップグレーディング to next-link to next-13ですね はい
では更新するにはどうしたらいいかというとこですけど next-js-13にアップグレードするためにコードベースを自動的に更新する
はいこっちもやっぱりコードモードを用意してますので使ってみてくださいと例えば以下のような コマンドをルートから実行するとはい
facesディレクトリー以下からコードモードを実行できますと これもさっきと似たようなコマンドですね
npx space at next slash コードモードっていうあれですねコマンドを指定してあげて スペースでnew-linkっていうのを指定してあげると
で最後にターゲットディレクトですね ドットスラッシュページズっていうのを指定してあげると既存のページズディレクトリーの中身をザーッと
18:05
操作して書き換えてくれるよということだそうです はいこちらもコードモードの中にありますね確かにはいはい
コードモードのページ 別にあってそこの中の一覧にありますね
next-linkのところの書き換えところもあるのでまぁこっちも興味ある人は見てみて ください
で続きましていきましょう続きまして og イメージのジェネレーションのところですね
ソーシャルカードっていうものはオープングラフ画像としても知られコンテンツへの クリックによるエンゲージメントを
エンゲージメント率をですね大幅に向上させることができいくつかの実験では最大40%の コンバージョン率の向上が確認されていますと
静的なソーシャルカードというのは時間がかかってエラーが発生しやすく まず維持するのが困難ですと意外とコストがかかるところですね
そのためソーシャルカードは不足しがちでスキップされることさえもありますと 今日までパーソナライズされその場で計算される必要がある
動的なソーシャルカードというのはやっぱり困難で効果でもありましたと そこからまあ価値もあるんでしょうけどね
ただやっぱり かかるコストを考えると費用対効果的にはやらないという選択肢になるっていうのも
まあ仕方ない気はしますけど 私たちはそのnext.jsとシームレスに動作し動的なソーシャルカードを生成するような新しい
ライブラリー アットバーセルスラッシュOGっていうのを作ってみましたよということだそうです
これはこれでまたなんかちょっとビジネス的な観点で面白いですねこれ でまあソースコード具体例がバーって出てきてちょっと音読になって申し訳ないですけど
import並括語でこれアッパーキャメルケースですね イメージレスポンスっていうのを受け取って
from at barcel スラッシュ og で受け取ってますと
export constのコンフィグを設定してあげて とりあえず中身はランタイムでコロン
experimental edge 今回はとりあえずedgeなんですね で指定してあげますで最後関数コンポーネントの中身で
リターンのさっき受け取ったイメージレスポンスってやつですねバーセル og から読み取った イメージレスポンスっていうオブジェクトをニューで使えますと
いうイメージレスポンスで中身引数の中に jsx を指定してあげるそんな使い方をするん ですね
まあこれをすることで まあ og が作るようになれますと
og はわかったかどうぞ og イメージだよイメージどこで指定するんだろうこれ 今んとこソースコード中にイメージの指定がなかったのでそこは気になります
はい まあいった本部に戻りましょうかね
ででではいでこのアプローチっていうのはそのバーチャルエッジファンクションと ウェブアセム
web アセンブリーおよび html と css を画像に変換するためのあったかたらしいコアライブラリー を使ってリアクトコンポーネント抽象化を活用することにより
既存のソリューションよりも5倍高速化されていますよということだそうです はいちょっとここまでだけだとあまりにも抽象的すぎて
まあなんかやろうとしていること方向性だけはわかったんだけど ちょっと見えないなって感じがするのでまぁ詳しくはその og イメージ
21:03
ジェネレーションの公式ドキュメントちゃんとページがあるのでそのページ 新しく作ったページを見てみてくださいと
もちろんソースコード例もあるのでそこを見てみてくださいでした いくつかあったんですけどそのうち一つがリクエスト時にヘッダーをより簡単に設定できる
ようになりましたよとああはいはいはいはいなるほどですねそれは結構嬉しいですね リクエストヘッダーズドットセットっていうので何かはちゃはちゃと設定できるようになりましたと
でまぁやり方としてはネクストサーバーって言うのがありますね インポートなんちゃらフログの後ろにネクストスラッシュサーバーというのがあってそっからマネクストレスポンス
とかネクストリクエストみたいなものを受け取れますと タイプもちゃんと受け取れるそうですねでそれを使ってエマニューヘッダーズからリクエストヘッダーズ
っていうのを指定してあげて そのリクエストヘッダーズから
からじゃないですねリクエストヘッダーズのインスタンスのドットセットというメソッドを使うと ヘッダーズをより細かいくわちゃわちゃ設定してあげて最後それを使ってリクエストを送れる
ようになれますと というところですねこれをミドルウェア.ts の中に書けば先に設定しておいて最後アプリケーションの方の
コールの時にちゃんと自動で読み寄ってくれよってことだそうです これ結構ありがたいですね
これこれはさすがだなって感じの更新でした また書き換えとかリダイレクトを行わずミドルウェアから直接レスポンスを提供できるようにもなりました
と ハー本当にミドルウェアレベルってところをかなり拡充させた感じですね
ここからもちょっとソースコード長いのでこれは割愛します まあ公式ブログを皆さんの方で読んでいただくと多分わかりやすいと思いますこれはもう100分は
一見にしかないって感じのコードになってます はい
でミドルウェアかのレスポンス送信には現在next.config.jsの内側に
experimental.allowmiddlewareresponsebody という設定オプションがあるのでそれが必要になりますというところでした
はいなるほどねまあちょっとそういう設定が必要だそうです あと残りはブレイキングチェンジがリスクがバーっとあったのでこれはどうしようかな
ざっと勢いで音読していこうかなそしたら 意外とあの破壊的変更ありますねこれ
ざっと勢いで読みたかったんですけどざっと勢いでディープエルが翻訳されなかったんで へえっと諦めようこれは
ちょっと読むの諦めますはい まあ皆さんの方で見てみてくださいこれはですね
まあいくつかリアクトのバージョンに関するものですねこれより以下のバージョンはもう 対応しません的なものとかあのさっき言った
ネクストイメージがネクストレガシーイメージになったので昔のイメージ使いたい場合は ちゃんとレガシーイメージが読み取ってねみたいなものもありますし
swc minify ところがフォルスからトゥルーになっているとかそのところがあります まあとあのブラウザのバージョンがこのバージョン以降は以下はもう対応しませんみたいな
ことになったりとかまあその辺いろんなものが一応破壊的変更として一応残ってますよ ということです
最後へとコミュニティーのところですねはい6年前からいろんなコミュニティーがガーってあってはい 基本的にそのネクストジェスのパブリックの公式
24:03
コミュニティーところからかなり恩恵だりとかいろんな意見をもらってますよということですね あとはえっと
2400人以上のデベロッパーがこのネクストジェスの開発にも意見を出したりとかいろんなことを 言ったりとかで
関わってくださったよってことですすでにギットハブスターも9万4000を超えているという ところでかなりえっと大きい
コミュニティあのフレームワークになったんだなということも語られていますね あとはあの大きく変わってくださった方のアカウントでガツァーと連なっていて
このブログとしては終了されているということでしたはい 以上ネクストジェス13のブログでしたねはいまあまあいかがだったでしょうか
やっぱ大きいのはなんだかんだ言ってあのやっぱアップディレクトリーですね一番 最初のようなアップディレクトリーがやっぱりかなり大きい
ただこれがちゃんとベータ版として出たっていうのが大きいですね いきなりもうこれにしなきゃいけないよというわけではなくちゃんとベータ版としてどっち
も一旦使えるようにしてでも皆さんにも使っていただきつつ実際の現場でどういうことが 起きるかっていうのも意見を求めるためっていうのがいいなと思いました
なのでその分13はちょっとやっぱり今は大きいんでしょうね多分実際サイズ自体が12 キロ13でかなり大きいのは仕方ないと思いますねそういう
舵を切ったということなので なので本当にパフォーマンスを求めたりとかする時ってちゃんと使わない分はちゃんとカット
して最後でビルドするときは削除をしてあのバンドルされているとは期待したいと思います けど
今その辺詳しいところまでは 今回のブログでは書いてなかったのでそう公式ドキュメントを見ていってそこからでも出たかったら
もう実際自分手元で試すしかやっぱないなっていうのはありますけど それはでもエンジニアとして技術者としてそれは最後自分たちの手で目で確認するって
のは必要だというのは変わらないというところですね はいただアップディレクトリーもどれだけ進化したとか
どれだけ 恩恵が得られるのかって結構大事だと思いますがやっぱレイアウツもそうですしリアフトサーバー
コンポーネンツもそうですしまあストリーミング周りとかもそうですね まあデータフェッチングところを置いといて
これを使った恩恵を得たいんであればかなり設計周りのところですね初期初段の設計がかなり 重要になってくるので今後ビジネスとしてねクソ13
導入してそのリアクササーバーコンポーネンツを使ったような設計をしていくんであれば 要件提起終わった後の本当に初期設計しっかり時間工数取ることが必要になってくるな
というのはますます感じましたね フロントだからじゃあサクッとできるんでしょとかすぐに開発始めればいいじゃんみたい
に意見はもう通用しないのは当然なんですけどこれがさらに強くなったって感じはします しっかり設計していかないと後で結局サーバーコンポーネンスサーバー側とアクセスすることに
ほぼ変わらないので こことのやり取りの設計ミスるとまあバグの音症になることは皆様ご想像の通りなので
より設計力が求められるのが今後のフロントエンドエンジニアのなっていうのとやっぱりサーバー サイドをもう僕らはもう待ったなしですねこれは無視できないと思ってくるので
フロントエンドだけやってればいいっていう時代はもうまさに終わったのなっていうところで まあ何やかんやフルスタックというつもりはないですけどフルサイクル的な
まあもしくはマルチスタックって言い方もありますけどエンジニアにやっぱりもう一回波は 来るんだろうなっていうような大きいキャリア的な方向転換が来るんだろう
27:03
来たんだなっていう感じはしてきました あとはターボパックの話やっぱ大きいですね早いは正義って本当その通りだと思うのでこれが
α版ではなくてちゃんとメジャーバージョンとしてリリースされることをすごい期待してますし できればネクストジェスだけじゃなくて他でも使えるようにしてくれたらもうネクスト
バーセルさん最高って感じなんですけどねはいいうところでした 以上まあ皆さんの方でまた改めて読んでみていただければと思います
ではえっと頭がなくなりましたけど終了したいと思いますはい金曜日ですね 今日もしっかり頑張ってまた土日ゆっくり休んでいただければと思いますし
もう11月ですね今月も最後ですねこれで一応来週123でありますけど 最後の金曜日ってところでまあもう本年も終わっていく
感じになってくるのではい終わりに向けていろんなものを片片付けていかなきゃいけ なっていう感じはしますね
はいまあまた頑張っていきますと思う行きたいと思いますでは a 今日はですね園児さんとプテラーゾーなんと a 棟マーサーさんと
8 阿部阿佐川さんですねはいご参加いただき大変にありがとうございましたまた明日も緩くやっていきますので興味
あれば参加してくださいでは終了したいと思いますお疲れ様でした
28:09

コメント

スクロール