8,767 文字
ほな、ほとんどの人と一緒で、わいも特定のテックユーチューバーを見とんねん。プライムタイムなんとかって奴や。確かフールーで働いてたとか。この動画めっちゃ面白かってん。もう2回くらい見たけど、みんなと一緒にもう一回見てみたいと思うねん。プライムがフレームワークを使った開発について言うてることから学べることいっぱいあるけど、大事な部分見落としてるから結論には完全には賛成できへんのや。
いつもと違う感じの動画になると思うわ。この短い動画、4分20秒やけど、一つずつ見ていって、わいの考えも図で示していくつもりや。どういう風に進めていくかはまだ分からんけど、とりあえずチームにお金払わなあかんし、スポンサーの話もせなあかんから、それからすぐ本題に入るで。
この動画見てはる人はたぶんええエンジニアやと思うわ。でも周りのエンジニアはどうなん？最高の人材を雇いたいやろ？チームに優秀な人材を揃えたいやろ？みんなそう思うけど、特にこのAIの履歴書が溢れかえってる今、ますます難しくなってきてるんや。
だからこそ今日のスポンサーのg2iと組んでんねん。この連中、ちゃんと分かってんねん。最高のエンジニアを雇うのめっちゃ楽にしてくれるし、採用する前から何が得られるか分かるんや。本気でええ会社やで。React Miamiっていうわいの大好きなリアクトのイベント主催してんねん。リアクトコムごめんな。マジで来年のReact Miami行けるなら行った方がええで、めっちゃ楽しいで。
WebflowやMetaみたいな大企業の採用も手伝ってるから、ただの小さなスタートアップだけやなくて、でもスタートアップの手伝いもするで。この会社がすごいのは、すぐに働き始められる8000人のエンジニアプールを持ってることや。ただの履歴書見て判子押すんとちゃうで。全部リモートでビデオ面接してくれて、自分で出る必要もない。
自分で質問考えて、それに対するビデオ回答もらえるから、一緒に働く人のことちゃんと知れんねん。アメリカやカナダ、ラテンアメリカ、ヨーロッパでも採用できるし、フルタイムだけやなくてパートタイムの契約もできんねん。g2iと仕事始めたら、すぐにSlackチャンネル作ってくれて、めっちゃ早くアップデートしてくれんねん。
わいのスポンサーの中でも一番レスポンス早い方やから、採用したい人にはもっと早く対応してくれると思うで。優秀なエンジニアを早く採用して、すぐにプロダクト作ってもらいたかったら、g2iに勝るもんはないで。面接から最初のプルリクエストまで7日以内って目標立ててて、実際それくらいでできるの見たことあんねん。今日やで、soyd.dev/g2iをチェックしてな。
ほな、プライムが何言うてたか聞いてみよか。まず、なんでPHPとjQueryからリアクトのクライアントサイドレンダリングに移ったんや？今や、また全部サーバーに戻そうとしてる。NextのServer Actionsとか、もう分からんわ。人生悲劇やないと喜劇にならへんからな。
なんて言うたらええんやろ。このサイクルずっと続くんやで。2年後には「やっぱりクライアントに全部移そう」って言い出して、またクライアントに移って、そしたらまた「サーバーに戻そう」って言い出すんや。誰も満足せえへんのや。
実はわい、サーバーコンポーネントの大推しやのに、今T3 chatで全部クライアントに戻してる最中やから、めっちゃ面白いねん。プライムの言うことには予想以上に同意する部分あるけど、細かいところで違うんや。
人生の秘密教えたろか？なんでシンクライアント、シッククライアントってこんな繰り返されんねやろ？実はめっちゃシンプルな話なんや。最初に何か作り始めんねん。めっちゃええ感じやと思うわ。新しいやり方、例えばjQueryみたいなんがめっちゃすごいんや。Sizzleでセレクター使えるし最高やん。
でも、コードが2万行超えてきたら、フロントエンドでめっちゃしんどくなってくんねん。そんで次は？新しいライブラリ見つけんねん。例えばリアクトとか。HTMLめっちゃええやん。ライフサイクルもあるし最高や。でも、これも大きくなったらクソみたいになんねん。なんでこんなクソなんやろって思って、次のもんに行って、それもクソになって、またその次に行って、大きくなったらまたクソになって。
分かるか？秘密は、コーディングは常にクソなんや。常に難しいんや。結局全部クソになんねん。でも、そこが楽しいとこなんや。物作んのがな。
ここでわいが言わなあかんことがあんねん。まず、ほとんどのもんは一定のサイズになったらクソになる。コードベースが大きくなったら開発者体験も悪くなんねん。
グラフで示したろか。緑の線がコード量やとして、赤の線が体験の質やとしよう。体験の質はしばらく一定やけど、ある時点から下がり始めて、もっと悪くなって、最終的に底打ちして、チームの全員がHMRに5分待たされて、ビルドに2時間かかって、農家になろうかって考えるようになんねん。
これが開発者体験や。緑がコード量やとして、これがプライムの言うてることや。完全に同意するで。新しいもん試す時これめっちゃ重要なんや。何年も古いコードベース触ってたら、必然的にここにおんねん。新しいもん最初に試す時は、ここから始まんねん。
リアクトを最初に触る時、コードベースがここまで来てたら嫌いになるのは当然や。悲しいことに、リアクトめっちゃ人気やから、多くの人の最初のリアクト体験は、すでにボロボロのコードベースで始まってしまうんや。
でも、Svelte みたいな新しいもん試す時は違う。世界中のSvelteのコードは、せいぜいここまでしか行かへん。プロジェクトが本質的に小さいし、チームも小さいからや。大きなSvelteのコードベースはそんなにないんや。だから既存のプロジェクトに入っても、表面積が小さいから開発者体験はずっとマシなんや。
でも、普通はここから始まって、ゆっくりここまで上がっていくんや。開発者体験が悪くなり始めるまでには時間かかんねん。それだけのコード量必要やからな。でもこれ一面的な見方やで。コード量と開発者体験の比較だけやん。
他の視点も見てみよか。これらのツールやテクノロジーの利点を全然語れてへんのや。コード量から機能量に変えてみよか。
例えばブログとTwitterやT3 chatみたいなアプリ比べてみ。コードベースがユーザーに提供する機能量は、開発体験と比較する時めっちゃ重要な指標なんや。ここからホットな話になんで。
緑の線を機能量やとして、違うテクノロジー比べてみよか。普通のHTMLとAjaxやと、こんな感じや。vanilla HTMLとAjaxで作れる機能は、実質Gmailくらいまでや。Ajaxって知らん人向けに説明すると、非同期JavaScriptとXMLの略で、ページ更新せんでもブラウザがデータ取得してページ更新できる技術なんや。今のウェブの始まりみたいなもんや。
このページでURLは同じままで、めっちゃいろんなことできるやろ？TwitterスクロールしてもURLは同じままや。でも問題は、vanilla HTMLとAjaxやと、サーバーからデータ取って、HTMLアップデートして、ユーザーに結果見せるのは、簡単な例やと簡単やけど、アプリが複雑になればなるほど、ページの要素間の関係が増えていくんや。
右下のボタン押したら左上の何かが更新されて、画面中央の何かが4つ違う場所からデータ取ってくるみたいになったら、その全部の関係自分で作って管理せなあかんのや。HTML要素とサーバーからのデータとJavaScriptのトリガーとアップデートの関係、全部自分で定義せなあかんのや。ブラウザのAPIだけでやるんはめっちゃしんどかったんや。
だからjQueryっていう素晴らしい技術が生まれたんや。jQueryはめっちゃ良かった。普通のHTML比べたら、開発者体験の壁に当たるまでにできることが指数関数的に増えたんや。
ここで重要なのは、使ってて辛くなり始めるまでにどれだけのことができるかっていうライン。vanilla HTMLはjQueryほど遠くまで行けへんかったんや。これ実際の数字やないけど、これらのツールやテクノロジー使った経験をうまく伝えられると思うわ。
はっきり言うとけど、でかいjQueryのコードベースと同じくらいのサイズのリアクトのコードベースは、たぶん同じくらい辛い開発者体験になんねん。でもわいらはコード行数だけ比べてへんのや。そのコードベースがユーザーに提供する機能を比べてんねん。
リアクトをこの視点で見ると、めっちゃすごい勝利なんが分かんねん。リアクトを使えば、めっちゃ少ないコードで、めっちゃ複雑なアプリケーション作れんねん。でかいリアクトのコードベースが快適やいうわけやないで。むしろ、どのライブラリ選んで、どう設計したかによっては、jQueryのより辛くなることもあんねん。
でもリアクトは、アプリケーションの機能間の関係作んのめっちゃ楽にしてくれんねん。トップダウンでステート使ってモデル化するから、めっちゃいろんなもんが楽になんねん。これが一番物議を醸すと思うけど、大きなコードベースのメンテナンス性もめっちゃ良くなんねん。
複雑なウェブアプリケーションを作るのに、jQueryよりリアクトの方が簡単なのは議論の余地なしや。大きなコードベースのメンテナンス性や、めっちゃたくさんのリアクト開発者が同じプロジェクトで働く経験については議論の余地あるかもしれんけど、現実を見てみい。
1000人の開発者がjQuery使ってて、みんながステートの取得元や、UIの更新方法変えてたら、遭遇する地獄や、ランダムに発生する問題の量はとんでもないことになんねん。なんでかって？document や $(‘…’) で getElementById して要素取る時、その要素が存在するか分からへんのや。
取得した後に存在確認はできるけど、その要素がHTMLにもともとあったのか、他のjQueryコードが置いたのか、制御してへんのや。だからデータ取得するコード書いてる時、例えば $.ajax(‘/api/userinfo’).done(function() { … }) みたいな感じで、アップデートしたい場所指定せなあかんけど、userProElement.innerHTML = <div>${data.username}</div> みたいな感じになんねん。
こういうコードが全部近くにあって、この要素が常に存在するって分かってたらええねんけど、ちょっとでも変動要素入ってきたら、違うファイルに分かれたり、他の何かが要素レンダリングしたり、このコールが違う場所で発火されたり、このコードがどっかのボタンに入ったりしたら、もう頑張ってや。
特にたくさんの人がこのコードベースに貢献してたら、なおさらや。カウンターとか、データ表示する基本的なテーブルくらいやったら、リアクトと同じくらいええけど、ユーザーが期待するアプリの複雑さが上がったり、チームの規模が大きくなったり、コードベースへの期待が複雑になってきたら、このモデルはボロボロになんねん。
リアクトが可能にしたんは、その開発者体験の崖っぷちに到達するまでにめっちゃ遠くまで行けることなんや。2人の開発者と1ヶ月の作業で地獄に落ちる代わりに、10人の開発者と3ヶ月の作業で地獄に落ちるようになったんや。でもその3ヶ月で、その10人の開発者は何倍もの機能作れんねん。
問題も解決しやすくなってんねん。なんでかって、エコシステムとして協力して、これらの問題を特定して解決してきたからや。サーバーコンポーネントもその一つや。サーバーコンポーネントの目的は、ブラウザと開発者の両方にとって、データを適切にロードする複雑さを減らすことなんや。
シングルページアプリで適切なデータローディングパターンを実装するんは簡単やないで。特に自分で全部やろうとしたら。すぐにウォーターフォール地獄に陥んねん。リクエストして、何か表示して、また別のリクエストして、また何か表示して…めっちゃよくないやん。サーバーコンポーネントの目的は、そういう状況に陥る可能性を減らすことで、特定の機能を実現するために必要な複雑さを減らすんや。
これも別の見方やな。ユーザーに提供したい機能量があるとして、この任意のラインをT5 chatって呼ぼか。この軸はコードベースの複雑さで、この方向がコードベースの機能やとしよう。T5 chatみたいなもん作りたいとして、jQueryでやろうとしたら、必要な複雑さはとんでもないことになんねん。
jQueryがこの機能レベルに到達するには、めっちゃ複雑なもん作らなあかんのや。でもリアクトやと、そんなに悪くないんや。これが一番重要な違いなんや。コードベースの複雑さはコード行数にざっくり対応させられるかもしれん。プライムの言うてた点を考慮するためにそうしてみよか。
現実は、この線で見ると、jQueryもリアクトも同じくらいの複雑さレベルでメンテナンス地獄になんねん。でも違いは、その複雑さレベルでどれだけの機能が得られるかや。リアクトやと、めっちゃたくさんの機能が得られんねん。
リアクトは、もっと複雑なもんをもっとシンプルでメンテナンスしやすい方法でモデル化できるからや。T3 chatくらい複雑なもんをjQueryで作るんは、Figmaくらい複雑なもんをリアクトで作るようなもんや。文字通りやないけど、分かるやろ？
複雑な壁にぶち当たる前に、アプリに組み込める複雑さのレベルと機能のレベルがめっちゃ高いんや。メンテナンス性にも表れてんねん。わい、いろんな大きなコードベースで、いろんなテクノロジー使って仕事してきたけど、でかいリアクトのコードベースがどれだけ地獄やとしても、もっとでかいjQueryのより地獄やないんや。そのコードベースから得られる機能もめっちゃ多いしな。
これが多分一番大きな変化があった部分やな。jQueryが人気やった時、ユーザーの期待値めっちゃ低かったんや。世界最速のAIチャットアプリとか期待されてへんかった。ちょっと遅いOutlookの代替品くらいが期待値やったんや。
これがみんなの期待値やった時、jQueryはめっちゃすごい勝利やったんや。なんでかって、それまでやと、T5 chatみたいなもんと同じくらいの複雑さが必要やったからや。でもリアクトやと、今や2、3人のチームでGmailみたいなもん作れんねん。しかもGmailと同じくらい使いやすいもんをな。
Gmailサイズのリアクトコードベースは、Gmailのコードベースと同じくらい辛いやろうけど、新しいツールやソリューションの進歩を、まだ遭遇してへん複雑さとして描くのは不公平や。特定の複雑さレベルで提供できる機能がめっちゃ増えてることも認めなあかんのや。
そして、一番重要な追加である、TypeScriptについてもまだ話してへんのや。わいやったら、TypeScript以前のjQueryとリアクトの違いはそんなに大きくないと思う。リアクトだけやと、たぶんここくらいやけど、リアクトとTypeScriptの組み合わせ、そして一箇所のコードを自信持って変更して、他のどこが壊れるか分かる関係性…ヤバいで。
TypeScriptがコードベースで普及してから、毎月やってるクレイジーなリファクタリングの量は、それまでの人生全部で やったより多いで。なんでかって？TypeScriptのおかげで、このIDを使う要素が全部ページにレンダリングされてるか確認せんでも、怖い変更ができるようになったからや。
わいの脳みそが壊れる前に扱える複雑さのレベルが上がった。コード1行あたりのアプリの機能量が増えた。ユーザーの期待値も上がった。これ全部まとめるツールの質も上がった。全部良くなってんねん。
確かにサーバーからクライアントに行ったり来たりしてる。20年前のPHPから学んでる。最初からPHPのままやったらよかったのに…いや、あかん。特定のソリューションが行き過ぎたって認めて、ちょっと戻る必要があるときでも、完全に間違ってた、新しいツールには利点がないって言うのはあかんのや。
でかいリアクトのコードベースが、でかいjQueryのコードベースと似たような意味で悪いって言えなあかんけど、その2つのコードベースが同じことをして、同じ方法で期待に応えたって装うのはあかんのや。
ブラウザで使うアプリの質が上がって、ユーザーの期待値が上がって、これらに取り組むチームの平均サイズが上がって、今やっとレイオフAIの世界で少し下がり始めてる。これ全部について話さなあかんのや。
プライムに同意する部分もあるし、でかくて複雑なコードベースは使うツールに関係なく辛いって完全に同意するけど、Netflixみたいな規模の会社がjQueryで作ってたら良かったとは思えへんのや。ユーザーの機能と期待は、開発者体験の質より遥かに重要で、リアクトはそれが理由で勝ったんや。
以前やと想像もできへんような規模で、ユーザーが期待することを届けられるようになった。完全に人生めちゃくちゃにせんでも…まぁちょっとはするけどな。
ここまでで言いたいこと伝わったと思うけど、チャットのみんな、どう思う？わい頭おかしなってるか、それとも…そうやな、dogpawの「新しい技術のおかげで、10年ごとに古いビジネスの再発明がめっちゃ簡単になってる」って意見に同意やわ。
面白いことに、この言葉初めて聞いたんLTのLukeからやねん。元ネタ見つからへんらしいけど探してるわ。「どんなソフトウェアも3年ごとに約3倍作りやすくなる」っていう大雑把な見積もりやけど、まぁAIで想像もできへんくらい加速してるやろうけど、めっちゃ信じられるわ。
わいとチームで、Zoomの代替品みたいなんめっちゃ良いの作れたで。クリエイター向けの高品質HDライブコラボ用の完全なZoomクローンみたいなもんや。動くバージョン、わい一人で1週間で作れたで。1、2年前やったら想像もできへんかったで。これAIツール使う前やで。
これらの新しいツールのおかげで、物作るのめっちゃ簡単になって、機能あたりの複雑さ、アプリができることあたりの複雑さが本質的に減ってんねん。そのおかげでアプリはもっと複雑になれるし、それめっちゃええことやで。
昔30人のエンジニアが必要やったもんを、小さなチームで作れるようになったのは、リアクトがクソやからやないで。そう考えるんは完全に妄想や。これらのツールが本物の意味のある勝利を示してるからや。
クライアントからサーバーへの移行について話せなあかん。複雑なコードベースで働くのが辛いことについて話せなあかん。これら全部について話せなあかんけど、昔も同じくらいよかったって盲目的に装うのはあかんのや。そうやなかったんや。
ツールはユーザーの期待に追いついてて、ユーザーの期待はそのツールから得られる勝利に追いついてんねん。ええソフトウェア作るのが簡単になればなるほど、ユーザーはもっとええソフトウェアを期待すんねん。これ全部上に向かって進み続けなあかんのや。
振り子やなくて、螺旋階段やねん。もっとええソフトウェアに向かって上がってって、AIのクソコードが世界をバグだらけの地獄にせんように一緒に戦わなあかんのや。リアクトみたいなツールが勝利やって認められへんかったら、それを使ってクソソフトで世界を乗っ取ろうとしてるAIボットが勝つで。
側を選ばなあかんのや。悲しいけど、今はjQueryの側を選んだらあかんのや。jQueryやHTMXみたいなもんが現代のランドスケープやエコシステムでどこに当てはまるか、他の動画でめっちゃ話してるけど、ただみんなにそれらのツールが全部に十分やって装うのやめてほしいわ。
T3 chatの同期エンジン作ってる時、サーバーレスがそれに完璧に合うって装わへんのや。変更があった時のライブアップデートをちゃんと作りたかったら、専用サーバーとWebSocketが必要やって分かってんねん。わいの好みの作り方はそれにうまく合わへんのや。
できる範囲でショートカット使ってるけど、それはわいの選んだ作り方の短所やねん。このアンチリアクト派の人らにも、わいがサーバーレスが特定の複雑なユースケースに合わへんって分かってるのと同じように、jQueryはもっと悪いって認めてほしいわ。
サーバーレス環境でWebSocket使うのが悪いと思うなら、jQueryでTwitterクローン作ってみい。その時本当の痛みが分かるで。そして機能とユーザーの期待について考えてな。なんでかって？
解決したい問題のためのツールをもっとよくするために一緒に働かへんかったら、AIが勝って、わいらは隅っこでエディタの設定いじりながら、それが重要やって装うことになんねん。そんなんいらへんやろ？本当にいらへんで。
ビデオがラジオスターを殺したように、AIはjQueryファンボーイを細かく切り刻むで。これらのことについて話す時は、お願いやから責任持ってな。みんなこれについてどう思う？わいにしては違う感じの、めっちゃ違う構成の動画やけど、どう感じたか気になるわ。また会おな、ピースアウトナードども。
コメント