【コードリーディング】Next jsのソースを見てみよう🚀
Summary
TLDRこのビデオは、Next.jsのソースコードを見ながら、エラーメッセージから動作をたどる方法について解説しています。具体的には、Aタグや画像タグを使った場合に発生するエラーから、ソースコード内を検索して該当箇所を見つけ出し、エラー発生の条件や将来的にエラーを削除する予定などを確認しています。規模の大きなライブラリのコードを読むことで、コーディングスキルの向上につながると提案しています。
Takeaways
- 😊 NEXT.jsのソースコードを読む2つのアプローチが紹介されている
- 👀 エラーメッセージからコードの流れをトレースできる
- 💡 ライブラリのコードは参考になるので読んでみることをおすすめ
- 📝 NEXT.jsのリンクコンポーネントで無効な設定をした場合のエラーが確認できた
- 🔍 エラーメッセージから関連するソースコードを検索できる
- 🤔 複雑なエラーメッセージの内容も大まかに把握できた
- 📚 クライアントコンポーネントでの非同期処理の制限が説明されている
- 💻 コードからコンポーネントの描画方法が確認できる
- ✨ 将来的なエラー修正の方法がコメントとして記載されている
- 🙇♂️ 難解な部分もあるがコード自体が参考になるとのこと
Q & A
Next.jsのソースコードを理解するための方法は何ですか?
-Next.jsのソースコードを理解するための2つの方法があります。1つ目はコードの全体像を把握してから細部にわたっていく方法、2つ目はエラーメッセージなどをコピーしてプロジェクト内を検索して、動きをピンポイントで確認する方法です。
大規模なプロジェクトのソースコードを調べる際に推奨される方法はどれですか?
-大規模なプロジェクトを調べる際には、エラーメッセージを利用してプロジェクト内を検索し、ピンポイントで動きを確認する方法が推奨されます。
Next.jsでリンクタグを設定する際のエラーの一例を教えてください。
-リンクタグを設定する際に、`<a>`タグを挿入しなくてもよいような形でエラーが出ることがあります。具体的には、「Invalid link with a tilde」というエラーメッセージが表示される場合があります。
Next.jsのソースコード内でエラーを確認する際の具体的な手順は何ですか?
-エラーメッセージをコピーしてNext.jsのソースコード内で検索し、エラーが発生する条件やそのエラーに対する制御がどのように加えられているかを確認します。
Next.jsのイメージコンポーネントでエラーが出た場合、どのように調査しますか?
-イメージコンポーネントでエラーが出た場合、エラーメッセージをコピーして、Next.jsのソースコード内で検索し、エラー発生の条件や対処法を調べます。エラーの例としては、イメージタグに`width`プロパティが設定されていない場合に発生するエラーがあります。
Next.jsでクライアント専用コンポーネントを作成する際の制限は何ですか?
-クライアント専用コンポーネントを作成する際の制限として、関数の直下で`await`を使うことができないという制約があります。
Next.jsのソースコードを学ぶことの利点は何ですか?
-Next.jsのソースコードを学ぶことで、ライブラリーがどのように構築されているか理解できるだけでなく、コーディングスキルの向上にも繋がります。また、コードの書き方を真似ることで、より良いプログラミング技術を身につけることができます。
Next.jsのソースコードを調査する際に、エラーメッセージを利用するメリットは何ですか?
-エラーメッセージを利用することで、特定の機能やコンポーネントの動作を理解しやすくなり、問題の原因を迅速に特定できるため、効率的に学習やデバッグが可能になります。
Next.jsで非同期処理を含むクライアントコンポーネントを正しく実装するにはどうすれば良いですか?
-非同期処理を含むクライアントコンポーネントを実装するには、関数の外側で非同期処理を行い、結果をコンポーネント内で状態として管理するか、`useEffect`などのフックを利用して非同期処理を行う方法があります。直下で`await`を使用することは制約により禁止されています。
Next.jsの学習において、ソースコードの調査以外で重要なポイントは何ですか?
-ソースコードの調査以外にも、公式ドキュメントの理解、コミュニティやフォーラムでの情報交換、実際にアプリケーションを構築してみる実践的な学習が重要です。これにより、理論だけでなく実践的な知識も身につけることができます。
Outlines
🔍Next.jsソースコードの探究方法
このパートでは、Next.jsのソースコードを理解するための2つのアプローチについて説明します。1つ目のアプローチは、Next.jsの全体像を把握し、細部にわたって理解を深める方法です。2つ目のアプローチは、エラーメッセージをコピーしてプロジェクト内を検索し、特定の動作を理解する方法です。大規模なプロジェクトでは、全体像から理解を始めるのが難しいため、後者の方法が入門に適していると説明します。実際にNext.jsを使ったアプリケーション上でエラーを発生させ、そのエラーメッセージを利用してソースコード内での該当箇所を探し出し、理解を深める実践的なプロセスを紹介します。
🛠Next.jsにおけるエラー解析
ここでは、Next.jsアプリケーションで発生した特定のエラーを分析するプロセスを具体的に説明します。最初に、Next.jsの<Link>コンポーネントに関するエラーを例に取り上げ、エラーメッセージを基にソースコード内の関連箇所を探索します。次に、<Image>コンポーネントで発生したエラーについて解析し、必要なプロップスが不足していることが原因であることを明らかにします。この過程で、正規表現を使用してソースコード内を効率的に検索する方法も紹介します。エラー分析を通じて、Next.jsの内部動作について深く理解を得る方法を示します。
👀Reactの動作原理とエラーハンドリング
このセクションでは、Reactにおけるエラーハンドリングの具体例として、クライアントサイドの非同期処理で発生するエラーを取り上げます。エラーメッセージを検索することで、React DOMの開発用JavaScriptファイル内でのエラー処理のロジックを調査します。具体的には、Reactの「work in progress」という概念と、コンポーネントが期待通りに進行しない場合にReactがどのようにエラーを処理するかを解説します。また、無限ループや未実行の非同期処理がエラーの原因になることがあり、これらを解決するためのReactのアプローチについても説明します。
🚀将来のReactアップデートとエラー解決策
最終セクションでは、将来のReactリリースで改善される予定のエラーハンドリングについて説明します。特に、コンカレントレンダリングやオフスクリーンモードといったReactの新しい機能を利用して、現在のエラーをどのように解決するかに焦点を当てます。これらの技術はReactの根幹に関わるものであり、エラー処理の改善を通じてより効率的で安全なアプリケーション開発が可能になることを示唆しています。また、Reactの内部動作やエラーハンドリングに関する深い理解を得ることが、開発者にとって有益であることを強調し、学びの重要性を訴えます。
Mindmap
Keywords
💡NEXTJS
💡ソースコード
💡エラーメッセージ
💡リンク
💡コンポーネント
💡プロパティ
💡条件分岐
💡正規表現
💡Promise
💡ルートコンポーネント
Highlights
ですね実際にえエラーを発生させる
2つ大きく方法があるんですけれどもま1つ目
いく方法がありますでえもう1つの方法と
校舎の方がですねえ大規模な
するとですねこんな感じのエラー
LINKのwithaまこれがえ発生する
数値じゃない時はこちのメッセージ
ドスターまこれでえ2の
するとですねいくつか
答はフューチャー
するのかがまここ書いてあるんですがザ
強制的にコンカレントレンダーで消すか
オオフスクリーンモードっていうのはです
え書き方とかはですね結構
行動を下げる方法について学んできました
Transcripts
[音楽]
はいえ皆さんこんにちはコドマフィアです
ということでま今回はですね
フレームワークの中身を見てみようという
ことでえNEXTJSのソースコードを皆
さんと一緒に見てみたいと思いますまえ
ソースコードですねま見る場合には2つ
大きく方法があるんですけれどもま1つ目
がですねまこちらえNEXTJSのコード
なんですけれどもまこのコードのま全体像
を把握してえそっからですね細部に渡って
いく方法がありますでえもう1つの方法と
してはエラメッセージなどをコピーして
ですねまそれでプロジェクト内を検索して
ピンポイントにまこの動きどうなってるの
かなっていうのを確認する方法があります
でえま校舎の方がですねえ大規模な
プロジェクトを調べる際には有よなのでま
えそちらの方法で今回はソースコードを見
ていきたいと思いますま大規模な
プロジェクトの場合にはですねま全体像
から把握しようとするとまちょっとコド量
が多すぎて追いきれないというのが結結構
あるのでま大規模になってきた場合にはま
後者の方法からえ学んでいくのがま入り
やすいかなという風に思いますはいえそれ
ではですね実際にえエラーを発生させる
ところから行っていくんですけれどもま
エラーを発生させるのはですねこちらの
NEXTJSのソースコードではなくてま
このNEXTJSを作った
アプリケーション上でエラーを発生させ
ますでえ現在えこちら画面に移ってるのが
まこれがですねNEXTえインストールし
た状態になってくるんですけれどもまこの
中身を変更してエラーを発生させてみたい
と思いますそれではですねえまずこちら
削除しましてえ例えばですがえ1つですね
リンクを設けてみましょうまNEXTのえ
リンクとしてえ適当に
httpsのexample.comとし
ておきますでえこのNEXTのリンクなん
ですがまリンクのタグを設定する時に使う
んですけれどもまこの中にですねまええ
タグでま例えばまハローとしておき
ましょうまこうするとですね現在のNの
バージョンだとえエラーが出たと思うんで
ま実際確かめてみましょうまNPM使うな
ちょっとノーJSのバージョンが今古い
ですねでえこれでサーバーを立ち上げて
確認してみたいと思いますまこれで
サーバー立ち上がったのでえローカル
ホストの3000版で確認してみますはい
まそうするとですねこんな感じのエラー
メッセージですねが表示されますま
インバリッドリンクのWITHAのチルド
とPleaseREMaorUSLINK
LEGACYbehとまこれえAタグ元々
挿入しないといけなかったんですがま挿入
しなくていいよというような形でエラーが
出ていますでえこのようなエラーが発生し
た場合にえこちらのメッセージコピーし
ましてでこれを元にしてえNEXTJS内
でどのように制御を加えてるのかを見る
ことになりますではえ実際際に検索してみ
てくださいえこれテストスクリプトなんで
test.TSとなってますねまなのでえ
こういう場合はもうちょっと減らしてえ
こちら減らしてみましょうえこれで出まし
たねまこんな感じでえインバリッド
LINKのwithaまこれがえ発生する
条件としてはまこのE分に入ってきた条件
になりますまなのでえまずは
デベロプメントモードで走ってる時にえ
チルドレンがえAの場合ですねまこの場合
にえこちらのエラーが発生することになり
ますでえこちらL分になってますんでエバ
と上の方見ていくとえこちらレガシー
ビヘイビアがえトルーの場合にはえこちら
のロジック入っていきますんでまAタグ
あってもえ問題ないとまそういうことに
なってきますでえあとはですねまこちら
リンクのTSXなんですけれどもまこの
ソースコードがえ格納されてるフォルダー
を辿っていくとまえこののプロジェクト
全体のどの部分にまこのような形の制御が
入っているのかっていうのを確認できます
まえこちらですねプロジェクトがそもそも
結構でかいんですよねNEXTJSの中に
まいっぱいフォルダーありましてでえま
このようなライブラリーの場合には大体
最近だとパッケージという中にまコアのえ
機能が入ってるんですけれどもま今回は
このNEXTの中のソースのでえ
クライアントの中にえ入ってるということ
になってきますはいまなのでえこのように
するとですねまこのプロジェクト全体を見
ずにえ大体どこら辺にソースコードがある
かというのをま一気に確認することができ
ますはいではですねえ試しにもう1個
なんかやってみましょうかま例えばですが
えイメージタグを使った時にまどうなるの
か見ていきましょうイメージのえNEXT
のイメージとしてまイメージ卓で適当にえ
画像を読み込んでみましょうかイメージと
してでソースタグにうんまなんか画像ある
かなNEXTのSVGがありますねまこれ
使いましょうかSVGとはいまこんな感じ
でまイメージタグを設定するんですけれど
もまこれだとエラー出ますまこのイメージ
のえコンポーネントというのはえWiの
プロップス確か必要だったと思うんでえ
これ設定してないんでエラーが出ると思い
ますではえ実際確認してみましょうはいで
え実際にエラーメッセージをブラウザで
確認してみるとザname
とえそもそも違うとこでエラー出てますね
えこちらえ2回宣言してますと言われてる
のでえ1個消しましてでえもう1度確認し
てみるとえイージwithsceのえ
NEXTSVG先ほど読んだ画像ですねま
これがえMissingrequire
withpropyと呼ばれてるんでえ
withのプロパティがえないですよと
言われていますまそこでえこちらのメ
セージをコピーしましてでえもう一度確認
してみましょうでえこのようにですねま
ウズとかまこういったキーワードが入っ
てるメッセージに関してはま正規表現で
うまいことですねヒットするようにして
あげますまどういう風にするかというとえ
こちら正規表現のドスターまこれでえ2の
文字列がここに来れるようになったんでま
これで検索するとまこんな感じでヒットし
ますでえこちら開くとですねはいまこの
部分でエラーが出てるとまこのGet
イージプロスTSというのがまこちらの
エラーが発生してる元のファイルになり
ますでえこれ確認してみるとえwith
intというまこの変数ですねまこれが
アンディファインドますなわち設定されて
いない場合にエラーが発生するとでえ
こちらのwithintですがまえ横幅を
インテジャーますなわち整数で設定した値
になるかと思いますまこちら結構長いです
けれどもえここの分にゲットイントとなっ
てるんでま文字列きてもえ整数値にすると
いう変換が入ってるとでバーっと上見て
みるとはいまこの部分ですね
プロップスのえウズまこれがえ入ってこ
ないとエラーになるとまそういった制御が
加わってることが分かりますとでえ元の
部分に戻りますとまこちらえそもそも設定
されていない時でLifのナまこれ数値
じゃない時ですねの判定条件になってき
ますま数値じゃない時はこちのメッセージ
が出るよとまそういった具合で実装されて
いますはいまこうやって見てみるとですね
まライブラリーであってもえま理解できる
ようなコードで書かれていることが分かる
と思いますんでま結構勉強にもなるんでえ
まコードのですねま勉強したい人にもま私
はライブラリー見ることをお勧めしてるん
ですけれどもまえ書き方の真似とかも
できるんで是非ですね興味のある方は実際
に見てみてくださいではえもう1個ぐらい
ですですね見てえ終わりましょうでえもう
1つですがえ1つですねファイル追加し
ましてえクライアントTSXとして
エクスポートのファンクションのま適当に
クライアントコンポーネント作りますでえ
リターンのえまこれ何でもいいんですがえ
リブトしておきましてあとはユ
クライアントつけておいて
くださいスペルが違いますねまこのように
定義した場合にはまリアクトではクライ
コンポーネントと言いましてま
クライアントでのみ使用できる
コンポーネントになりますでえまこの
クライアントコンポーネントにはま一部
制限がありましてまこのファンクションの
直下でえアウェイを使えないという制約が
ありますえ非動機処理をま書いたらダメな
んですねまなのでえエラーが出るようにま
適当にアウェイの処理追加しましょうか
プロミスリゾルブとでもしておきますでえ
アイ使ってるんでえファンクションの前に
えアンクつけておいてくださいでえこの
状態にしてえこちらのクライアントをえ
ページコンポーネントで読み込んでみ
ましょうまこちら削除してえクライアント
コンポントムとまこんな感じで読み込んで
おいてくださいまそうするとですねこちら
クライアントコンポーネント内でアウェイ
と使われてるんでエラが発生するはずです
ではえ実際に確認してみるとはい検証で見
てみましょうえエラが出てないですね1回
サーバー落としますかキャッシュが残っ
てんのかもしんないですねえNPMLAN
デブとしてえサーバー立ち上げ直しますで
えこの状態でえもう一度確認するとえまだ
出ないのでえこちらハローとしてま
ちょっと画面変えましょうかはいそしたら
出ましたねということでえこの状態だと
asthinkaateisnotyet
inクライアントコンとこちら
クライアントコンポーネンツのスペルが
ちょっと間違ってますね私のやつクリー
ネットになってますねまちょっと気にせず
にやっていくとえこのメッセージ出ました
んでえこれをですねコピーしてでえま
こちらの検索でえ実際検索してみて
くださいまそうするとですねいくつか
ヒットするんですけれどもまファイル名見
てみるとまえリアクトHDOMのえ
デベロプメントJSとまこれがえリアクト
のですねブラウザ上で動かす制御が入っ
てるものですねでえ次がクトドム
アンステイブルテスティング
デベロプメントということでまこれは
あんまり本番環境では使われてなさそうな
ファイル名なんでまこれはま無視していい
でしょうとでえ3つ目のやつがえ1つ目と
名前一緒なんですけれども入ってる
フォルダーがですねまこちらリアクトドム
のエクスペリメンタルということでま実験
的段階なので1番上のやつがおそらく出
てるんだろうということになってきますで
えこちら実際に見てみますとえまここで出
てるんですけれどもまこのパスがですです
ねえNEXTのえソースのえコンパイルド
まなのでえおそらくですがリアクトを
コンパイルしたのがこのフォルダに入っ
てるんだろうとまそういったのが
フォルダー名から分かってきますでえあと
はリアクトドムがあってえcjsまこちら
はえコモンJSの企画で書かれたものとま
そういう意味ですねまその中のえこちら
リアクトドムデベロップメントJSで出て
いますとでえちょっと前置きが長くなった
んですがえこの中身をちょっと見てみると
まこのエラーが出る条件というのがま
こちらルがノトイコールのえ塗るとであと
シェルサスペンドカウンターダイナ100
となってるんでまなんかよくわからんなと
でえゲットワインプログレスルートま
こちらがまそうですねこちら何かと言うと
まリアクトのルートのコンポーネントだと
思ってくださいまリアクトの場合にはです
ねworkインプレスというま1つのえ
ドムドムじゃないですねえリアクト
コンポーネント3とえもう1つカレントと
いうまえコンポーネントツリ2つでえ管理
してるんですけれどもまこのワークイン
プログレスというのはバックグラウンドで
えリアクトのツリーをま解析してるえもの
ですねまそれのえルートの要素を取って
くるとでえこちらシェルのサスペンド
カウンターというまプロパティがそこに
生えてるんですがまこれが100を超えた
時ですねまこの時にえエラーが出るという
ことなのでえまちょっとよくわかんないん
でこちらのエラーメッセージを実際見てみ
ますでえまちょっと英語なんですけれども
えthisroothas
suspendedtorepeatIN
THESHELLwithout
makinganyProgressとま
なのでえまsuspended
repeatというのはまこれはえま非
同機でですね取得するような
コンポーネントですねまそれがえreat
3なんでまこれ繰り返しえサスペンドの
状態のものがまこのえ釣り上に存在します
とまそういった意味になりますでえIN
THESHELLwithout
makinganyPressとまえIN
THESHELLはちょっとよくわかん
ないですがえwithoutmaking
anyProgressま進んでいない
状態ということですねまなんでえ例えばで
書いてありますがコミテンサムということ
でえまコミットで画面に反映するという
意味になってくるんでまえ画面に反映され
ないえま進行していないえまこの
サスペンド中のコンポーネントがえ含まれ
ていますとでえこのメッセージ読むとです
ねま大体このシェルサスペンドカウン
ターっていうのがま100を超えた時ま
なんかティックが1個ずつ上がっててま
100になった段階でえこちらの中に入っ
てくるんだなというのが分かりますでえ次
にThisishighly
suggestiveofan
インフィニットピンループと書いてあるん
でえま無限ループに入ってるような意味
合いですかねオンCbyアクシルアンク
クライアントコンポーネントと書いてある
んでえまちょっと意図せず購入したシンク
のクライアントコンポーネントによってえ
しばしばをえ引き起こされますとまそう
いうようなメッセージが書いてあるんであ
なるほどなとまこちらののエラー
メッセージに書いてあるようなえ文言がえ
ここで説明されてることになりますでえま
この下の分もデュアリングはえ
トランジションウィアサメブラブラ
ブラブラと書いてあるんですがはいえま
なんか現時点ではどうしようもないんでえ
エラーにしますというようなことが書いて
ありますourLastRESisto
SLERと書いてあるんでま最終手段とし
てまエラーをスローしていますとなってい
ますはいでえこちらtodoを見てみます
とREMthisERはフューチャー
リリースと書いてあるんでま将来の
リリースでえこちらのエラー削除しますと
なっていますでえまどのようにして削除
するのかがまここ書いてあるんですがザ
Waysofhandingthis
caseincludeforing
concentレンダーとまコンカレント
レンダーというのがま現在のですねえ
リアクトのレンダリングのまえ仕組み
みたいなもんになってくるんですけれども
ま強制的にコンカレントレンダーで消すか
まもしくはPINGthefall
rootinOffスクリーンモードとま
オオフスクリーンモードっていうのはです
ねまリアクトのま裏側で描写してるけどえ
ま状態は保持してるみたいなまそういった
モードになってくるんですけれどもまこの
えルートの全体をオフスクリーンモードで
え保持しながらま裏側でえ動かすとかです
ねまそういった形でえこのエラーは将来的
に消すますよというような予定が書いて
ありますまここら辺はですねリアクトの
すごい根幹になってくるコードになって
くるんでまなかなかですね難しいんです
けれどもまええ書き方とかはですね結構
勉強になるんでま興味ある方はえ1度見て
みるといいかと思いますはいということで
ま今回はですねエラーメッセージからま
行動を下げる方法について学んできました
ままたですね何かリクエストとあれば是非
コメント欄に書いてくださいということで
えこちらの動画はここまでにしたいと思い
ますまた次の動画でお会いしましょうバイ
バイ今回もご視聴いただきありがとう
ございます私はえユミでWEB制作から
Web開発まで幅広いコスを出しています
ので興味のある方は是非概要欄からご覧
くださいまたさらにハイレベルなWEB
制作スキルを学びたい人向けにノット
イコールというサービスを運営しています
ので興味のある方はそちらも合わせて概要
欄の方でチェックしてみてください最後に
プログラミングの学習が1人で寂しい方は
無料のオンラインコミュニティCTOGを
運営していますのでそちらも概要欄から
是非チェックしてみてくださいそれではご
ありがとうございました
javascriptの独学に最適な標準
教科書様々なサンプルプログラムを例示し
あなたのプログラミング力の上達を
サポートし
ます
5.0 / 5 (0 votes)