そういうことがあったんですねこれはもう徳川時代の中のなんかですねおいなんかにしろそれはなんかにしてくれ大名とかになんですかねちょっとすみません今の勢力図をおさらいさせていただきたいんですけども今の時代の最先端で言うと今説明してた中の今の先端部分で言うとまず

ライブラリ戦国時代ですとなのでライブラリいっぱい出てきてます代表的なんだとリアクト、ビュージェイス、アンギュラーその辺りですねそれと裏側で同時並行でボルトジェイスとノードジェイスが登場してます

今この3勢力3スクミですねなるほど俺とJSの中にまた色々何でしたっけコーヒースクリプトぐらいですか今タイプスクリプトとかが出てるタイプスクリプトもあるんじゃないかな分かんないけど

すみませんJSあんまり詳しくないので質問なんですけどなんとかJSってめっちゃあるじゃないですか今のりさんライブラリっていう言い方をされてましたけどリアクトとかってJavaScriptっていう言語のライブラリっていう扱いなんですかそうですじゃあリアクトJSっていう言語っていうよりはJavaScriptの中のリアクトJSっていうライブラリなんですねそうです

そうなんだそれをまず始めしましょう僕はなんならはいはいはいなるほどねJavaでいうスプリングみたいなそうなんですね感じライブラリだからスプリングほどガチガチじゃないかもそういう立ち位置なんですね今この3つが登場してき始めましたよとそれによってですねフロントエンドがあって

すごくやることも増えてるんですよ技術も多いし実は今JSだけで説明してるけど裏側でHTML、CSSとかもあるしそうですよねだからやることめちゃめちゃ多くてこの時からフロントエンド結構そういうビルドみたいなのをするツールがどんどん増えていってますねうーん

開発の時にいちいち書いてからビルドするんじゃなくて、ずっとビルド回しつつローカルサーバー立ててみたいなこととか、画像の変換やってくれたりとか、コードの圧縮やってくれたりみたいな、いろんなことできるツールがこの辺で登場し始めるんですけど、またこの設定も難しいわけですよ。変数が増えてそうですね。機能がコード化してるから。そうなんです。

これでSPAが登場したんですけどもSPAにも先ほど言ったように初期表示重いよとかあとはSEOにもちょっと課題があったんですよ

ページ単位で生成されてないんでページとしては1ページしかないんでJSを実行してくれないと他のページあるよってクローラーが認識してくれなかったりしたんですねSEOがまず一般的か分かんないですねなんでSEOを説明しようSEOとはSearch Engine Optimizationのことであり簡単に言うとGoogle検索の結果を上に持ってこようとさせるテクニックのことである

上に持ってこさせよう持ってこさせるためのテクニックって感じだねサイトのこここう設定したら検索されたとき上に来やすいよみたいなあれのルールがいくつかあってページ数とかページのボリュームとか内容とか色々変数あるんだけどSPAはちょっとそれに不利だったなぜならページ数もランクの要因の一個なのに

ロボットから見たら1ページしか見えないってことがあったんですねGoogleで検索したらなかなか予測の上の方に来てくれないってことですねそうそうそうそうなるほど今だとGoogleのロボットとかだったらJS実行してくれるんですけど他の検索のクローラーとかだとまだされなかったりとかっていうのがあるらしいそうなんだあとそういうのもあったから多分不安って人はいっぱいいると思ううんうんうん

なのでそういうところちょっときついよねっていう時に新技術登場しますSSRスーパースーパーレアですかスーパースーパーレアです違うだろ絶対絶対違うだろこれはですね

サーバーサイドレンダリングっていうものが登場しますなんか一周した感ありますよ今あの単語だけ聞くと気づいてしまった?はいそうです一周しましたここでレンダリングってなんですか?レンダリングはあのなんだろうhtmlとかを解析してブラウザで表示してあの見た目作ったりするじゃんはいあれをレンダリングとかって言ったりするんですけどまあ描画的な?うん直訳すると描画ですか?描画だねはいだから一周しました

今までPHPとかにリクエスト送ってそこでHTMLを組み立ててたのねその時代に戻りましたここでなるほどSPAの前にでも当時とちょっと違ったのはNode.jsが登場したことによってリアクトがそのままそっちで動きますあー

理解しましたなのでコードが変えないままこっち側でレンダリングしてレンダリングされたものを返すみたいなことができるようになったんですねうんうんこれによって処理によってはクライアントに持たせたりとかサーバーに持たせたりみたいなことができるようになったわけですよはい今すいません何が解決するんですかそれでそれによって元の仕組みに戻ったので今までと同じようにページ認識されるようになりましたうんうん

しかも一部パフォーマンスとかは上がりました時秒が軽くなったしいろいろ持たせなくてよくなったんで本当に

今までフルでフロントであった結合の一部をバックエンドにも分担したって感じですねなるほどなんかサーバーサイドに持っていくことによって今までヌルヌル動いてたところがなんかヌルヌル動かなくなったりしそうだなって思ったりするんですけどそんなこともないんですかねなるんじゃない多少はなるんですよね多分ね多少はなる処理とならない処理なんか振り分けれるんじゃないそれはありそうですね

ここは速さを重視したいっていうのを別にフロントに持たせてもいいわけですしねそうそうそうそうそしてですよその後さらにハイパフォーマンスのものが登場しました今何年ですかこれは昭和33年うちの母の誕生日ですおめでとうございますなんか

SSGが登場しましたSSGSSGというものが登場しましたサーバーサイドのこれ引っ掛け問題ですえ?じゃあ絶対違えばスーパースーパーレアですか?ギガですギガ違いますスタティックサイトジェネレーションという技術が登場するんですよなんかまだ先祖返りしてるようなこれねさらに先祖返りします

今までHTMLとCSSとJavaScriptを置いててそのページ行ったら特に何も組み込まずに返してくるよっていう仕組みだったんですよもう1992年もう本当に最初の最初ですねおめでとうございますその時はそういう仕組みだったんですけどそれに回帰しました

SSGによって結局それが一番軽いよねみたいな発想なんですかね結局この結合させてる時間が手間じゃんってなってそんなにページの内容変わらないサイトなら最初からもうそういうの結合したページ置いといて返した方が早いんじゃねーのってなってこのSSGが登場しました登場って言うんすね登場したひょっとして安倍博士のホームページとかそれなんですかね

あれSSGで生成したかどうかは別として仕組みとしてはそんな気がしてる安倍博史スピードになりました安倍博史スピードになったんですねだからもうこれはパフォーマンス最強ですねうん最強そう複雑なことしないならそうだね複雑なことなんかそのユーザーによって表示変えるとかするならこれは使えないんですけどでも基本的にはこれはめちゃくちゃ普及していきますとうん

最近だとねさらにこれをちょっと発展させたやつで生成するんですけど有効期限みたいなのを設定できるようになりましたそれは何の?例えば生成するじゃんもしかしたらちょっと時間経った後に変わってるかもしれないじゃないですか内容が1日経ったらちょっと変わってるみたいなブログ記事とかだと記事更新させたいみたいなかもしれない的なそうそうそう

そういう時に期限が切れた後にリクエスト来たら再ビルドしてまた配置し直すっていうインクリメンタルスタティックジェネレーションかなインクリメンタルサイトジェネレーションかなSがどっちのSか忘れてたんですけどSSGをベースに更新もできるよっていうのが最近だと現れてるって感じですねちょっと分からないところがあるんですけど元々のSSGでも

サーバーにコンテンツが置いてあるんですよねコンテンツというかHTML CSS JavaScriptの何かが置いてるんですよね入るか別にそれはそれで更新されたら手動か何かで更新してたんじゃないですか言ってるの分かります?してるそのパターンもできると思うその更新が楽になったってこと?そう

あとはどの程度リアルタイム性を重視するかみたいなのが設定できるようになったんだよねちょっと分かってきた気がしますあれなんですねあくまでユーザーが見るときに参照するファイルって元サーバーっていうよりはミラーサーバーじゃないですけど参照するためのファイル置き場みたいなのをまず見て多分ユーザーはアクセスしていて

今まではそれを手動で置き換えなきゃいけなかったんですとでもさっき言ってたISGの方はユーザーが見る用のファイルを置いてあるサーバー君が勝手に定期的にマスターサーバーのファイルを見に行って更新してくれるようになりました

みたいなイメージなんですかねその仕組みは分からんわでもビルドした後のファイルを置くディレクトリはあるおそらく期限切れたらそのファイルなくなってんじゃないかな消してんじゃないかなないから再生成してんじゃないかそういう自動でリフレッシュする仕組みが入りましたっていうことですねここまで回帰したら超早いよっていうしかもキャッシュに残しやすいですねこれは

それはなぜですかクラウドフロントの内容化はないからですキャッシュっていうのはそういうサーバーにってことですねそうですそうですローカルPCのキャッシュじゃなくてキャッシュサーバーに残しやすい履歴履歴じゃない履歴って言っちゃ履歴だけど短期記憶領域的な一旦置いとくよ部分そうそうそうそう

クラウドフロントとかに載せやすくなりましたクラウドフロントはサーバーってさコンピューターじゃんだから物理的に距離遠いければ遠いほど時間かかるし一箇所に集中したら処理するのに時間かかるんですよクラウドフロントっていうのを使うといろんな世界中にあるちっちゃいサーバーに分散できるみたいな感じですね近いところに置けるそこに配信できるのも楽になる話が早いなるほど

そしてここまでいろいろ複雑な機能が登場してきましたよと一周したこうなったらもう大変すぎるじゃないですかどれ使えばいいの?これでこうしなきゃいけない多分白目向きながらキーボード打つしかなくなると思うんですけどつらい仕事だなフロントエンドエンジニアを一気に楽にした技術というところでついに令和に突入します昭和から令和昭和33年から令和4年へ突入しますこれがですねNEXT.jsと

Next.jsの登場ですねあやかってる?あやかってる?Next.jsちなみにあやかってます嘘だろあやかってんじゃねーかよNext.jsがリアクトベースのフロントエンドフレームワークですね今までリアクトって主に結構ビューの部分中心にやってたんですけど

このNext.jsはですねルーティングとかデプロイとかなんかねすごい包括的にいろいろ含めたこれはもうフレームワークといって間違いないんじゃないかっていうしっかり加減デプロイってどういうこと?デプロイまでできちゃうんですよこれどういうこと?デプロイまでできちゃうんですか?デプロイまでできちゃうんですよ何それ?まだその章まで到達してないんで分かんないですけどデプロイまでできちゃうんですよそうなんだルーティングは分かるじゃないですかルーティングはフレームワークあるあるというか欲しい

デプロイはなんか気になる後で別エピソードで聞きたいそうねでもねとりあえずいろんな便利機能詰め込まれててメクストジェですねクンク触ったんですけどマジでめっちゃ便利でしたへ

へぇーこれはすごい触りたくなっちゃうな着せて超楽だし触りたくなっちゃうなそれはこれすごいすぐできるやんみたいなへぇー見た目は無理だけどみたいなあーまあそこはデザイン力だからっていうこれやってって言われたらできるみたいなそうへぇーでナクストジェイスはこれビューベースなんですよビューベース

ビュージェイスビュージェイスベースで作られたフロントエンドフレームワークでネクストにあやかってナクストになりましたふざけんなマジでどこ行ったビューの意思どこ行った影響を受けたって書いてましたその時期だすごいなんか検索を混乱させるだけだよなマジでそうだねこれは本当にやばいねちょっと地味にバックエンド側にも似たようなのでネストジェイスってのがある嘘だろ

これやばいよねネクストはUなんですねUの多分Uから取ってんじゃないかなギリギリっていう感じですね今はこのちょっとフロントエンドフレームワークが結構ガッツリきて使われてますよA時代になって今に至るわけですねなるほどじゃあ今はネクストナクストがフロントにいてはい

バックエンドはまだNode.jsとかなんですか?Node.jsだねちょっとだけNode.js作った人がNode.jsの反省を生かして作ったDenoっていうのが盛り上がり始めてる名前おしゃれ

ちなみにDのはDENOなんですけどノードを逆にしたおしゃれ真逆の思想とでもはないのかな本当に敵対してるぐらいの勢いのないネーミングだけどそうなんですよでも作ったのはノードを作った人だし

その人が反省点を生かして作ったって言ってるぐらいだから今後来るんじゃないですかね確かにでオルトJS系はタイプスクリプトが来てますね本当に歴史普通にただの興味で聞いてたんですけどJavaScript系の言語を勉強するときのいい前提知識になりそうですね確かに技術選定とかのときにねそうですそうですフロント界隈ってめっちゃ技術変わってくるんでめっちゃ変わりますよねなるほどね

なのでステートオブジェイスっていうサイト見ると今の現状が確認できるんですけどこれを見るとですね衝撃的なことにですね満足度とか興味具合とかで見ると実はリアクトを超える技術が出てきてるんですよスベルトとかソリッドジェイスっていう新しいフレームワークみたいなライブラリーなのかなとかが登場してきてて

大変なのでフロントの人は頑張ってくださいと思ってますいや本当にそうですねフロント超大変そうだよなきついねこれはマジでだから

だから仕事になるんでしょうけどねそうだねすごいよほんと尊敬するテストも大変だしこれから始めるよっていう人はとりあえずタイプスクリプトとリアクトとネクストやっとけばいいんじゃないかなって思うけどね今はってことですね今は来年はわからんけどね一旦今はこれでいいんじゃないのそれはあるですねいや面白い話でしたうん

超大作じゃねえかネクストJSすごい聞いていいフレームワークなんだろうなと思いつつもちょっとネーミングは僕気に食わないですねネクストも気に食わないですねネクスト気に食わないですよねロゴがかっこいいよロゴかっこいいです本当に試験なんですけどネオとか

アドバンスドとかネクストみたいな名前つけると10年後ネクストじゃなくなってるんでこいつはそういうこと?未来を見てるわけだそうチンプ化するんでこういうネーミングやめていただきたいそう考えるとジェイクイーは絶妙にダサいわまあそういうの余談でした

結構長丁場でしたよ長丁場でした面白かった普通にこれ定期的に聞き直したいエピソードかもしれないちょっと頑張ってまとめた甲斐ありましたありがとうございました何にしてもまずJavaScriptの勉強からですかですねですねですね

最初の方に出たESエクマスクリプトは今も別に更新されてるんですよね2015年ぐらいから毎年どんどん更新されるようになったですよねそれで書いてるのは文法がこういう書き方が追加されましたとかこういう書き方からこういう書き方に変わりますとかそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそう

安全に使えるよっていう最後にちょろっと質問したんですけどタイプスクリプトあるじゃないですかタイプスクリプトってJSみたいな書き方のやつをJSに変換してくれるやつっていうお話でしたけどタイプスクリプトの書き方でNext.js書いたりとかするっていう使い方になるんですか?なります組み合わせに使います単体で使うもんじゃないってことですよね?いや単体でも使えます

単体だと何をするんですか今のイメージだとNext.jsとかがフロントエンドを作ってNode.jsがバックエンドを作るとそいつらはフレームワークですと基本的になのでJavaScriptのコードとその他のルーティングやら何やらを包括したフレームワークだと思うんですよそれぞれ

タイプスクリプトを使わないとNext.jsにもNode.jsにもJavaScriptで書くと思うんですようん書きますですよねだからReact.jsのコードを記述するときにタイプスクリプトを使ってタイプスクリプトの書き方でReact.jsを書いて

裏側でJSに変換されて安全にコードを実行できるとそうです市民権が過ぎててタイプスクリプトが最初の構築の時点でTSで書くかJSで書くかってのを選べますねTSがタイプスクリプトですねあれなんですねJavaScript開発してと思ったらさらっとJSのコードを見てディープに行くのはタイプスクリプトの勉強した方が効率いいんじゃねえかって聞いてて思ったんですけどそういうことですか

まあいいと思いますねスクリプトで入った方が今はいいんじゃないかな特にバックエンドとかやってたらいきなりTSでいいんじゃないって思うそれはなんでですか

型使えるからね安全に書けますね割と僕が学生の時とかだと型使えるっていうメリットが意味分からなかったんで補足をすると型使えるとあれなんですよね後からコードに変更とかしようとした時に意図しない値を入れて変なバグを生み出すみたいなものを事前に防げるそう防げるしあと書きやすくなりますねコード

というと型が決まってるんで例えばこのオブジェクトだったらこのプロパティあるよとかこのメソッドあるよって決まってるんでエディターの推論の精度上がってメソッドのサジェスチョンとかがすぐ出てくるんで書きやすくなりますねそれは確かにありそうなるほどなぁ

ネクストJSの話も後で聞きたいな勉強したらネクストねデプロイのところあれだったからねマジで俺どういうことって思ってるんだよデプロイできるって調べたらすぐ出るんでしょうけどでもフレームワーク作ろうって思った時にデプロイまで含ませようっていう発想がまず普通じゃないじゃないですか多分そこに何かの意図があるんですよね今の時代に即したCICD系のなんかだと思うんですけどどうせ

これは本当に楽に開発できますよ気になる素晴らしいですねJavaScript避けてきたけどちょうどやってるしちょうどいいなやってると楽しいよですよねということで歴史を知ったところでねこれで興味を持って

フロントエンド開発進めてくれる人が増えたら嬉しいですね試しに触ってみるのはバックエンド側の人でもやった方がいいんでねこういう仕組みなんだっていう特に駆け出しがそうなら結構いると思うけどねやりたいなって人がすげーいますねロングの動機も一旦アプリとか自分で作り終わって次何やろうかってなった時に割とリアクトとか言ってる人多かったですね目に見えるしね

そうね俺も作業やってるとだいたいフルスタックエンジニアになりたいですっていう人が7割ぐらいの感覚なんでそれはそういうしかないですもん最初フルスタックかって感じですねじゃあ終わりますか歴史的におもろかったマジで指針になりますね歴史は確かに強要になるね歴史は強要になるしかもつぶれる本当に

新機能出た時にちょっと前で言うとISGとかあとSSGでしたっけとかが出た時にここで先祖返りする潮流になるんだって最新のニュースを見た時に言えるやつは2

技術は振り子のメモに入れるっていうからねトレンドがぜひ最新のニュースのURLと一緒にスラックで先祖帰りする潮流あるよねこれと似た感じでみたいなコメントを添えてツイートじゃないな投稿できるエンジニアになっていきましょういいですねまたここ振り子が戻ったねってやらだこいつって

暇かよお前ニュースばっか見て暇かよそうだよだから暇人プログラマーいいなタイトル回収というわけでね今日のエピソードがためになったよって人は

ハッシュひまプロでツイッターで投稿していただくと僕らがニヤニヤできるのでエゴさんのモチベになってそれでより良いエピソードを作ろうって言って頑張るのでぜひお願いしますお願いしますじゃあ今週は今回は以上ですかねではまた次回バイバイバイバイイマジンプラグラマーではメールを募集していますトークテーマ悩み要望などなど何でも募集中です

宛先はそれではまた次回