マイクキャバリエールとポッドキャストエピソード40を壊す：ReactのチャクラUIとは何ですか？

公開: 2022-03-10

簡単な要約↬このエピソードでは、チャクラUIについて話します。それは何であり、Reactプロジェクトにどのように役立ちますか？ドリュー・マクレランが専門家のマイク・カヴァリエールと話をして調べます。

このエピソードでは、チャクラUIについて話します。それは何であり、Reactプロジェクトにどのように役立ちますか？ドリュー・マクレランが専門家のマイク・カヴァリエールと話をして調べます。

メモを表示

チャクラUI
Twitterのマイク
マイクの個人ウェブサイト
ジャムスタックの本にカットイン

毎週の更新

コードを使用した設計：設計への最新のアプローチ
MikolajDobruckiによって書かれました
AutoVOを使用したmacOSでのスクリーンリーダーテストの自動化
キャメロン・カンディフによって書かれました
問題解決戦略としてのデザイン思考の台頭
ジョシュシンガー脚本の作品
主要なEdTechプラットフォームのUX監査を実行する方法
MarkLankmilierによって書かれました
Next.jsを使用して複数の作成者のブログを作成する
DomHabersackによって書かれました

トランスクリプト

マイク・キャバリエールの写真 Drew McLellan：彼はEchobindというエージェンシーのシニアソフトウェアエンジニアです。彼は20年間コードを書き、ずっとJavaScriptを使用しています。彼はJamstackが大好きで、彼の新しい本、Cut Into The Jamstackは、ソフトウェアをサービスアプリとしてゼロから構築する方法を読者に教えています。彼がジャムスタックの周りの道を知っていることは知っていますが、彼がかつてピーナッツバターの通路で迷子になったことを知っていましたか？私の壊滅的な友人、マイク・キャバリエールを歓迎してください。こんにちは、マイク。元気ですか？

Mike Cavaliere：今日は絶対に壊しています。

ドリュー：聞いて良かった。今日は、Jamstackの本で出くわすまで、どういうわけか、実際には聞いたことのないプロジェクトについてお話ししたいと思います。それは成熟していて、十分に文書化されていて、本物のように見えるので、どうしてそれを見逃したのかわかりません…ただ素晴らしいプロジェクトです。今日はそれについて話し合うことができ、私がずっと知っていたはずのことを見つけるために追いつくことができることを願っています。もちろん、私はチャクラUIについて話している。教えてください、チャクラUIとは何ですか？それはどのような空間にあり、それは私たちにとってどのような問題を解決していますか？

マイク：チャクラUIはReactまたはUIツールキットのUIフレームワークであり、彼らはそれを次のように表現していると思います。どのアプリケーションスタックでも、最近ではUIを最初から発明したくありません。あなたはいくつかのツールキットを手に入れたいと思っています。それはしばらくの間そうだった。

マイク：チャクラUIは、ReactUIツールキットの優れたアプローチです。それには多くの特典がありますが、1つはそれが…ということです。1つは、堅牢です。つまり、想像できるすべてのUI要素が揃っているということです。スイッチがあります。グリッドの周りにラッパーがあります。それは要素を形成するすべてのタイプのものを持っています。

マイク：それは非常に構成可能に作られているので、すべてがスタイルの小道具を使用していました。あなたのコンポーネント、それらは箱から出してすぐに素晴らしいです。ドロップしてそのまま使用できます。ただし、微調整を行う場合は、いくつかのスタイルプロパティを渡すのは非常に簡単です。それらは完全にアクセス可能です。誰もが話しているが、常に実装するのを忘れているか、実装するのに少し手間がかかるアクセシビリティは、あなたのために組み込まれています。

マイク：チャクラUIを使って何かを組み合わせて、非常に良い灯台スコアを取得することは珍しくありません。実は、今日はCut Into The JamstackのWebサイトをチェックしていたところですが、アクセシビリティスコアは非常に高くなっています。それはまた非常に完全にテーマ化可能です。テーマ設定は最初から設定できます。特典のリストはたくさんあります。

マイク：それは開発を非常に速くします、それはもともと私をそれに惹きつけたものでした。 Echobind、内部で使用します。でも私にはデザインセンスがありません。少しだけですが、私は決してデザイナーではありません。私はチャクラからコンポーネントを取得し、それを一貫性のあるものにするために少しでも変更することができ、箱から出してすぐに見栄えが良くなります。あなたは速く成長することができます。開発者の経験は素晴らしいです。それは非常に多くのレベルでただ素晴らしいです。

マイク：それについてとりとめを続ける前に、最後に言います。しかし、それはまた、あなたが使用しているこれらの要素に付随する非常に一般的な機能のヘルパーである多くのReactフックを持っています。たとえば、ダークモードの場合。テーマの色を非常に目立たないように切り替えることができる、明るいダークモードを使用するためのフックが組み込まれています。

マイク：モジュールのようなものを切り替えるための使用済み開示用の別のものがあります。常にオン、オフの状態が必要です。しかし、フックはそれをさらに単純化するので、フレームワークが自動的に推測できないことに集中できます。たくさんあったので、そこで切り取ります。

ドリュー：それは本当に良いことです。ちょうど私の理解が正しいので、まず第一にそれはチャクラではなくシャクラですか？シャクラ？

マイク：私はその専門家ではないでしょう。ヨガのせいでシャクラと言ってきました。ただし、創設者に再確認を依頼する必要があります。

Drew：プロジェクトのUIを構築するために立ち寄ることができる既成の設計システムです。

マイク：うん。

Drew：特にReactプロジェクト用です。

マイク：うん。そこにChakraVueプロジェクトがあります。私はVueの人ではありませんが、存在することは知っています。他のフレームもあるかもしれませんが、私は非常にReactに焦点を合わせているので、ChakraのデフォルトのReactを使用しています。

ドリュー：はい。私は過去にReactに精通しています。 Netlifyで働いていたときにReactを使用しました。今、私はVueですべてを行います。それは私が最初に見たものの1つでした。ああ、Vueはありますか？これはよさそうだ。 Vueバージョンはありますか？私はそれのVueバージョンを見つけました、そしてそれはかなり遅れているようです。 1.6などの現在のReactバージョンではなく、0.9か何かになっていると思います。それがどれほど最新かはわかりません。

Drew：かなり時代遅れのフレームワークがあります。 Foundation UI、Bootstrap、Bulmaなど。それらは長い間存在していて、前世代のフレームワークであるように思われます。次に、より現代的なアプローチがいくつかあります。多くのリスナーがTailwindとTailwindUIプロジェクトに精通していると思います。チャクラUIはその風景のどこにありますか？追い風がとる可能性のあるものに近い…追い風がとる可能性のあるアプローチ。あれは正しいですか？

マイク：そう思います。確かに、Tailwindが今とても人気があるという理由だけで、Tailwindをもっと深く掘り下げるつもりでした。しかし、私はテールウィンド自体の内外とその方法についてインテリジェントに話すことはできません…私の感覚では、チャクラとテールウィンドは代替アプローチです。明らかに、同時に両方ではなく、一方をつかみます。

マイク：私はまだ両方の長所と短所が何であるかを知りません。私はチャクラに夢中になっているので、デフォルトでそれを使い続けています。私は「さて、私はこれを今本当によく知っています。大好きです。もう一方については後で学びます。」しかし、Tailwindは明らかに、非常に人気があります。 Tailwindの基本フレームワークはUIツールキットにあると思います。それは公平ですか？

ドリュー：そうだね。うん。

マイク：わかりました。これはおそらくTailwindのUIツールキットと同等です。チャクラのホームページでは、なぜあなたがどちらか一方に手を差し伸べたいと思う理由についての比較がありますが、私はそれを内部化していません。

ドリュー：うん。それは良い。すでに述べたように、Reactプロジェクトと、HTMLに配置するクラス名の全負荷を提供し、HTML構造を使用する必要があるこれらの従来の設計システムの一部ではなく、それ自体を明示する方法については、適切なクラスを配置します。それ。これが、プロジェクトでUIを明示する方法です。 Chakraでは、Reactに基づいているため、これらの要素ごとにコンポーネントの全負荷を提供します。プロジェクトにインポートするだけです。これらのコンポーネントは、独自のマークアップとスタイルをカプセル化しますか？

マイク：うん。実際にチャクラを使用してクラスを作成する必要はありません。私はしていません。それが可能かどうかさえわかりません。 Reactパラダイム全体は、コンポーネントの構成とプロパティです。コンポーネントのカプセル化とは、特定のプロパティをコンポーネントに渡すことを意味します。チャクラでは、グローバルなパラダイムであるテーマのこの概念があります。デフォルトのテーマがあり、色と間隔の値と、すべての一般的なものの特定の単位があります。

マイク：そのテーマはカスタマイズできます。グローバルにカスタマイズします。必要に応じて拡張できます。たとえば、テキスト入力など、コンポーネント自体を呼び出す場合。入力コンポーネント。これには、テーマで定義されているデフォルトの色と境界線の半径、およびパディングとマージンがあります。さらにスタイルを設定したい場合、グローバルベースで実行したくない場合、たとえば、下マージンを指定する場合は、ケースバイケースで実行します。それは大惨事につながる可能性があるので、私はそのグローバルレベルでそれをしません。プロンプトとして渡すだけです。

マイク：ショートカットプロンプトがあります。入力コンポーネントがある場合、MBはに等しく、次に値を指定すると、マージンの下部が適用されます。または、垂直方向と水平方向にMXとMYがあります。または、margin CSSプロパティと同じように、Mを指定して文字列を渡すこともできます。クラス名はありません。クラス名はすべて動的に実行され、ユーザーから離れてわかりにくくなります。

ドリュー：はい。そこで、Tailwindとの比較が必要になると思います。Tailwindの仕組みは、クラス全体に負荷をかけるということです。マージンを増やしたい場合は、マージンを増やすために装着できるクラスがあります。実際には同じことをしているように聞こえます…これは異なる実装ですが、その設計方法と同じアプローチです。私たちは実際に小道具を使用していて、あなたはそれらを調整するために小道具を渡します。

ドリュー：デザインをカスタマイズするのはどれくらい簡単ですか？色や余白、パディングを微調整して少し違って見えるようにするだけの場合ですか？それとも、実際にチャクラでテーマをブランド化できますか？

マイク：ああ、あなたは一体何でもやりたいことができます。それは素晴らしい。コンポーネントレベルまたはテーマレベルでスタイルを設定できます。それはあなたがそれでどれだけ創造的になりたいかによります。私はなんとかいくつかのコンポーネントを取り、それらを使っていくつかのワイルドなことをすることができました。それを本当にスタイリングできるものの一部は、これらのコンポーネントがかなりアトミックであるということです。

マイク：テキストボックスの例をもう一度使用すると、テキストボックスが必要な場合、コンポーネントはそれだけです。周囲のすべてのスタイルを設定することも、テキストボックス自体のスタイルを設定することもできます。または、テーマを変更することもできます。すべてをグローバルにリブランドするための色の設定。

マイク：私は実際にチャクラUIの作成者であるSegにツイートしました。それは本当に素晴らしいので、サイトにギャラリーを配置する必要があると言っています。あなたはそれでいくつかの美しいデザインを作成することができます。それらは非常に多様であり、あなたはそこの表面で知らないかもしれません。 Chakra UIに、サイトでChakraUIを使用していることを明確にする指示があるかどうかはわかりません。

マイク：私はそれでかなりいいものを見てきました。しかし、あなたはそれで何でもすることができます。私は静的なウェブサイトを作りました。ジャムスタックのホームページへのカットはそれで行われます。一例として。 Echobindでたくさん使っています。それをechobind.comに使用したかどうかは思い出せません。しかし確かに私たちのクライアントサイトの多く。次に、私が作成しているアプリ、JamShots、それはアプリです。まだマーケティングページはありません。しかし、それはすべてUIだけであり、そのUIはすべてChakraを使用して構築されています。

マイク：チャクラを称賛している間、もう1つ、最近よく使用している別のWebサイトがあり、そこで使用しています…この本にも紹介します。 Chakratemplates.net。 Chakra-templates.net。貢献している人がヒーローユニットまたは価格設定ユニットを見つけることは、一般的なデザインパターンです。チャクラコードをコピーして貼り付けるだけです。

マイク：それを開発するのに多くの時間を節約できたので、私はそれを本のホームページに完全に使用しています。ああ、あなたは価格設定モデルを持っているようなものです。それをコピーして貼り付けましょう。私のサイトですべてが一貫するように、スタイルの小道具を少し調整しましょう。それでおしまい。チャクラ自体とは別のことですが、非常に多くのWebサイトでこれらのものが必要であり、毎回車輪の再発明をしたいので、時間の節約になります。

ドリュー：何かを迅速に展開したい個人的なプロジェクトだけでなく、代理店のコンテキストでも、リアルタイムの節約になる可能性があるようです。

マイク：ああ、そうだ。絶対。

ドリュー：それはアプリのインターフェースだけでなくマーケティングサイトにも同じように当てはまりますか？それはどちらかの方向に歪んでいますか、それともあなたが構築しているものは何でも一般的に便利ですか？

マイク：両方だと思います。間違いなくそうです。私は両方にそれを使用しました。弊社では両方に使用しています。私たちは、フルスタックアプリケーションとモバイルアプリケーションの構築に大きく傾倒していると思います。確かに、マーケティングよりもUIの方がはるかに必要です。時々それも構築しますが。両方に役立ちます。

マイク：サイトには、いつチャクラを使いたくないのかなど、彼らが言及していることがありますか？彼らはそれがこのインターフェースCSSを単純化する方法のためにそう言っています。画面に大量のデータがある場合は、問題が発生する可能性があります。大量のDOM要素を作成し、多くのリアルタイム更新を実行している場合、パフォーマンスの問題が発生する場合と発生しない場合があります。

マイク：パフォーマンスの問題は今まで見たことがありません。しかし、私はまた、リアルタイムでこれほどデータ集約的なものを構築していません。それは心配です。そのようなアプリを作成する場合は、とにかく2つの異なるアプローチを追加して、それらが全体でどのように機能するかを確認したいと思います。しかし、ええ。これは、これらの両方の場合に普遍的に役立ちます。

ドリュー：常にトレードオフがあると思いますが、テクノロジーの選択はありませんか？それを本当に、本当にシンプルにする何か。実装は本当に迅速です。トレードオフは、1,000個のデータポイントなどをページ上に作成すると、その作業方法がうまく機能せず、速度が低下する可能性があります。

ドリュー：はい。それは公平だと思います。私はテクノロジーの選択肢を見つける傾向がありますが、最も重要なことはただ知ることです。トレードオフとは何か、制限とは何かを知るためだけに。それらのどれも良いか悪いか。自分の状況に適したバランスを見つける必要があります。

ドリュー：この種のデザインシステムで見つかると思うように、タイポグラフィ用のコンポーネントが付属しています。レイアウト用。次に、ボタンとフォーム要素の要点に至るまで、アイコンライブラリがあります。デザインシステムのキッチンシンクページに表示されると予想されるものはほとんどすべてあります。あなたはそこにすべてを持っています。それはすべて私にはかなり現代的なようです。レイアウトグリッドコンポーネントは実際にはCSSグリッドを使用していることに注意しました。これは、常に見やすくなっています。フレックスボックスを提供するだけではありません。

マイク：そうそう。完全に。

ドリュー：一般的に、作業は非常に柔軟ですか？必要な任意のタイプのUIを構築できるレイアウト要素を見つけましたか？

マイク：うん。うん。絶対。それの素晴らしいところは、それらが複数のレベルの抽象化を提供する場合があることです。 CSSグリッドの場合は、次のような単純なグリッドがあります。あなたはそれをドロップしたいと思います、そしてここにあなたのグリッドがあります。中に物を入れて指定するだけで、列数などだと思います。次に、グリッドがあります。

マイク：しかし、グリッドの動作にもう少し柔軟性が必要な場合は、一般的なグリッドコンポーネントがあります。これは、おそらく…単純なグリッドコンポーネントが他のグリッドコンポーネントをラップしている可能性があります。それはそれ自体の上にある単なる別のファサードです。

マイク：コンポーネントの構成に対するそのアプローチは、同じことから、Reactの世界では貴重なパラダイムです。非常に用途が広く、多くの小道具を備えたコンポーネントがある場合は、コンポーネントを一方向でかなり一般的に使用したい一連のユースケースがあるかもしれません。より堅牢なコンポーネントのために、静的または事前に指定された小道具を使用して別のコンポーネントでラップするだけです。

マイク：彼らはチャクラでそのアプローチを本当にうまく使っています。まだできないことは何もありません。きっとどこかにあると思います。または、もう少し面倒なことです。しかし、それは一般的にまだ起こっていません。少なくとも私が考えることができるというわけではありません。

ドリュー：ええと、私が本当に嬉しかったことの1つであり、あなたが先に述べたこともありますが、アクセシビリティに非常に強い焦点が当てられているようです。

マイク：はい。

ドリュー：確かにプロモーション情報に。それはコード自体から生まれたものですか？彼らは彼らが説教することを実践していますか？それは実際に優れたアクセシビリティが組み込まれていますか？

マイク：そう思います。私がそれをテストするのに最も近いのは、それに対してLighthouseを実行することです。アクセシビリティに一貫して高いスコアを提供します。私は通常、ChakraNext.jsを使用します。 Next.jsは、まさにその場でのパフォーマンスです。ハイスコアなどすべてが表示されることがよくあります。今日、本のホームページにLighthouseの4つのスコアのうち3つがどのように含まれているかについてツイートしました。アクセシビリティ、ベストプラクティス、パフォーマンス、および4分の1があります。私は今考えていません。

マイク：パフォーマンス以外はすべて100％近く出てきました。パフォーマンスの部分は、ページに多くを配置し、まだ最適化していないという理由だけで私にあります。それはそうする傾向があります。ライトハウスのアクセシビリティスコアは、チャクラUIを使用するときはいつでも素晴らしいです。

ドリュー：それは素晴らしい。あなたは彼らがサーバーサイドレンダリングを使用していると言いました、そしてあなたは何を持っていますか。ネクストやギャツビーのようなもの、そして私があなたに持っているものは、まったく問題ありませんね？それらでチャクラを使用することを知っておくべきハードルはありませんか？

マイク：ああ、いや。全くない。私はそれを使用していません。私はNext.jsに焦点を合わせる傾向があります。 Gatsbyやその他のSSRツールを接続していません。しかし、フレームワークがそれ自体を使用することを妨げるものがない限り、それは問題ないはずです。

Mike： Reactの場合、ChakraはコンテキストAPIプロバイダーを提供します。テーマプロバイダー。たとえば、私のNext.jsアプリでは、次のようになります。Next.jsには、アプリケーションのすべてのページをラップするアンダースコアアプリのJSまたはTSファイルがあります。そこにテーマプロバイダーを接続するだけで、Chakraが残りの作業を行い、どこでも利用できるようになります。 Next.jsに追加するのにハードルはありません。しかし、私はチャクラもしないと想像しています。

ドリュー：チャクラはTypeScriptを使用していますか？そうだと思いますよね？

マイク：それはそれをサポートします。うん。

ドリュー：それをサポートします。これは、プロジェクトですでにTypeScriptを使用している人々にとって大きなプラスです。人々がまだTypeScriptを使用していない場合、それに対する欠点はありますか？

マイク：そうは思いません。私はすべてのプロジェクトでデフォルトでTypeScriptを使用しており、Echobindも同様です。しかし、私が個人的なレベルで物事を行うとき、私は使用します…私はTypeScriptの振りかけを言うのが好きです。 Typescriptは、静的型を作成することでエラーを減らすのに非常に役立ちます。ただし、そのためのキャリアがあります。知識によっては、TypeScriptが実際のハードルになる可能性があります。

マイク：私の最小しきい値…私が使用するTypeScriptの厳密さは、基本的なタイピングでTypeScriptから多くの価値を引き出すことができるという理由だけで、かなり低くなっています。それは多くの一般的な事故を防ぎます。より高度なタイピングに入るとき、そのようなものにあまり慣れていない場合、それは本当にあなたを遅くし、あなたを苛立たせる可能性があります。

マイク：それはチャクラとTypeScriptで同じことを言うだけです。私は、少なくとも最初は、プロジェクトを実際に具体化して安定させるまで、少量のTypeScriptを使用する傾向があります。ただし、TypeScriptの有無にかかわらず、Chakraの使用に問題はありません。それは素晴らしいです。私はそれが大好きですが、あなたは確かにそれなしでもそれを使うことができます。

ドリュー：うん。 TypeScriptを使用すると、ご存知のように、いくつかのタイプで80％のメリットが得られます。うさぎの穴を深く掘り下げすぎると、ほとんどがTypeScriptであるスクリプトになってしまいます。次に、JavaScriptを少し下に配置します。

マイク：あるいは、何かをタイプする正しい方法を見つけようと多くの時間を費やすと、脳が爆発します。それはあなたがただ何かまたは未知のものを置く方法です。あなたはそれをショートカットします。そのような場合に私が提唱するもの。何かを成し遂げるのに時間がかかりすぎる場合は、引くことができるレバーがあります。

ドリュー：チャクラのドキュメンテーションは本当にうまくピッチされているようだと私は思いました…それは各コンポーネントの概要を持っています。次に、そのコンポーネントを実装するときに行われた設計上の考慮事項に関するテクニカルノートが非常に便利に含まれています。これは、フロントエンドエンジニアとしては素晴らしいことだと思います。彼らは私の言語を話している。わかりました。コンポーネントが内部でわずかに何をしているのかを知っています。

ドリュー：それは私の観点からです。私が取り組んでいる実際のプロジェクトなしでドキュメントを閲覧しています。あなたが実際にプロジェクトに取り組んでいて、その雑草の奥深くにいるとき、ドキュメントだけが持ちこたえますか？見た目と同じくらい便利ですか？

マイク：そうそう。絶対。私の見方は少し違います。内部で何が起こっているのかを常に知る必要はありませんが、通常は推測できると思います。ボックスコンポーネントを見ている場合は、復習のために話している間、今はドキュメントを見ているだけです。ボックスコンポーネントを見ると、「わかりました。これはおそらくデフォルトのdivです。何であれ、グラデーションプロパティを通過するのがわかります。」

マイク： CSSを翻訳する彼らの魔法を完全に理解していなくても、ボンネットで何が起こっているのかをある程度理解することができます。小道具をCSSに変換します。しかし、ドキュメントは非常に直線的であるという点で優れています。それは非常に一貫しています。それは例ですべてをリストします。少しコピーして貼り付けます。

マイク：それは本当に良い空白を使用しているだけなので、ページを見るのは圧倒されないようです。必要なものを簡単に見つけることができます。彼らの検索も素晴らしいです。彼らの検索は役に立ちます。 90％の確率で、それが私が目指していることだと思います。そこに行って、何かをするためのコンポーネントが存在するかどうかを確認している可能性があります。通常はそうです。そして、私が知らなかった有用な何かに出くわしました。または、いくつかの原則について自分自身をリフレッシュするだけです。私はいつもここで必要なものをほとんど見つけることができます。

ドリュー：ドキュメントをちらっと見ただけで気に入らなかったのは、その中の広告の数だけでした。 ChakraUIProの商用提供のすべてのページ。

マイク：私はそれらを見ていませんでした。面白い。見たことある。私は間違いなくそれを見ました。しかし、私は今それを見ていません。そうそう。わかった。チャクラUIプロがあります。私はそれを精神的に除外したと思います。私はあなたを聞く。少なくともそれは大きすぎず、あなたの顔にあります。

ドリュー：それほど大きくはない。それはちょうど間違った場所にあります。それはあなたが情報を探しているところです。私が推測するのは、彼らがそれをした理由です。エコシステムを検討する際に言及する価値があります。プロジェクトの周りにはすべて、プロのコンポーネントセットがあります。これは、TailwindUIにあるもののいくつかと同等だと思います。マーケティングページとここにあるのは、ページのコンポーネントとこれらの構成されたセクション、ページ全体、レイアウトなどです。あなたは、チャクラのメーカーから入手できますが、商用製品として入手できます。

マイク：うん。今それを一瞥するだけです。これらのいくつかは実際に利用可能です。または、それらのバージョンは、チャクラテンプレートのように無料で利用できます。これはChakraテンプレートであり、ChakraProまたはオープンソースの競合他社に対するオープンソースソリューションだと思います。これを払うことであなたはトンを手に入れるだろうと確信しています。あなたがこれらの有料の専門家の必要性を持っているならば、チャクラプロは非常に頑丈で手頃な価格に見えます。プロジェクトにはいくつかのオプションがあります。

ドリュー：うん。その周りにはかなりの生態系が構築されているようです。プロジェクトがどのくらいの期間進行していて、その後に何が続くか知っていますか？ Reactコミュニティで広く使用されていますか？

マイク：はい、言いたいです。どの程度かわかりません。最近のTailwindとChakraの市場シェアはどうなっているのか知りたいと思います。私はチャクラが比較的最近賞を受賞したことを知っています。コミュニティにとって最も影響力のあるプロジェクトに対するGitNationReactAward。私はそれがかなり大きくて、かなりよく受け入れられていると思います。正当な理由があり、それは素晴らしいことです。人々は間違いなくそれを楽しんでいます。私だけではありません。

Drew：依存関係をプロジェクトに持ち込むときに常に考慮する価値のあることの1つは、その依存関係を更新する必要があるときに何が起こるかということです。

マイク：うん。

ドリュー：チャクラは常に改善されていると思います。インポートしてビルドした後、特定のバージョンでロックしたままにする場合ですか？それとも、更新を続けるのは一般的に安全ですか？チャクラが更新されてもサイトのデザインや物事が変わらないという点で、比較的安定していますか？

マイク：これまでのところです。うん。主に、開発の進展によるものだと思います。現在、バージョン1.6.3を使用しています。数ヶ月前、彼らはゼロから1になりました。それは彼らが壊滅的な変化を遂げた唯一の時でした。それ以来、彼らは常に機能のリリースとバグ修正を行ってきました。

マイク：ここ数ヶ月は、すべてが単なる追加でした。追加と修正。重大な変更はありません。ロードマップがどのようなものかはわかりませんが、今後もそうなると思います。これらのマイナーバージョンの1つであるアップグレードするたびに、問題はありませんでした。私はそれから何かが壊れているのを見たことがありません。しかし、1.0でリリースされたとき、いくつかの重大な変更がありました。でもそれが壊滅的だったのを覚えていません。

ドリュー：バンドルサイズとチャクラをツリーシェイクする機能の状況を知っていますか？それはあなたのプロジェクトに大きな重みを加えますか、それともあなたがそれらを使用するときに物事がインポートされるだけですか？

マイク：正直言って、手に負えないことは思い出せない。私はおそらくそれを知っている必要があります。私はそれが多くの重量を追加していることに気づいていません。主な理由は、コンポーネントを個別にインポートしているためです。チャクラなどのすべてをインポートするわけではありません。木の揺れをサポートしていると思いますが、まだテストしていません。しかし、これまでのところ、特にそれから大きな重みを持っているものはありませんでした。

ドリュー：うん。それは常に重要な考慮事項ですよね？

マイク：うん。

ドリュー：プロジェクトに飛び込んで使用する前に、チャクラUIについて知っておくべきことは他にありますか？

マイク：いいえ。素晴らしいです。かなり活発なコミュニティもあります。更新が頻繁に表示されます。私は今ドキュメントを見ていて、以前に見たことのないコンポーネントを見ています。多くの機能追加が行われているようです。それは素晴らしいことです。

ドリュー：うん。それは素晴らしい。プレビューリリースであるCutIntoTheJamstackという本があります。現時点でのベータリリース。あなたはそれを自費出版しています。そうですか？

マイク：うん。うん。私は。テクニカルブックでの最初の試みでした。フォーマルだと思うので、コミットせずにそれを公開したいだけです。私はまた、特に物を作るときに、非公式が好きな人です。それは私にそのようにすることによってそれを私のやり方で行う能力を与えてくれます。

Drew：この本は、文字通り、サービスアプリとしてのソフトウェアの構築について読者に説明しています。

マイク：うん。

ドリュー：すべてJamstackにあります。なぜ今これを書いて、この本でこのアプローチを取ることにしたのですか？

マイク：いい質問ですね。私は20年ほどコーディングを続けていますが、しばらく前に本を書こうとしたのですが、うまくいきませんでした。私は自分のキャリアの中で、もっと多くの知識を共有したいと思っているところです。私はそれを何年も使っています、そして私はそれを本当にもっとそこに出して他の人を助けることへの痒みを感じます。

マイク：去年の10月頃、これを持っていました…そこに製品というものを出したかったのです。電子ブックは、始めるのに本当に良い方法のように感じました。私はNext.jsとそれを使ってできることに情熱を注いでいます。私はJamstackという用語を使用し、Next.jsはデフォルトで静的サイト生成があるため、Jamstackの一部と見なします。

マイク：しかし、私の意見では、十分に話されていないこと、またはそれを使用してサービスアプリケーションとしてソフトウェアを構築することについてもう少し説明を使用できることの1つだと思います。 JamstackはWebサイトだけのものではないからです。静的でスッキリしていてSEOに適しているため、コンテンツ主導のWebサイトで非常にうまく機能します。

マイク：しかし、そこには非常に豊富な機能があります。特に、昨日VercelがNext.jsカンファレンスを開催したNext.jsには、すばらしい機能がどんどんリリースされています。私はサービスとしてのソフトウェアの構築に情熱を注いでいます。ソフトウェアのウェブサイトは素晴らしいですが、ソフトウェアは物事を行うためのものです。

マイク：私にとってこのスタックは、サービス開発としてのソフトウェアの未来です。 RubyonRailsがリリースされたときのことを思い出します。話すことに関しては、それは進化でした。それはあなたが手動でしなければならなかった多くのことを自動化して単純化しました。それは開発のペースを速め、それはそれの質を高めました。

マイク： Next.jsとJamstack、VercelとChakraのUIはすべて、多くのことを単純化するものを作成しています。 Next.jsは、速度に関連する多くの問題とアクセシビリティに関連する問題を単純化します。インスタンス化。以上で、ルーティングは自動的に行われます。クライアント側またはサービス側のルーティングについて心配する必要はありません。自動です。 Chakra UIは、アクセシビリティとテーマでそれを行います。これらのツールを組み合わせると、それらはただ…開発者の経験は本当に素晴らしく、すべてがちょうど…それはあなたに本当にソフトウェアを作成する自由を与えます。

マイク：あなたの質問に答えるために。私が今本を出す理由は、私が本当に何かを出したいという適切な時期と、Jamstackエコシステムが実を結び成長し始めているためです。また、Jamstackにさらにコードを書き込む機会も与えられました。これは、私にとってとても気に入っています。

ドリュー：あなたが言うように、ウェブサイトや通常は軽量のウェブサイトについて考えるとき、Jamstackのアイデアを取り入れることは簡単だと思います。しかし、その次のステップを実行して、完全なWebアプリケーションを構築するためのアプローチをどのように使用できるかを考えると、それははるかに困難になります。サーバー側の考え方に慣れている場合は、乗り越えるのがより大きなハードルだと思います。

マイク：うん。

ドリュー：見るのははるかに大きなジャンプです、わかりました。認証をサービスに出すことができます-

マイク：はい。

ドリュー： …そして私は…読者にとって、あなたの本の読者の観点から、この例を通り抜けて構築するだけで、あなたと一緒に続くことは、おそらくそのハードルを乗り越えて助けるための素晴らしい方法だと思いますゆっくりと考え方を変えてください。これは私がこれらすべてのことを行うことができる方法ですが、Jamstack上で。同意しますか？

マイク：うん。それが私が望んでいることです。そうだと思います。それは本当にそれが意図していることです。私は最近、トーク、カンファレンストークに署名していました…このトピックに対する私の動機の一部と、この本で教えることにした方法は、1つのプログラミング言語を教えることができたということです。フレームワークですが、多くの経験を積んだすべての開発者は、ドキュメントやグーグル、スタックオーバーフローの使用に長けているため、実践的な方法でスタックを紹介する方が良いと思います。なぜ私はあなたにそれを教えるのにあなたの時間を無駄にするのですか？

マイク：スタックとそれを使って何ができるかをすばやく深く掘り下げたいと思います。個々のピースのそれぞれの優れている点を理解します。 NextOFFとPrisma。 Next.jsとChakra。数回クリックする手間を省くために、ドキュメントにリンクします。しかし、インタラクティブな例を通して、これらの部分がどのように相互に接続するかを見ていきます。また、難しい部分についても理解することができます。

マイク：たとえば、私が深く掘り下げていることの1つは、非同期の複数ファイルのアップロード用に構築しているこの機能です。 Next.jsには、フロントエンドとバックエンドがあります。フロントエンドの前面とフロントエンドの背面にありますが、そのアナロジーを使用すると、Reactレイヤーがあります。次に、ノードレイヤーがあります。これらのAPIルートがあります。

マイク：それを使って複数ファイルのアップロードを行い、サービスを使用したい場合は、本の中でCloudinaryを使用します。ただし、画像とメディアのアップロードにAPIサービスを使用する必要がある場合は、そこに多くの動く部分があります。ユーザーが対話するクライアント側があります。 Cloudinaryまたは他のプロバイダーへのAPIリクエストがあります。ただし、効率的にするには、複数のAPIリクエストを作成する必要があります。 Cloudinaryに対して署名を行う必要があります。これには、API呼び出しが必要です。

マイク：あなたはそのサインをとる必要があり、あなたはアップロードをする必要があります。それはブラウザから行き、あなたのAPIを迂回して、Cloudinaryに直接行きます。次に、フロントエンドのフロントエンドバックエンドを使用するデータベースにそれを保存する必要があります。多くの部分とNext.jsがあります…Next.jsコミュニティには、そのためのオープンソースプラグインはまだありません。他の人がこれを持っているので、私はそれを構築したアプリから抽出して1つに入れるかもしれません。

マイク：とにかく、それは言うまでもなく、それは人々に教えるのに本当に価値のあることだと思います。 Even if you're a senior engineer, for a few dollars, you get all this wrapped up for you with a bow on it to be like, okay. This is a series of tools that worked really well together for building SaaS apps with a stack. This hurdle, I don't have to figure out a solution for writing custom. Here's an approach that works.

Mike: I just, I take a lot of joy in trying to prevent people from having to reinvent the wheel. Even though it's fun to reinvent the wheel, if you wanted to just ship something, the more you can reduce that, the better,

Drew: That sounds very, very helpful. The book is in beta now. If people buy it now, do they get updates as it improves?

Mike: Yep. うん。 It's immensely discounted. It's $10 now. When I finish, it will be 30. Whoever gets it now, will just get updates for the life of the book.

ドリュー：素晴らしい。

Mike: I've got another one coming up in probably a couple of weeks. うん。うん。 It's already 107 pages and it's got a source-code repo that will be shipped with it. That comes along with it now. It's already like you can do… In the first 107 pages, it goes through setup to build a new first full stack page to building a CRUD for photo galleries. Create, Read, Update, Delete. So the front end and backend components. Then shipping a deployment to railway and Vercel. It's pretty practical right away. Then the further, other couple of 100 pages are going to be more in depth with the coding topics.

Drew: Great. That's available now at cutintothejamstack.com.

Mike: Yep. それでおしまい。

Drew: I've been learning all about Chakra UI. What have you been learning about lately, Mike?

Mike: I've been digging deeper on the stack. It constantly teaches me new things. One example is just with the Vercel Conference yesterday. The Next.js Conf. Next.js 11 is now out and it's just got a ton of great things with it. There's a real-time collaboration tool built in so when you ship a preview deploy, you can have people commenting on it and moving their mouse around the screen, even it looks like.

Mike: In addition, their performance is getting better and better. Next.js' image component, which I use heavily now is going to have automatic placeholders. It's going to be even more streamlined. I'm constantly learning the better and better ways to do things in this stack. There are always more. It seems like.

Drew: Always. Always more to learn. If you dear listener would like to hear more from Mike, you can follow him on Twitter where he's @mcavaliere, and his personal website is mikecavaliere.com. The book Cuts Into The Jamstack, which amongst other things shows a practical implementation of Chakra UI, is again at cutintothejamstack.com. Thanks for joining us today. マイク。別れの言葉はありましたか？

Mike: Nope. Thanks so much for having me, Drew, and keep smashing out there. Maybe I should rephrase that.