Next.jsを使い続けたい好きなトコロ
Summary
TLDRこの動画では、ムールチャンネルがReactの最新フレームワークであるNext.jsを紹介しています。Next.jsの魅力は、フロントエンドとバックエンドの境界線が消えることと、状態管理の不要性にあります。React 19の新機能であるサーバーコンポーネントやサーバーアクションを通じて、開発者がシンプルで型安全なコードを書くことができるようになりました。また、Next.jsは開発体験を向上させると同時に、学習コストを抑えています。しかし、Next.jsの将来性や特定の環境への依存性に対する懸念もあります。総じて、Next.jsは開発効率を高める優れたフレームワークであり、多くの開発者が好んで使用していることを示しています。
Takeaways
- 😀 スクリプトは、ムールチャンネルがNext.jsフレームワークを紹介し、そのセキュリティに関する前回の動画に対する反応をコメントとして受け取り、感謝の意を表している。
- 👍 作者はNext.jsを非常に好み、その好きな理由を2つの大きなポイントで紹介する予定である。
- 🔍 ポイント1は、フロントエンドとバックエンドの境界線が消失することで、開発がより直感的になるという利便性である。
- 📋 ポイント2は、状態管理を必要としないこと。従来のSPA開発では状態管理が必須でしたが、Next.jsではその必要性が少なくなっている。
- 🛠️ Next.jsの新機能であるページコンポーネントとサーバーコンポーネントを用いた開発例を紹介し、従来のAPI叩き込み方式との違いを説明している。
- 📈 開発者はNext.jsのサーバーアクション機能を通じて、クライアントからサーバーサイドの関数を直接呼び出すことができる利便性を強調している。
- 🎯 Next.jsの開発体験が非常に良いとされ、生産性が高く、開発者がスピーディに開発を進めることができる点が強調されている。
- 🤔 懸念点として、Next.jsはVercelという企業によって作られているため、Vercelに依存してしまう可能性があるという意見が示されている。
- 📚 学習コストについても触れており、作者はNext.jsの学習コストが比較的低いと評価している。
- 🌐 作者はNext.jsを今後も使用する予定であり、その理由として開発体験の良さと生産性の高さを挙げている。
- 🔧 開発者がNext.jsの開発体験が非常に良いと感じている理由として、型システムの恩恵が開発者により多くの情報を提供し、開発を容易にする点が挙げられている。
- 🔄 作者はReact 19が公式リリースされていないものの、ほぼ安定したバージョンであり、積極的に使用していきたいという意気込みを示している。
Q & A
ムールチャンネルの主なトピックは何ですか?
-ムールチャンネルの主なトピックは、Next.jsというフレームワークのセキュリティや使い心地に関する議論です。
Next.jsに対するネガティブな印象を持つ人たちはどのように反応しましたか?
-コメント欄でネガティブな印象を持っている人たちは、「めんどくさそう」や「不安」という意見を示しました。
Next.jsを好きな理由は何ですか?
-Next.jsを好きな理由として、フロントエンドとバックエンドの境界線がなくなることと、状態管理をなくすことが挙げられます。
Next.jsにおける「サーバーコンポーネント」とは何ですか?
-「サーバーコンポーネント」はNext.jsの機能で、サーバー上で実行され、従来のバックエンド処理をコンポーネント内で直接行うことができます。
Next.jsの「サーバーアクション」とはどのような機能ですか?
-「サーバーアクション」は、クライアントからサーバー側で定義された関数を直接呼び出すことができるNext.jsの機能です。
Next.jsの「状態管理」が減らせるってどういうことですか?
-Next.jsでは、コンポーネントが必要な情報を自分で取得できるため、プロップスを渡す必要性が減り、状態管理の複雑さが軽減されます。
Next.jsの「リバリーパス」とは何ですか?
-「リバリーパス」はNext.jsの機能で、ページの更新を効率化し、ブラウザの再読み込みを必要としない更新を実現します。
Next.jsを使用する際の学習コストはどのくらいだと思われますか?
-Next.jsの学習コストは比較的低く、HTML, CSS, JavaScriptの基本的な知識があれば学びやすいとされています。
Next.jsのセキュリティに関する懸念はありますか?
-Next.jsはVercelという企業が開発しており、ホスティングサービスとしても提供されているため、セキュリティに関する懸念は小さいとされています。
Next.jsの開発体験はどのようなものですか?
-Next.jsの開発体験は非常に良いとされ、生産性が高く、開発者がスピーディに開発を進めることができます。
Next.jsの今後の展望についてどう思いますか?
-Next.jsは現在も開発が進められており、React 19の機能も含まれるなど、今後積極的に使用されることが予想されます。
Outlines
😀 ネクストジースのセキュリティと開発体験
この段落では、ムールチャンネルの作成者が、前回の動画で扱ったネクストジースのセキュリティに関する話題に触れています。コメント欄からの反応やネガティブな印象を持ち合わせる人もいることを認めつつ、作成者は自分がネクストジースを使い続ける理由を2つ挙げています。1つ目は、フロントエンドとバックエンドの境界線が消失するという点で、ページコンポーネントやサーバーコンポーネントを通じて、従来のバックエンド処理をコンポーネント内で直接行うことができるという革新的な機能について触れています。2つ目は、状態管理を簡素化できる点で、ReactなどのSPAフレームワークで扱う必要のある状態管理を、ネクストジースでは大幅に削減できるという利点を強調しています。
😌 ネクストジースの開発効率と学習コスト
第2段落では、作成者がネクストジースでの開発効率について語り、特にサーバーアクションという新機能を通じて、クライアントサイドからサーバーサイドの関数を直接呼び出せるという利便性を説明しています。また、開発者が関数を定義する際に型情報がそのまま利用できる点も嬉しいとのこと。作成者は、バックエンドとフロントエンドの専門知識が異なる場合、オープンAPIやGraphQLが適していると述べつつも、1人で両方の開発を行う場合やスピーディな開発が必要な場合は、ネクストジースが非常にフィットするという意見を示しています。さらに、状態管理の難しさを過去のSPA開発と比較し、ネクストジースの利便性を強調しています。
🤔 ネクストジースへの不安と懸念、そしてその対応
最後の段落では、作成者がネクストジースへの不安や懸念について触れています。特に、Vercelという企業が提供するホスティングサービスに依存している点や、学習コストが高いとの懸念がありますが、作成者は実際にプロジェクトを進めている中で、これらの問題に直面していないことを報告しています。また、個人的にはSPAでReduxを使用する場合に比べて学習コストは低いと考えており、ReactやJavaScriptの基礎を理解している開発者にとっては、ネクストジースは非常に学びやすいと感じるかもしれないと述べています。最後に、作成者は今後もネクストジースを使い続ける予定であり、開発体験が非常に良いと感じていることを強調しています。
Mindmap
Keywords
💡NEXT.js
💡React
💡状態管理
💡ページコンポーネント
💡サーバーコンポーネント
💡API
💡型安全
💡リアクティブ
💡サーバーアクション
💡開発体験
💡学習コスト
Highlights
ムールチャンネルで前回の動画の反応を紹介し、コメントや感想に感謝の意を表している。
ネクストジースのセキュリティに関する前回の動画に対して、ネガティブな印象を持っている人もいることを指摘。
フロントエンドとバックエンドの境界線が消えるという次世代のウェブ開発の特徴について説明。
状態管理をなくすことができる利点に触れ、ReactやVueなどのSPA開発における状態管理の難しさを比較。
ページコンポーネントとサーバーコンポーネントの使い方と、従来のAPI叩き込み方式との比較を紹介。
サーバーアクションというReactの新しい機能と、クライアントからサーバー関数を直接呼び出す方法を説明。
型安全性が維持される点に重点を置いて、サーバーサイド関数の呼び出しとクライアントサイドでの結果の受け取り方を説明。
バックエンドとフロントエンドの専門性による開発の壁と、その解消方法について議論。
Next.jsのルーティングとキャッシュの機能について、開発体験の向上につながることを強調。
開発者によるNext.jsの学習コストと、他のフレームワークやライブラリと比較した感想を共有。
Next.jsのホスティングサービスやバーセルの依存性に対する懸念と、実際のプロジェクトでの対応策を説明。
Next.jsの開発体験と生産性向上のポイントに焦点を当て、個人的な好みとプロジェクト状況に応じた選択を提案。
Next.jsのアップグレードとReact 19の正式リリースに触れ、今後積極的に使用する意向を示す。
開発者自身がNext.jsを使い続ける理由と、そのフレームワークの生産性と開発体験の良さを強調。
Next.jsの開発体験が非常に良いと感じる理由を説明し、他の開発者にもその利点を伝える意図を示す。
Next.jsの開発における型安全性の利点と、開発者にとっての楽しさを強調。
動画の最後に、視聴者がコメントでNext.jsに関する意見や感想を共有するよう促す。
Transcripts
はいどうもこんにちはムールチャンネル
ですえ今日はですねま前回ま知らないと
危ないネクストジースのセキュリティ話っ
ていう動画をえ出しましてでまあの
ありがたいことにいろんな人からコメント
とか反応があってすごい嬉しいんですけど
いや嬉しいですね全も書きもありますし全
の反応もいただきつつもう本当に
ありがとうございますそうですありがとう
ございますでまそのコメントの中にはま
ネクストデースなんかちょっとめんどくさ
そうだなとか不安だなみたいなまちょっと
NEXTデスに対するネガティブな印象を
持たれたもいるかうん
ま持ちますよねまそうだ
ねまそういう内容でしたからなんですけど
僕たちはNEXTジース今もずっと使い
続けてますしあのすごい好きなのでま今回
はネクストジェスの好きな理由僕たちがい
ですねそういう話をしたいなと思い
ますでえっとま好きな理由なんですけどま
大きく2つありましてえっと1つは
フロントエンドとバックエンドの境界線が
なくなるっていうところまちょっとどう
いうこと感じると思うんですけどま
ちょっと後ほど解説しますでもう1つが
えっと状態管理をなくせるっていうところ
ですねいわゆるリアクトとかビューとかで
SPAで作ってるとその状態管理って絶対
必須なんですけどまそれがなくせ
るっていうところがすごく好きだなとま
状態管理はあれですもんね1つ難しい
テーマというかリアクトまリアクトだけ
じゃないかもしれないですけど常に
付きまとう問題これどこでどこまでやるん
だみたいなありますかまそれが減らせ
るってのは嬉
そうです
ねでフロントエンドとバックエンドの強化
線がなくなるってどういうことかって言う
とえっと実際に具体的な行動を見てみよう
と思いますまここにえページ
コンポーネントがありますでこの中で
SQLをこんな形で実行してますでこれは
えっと従来のやり方だとまこんなこと当然
書けなかったんですけどこのページ
コンポーネントはそのサーバーコンポー
ネントっていうリアクト19からの新しい
機能の1つでサーバー上で実行さいう
コンポーネントですとまなのでえっと従来
そのバックエンドで書いてたようなSKL
をこう呼ぶ処理がこのコンポーネントの中
で直接使えるようになってますとライクス
を取得してそれをそのコンポーネントで
そのまま表示するっていうまシンプルな
書き方ができますねうんとてもシンプル
これだからこれができる前つまりサーバー
コンポーネントができる前はどうしてたか
というとコンポーネントからデータを取る
時はフェッチうんしてサーバーがねAPI
叩いてそっからデータを持ってきてでその
APIを叩くからなんかそこでじゃあ型
どうするかグラフQLなのかオープン
APIなのかとかっていうの頑張って作っ
てやってたのがこれでいいとそうこれはだ
からめっちゃ楽めっちゃ楽に思いますね
思いますよ多分それをこうやっていろんな
ものを経過してここにたどり着いた人は
多分より分かるうんでしょうね確かにそう
ですねまだから昔からバックエンドしか
やってない人バックエンド中心でやってる
人はむしろ今までやってたやり方うん同じ
じゃんって感じるかもしれないですけど
例えばレイルズのコントローラーでこう
いう風にSQLでデータを取得して
インスタンス変数でビューファイルに渡
すっていうのと同じことやってるのであれ
戻ってきたなみたいなうんはいはい感覚も
あるかもしれないんですけどまより
ちょっと一段進化してるという感じですね
これがあれですかよくあのPHPじゃん
みたいなあそうそうだからこういうところ
があるわけですよねはいはいでもまあだ
からとてもシンプルというか簡単うんに
なんかやりたいことができるというああ
確か
にでもう1つそのバックエンドとフロント
エンドの境界がなくなるポイントとしてま
サーバーアクションっていうこれも新しい
リアクトの機能なんですけどクライアント
ブラウザからサーバー側に定義されてる
その関数を直接呼べるとおおでここが具体
的なコードなんですけどライクボタンって
いうまクライエントコンポーネントのEで
するボタンがありますでオンクリックで
処理を呼ぶんですけどここにウトライクと
うんなりますこのライクっていう関数は
このクライアントコンポーネントで
呼び出しているのにも関わらず実際に実行
されるのはサーバー上ですうんうんうん
サーバー上でそのライクのインクリメント
をデータベースにして行う処理がこの関数
呼び出しだけで実現できるっていうのは
すごくいいなるほどだこれもさっきの話と
ま被りますけど従来だったらこんなことは
できなくてここでだからフェッチるわけ
ですですよねしかもだからさっきみたいに
そのAPIを挟むわけですよねそうそう
そうなんだけどま普通の関数呼び出しと
同じ感じでかけるっていうのが1つ特徴的
ですね簡単ですね簡単なんですようんでま
この嬉しさってその簡単に呼び出せること
よりも型がそのまま使えるって方がまもし
かしたら嬉しいかもしれないですねこれは
大きいですね例えばサーバーで実行される
ライク関数の開立がリターンステータス
うんうんでサクセスうんなりますでこれが
クライエントコンポーネントのこの
呼び出してる結果を受け取るとですねこの
ように肩保管されてステータスが
ストリングで返ってくるみたいなものが
分かるのでまオープンAPIとかグラフ
キエで定義してるようなああいうの全く
一切必要なく関数で定義したものがその
まま片水論できるっていう嬉しさがあり
ますこれ一番嬉しいですうん僕個人的には
やっぱこれが一番嬉しいというかやっぱ型
がそのバックエンドとフロントエンドで
この生きする時に失われてしまうことが
とても悲しくてまだから失われないように
いろんな技術があると思うんですけどそれ
こそtrpcとかもありましたよねあれも
なんかまさにこのサーバーアクション
みたいな感じでこう関数を呼べるみたいな
ただちょっと準備が大変というかそうだね
このネクストで用意されてるというか
サーバーアクションサーバー
コンポーネントでできることとtrpcで
できることま結果としては同じようなこと
ができるんですけどやっぱ準備が圧倒的に
楽ですねそうなんですよねうん
ムイ思んですけどそのなんかバックエンド
とフロントエンドが専になっててそれぞれ
別の人がやりますっていうケースだとま
オープンAPIとかグラフQLとかの方が
むしろ合うかもしれないなとあそうですね
確かに別々でこう作業そうそうそうできる
しただ僕らみたいなま僕らみたいなという
かまザルさんいろんな案件やってると思う
んですけど僕なんかは割とそのアーリーな
ところで割とこうゼから作ってみたいな
ところだとやっぱこうあんまりいきなり
大業な構成にしたくないのでスピーディに
開発できるものがいいなと思うとだから
すごくフィットしますねいやフィットし
ますね1人でフロントもバックも両方全部
書くっていうスタイルの場合だとまその
ままね1つのファイルとか隣のファイルで
完結するのですごくいいなと思いますこれ
は
嬉しいでえっと2つ目のま状態管理がま
減らせるっていうポイントで言うとま僕
よく過去え規模の大きなSPAうんにっん
けどとにかく管理が辛すぎてうんま不具合
の音になりやすいなと思ってますし使う人
の義量が求められるなって思ってるんです
ねあのま言ってしまえば状態管理ツールっ
てまリダックスとかまビューだとVIXと
かま今だとPにあったかなていうのは
グローバル点数をうまく使っための
ライブラリーみたいな感じなんでまそれは
難しいですよねうん1個いいですかはい
リダックス難しかったです難しいですね
リラクは結構難しいですみんな難しいと
思うと思うんですけどねでもま1周回って
リラックスはやっぱ使いやすいというか
よく考えられてるみたいなま評価もあり
ますけどねはいうんうんうんまでも状態
管理ってま少ない方がやっぱいいじゃない
ですかうんまそりはそうですよねそれが
NEXTJのアップルーターとかサーバー
コンポーネントを使うとかなり減らせます
よっていうところでまさっき紹介したよう
にえっとコンポーネント自身でえ
コンポーネントが必要な情報を自分で
取れるようになったのでえどっかからこう
プロップスで渡してもらう必要性がだいぶ
減りましたとうんうんま決して0ではない
んですけどそういうことができるように
なったのが1つ大きいかなと思確かにこれ
が出る前はだからゲットサーバーサイド
プロップスみたいなのをまあ1番上で取っ
ていろんなデータ取ってそれをもう渡して
渡してていうのもありますそうバケリレし
ていくみたいなうんコンポーネントも設に
もいるんですけど自分自身で取ればまどこ
で取るべきかってのあんまり考慮せずに
必要なところでうん必要なデタを取
るっていうシンプルな構成になるなと
うんうんとグローバルにこう管理してる時
の嬉しさって例えばコンポーネントのこう
端っこの方でうんうんいいねをしますと
そのイ値数を別のコンポーネント結構距離
の離れたコンポーネントで今のネ100
ですみたいな表示してますこれ当然押し
たらこっちを101にしたいですよねし
たいでもこれやろうするとこの
コンポーネント同士がすごい離れてると
めちゃくちゃ大変なのでうんうんま
リダックスみたいなライブラリーを使って
そのステートを更新してこれを電波する
みたいなことをやってますでもこれがえ
NEXTJSのリバリーパスっていう機能
を使うとそういうことをせずにここで更新
してリバリーとパスを実行すると勝手に
ここが再秒がされる仕組みになってます
すごいですよねそうまやってることは雑に
ブラウザの再読み込みを効率的にするって
いうだけなんですけどねあ実際やってる
ことはなんだけどまそういうなんか
ちょっと力技っぽいけどシンプルな
ソリューションはすごいいいなと思って
ますうんあ逆にNEXTJSのアプ
ルーターここが辛いよ話で有名な
キャッシュとリバリーとはかなり密接な
関係になるので便利なんだけど使いこなす
にはちょっと経験と知識が必要ってのは
あると思います
確はいという感じでま2つ大きなあの
嬉しいポイント好きなポイントあるんです
けどまとはいえねNEXTJSに対するま
その不安とか懸念とかまよく聞くものが
あるんでまそこをちょっとうんあの話して
いこうかなと思うんですけど例えば
ヴンダーロックインが気になるみたいな話
あありますねまバセルというま企業が作っ
ているNEXTジェスっていう
フレームワークなのでまバーセアその
ホスティングサービスなのでその自分たち
の
バーセアJSを動かすために
バーセアまり旨みが得られないんじゃない
かとかバーセロイで動かすのが大変になる
んじゃないかみたいなそういう不安うんな
んですけどま今んところ僕たちあのいくつ
かプロジェクトやってますけどほぼバセル
というよりはAWのECSでセルフ
ホスティングしてるケースの方がま多い
ですかねそうですねなのでまそんなにその
バセルじゃないとNEXTJSのうめが得
られないっていうのは大きくはないという
か大した違はないかなっていう気がして
ます
ねまあと学習コストが高そうっていうま
不安というか懸念もよく聞くんですけどあ
ありますか僕はぶっちゃけま低くはないと
思ってますただあはいなんかSPAで
リラックス使ってゴリゴリに書いていくの
に比べたらかなり低くなったなとうん
いや僕もリダックスと比べたら簡単だと
思いますしなんならそのレイルズとかと
比べても学習コストは低いんじゃないかと
思いますねあこ辺はちょっと個人によって
ちょっといいすぎたかもしれないですけど
えでもま僕はでもそうですかねていう
ぐらいそんなに難しいところがないように
思いますねなんかHTMLCSSまJAV
スクリプトがまそのウブアプリケーション
で必要なものだとしてなんかその仕組みを
ちゃんとこ
分かっていればというか分かろうとすれば
なんかこう学びやすいんじゃないかな
みたいななんかレイルズとかの場合は
もちろんまルビーという言語もありつつ
吉名に結構やってくれてるところそのだ
から規約のルールで結構隠蔽されてる処理
が多いイメージがあるんですけどま
NEXTJSはまJS割とむき出しな
ところいやまとはいえリアクトがやって
くれてるとこたくさんありますけどまなん
とも言えないですねまるかもまタイプ
スクリプトっていう言語で全部書け
るっていう意味で言うとまコストはレズと
比べるとね低いかもしれないですねそれが
ありますねそもそもねフロントとバック
だって違う言語で書かないといけないのは
ね単純に学習が大変っていうのありますね
そうじゃ最後にあのムーさんにちょっと
質問して終わりにしようかなと思うんです
けどこれからもネクストジェスを使い続け
ますかうんあ分かりやすい質問ですねお
答えしますと今のところ使い続けるつもり
ですうんうんうんという感じでえっとま今
のところてったのはまやっぱ今大好きです
けどま言うてちょっとこの業界というか
JS界隈まJSだけじゃないかもしれない
ですけどちょっともう移り変わりが早いん
でねただ今んところ見えてないので僕は
NEXTをチョイスしますねいろんな
フレームワークがある中ででそれはなんで
かと言と今日のザルさんの話であった観点
をま掃除て言ってしまうと非常に開発体験
が良いというか生産性がとても高いうん
うんな個人的なその状況ともあるんで
さっきのそのチーム体とか多分規模感に
よっては選ぶべき技術タてあると思うん
ですけどなんかその新規でウブ
アプリケーションを開発していくま小人数
で自分がこうバックもフロントも書いて
みたいな状況を踏まえるとまとても早く
開発ができるでなぜそんなに早くできる
かって言とやっぱ片の音恵がまザルさんも
言ってましたけど個人的にはでかいな
フロントとバックエンドでま片安全まそれ
があることによってかなり救われてる
ところが大きいなと多分型好きな
プログラマたくさんいらっしゃると思うん
ですけどそういう人にはもうとても合うん
じゃないかとかつ自分で割と広い領域書く
場合うんうんそれが今んところ大きいです
ねなので僕は使うとザルさんどですか僕も
使えますね今の話聞いて想像したのはその
例えばサーバーで返す1つフィールドが
増えたり減ったりした時にそれがそのまま
エディター上で型違反してるからこうんと
いけないよてすぐわかるからうん楽そうな
んですよ本当にそのやっぱ楽に開発できる
方にやっぱどんどん流れていきますからね
それはそううんまなのですごい開発体験も
いいですしま今リアクト19まだ正式
リリースはされてないもののまほぼ安定し
てるバージョンでもあるのでえこれから
積極的に使っていって問題のない機能なの
かなと思いますという感じなのでまもし皆
さんもネクストジスのこういうところが
好きだとか気に入ってるとかってものあれ
ばぜひコメントで教てうん欲しいですしま
逆に今の話聞いてもやっぱこういうところ
が気に入らないとか不安だなみたいなのも
あればそれももしコメントでいただけたら
嬉しいなと思いますはいはいじゃあ今日の
動画は以上となりますお疲れ様でしたお
疲れ様でしたま疲れることはないかな今日
はそうだね
5.0 / 5 (0 votes)