00:10
はい、みなさんこんにちは。 keethこと桑原です。本日もやっていきましょう。 keethのエンジニア雑談チャンネルです。
この番組では、ウェブ業界に関することや、エンジニアリング、いろんな技術についての雑談などの情報を発信していきたいと思います。
本日はタイトルあります通り、Developer Roadmap、roadmap.sh っていうサイトがあって、ここのサイトをざっと眺めてたんですけど、なんかめちゃめちゃ増えてたんですよね。
その中にリアクトマップがあるので、ちょっとリアクト再入門しなきゃいけないと、僕今タイミング的にあって、それをやろうかなと思ってますというところです。
はい、後ほど記事もリンクXで放送しますので見てください。 じゃあ行きましょうかね。
React Developerのロードマップ。ロードマップシェルって基本的に4段階に分かれていて、推奨するというか、これはやってくださいっていうのがトップレベルです。
次のレベルは、できればやってくださいねぐらいです。 マストのものが終わったらピックアップしていいよっていうのが次のレベルです。
次のやつは、やってもいいかもしれないけど、絶対じゃないしマストじゃないよっていうのが次のレベル。
ラストはもう推奨しませんという、もうこれ使われませんでしょ、ですよみたいなものがあります。
この4段階に分かれて、それぞれの項目について書かれていますというところですね。
では行きますか。
Reactなので、そもそもフロントエンドディベロッパーという別のロードマップもあるんですけど、そっちはもうやらない前提で行きます。
そこはもう皆さん学んだという前提で、今からReactのディベロッパーのロードマップ行きますけども、スタートですね。
スタートはCLIツールズから入るらしいですね。
今のCLIツールズでいくと、ビートが推奨らしいですね。
これは中の人とか公式の人ではなくて、確か有志たちが作ったロードマップなんであるんですけど、世界では今やっぱりビートを使われていることが多いっぽいですね。
続いて次点で、クリエイトリアクトアップと。
ここも強いですね。
歴史が長いCLIですけど、公式の人がクリエイトリアクトアップはあんまりお勧めしませんとおっしゃっています。
理由はいくつかあるんですけど、その辺は見てみてください。
今はビートのほうをお勧めします。
僕も学生さんにプログラミングの講師もやってるんですけど、Reactの講義に入ったんですけど、やっぱり開発環境ビートで作りましたね。
何せよ早いし、簡単だし、テンプレートがしっかりしていて、TypeScriptを使いたければそれのボイラープレートも用意されているので、ビートのほうがいいよねと思ったりします。
テストもBテストがだいぶ早いし、ビートとの互換性があるので、いいんじゃないかなと思ってます。
ジェストのほうがテストとしてはいいよという意見もまだまだいっぱいありますので、その意味ではどっちにするか、皆さんの個人にお任せしたいと思います。
現実としては多分Next.jsを使うから、クリエイトリアクトアップのほうがよくないという意見は別でありますけど、これはあくまでReactのロードマップなので、そういう選択肢になりましたよという感じですね。
ド頭はCLIから入るんですね、なるほど。
続いてコンポーネンツの話に入るそうですね。
コンポーネンツはあんま話すことないんですけど、いわゆるファンクショナルコンポーネント、関数コンポーネントを書くというのが今デファクトです。
それ以外はほぼほぼどっちでもいいよぐらいな感じで、クラスコンポーネントは非推奨ですよって言ってます。これは皆さんご存知の通りですね。
03:06
あとはコンポーネントの基本として、いわゆるプロプスとステートの話とか、JSXの話とか、コンディショナルレンダリングとか、コンポジッションとか、その辺はReactやってれば1回は必ず通る道だと思いますので、あんま意識しなくてもどうせ通るからいいでしょうというところですね。
とりあえず関数コンポーネントを書いていくとこだけは忘れなくということでした。
コンポーネンツが終わったら次はレンダリングの話なんですね。
先に復活が来るかと思ったら先レンダリングなんですね。
レンダリングはコンポーネントのライフサイクルとか、リストとか、リストで書くんだったらちゃんとキーも付けてくださいねとか、あとレンダープロプスとかレフズ、イベンツ、あとはハイオーダーコンポーネントですね、などなど、そういう基本的なところもやってくださいと。
これも大体やってれば普通にぶち当たるし、ちゃんとReactはエラーハンドリングで書き方ミスってたり思想に乗っからない書き方してると怒ってくれるので、その辺も意識しなくても大体皆さんは1回ちゃんとぶち当たってくれるのでこれもいいと思います。
で続いてフックスですね。フックスやっぱりベースとなるのはユーズステイトとユーズエフェクト。これは皆さん一緒だと思いますね。
とにかくアプリケーションとして状態をどう管理するかというと副作用をどうするかって、これは本当にマストでやらなきゃいけないのでユーズステイトとユーズエフェクトというところがスタートで入ると。
あとはカスタムフックの話が続いていくんですけど、カスタムフックの何をカスタムフックでして切り出すかとかリウドは結構難しいので、そして僕も今のところ明確な答えが出てないんですよね。
何をどこまでいったらじゃあこれカスタムフックにするかっていうのがあんまり決まってなくてですね。言語化したいなと思ってますよ。
まあその辺ですかね。あとはまあ公式のフックスとして他にもユーズコールバックだったりユーズレフとかメモ化してパフォーマンス周りのところをチューニングするユーズメモとかユーズリビューサーもそうですかね。
個人的にはユーズステイトユーズエフェクトと同じレベルでユーズコンテキストはやっておいてほうがいいんじゃないかなと思ったりしますね。
やっぱりバケツリレー問題を解決するってよくあるしコンポーネントリウドをちょっと細かくしていくとどんどんバケツリレーのネストが深くなっていくのでユーズコンテキストもまあマストで僕はいいんじゃないかなと思ったりはしています。
パフォーマンスチューニングとかしているときにユーズコールバックとかユーズメモもしくはリアクトドットメモとかその辺を使っていただくといいと思いますね。
でフックスの話が終わって続いてルーティングですね。ルーターの話に入ると。ルーティングはもうほぼリアクトルーター一択と言っていいんじゃないでしょう。
あとリーチルーターっていうのもあるんですけどまあまあまあリアクトルーターで良くないかっていうところですね。公式が出してますしね。
リアクトルーター専用の公式のホームページみたいなのが切り出されて一度あるんですね。そこを見てもらって使い方とかをマスターしていただくのが良いかなと思ったりしています。
個人的にはリアクトでちゃんとルーティングを手続き的にちゃんと手で書いてNexoJSに行ってうわめっちゃ便利とかAppleルーターではすごいこういうことできるんだっていうのを体験していただくのが学習の道としては良いとは思ってはいます。
というのでリアクトルーターを別になんかやらなくていいって意見の人もたまにいらっしゃいますけど僕なんか違うなと思ったりしてますね。
06:01
でルーティングやったら続いて状態管理ですね。まあまあそらそうだよね。結局現在はSPAを作るのがほぼデファクトスタンダードなのでステートマネジメントが次に入ると。
状態管理のライブラリーでまあいろんなものがあるんですけどコンテキストと言われるのとザスタンドと言われるのが今は推奨らしいですね。
でまさかその時点でリコイルとかMobXとかReduxツールキットとか。まあReduxツールキットも今は時点で推奨ぐらいなんですね。今はザスタンドかコンテキストっていうのが主流というかオススメなんですね。
いや普通に名前も知ってますし軽くGet Startedぐらいは見たことあるんですけどこっちの方が今は推奨なんですね。いやーなんか自分の情報が古いんだなっていうことを改めて知らされますね。
まあ別にリコイルでもいいと思うし僕の周りではなんか状態を使われる人が結構増えたなってやっぱり印象がすごくあって。
日本人が作ったライブラリーっていうのもあるのでまあそういう意味で応援はしたいなと思いつつ。
まあエンジニアは感情じゃなくてちゃんと技術選定っていうのはビジネスとかやりたいことのためのツールを選ぶのは技術選定ですので。
まあ自分のプライベートプロダクトであれば好みのものでいいと思いますけど。
はいではでは状態管理終わりましたらアプリケーションのロジック周りのところは一通り終わったので続いてスタイリングの話に移りますと。
スタイリングはですねこれはやっぱり昨今ずっと議論の的であれTailwindが推奨らしいですね。
あとはMaterial UIとこの辺が推奨ですけど最近話題に出てきたマンタインもちょいちょい話聞くようになりましたけどここもまあ悪くないよってことですね。
で続いてChakra UIです。まあChakra UIはリアクトやってる人は結構昨年一昨年ぐらいから結構名前を聞いてるはずなんでまあこの辺が時点で推奨ですよってことです。
あとはCSSモジュールとかCSS in JSの話でエモーションとかスタイルコンポーネントの話もありますけどこれも推奨ではなくて時点のお話らしいので。
CSS in JSはでもState of CSSとかState of JS 2022とかを見たんですけど個人的にはちょっと落ち目に入り始めた印象が正直あります。
なので今はテイルウィンドウがやっぱりどうしても主流ですかね。
State of CSSでテイルウィンドウが圧倒的にやっぱりPyを奪ってたので今みんなこれ使ってんだなって思ったりしてますが
ウェブコンポーネンツの人とかウェブ標準に準拠したい側の人たちはテイルウィンドウかなりけ嫌いではないですけど懸念を結構示されてて
その話も結構わかります。ウェブ標準に乗っかるっていうのは確かに僕もそれはそうしたいなと思ったりするので
テイルウィンドウは人とかチームとか環境をものすごく選ぶなっていうのは個人的には思ってます。
別に悪いツールとは全然思ってないし、ユーティリティツールなどCSSのフレームワークなのである意味捨てやすいけど
いろんなルールとか仕決めないと皆さん書き方がカオスになるようなちょっと思ったりしてます。
あとこれに出てこないんですけど今はゼロランタイムCSS in JSっていうのが過去の話題に出てきて
それはそれで一つあるよなと思ったりしてますが
いろんな環境とか他のエコシステムとかのライブラリと互換性があんまよろしくない印象があるので
もうちょっとゼロランタイムCSS in JSのライブラリが僕は生還していこうかなと思ってます。
ただあそこまで行くんだったら普通にSASとかSCSSで書いてトランスファイルしてレンダリングするほうが良くないっていう
09:06
なんか原点回帰するような気も僕はしてますしそっちの方がわかりやすかったりします。
なんか2点3点して結局いろんなこの問題が解決するでも次はこの問題があるっていうのをループして
CSSを直接かけるやつが一番強いんじゃないっていうのが今なんかなんとなく思ったりしてます。
それは達人になればそうかもしれないんですけど僕もスタイリングすごい苦手なんで結局どうしようかなっていうので
SCSSぐらいがちょうど行きはなんとなくしたりしてます。
この辺はなんか意見の差は全然あると思います。
では続いて。続いてはAPIコールですね。いわゆるフェッチャーと言われるものですけど
フェッチャーはまずRESTの方ですけどRESTの方はやっぱりSWRとかリアクトクエリもしくは単スタッククエリですね。
っていうのが推奨です。
まあまあこの辺も皆さんあんまり意見の差はないと思いますね。
続いてAXIOS、スーパーエージェント、RTKクエリかその辺ですね。
スーパーエージェントを使う人はあんまリアクト使ってない印象がありますね。
リアクト使うんだったらSWRとリアクトが単スタックなんじゃないのかなって今思ってます。
個人的には入門者であればAXIOSから入ってもいいかなっていう気は僕はしますね。
本当の理想はちゃんとXHRをガリガリ欠かしたいかもあるんですけど
そんなまあめんどくさいことしてもラップして今便利なものがあるし
あんま意識しなくてもいい気がするんで先に使い方とか覚えてで
中身なんだっていうのでXHRを使ってやってますよっていうのを知るの方が
学習の流れとしてはいいのかもしれないですね。現代では。
僕はあの手続き的に学んできたタイプなんで先にめんどくさい方をやりたい
立ちではありますけど。
はいまあさておき今のがRESTのライブラリーでもう一つやっぱりGraphQLの話が出てきますね。
GraphQLはもうリアクトであればほぼ一択アポロですね。
あとはリレーとかURQLっていうのがありますけど
やる気あれば好きな人はどう使ってみてっていう感触ですね僕も
がっつりこれでアプリケーション作ったことはないですけど
リレーも同じです。まあまあ基本アポロでいいんじゃないかなと思ったりしてます。
続いてはテストですね。
APIコールまで行ったらテストでしっかり書いていくと。
まあいい流れですね。
テスティングの話ですけどさっきも出ましたけどJESTとReactテスティングライブラリ
この2大巨頭はやっぱりいまだに変わんないですけど
多分JESTが頭一つ抜けてた記憶があります。
では続いて次点でBテストですね。
ビート使ってる方はJESTじゃなくてBテストの方がいいっていう意見も全然あると思いますし
僕もそれは別に否定する気はないですけど
まあJESTの方がちょっと早くリリースされてますし
いろんな過去のMOCAだったりCHIだったりとか
JASMINEとかあとAEVAとかたくさんあったんですけど
その辺のまあいいとこ取りをして
あの新しくモダンなフレームワークとしてずっと
今テスティングフレームワークとしてはほぼほぼ多分
JESTが一強なんじゃないかと思ったりしてます。
僕の個人の意見では。
リアクトに特化すればリアクトテスティングライブラリーは全然タメ張ると思いますけど
テスティングフレームワークっていう包括的な意味でいくと
JESTが強いんじゃないかなと思ってるので
まあ入門する方は全然JESTが入っていいと僕は思ったりしてます。
でまたD2Eとかもっと包括的なテストするときに
サイプレスとかプレイライトっていうのがあるんですけど
昨今はプレイライトが推奨らしいですね。
12:00
でサイプレスが辞典ですと。
まあこれも僕はなんとなくちゃんと深く勉強しないし
ソースコードのなんかどういう差があるのかってわかってないですけど
なんか細かい設定回りだったりとか
これが欲しいよねっていう機能がプレイライトの方が確かちょっと優れてた記憶があるので
まあこの推奨レベルはまあまあ納得って感じです。
はい。
でテストまで書いたら続いて学ぶのがフレームワークだそうですね。
なのでいきなりNEXTから入るのは違うよっていうのがこのロードマップらしいです。
全部やって最後にフレームワークですけど
フレームワークはまあやっぱNEXTが推奨です。
あとはリミックスとかASTROとかいろんなものがありますけども
ASTRO結構最近流行ってますよね。
というので、今年のSTATE OF JAILS 2023の結果は結構楽しみにしてます。
ASTROどれだけ伸びてくるのかなと思いますけど
多分NEXTがまだまだずっとトップに君臨してると思いますけど
とはいえリミックスの割と名前聞かなくはないんですよね。
ちょいちょい話聞いてきたりするので。
まあ利用用途が全然違うしコンセプトが全然違うんであれですけど
まあNEXT一挙だとは思いますので
まずはNEXTやってみて他のフレームワークに行くっていうの方がいいんだろうなと思いました。
はい。
結構僕ここで意外だったんですけど
フレームワークやったら次にフォームのライブラリーに来るらしいです。
えーと思いました。
でフォームライブラリーはリアクトフックフォームが結構強いらしいですね。
あとはファイナルフォームとかフォーミックっていうのもあったりしますけど
ファイナルフォームも結構きますけどね
けどやっぱりリアクトフックフォームが推奨らしいです。
はいはい。
なるほどでした。
この辺好みに分かれたりするしそのバリケーション周りとか
いろんな他のライブラリーとこのエクセスティブの連携だったりとか
拡張性とかを考えるとどうなんだろうって気はしたりしますけどね。
まあでも自作するぐらいだったら頼った方がいいとは僕も思いますね。
あとはなんか何もカテゴリー貼られてないんですけど
一つ枠があって
サスペンスとかポータルズとかエラームバウンダラリーズとか
ファイバーアーキテクチャーとか
まあこの辺ですね。
アドバンストピックみたいなところですね。
はありますけど
まあこの先にこの辺のトピックを次で触るといいと思いますけども
ここまでいったらだいぶリアクトマスターしてる気はするんで
もっとリアクトに深く精通したい方はその深く話していきたいと思います。
ファイバーアーキテクチャーとかは確かにね
リアクトの根幹なのでこの辺は見てもらうといいと思います。
もしあれだったらリアクトそのもののソースコードを読むと結構面白いんで
見てみていただくといいと思います。
ファイバーっていうワードがしょっちゅう出てくる。
でその先さらに発展するとモバイルですね。
リアクトネイティブって話題がありますけど
まあここはもうリアクトでモバイルを作るのは
あんまり今の流れじゃない気がしてまして
了解的にはフラッターの流れがどうしても強すぎて
リアクトのコミュニティより確かフラッターのコミュニティの方が人増えたみたいな話聞いたりするので
アプリ作るんだったら今フラッターの方がいいんじゃないかなって気はしてます。
はいそんな感じですかね。
ざーっと喋ってきましたけど以上リアクトのロードマップだったとですけどね
音声でしかわからないって聞いてないと思いますので
実際にちゃんとガチでロードマップしてるのを
ページを見ていただくのがいいと思いますけど
割かし間違ってないというか
共感がすごく強かったし
自分の中の情報アップデートもされたのでよかったなと思っています。
これはあくまでユースたちが作ったロードマップですので
ここに従わなきゃいけないってわけではないですけど
15:00
元入門の方でロードマップわかんないっていうのは
困った方はこれにまず1回乗っかるな
個人的には全然いいようになったやっぱり思いましたし
いろんな方々が
これGitHubでしかちゃんと管理されてるんですよね
意見交わしながら作られたロードマップなので
とても参考になるんじゃないかなと思ってます
皆さんも後で見ていただければと思います。
はーいでは今回はこんなところで終わっていきたいと思います。
いつも聞いてくださり本当にありがとうございます。
ではまた次回の16でお会いしましょう。
バイバイ。
