この番組はエンジニアの成長は楽しい学びからをもっとうに我々が日々学んだことを楽しくわいわいネチャネチャアウトプットするラジオでございます嫌だなネチャネチャどういう状態なんですかネチャネチャアウトプットって

じゃあガムチャージしますかそんなネチャネチャじゃないですよガムはまだ本当ですか?ハイチュウぐらいだとやばい?ハイチュウ?納豆ぐらい納豆ねあれネチャネチャって言うんだ納豆はまあネバネバですけど全然ガムよりネチャネチャでしょガムよりネチャネチャだな今日はそんな納豆の話をしていくんですけど気になる十分気になるよ毎日食べてるよでも

僕もさあ今日はそれに近い話するんですけど最近のモダンなスタックってどんなやつなんカタログ増やす大会何増やす大会って言いましょうすいませんカタログ増やす大会ですけどこれきっかけなんですけど僕今ちょっと経営者向けバイブコーディングアシスタントをやってましてそれを作るときに

これどうやって作らせるのがいいのかなと思ってたんですよちょっとその質問をAIに投げた結果ですね返ってきた答えが今のモダンってこういう感じだったんだっていう感想を抱くようなものだったのでそもそも今ってウェブ作るってなったらどういう技術スタック選択するんだろうと思ってその辺をですねいろんな角度から分析しました分析しました

その点をいろんな角度からまとめ上げて今ってこういうアプリ作るならこういうのがいいよねっていうやつの7つの秘密道具の組み合わせデザインパターンじゃないですけどそういうパッケージというかカタログみたいなそうだねイニシエでいうランプみたいなもんだよねはいじゅんぺくんランプなんでしょうかちょうどいい問題ですねこれは牛の

内臓の一部位の美味しいとこ紙のイメージだけどね

赤身のイメージじゃないランプって赤身ね内臓だっけあれホルモンしてたっけ結構赤身寄りの一部とかそれとどっちなんてなる肉のイメージなんだよないい焼肉屋行ったことないわけじゃないんですけどそんな行ってないんでピンときてないですまじかランプはね多分赤身の肉だと思いますお尻の方でしたじゃあ赤身だ一部の隣

だよねほぼ一緒だそう一部とどっちがどっちやねんってなってるよ俺はそうなんだなんだっけランプでランプうんうん何ですかそれLAMPランプマジで聞いたことない?まあないかもねいやない俺あの駆け出しSES時代ランプ環境で作ってましたみたいなやつ結構なんかこう商談で言うみたいなのあったけどねいやないですねうんイメージ

10年前のシステムなイメージだなそうかもしんない長生きしてるやつは割とランプなのまだあるんじゃないかなと思ってます全然俺も今作ってるやつ極論ランプだからなるほどすみませんちょっと引っ張りすぎたんですけどLinux、Apache、MySQL、PHPですねそうです昔のウェブ作るときのほぼスタンダードみたいななるほどそこがEngineXに変わるとLempみたいな

えーそんなのなんだえーちょっと待ってレンプどこがなんだったの多分エンジンXの発音をそのままEにしてるんじゃないかなあーなるほど無理やりっすねちょっと待ってね確かにエンジンXあれでエンジンXって言うの不思議だからな普通にうんあのレンプありましたちなみにあんま聞いたことなかったけどPのところPHPじゃなくてパールとかパイソンの頭文字のケースもあるんだね

それPだから巻き込まれてるだけじゃんそうだよね巻き込まれ事故だろそれはちなみにそれぐらいの時代の時ってルビーもルビオンレイレスも結構それに近しいぐらいの勢いだったけどそっちは名前ついてないよね聞いたことないそういうやつの現代どうなってんのっていうちなみに皆さん例えば今から一人で

一人はちょっとごめん嘘3人ぐらいの小規模チームでまずはちょっとちっちゃいアプリケーション作りましょうってなったらどんなスタックでやりますそれは全然わかんねえプロトタイプではなく普通にワンチャン商用サービスみたいなそうECサイトECサイトにしようでもそんなリアクとかネクストを使ってで

なるたけサーバーレスにしようとしますねバックエンドはPythonにしちゃうな多分求人しやすそう求人しやすそうなるほどねDBは何かしらのリレーショナルデータベースでAWS使うんだったらAuroraにつくかみたいなそんなノリになりますねこれで満たしてるかさっきのランプの話ちなむとサーバーレスだとどういうイメージだ

ECSかそういうことかあとはS3でホスティングしてみたいなクラウドフロントとっていうのはどこかのパブリッククラウドでやるみたいななるほどね

ファーゲートみたいなやつで裏でやっててもう異質インスタンスが立てなくていいよねみたいなそういうことですねサーバレスって雑に言うとラムダみたいなイメージも湧いちゃうから確認でナイス確認ナイス確認くんですそれは今度からナイス確認くんっていうツイッターの名前にしようと思いますいやもう取られてるだろうなその同盟いそうナイス確認くんじゅんぺはちなみにどうですか

僕はですね全然わからないけど今もAIに聞いていますねそんなことしたら俺がこれから言うやつ出てくるだろうありえるなこれは最速で作りたいとネクストJSのスパベースのバーゼルって出てきましたねおい出てきちゃったじゃねえかやばい潰してしまった早速ですけど発表していきますよ今回7つあります

まずその1今の王道デファクトスタンダードと呼ばれてる勝手にAIが名前つけたんですけどザ・スタンダードザ・スタンダード無印良品みたいな

それ以外ニュアンスですけどこれはですねまずですねNext.jsもちろんタイプスクリプト使いますでスタイリングはテールウィンドウでプラスバックエンドも全部Next.jsに詰め込んじゃうでORMでプリズマを使うっていううんうんうんうん

でこれがさっきねじゅんぺいが言ったやつだねまさにこのスタックにするならデプロイするときはバーセルプラススパベースにするとっていうのが今のねオードデファクトスタンダードと言われてますねなんか自分の案件でネクストジェイスじゃないですけどリミックスに似たようなことやってますねおーそうななんか一番楽なのなんだってはいはいはい

みんなで考えた結果そうなりましたね楽なのかつなんか流行りそうだから触りたくねーみたいなノリでちゃんと調べましたよ大丈夫そうかみたいななるほどね

バックエンド側も全部リアクト側に書くやつでやってる?はいそうですねJS側からそのままDB直接叩いてそんなロジックがあるようなサービスじゃないっていうのはありますけどねそうなんだちなみにねNextでサーバー書くよってなった時にルートハンドラーズっていう機能があってこれを使うとAPI側の開発も一緒にNext.jsの中で書けちゃうよみたいな

そういう感じらしいですねさすがにこれあれじゃないのでっかいサービスに向かないんじゃないなと思って聞いてみたんですけど機能的には全然十分らしいですしっかりちゃんとしたORMもあるし分けようと思ったらちゃんとコンポーネント切って作れるから今は結構これで動くアプリ普通に作れるよって言われてなるほどね

なんかしっかりしたの作ろうとするといつもバックエンド作っちゃうけどもうこれでいいんだっていう革命が起きた案件でしたねこれはなんか反論したいけどなんかあんのかなどうなんだろう処理速度とかですかバトルネックがあるとしたらそれはあるかもねネクストジェイスって結構重ためのフレームワークでもあるのでそれを解消しようとするために結構小っちゃい軽量なフレームワークとかも出てきてるぐらいだからねそこはあるかもしれない

マイクロサービス的にやりたい何かがあればサービスの質的にとかだったら分けた方がいいかもしれないけどシンプルなそれこそランプでやるような構成だったら確かにのりさんが言ってる構成で良さそうあとAIの昨今のコーディングエージェントとも相性良さそうですねうんそうそうそれはあると思うしかも全部JSだからね相当精度良く提案してくれるんじゃないかな得意なところですねうん

確かにそれこそまさに今出たマイクロサービス的なものは確かに向いてないかもなって今ふと思ったわ逆にマイクロサービス作るなら今だったらこれなんじゃないかなってのがやっぱゴートラストのパフォーマンスと堅牢性を求めたスタックですかねこれ2つ目ですゴートラストってどっちも使うんですか?オアですか?オアとかラストで

バックエンドが入って通信にGRPCを使います何ですかGRPCとはGRPCねはいGRPCGRPCはですねGがGoだっけGoogleだっけGRPCGoかGoogleの頭文字だった気がするんですけどRPCのところがリモートプロシージャーコールですね

これ何かっていうと普通アプリケーション同士が通信するウェブAPI作るよってなったらJSON形式でHTTPで送り合ってみたいな大体それがイメージつきやすいじゃないですかこのGRPCっていうのはそこの通信の部分をより高速にできるようにしたものっていう感じかなスピードと型を共有できるよっていうのが結構特徴な気がする

でこれはまずやりとりなんですけどバイナリーデータを送り合ってますサーバーとサーバー間でほうすごいなそれはでなんでサイズちっちゃいから機械がそのやりとりするってなったら爆速で通信できるよとデバッグむずそうですねむずくないのかなあーでもそれがあるから型にうるさいのかなそうかもしれないですねそれはそうかそう型に違反したデータは送信すらできないです

いい素晴らしいそれはもうそうあるべきだそうだねなんかここの繋がりあんまり考えたことなかったし知らなかったんで今ふと今言われて思っただけなんですけどもしかしたらそのデバッグしにくいところからこの型安全みたいなところが来てるのかもしれないこういう風にその型のファイルをプロトファイルとか契約書とかって言ったりするんですけどそこで型の設計図を作りますよとでコード自体は結構自動生成して書くというか

このGRPCはまずコードを自動生成することができますとその時に自動生成されるのはまずサーバー側は関数のひな形ができますだからおそらくシグネチャーだけ書かれてる引数と返り値だけ分かる中のビジネスロジックは空っぽ

なんでそこの中でデータ取ってきたりとか変形させたりみたいな処理を書く必要がありますよとでもその外側のひな形は作ってくれるとひな形が作れるのはGRPCで契約書があるとその契約書にのっとった形でサーバー側とクライアント側を実装しなきゃいけなくてその契約書でインターフェースが決まっているから

そのインターフェースがそのままシグネチャーになるメソッド名なのかあとはどこのパス叩いてそもそもメソッドなのかメソッドを叩いたらここを呼び出されるみたいになってるからシグネチャーがそのまま定義されて中身が空ってことですねと思われるそれで言うとフロント側はそもそもこのメソッドを読んだら通信できるよっていう関数だけ渡されるイメージだと思う

だからフロント側はそもそも書かないと思うねそうですねフロント側は好きな時に呼び出してただこの契約書にのっとってねっていうだからしっかりその型通りの違反したものを書けない状態になるとなんでそこでひな形生成したらあとはサーバーの中身でロジック書いてクライアントからそれを呼び出すだけで使えますよみたいな人間のバックエンドAPI開発とフローは一緒ですね

最初にスワガー書いてこのインターフェースで呼び出してねって言ってただそのスワガーからコードを生成することができるのかもしれないですけどあんま見たことないんででも確かできるよねあれそうですよねオープンAPIの機能に4つあってそのうちの1個にあったはずやってることそれと一緒ってことですよねそうそうそうそうそうそう

それができますよっていうのがこのGRPCですよとさっきのマイクロサービスとかで作るってなった時はこのGoとかラストをバックエンドにしてこのGRPCで型駆動で書いていくことによってマイクロサービスが作りやすくなるらしいあと普通にパフォーマンス上げたいとか高負荷なシステムでも使えるよねっていうラストの追加情報なんですけど最近ラムダ

AWS Lambdaでラスト使うとコールドスタートにかかる時間ないらしいんでLambdaはもうラストがThe Answerであるっていう話があったんでラストすげーなって思ってますそれあれかなこの前言ったWebアセンブリのやつ関係あんのかな詳しくはわかんないですLambdaのスタートの仕組みとラストの仕組みががっちり噛み合ってコールドスタートの時に時間がかかんないよっていう

ことを見たのを覚えてますなるほどねラストさワズムのサーバーサイドのやつ変換多分できるから内側でそれに変換してそれを動かしてるのかなってちょっとふと思ってたありえるコールドスタートとはなんでしたっけAWSラムダとかって呼び出されたときにコードが動くんですけどあれって

常にサーバーが立ってるわけじゃないんですよだから呼び出された時にサーバーが起き上がって実行されるんで初回起動ちょっとラグあるというか遅延があるというか処理がちょっと遅いんですよイメージPCのスリープとシャットダウンの違いみたいな気がイメージに近い気がするそうですねただ1回呼び出しつつとその2回目以降のレスポンスがラムダで1回上がったやつが落ちる前に送ればすげー早く返ってくるんですようん

なのでもしラムダでフロントエンドをホスティングするときとかは1分に1回外形監視入れてラムダを起きたままにしとくと常にレスポンスが早いみたいなそういう小技を仕込む必要があるっていうのがラムダの癖みたいなところがあるんですけどラスト使うと初回起動遅いっていうのがないよっていう話でしたコスト的にもめっちゃメリットあるやんそうじゃないですか作れれば

作れればラストって多分競技人口少ないと思うんでそういうことね競技競技人口ね確かにそれがマイクロサービスとか高負荷なシステムで使うときのスタックの今の割とスタンダードなやつバックエンド側が豪華ラストフロントは明記はされてなかったけどネクスト使ってるんじゃないかなっていう気配はしたねうん

ネクストなんですねそうだね3つ目いきます3つ目なんで番号を合わせてT3スタックと呼ばれているものを紹介したいと思いますP3T3T3T3このT3スタックはですねキーになるテクノロジーは3つ3つかこれ3つですまたもやネクストJSでTRPCTRPCTRPC

とオース.jsオース.jsちょっと一個ずつ一個ずつ2個目と3個目お願いしますネクスト.jsはさっきと同じでリアクトのフルスタックのフレームワークですよとその次のTRPCこれは直前に説明したGRPCとすごく似てるTがなんだT何のTだろうねこれタイプスクリプトのTですって

何に対してリモートプロシージャー考慮をするんだそもそも何のTなんだ一応これどれなんだろうね一応このT3スタック全部省略してたんですけどNext.jsでもちろんタイプスクリプト使いますよとTRPC使ってORMはプリズマ使ってますCSSはテールウィンドウCSS

そこのTか本当かもしかしたら今のテイルウィンドウで3つ目のTが来たんでそうかもしれないと思いつつ書いてないね特にこのTですよみたいなこと書いてないですね作った人も2021年に提唱した初音多分セオさん中国人の人T-H-E-Oアジアテイストだけど

この人もTだから4つ目のTで混乱してるんですけどいや多分違うでしょその技術スタックの中に自分の名前ぶち込むのはちょっと主張すごすぎるでしょ今4つTがあるからどのTを3つ取ってるんだろうなとかなってるんですが初めて聞いたなT3スタックT3スタックはねかなり一番最初に紹介した王道スタックと被ってます登場人物は

ただ通信の仕方みたいなところに関する開発体験が劇的に違いますよっていうのがこのスタックの違いですね例えば最初のじゃあNext.jsで書くよって言ってNext.js内にサーバーとクライアント書いたとしても結局APIをフェッチしてきてAPI叩いてフェッチしてきてそれを表示に使ってとかそういう処理は書くわけじゃないですかなんですけど

このT3スタックはTRPCを使ってるんでさっきのGRPCと同じような形でですね関数呼び出しで呼び出せるというかバックエンドそうフロントエンド側は関数呼び出しで値を取ってこれるようになるうん

だからどういう風に通信するかとかそういうなんかAPIウェブAPIを叩く時のこととかをいろいろ考えずに関数呼ぶだけでデータ取れるよねっていうそういう体験の違いがありますこれ多分変換については書いてないな変換はしてなさそうな気がするやっぱそうですねGRPCだと型を定義してから生成することによってひな形作れてたじゃないですかなんですけどTRPCはそういう機能は特にない大変そうじゃん

そうだねそれよりは大変かもしれないだけど全体をタイプスクリプトで統一できるっていうメリットがあるかもしれないだからサーバー側もフロント側も同じ型データを使えるわけですねその中でさらに呼び出し側の時にいろいろAPIの使い方とかを気にせずに関数呼び出しでいけるからフロントエンドがやる時楽だよねというそういう体験の違いがございますなるほど

じゃあこれ逆にどういうデメリットがあるかっていうところなんですけどさっきまでのザ・スタンダードのやつってある程度自由が利くというか例えばORMじゃあプリズマ使ってもいいし別に他のORM使っても動きますと認証の部分とか各パーツを割と自由に組み合わせて使えますよとっていう選択の余地があったんですけどこのT3スタックはですね

かなり厳格にこれが一番いいぞっていうのを作者が決めて検証済みの組み合わせを使うような感じになっているだからある種意思決定は早くできるよねとただあんまりその構成の自由度みたいなやつはないですよとプラス呼び出しがTRPCになるじゃないですかなのでスマホアプリとの連携とか

だからWebAPIだったらさスマホアプリからも共通して呼べるけど今度はアプリにTRPCクライアント必要になるじゃんとかそうですよね汎用性が減るんですよねそうだからRPC使うとそうだね爆速で開発できる一方で向かないときには向かないっていうちょっと尖ったスタックになりますねこれはやっぱりサービスのスケールを考えながら何の技術を選定するかっていううんうん

なんかバランス感覚が求められますよねそうだねこれがT3スタックですと続いて4つ目今すごいJSいっぱい出てきてるんで一回頭をフレッシュにするためにエンタープライズでよく使われる今のパターンでもフロントなんてJSなんじゃないですかフロント

Next.jsです安心安全ただねこれ大規模組織とか金融とかそういうところがよく使うスタックですよっていうあれなんですけどまずNext.jsフロント側で使ってますとなんですけど一回バックエンドの話した方がいいわバックエンドがJavaでスプリングブートが結構最近は選ばれやすいなぜなんですかそれは

ジャバの中のまず金融といえばジャバじゃないですか解説してほしいなんでなのこれなんでこんなに一世を不備してるかよく分かってないけど金融ってとにかくジャバ使ってない想像ですけどものすごく堅牢性を求められるのとあとはなんか既存システムの次足し次足しみたいなところがあると思っててそうだよねはい

なおかつ新たな何かを作るにしてもベンダーもすごいどこでもいいわけじゃないんですよやっぱり金融とかって結構多分いい意味でガチガチだと思うんでそれで多分同じ技術策がそのまま選ばれ続けるって想像してます実際知りません時代背景とか考えるとさみずほとかさ

20年物語みたいなやつで多分あれ出たの2020年とかだから多分システムとか最初に着手し始めたの2000年前後だと思うんですよあの時期って多分Javaがやっぱ固い言語としては圧倒的に地位を築いてたからじゃないかなっていうのもあると思うそう思いますそう思います当時のだってねもちろん多分PythonとかPHPとかあっただろうけど固いゆるゆるでないでしょっていうレベルだと思うんでまあそうですね

そういう背景だって多分金融でよく使われてるんじゃないかなっていう流れからスプリングブートってモダンな機能を備えてるJavaの今結構有力なフレームワークだよねっていうところでこれが使われてるんじゃないかなと推測しますなのでこういう風な感じなんだっていうのを思ったのがあってアンギュラー使われるケースが多いらしいんですよ

アンギュラーって結構そのリアクトとかビュージェイスとかと書き心地が違うらしくてですねなんかJavaに近いっぽいんだよねどういう意味で?なんかクラスベースで書かれててみたいなアンギュラーはですねクラスベースで書かれてる上にですねDIとかそういう機能も持ってて設計思想が非常にJavaに近いらしいんですよそんなことできるんですね確かに

で故にアンギュラーってリアクト書く人より圧倒的に人少ないんですけどでもJavaのエンジニアがフロントもやるぞってなった時にキャッチアップしやすいらしいなるほどあーなるほどただ最近だとやっぱそれを差し置いてもやっぱリアクト使ってる人が多いんでじゃあ新しくなんか立ち上げるよねってなった時はNext.js採用されるケースが増えてきてるので最近のトレンドはそっちに寄ってるよねっていう状態らしいねなるほど

でもここは本当にAPIで通信してフロントはそういうモダンなJS使ってっていうところで結構スタンダードな開発のイメージなのかなっていう尖ってないこれが何個目だ4つ目やばいなサクサクいきますよ5つ目HTMXスタック出た最近気になってるやつ話題なんですかでもなんかちょくちょく名前聞くよねうんうん

でこれHTMXこれはねまずJSのライブラリですでどういう思想かっていうとね脱SPAリアクトとか大変なんじゃいっていう時代のあの寄り戻しみたいな存在で普通さその

クライアントとじゃあAPIがあって開発するってなったらJSONで返してそれを受け取ったクライアント側が目的の場所にそのデータを埋め込んで表示するみたいなそんな感じの流れじゃないですかざっくり言うとこのHTMLはそんなもんじゃないですサーバーから直でHTML返しちゃうそれがこのHTMLってHTMLの中に書くんですよ

なのでスクリプトの中にそもそも何も書かないスクリプトタグの中につまりHTMLの中になんかちょっと属性みたいなやつ書いてあげてそこの名前称号させて表示してるんじゃないかなって感じの機能だねこれはなんかあれなんですかイメージももはやHTMLってことですかそうもはやHTMLなんだけどHTMLにその機能ないからJSのライブラリでそれっぽい動きにしてるって感じかなイメージ

だからこれで作るってなった時はサーバー側はですねJSONじゃなくてHTML返さないといけないですなのでサーバーの書き心地結構モノリシックなアプリケーションと近くなりますねそれこそねちょっとPythonだとどんなテンプレートエンジンあるのか知らないんですけど

Ruby on RailsとかLaravelとかってデフォルトだともうそのフレームワークの中でHTML作って返してると思うんですよRubyだとなんだERBみたいなやつあれなんて読むんだろうねわからないですLaravelだとBRADEっていうテンプレートエンジン使ってたりするんですけど本当にサーバー側に.phpの拡張子だけどHTMLっぽい見た目で書かれてて

普通の埋め込み部分だけ埋め込み用の記述になってるみたいなやつあれの完成版のHTML返すんじゃなくて部分的なHTMLを返すようになるみたいなだからサーバー側とかもそんなに手間をかけずに返せるとデータをでフロント側は受け取ったやつをただ埋め込んでるだけだから何のロジックも挟まずに表示できるっていうところでえーと

簡単なウェブサイト向きではあるんだけどそういうインタラクション少ないサイトだったらこれがめちゃくちゃ楽に書けるよっていうやつがHTMLですねなんか考え方としては本当にシンプルなことをするんならそのままバックエンドに寄せちゃおうぜぐらいのノリですよねジェミニ曰くPythonとかPHP書いてきた人たちの復権って書いてましたなるほど

なんか最近バズってた記事であの ai エージェントのアプリの木を作るならファスト api + htmx 最強説っていうログ記事がバズっててそうなはい気になってました htmx そうなんだなんかファス中詳しい詳しい方はあの記事を見てくださいぜひそうだねはい

でもインタラクション少なそうだもんなそういうAIエージェントとかになるとあとプロトタイプなんでお客さんに見せるんだったらもともとストリームリットっていうライブラリを使ってテンプレ作ることが多かったけどそれだと見た目は似通っちゃうしかっこよくないしっていうので課題感があったみたいですどうやら次いきます6個目モダンモノリス

モダンモノリスこいつらはですね僕これ使ってますちなみにどういうスタックかというとですねレイルズルビオンレイルズプラスホットワイヤーホットワイヤーもしくはララベルプラスイナーシャジエースこれどういうことかというと

本来こういうレールズとかラベル使ってプラスフロント側もモダンなリアクトで書くよってなった時って基本的にはAPIを叩いてフロントで取得する方式になるとうん

なんだけどそのホットワイヤーとかイナーシャジエースってやつはブリッジって呼ばれてるパーツなんですけどそのAPIのやり取りの部分を見えないようにしてくれてるっていう感じに近いかなだからフロントがリアクトで書いてるにもかかわらずデータのフェッチとかは書かないんですよイメージララベルだったらそのビューを指定して

でその後ろに引数で変数渡したりするんですね第二引数とかに渡したい変数書くんですよでそれが特に何もすることなくフロント側のリアクトのプロップスで受け取れるっていうへー

きっと裏側でAPAとか叩いてデータ変形させて渡してみたいなことしてるんですけどそういうところを隠してくれてるっていうそんなのあるんだだからそれこそ本当にデフォルトのララベルで書いてるような書き心地でリアクトも書けちゃうみたいなそんな感じの構成で書けますとこれ特に企業化ソロ開発

で最高にいいスタックですよって書いてあって俺の8月の選択は間違ってなかったって今思ってました素晴らしいどうやってたどり着いたんですかその選択全職これ使っててなるほどね慣れてたのもあったんですねいや慣れてなかったんですよ全職これを推奨してたんですけど僕のチームこれでなくてでもなんかちょっと便利そうだなと思いながら横からチラチラチラチラ見てて

それをそのまま採用したみたいな感じでしたねそれはもうナイスフックというかこれ使えば枯れた技術への安定開発が爆速でできるという素晴らしいこれがモダン・モノリスですねそしてラストこれはパフォーマンス特化の技術アストロもしくはクイックこれはですねまずどういうサイトが向いているかというとインタラクション少なめの読み物コンテンツが多いようなサイトですね

アストロとクイック全然機能違うんですけどアストロの方が有名な気がしてるんでアストロの方で説明しますねネクストジェイスさっきもちょっと話し上がったけど重くねこいつみたいなっていう問題がありますとなんで重いかっていうとインタラクションをわざわざブラウザにロードしてきて

でがっつり全体がもうなんか js でバシバシ動いてるみたいな存在なので やっぱ js の量多いんですよでこのアストロっていうのはアイランドアーキテクチャーっていうアーキテクチャーを使われてるんですけど 島島アーキテクチャーでアイランドアーキテクチャーってどんなものかっていうと この説明で

俺は納得しなかったんですけどまずウェブページ想像してください我々が使ってる検証ツール開いてくださいそしたらHTMLのタグがいっぱい書かれてますねこれを海だと考えてくださいはいただ基本的にはブログですブログなんで読み物しか書いてないですだけど高読するボタンみたいな

RSSの登録にしようかなボタンを押したらRSS登録できますよみたいなそういうインタラクションがあるボタンありますとここだけJSが必要ですよとこのJSが必要な部分を島と捉えてこのピンポイントで必要な部分だけJSを起動しますよっていうアーキテクチャーえー

普通じゃね?違うのかな?普通じゃね?って思うじゃんでもリアクトとかビュージェイスってもはや全体をJSで構築してその中に確かに動く部分だけ書いてるっちゃ書いてるんだけどでもそれ以外もJSでやってるじゃないですかそうじゃなくてどっちかっていうとJクエリに近いバニラJSとかHTMXも近いですか?どうなんだろう?HTMXはまたもっと特殊な気もするけどなるほど

でもJクリに近い言ってる意味わかります必要な部分のJSだけロードする

ことによって高速化を目指してるようなアーキテクチャですねなんか本当にねダイエットとリバウンドを繰り返してる感じしますねそうねでもねこのアストロは結構俺の調べてちょっと使ってみたいかもって思ったんですよなぜかっていうとこのアストロっていうフレームワークの中でリアクトかけるんですよどういうことかっていうとさっきのRSSの高読ボタン

だけリアクトのコンポーネントで書いてってことができるんですねで実際にロードされるのはそこの部分のJSだけちっちゃいのがピュンって出てくるんで早いっていううんうんうんのでで別にそこリアクトじゃなくてもView.jsでも書けるしみたいな感じで結構その中が差し替え可能ですなるほどはいでじゃあJQueryとかVanilla.jsは何がダメだったのってことなんですけどあれは

書き方の思想的に手続き的要はどのドムを指定してどういうことをするよみたいなのが結構手続き的に書かなきゃいけなかったとそれがスパゲティコードの原因になりやすかったんでリアクトみたいな宣言的UIっていうんですけどああいうのが受けたと

このアストロはそういう小さいパーツを書きながらもその小さいパーツの部分をリアクトで書けるつまり宣言的に書けるっていうところがJQueryとかとの違いリアクトとかの違いは全体をJSで構成するわけじゃないからめっちゃパフォーマンス良くなるよとそういうアーキテクチャで作られてますよっていうのがこのアストロですねブログとかだったら結構いいんじゃないうんうんうん

仕事で使うことあるのかなあるか全然ありそうな気するけどなそうなんですねオウンドメディアとか作るときはそうなのかなオウンドメディアとかめっちゃいいんじゃないあとLPとかもいいよね多分まあそうなのかな

そうか一部に同的な何かを入れるのかLPはちょっとあんまり作ったことないのであれなんですけどそんな複雑なことしてるのかなとすら思うでもLPはLPによるよ確かにAppleとかもっと凝ったことやってそうですしとかあと診断コンテンツつけるLPとかもなんか結構見るような気がするな診断コンテンツ例えばこう転職サイトみたいなLPで

転職サイトにLPあるのかな悩みみたいなのが上にバーって書いてあって下の方に行くと診断コンテンツがあってそれをクリックするとそのページ内で診断が始まって全部終わったらメールアドレス入力したらその結果メールで受け取れますよみたいなそういうタイプのLPとか作るならいいんじゃないかななるほどねっていうのがこのアストロという技術でございます

ありがとうございますはいっていうので今 web で開発するなら結構こういう選択肢もあるっていうのが正直僕使ったことないやつばっかりだったんですけどまあ僕もあんまり触ったのないなって思ってるよりもやっぱ web アプリっていろんなシーンあるんだなって思わされましたなんかなんでしょうね最初には僕がこれってこれって言いましたけど

例えば最後のアイランドアーキテクチャとかも作るサービスによってはこれを選択するかもしれないし作るサービスによってはマイクロサービスかもしれないしもしくは作るサービスの質もしくは開発体制によってはモダンモドリスかもしれないしみたいな考える角度が

サービスの規模とかステータスとかだけじゃなくてサービスの質とかやりたいこととかあとは開発体制とかそういういろんな変数があってアーキテクチャの選択がされるんだなっていうのを思い出させてもらったみたいななるほどねことを思いました僕がこれ見てて思ったのはやっぱその技術のより戻しの時代というか

やっぱNext.js超強かったじゃないですかそれに対してこういう時は向いてないよねっていうところに対する寄り戻しがめっちゃ来てるなっていう印象がありましたねいろいろ見てて探索的に最適化され続けてる感がありますね進んだらちょっと道が違くて方向転換してみたいな特にねちょっとこのサーバーサイドでJS書くみたいなやつはそろそろ体験しておきたいなって僕は思ってますね

サーバーサイドもJSで書くかノードっていう意味じゃないですよねノードっていうよりはもう本当にNext.js単体でフルスタックのフレームがウェブアプリ作っちゃうみたいなこれをやってみたいなって気がしてますぜひやってエピソードにしてくださいウィーミンですそしたら以上今ウェブアプリを作るならこんなスタックあるよっていうカタログを増やそうの回でございましたありがとうございます

アーキテクチャに関しては深く知ってるのも大事ですけどもちろんそうじゃなくてシーンごとにこういう手札があるといいよねみたいなのを選択肢として持っていくのが大事な気がするので非常にありがたかったです確かにねだってこういうのね全部深掘りするってなったらもうやばいぐらいの時間かかるからねそうだね本当にそうですというよりはこれってこういう特徴あるよねっていうのを知っておいて

いざじゃあ技術選定しなきゃっていう時にその時にちょっと深めに調べて正しい選択できるようにするっていうのが一番コスパいいなって感じしますよねあとエンジニア同士の会話の種になるしアストロ触ってるって言われたらピント来てなかったんですけど今まで今日のエピソードを通じてピント来るようになったと思うんでなるほどねもしかしてブログ作ってるんですかみたいなそうそうそうそう

やっぱねアップデートしていかないといけないなって思いましたわありがとうございますそれを定期的に学んで配信できるといいですね触る壁を突破できたら勝ちです触る壁は日々下がり続けてるんでちょっと横文字多かったなエンジニアやっててリアクトのプロップスとかなんだっけなとかってなってましたリアクトのプロップスかそこで詰まられたらちょっと困るなすいません

エピソード復習しますね聞いてもよかったかもねその場で確かにじゅんぺいの後ろにいっぱい同じこと思ってる人いっぱいいるかもしれないその通りですよ本当にということでこの番組では皆様からの感想お便りを随時受け付けておりますXではハッシュタグひまじんプログラマーで投稿してくれると僕らが見つけやすいので検索がはかどりますはい

かかどります僕らの会社はこんなスタックで開発してますよっていうスタックカタログ談義とかあとは逆にこういうスタックだからやだなーっていう嘆きのいや言えないってインターネットで嘆きのやつとかね嘆きのやつとかねうん

そういうのを広くあまねく募集しておりますので投稿のほどよろしくお願いします昔の話だったらできるかもしれない昔の話ねこういう現場いましたみたいなぼかしながらあと皆様からのお便りはですねエピソードの説明欄にありますGoogleフォームより受け付けております

普段なかなか自分で調べるのは腰重いなっていうのを僕らに調べさせて知りたいっていうか耳で学びたいという方はぜひそちらから疑問に思っていることや感想などなど送ってもらえると力にもなりますしお互いウィンウィンなんじゃないかなと思っておりますのでよろしくお願いします

絶対にAIに投げた方がいいはずなんですが我々が味付けできるっていう強みあるんでヒマプロ味のやつ味わいたかったらお願いしますそうですねまたこの番組では間違えましたまたスラック間違えましたまたオンラインコミュニティヒマプロ談話室オンラインスラックコミュニティヒマプロ談話室開催中でございます開催中?現在

聞いたのアドベントカレンダーをやっていたり時たまオンラインでイベントが勃発したり皆さんが日々のアウトプットをアウトプットすることによって刺激を受けてさらにアウトプットが生まれたりいい循環が生まれるコミュニティを目指して頑張っておりますエンジニア友達集めたい人集めてください間違えました

間違えましたオンラインコミュニティ関係なかったね今のはオンラインコミュニティ関係なくエンジニア友達が欲しい人は友達くださって勝手に作ってください本当だな今の全然意味が分からなかったオンライン間違えたエンジニア友達集めたい人とかはぜひとも参加してみるといい感じに集まる可能性があるんじゃないかなと思っているのでよろしくお願いします

それなりに規模が大きくなってきたんでわりとニッチなチャレンジも同じことやってますみたいな人出てきているんじゃないかなと思うのでぜひお願いします最後にこの番組は各種ポッドキャストプラットフォームで配信されておりますのでフォローやもし番組に対してのご意見とかあったら感想とかレビューとかを投稿していただけると番組向上のきっかけになると思うのでぜひともよろしくお願いします

お願いしますそれでは皆さんまた次回バイバイ

そして今番組終了1時間以内にGoogleフォームよりお便りを送った方はちっちゃいスペースキーも付いてきますポケットに入れて持ち運べますね番組の高評価フォローもすると会員割引なんと90%オフほぼただ今すぐご応募