Пікірлер

• 
  @user-zx9go4ur1v4 ай бұрын

  かなり前の動画に質問失礼します。TypeScriptではなくJavaScriptでやっているのですが、useEffectでconsol.logで出力しようとすると、ページを読み込んだ時に2回出力されてしまいます。 動画と同じようにコードを打ってるはずなのですが…

• 
  @pcgetmasa Жыл бұрын

  ReduxToolkitの内容は非常に勉強になりました。MaterialUIのフォームの使用法も勉強になりました。 今までフォームをガリガリ作っていたのがアホらしくなりました。 無知は損ですね。 他の動画にないデプロイしたあと通常のレンタルサーバーにUPする方法などあると初心者は見応えあると思います。 この機能を使うにはNode.jsがサーバーサイドで必要とあれば初心者はありがたいです。 Next.jsを勉強した時にVercelにデプロイしか解説はなく、自分のホスティングにUPしたら動作しないという苦い経験もありました。 これからも頑張ってください。

• 
  @11021300 Жыл бұрын

  調べてもよくわからなかったのでご教示ください。useContextは複数のコンポーネントでデータの共有ができるという理解ですが、AuthProviderの中のchildrenはどのような意味を持つのでしょうか？（children自体は型定義関係なく親コンポーネントのJSJ内の子要素をpropsで渡せるものという理解です。）

• 
  @youtube2603 Жыл бұрын

  ご質問ありがとうございます！ > AuthProviderの中のchildrenはどのような意味を持つのでしょうか？ すでにご覧になっているかもしれませんがchildrenに関しては、以下のブログが参考になると思います！ choippo.com/react-component-children/ 上記内容を踏まえた上で、今回contextを用いて複数のコンポーネントでデータの共有をするためには、それらのコンポーネントがAuthProviderにラップされている必要があります。AuthProviderにラップとは以下のように<AuthProvider>に囲まれている状態のことです。 <AuthProvider> <Component1 /> </AuthProvider> この際、AuthProvidrの中では、「children=<Component1 />」となり<Component1 />は<AuthContext.Provider>に囲まれる形になるため、contextで管理している値を受け取れるようになるということです。 まだ何かわからないことがあれば、お気軽にご返信ください！

• 
  @11021300 Жыл бұрын

  @@youtube2603 ありがとうございます！理解できました！

• 
  @Kitsune-konkon Жыл бұрын

  第6回までで、お金を取られることとかってありますか？クラウドに接続しっぱなしでも取られませんか？

• 
  @youtube2603 Жыл бұрын

  ご質問ありがとうございます！ 今回の構成ではデプロイしたアプリケーションにアクセスがない限り課金はされません。 アクセスがあった場合にも何千、何万リクエストでなければたいした金額にはならないです。 しかし、課金が気になるのであれば、デプロイ完了後にamplify deleteコマンドを入力し、アプリを削除することをお勧めします！

• 
  @yy-yl2if Жыл бұрын

  はじめまして、色々動画をあげてくださってとても助かっています！ 質問なんですが大容量データを扱う場合でもこの機能で作成できますでしょうか？ ストレージを沢山使ってしまうのでaws使用料を気にしています。 本当はbigクエリーを使うべきかなと思うのですが作り方がわからないための質問になりますm(*_ _)m

• 
  @user-hm8fy5xv8p Жыл бұрын

  現在もこのやり方でいいのでしょうか？

• 
  @youtube2603 Жыл бұрын

  コメントありがとうございます😊 本動画の情報は古い可能性がありますので、現在は公式ドキュメント等の情報を参考になさるのが良いかと思います🙇‍♀️ firebase.google.com/?hl=ja

• 
  @tadakuniyasuda8214 Жыл бұрын

  終わった！　滅茶苦茶難しい！けど、できるようになりたい！　todoやって、これあと数回やってみます！！！！！！

• 
  @youtube2603 Жыл бұрын

  コメントありがとうございます！！ ファイトです👏

• 
  @user-hl6pg3zu4o Жыл бұрын

  初心者にやさしい、わかりやすい動画をありがとうございます！無事、実装ができました！

• 
  @youtube2603 Жыл бұрын

  コメントありがとうございます！ 実装完了おめでとうございます👏

• 
  @yy-yl2if Жыл бұрын

  めちゃくちゃわかりやすいです、勉強になります。 今、IPカメラからAWSのS3経由でWebに出す勉強をしているのですがどうしてもわかりません。今後KZreadで出す予定ありますでしょうか？（ネットで検索しても全然出てこなく。。。

• 
  @youtube2603 Жыл бұрын

  コメントありがとうございます！ 今のところは予定がなかったのですが、余裕のある時に、おっしゃったような事ができないか検討してみます👍

• 
  @yy-yl2if Жыл бұрын

  @@youtube2603 ありがとうございます！大変助かります💦

• 
  @yugo574 Жыл бұрын

  次回も楽しみにしてます🤲

• 
  @youtube2603 Жыл бұрын

  ありがとうございます！！ 次回はまた3週間後に配信予定ですので、今しばらくお待ち下さい🙇

• 
  @SudaMasakii Жыл бұрын

  関数コンポーネントとクラスコンポーネントの違いってなんですか…？？

• 
  @youtube2603 Жыл бұрын

  簡単に言いますと、クラスの形でコンポーネントを定義するのか、関数の形でコンポーネントを定義するかの違いになります。「React 関数コンポーネント クラスコンポーネント 違い」のようなキーワードで探したらこの様な記事も出てきましたので、ぜひ参考にしてみてください👍 fullstacklife.net/programming/react/ract-class-function-component/

• 
  @SudaMasakii Жыл бұрын

  @@youtube2603 あっなるほど！定義の違いなんですね！ サイトまでありがとうございます！ しっかり見て見ます！

• 
  @youtube2603 Жыл бұрын

  はい！ また疑問点がありましたら遠慮なくご質問ください👍

• 
  @SudaMasakii Жыл бұрын

  @@youtube2603 ありがとうございます！！ 頼りになります！！

• 
  @Joy-of-the-Lord Жыл бұрын

  こちらのチャンネル発見してよかったです！ありがとうございます！

• 
  @youtube2603 Жыл бұрын

  こちらこそ、発見していただきありがとうございます😊

• 
  @haaku5636 Жыл бұрын

  はじめまして　コードをgithubで公開してませんか？result={calculator.showingResult}で表示されない為、確認したいです。 quiitaも見ましたが、また少し違うコードの為・・・

• 
  @youtube2603 Жыл бұрын

  コメントありがとうございます！ GitHubにレポジトリがありますので、ご共有いたしますね👍 github.com/Naoya-abe/calculator-app

• 
  @haaku5636 Жыл бұрын

  @@youtube2603 早急な対応ありがとうございました！src直下のindex.jsでインポートの書き方が間違っていた為、ハマっていました・・・。import reducer from './redux/reducersをimport reducer from './redux/reducers/calculatorにして、calculatorから読み込むと間違って認識してました。失礼しました😭😭😭

• 
  @youtube2603 Жыл бұрын

  無事に解決できたようで良かったです👏 importのミスは僕も良くやりますので、お気持ちわかります😅

• 
  @hikingcommunityfromkansai79602 жыл бұрын

  最後の部分で、element.style.height = 'auto'に書き換えていますが、その直下のelement.style.height = '${element.scrollheight}px'は、無効化されるのでしょうか？　二重の定義に見えますが、element.style.height = 'auto'　のみを最後に残すのでしょうか？

• 
  @youtube26032 жыл бұрын

  コメントありがとうございます！ 今回の様に自動拡張するtextareaを作成するためには、書き換えるのではなく element.style.height = 'auto' element.style.height = '${element.scrollheight}px' の両方を記述する必要があります。 「element.style.height = 'auto'」だけでは自動拡張しませんし、「element.style.height = '${element.scrollheight}px'」だけではtextareaの伸縮の仕方が違和感のあるものになってしまいますので、両方を記述することで今回の様なtextareaを実装することができます👍

• 
  @chunleiyang90192 жыл бұрын

  勉強になりました。次回TodoアプリへAWS Amplifyのハンズオンを待っております。

• 
  @youtube26032 жыл бұрын

  コメントありがとうございます！ 楽しみにしててください！！

• 
  @shu-chan21162 жыл бұрын

  実際にS3などのサーバーにデプロイする際はapikeyはどのように保管するのがセキュリティ上良いでしょうか？

• 
  @youtube26032 жыл бұрын

  コメントありがとうございます！ 以下長文となりますが、確認いただけますと幸いです！

• 
  @youtube26032 жыл бұрын

  今回の様なケースでは、基本的にはアプリケーションをビルドする際にapiKeyをアプリケーションに埋め込む形となります。ですので、セキュリティを高めるためのApiKeyの特別な保管方法というのはございません（私の勉強不足かもしれませんが...）。しかし、特別な保管方法がないからと行って何も対策をしないと、ご心配のとおりにApiKeyが流出し、APIの不正利用が起こる可能性がございます（見ようとすればGoogleDevToolsからApiKeyを見ることができるため）。そこで、その不正利用を防ぐ方法として、APIを叩くことのできるURLやIPアドレスを絞るという方法があります（こちらはApiKeyを発行するサイト等で設定できたりもするのですが、どこまで設定できるかはその運営元次第となります。GoogleMapのAPIに関してはこのあたりの設定ができたはずです！）。ですので、APIを利用してフロントエンドアプリケーションの機能を実現する際には、 APIを利用できるURLやIPアドレスを絞って運用上のリスクを減らすのだとイメージを持っていただけると良いと思います！ ※S3はサーバーではなくストレージサービスの立ち位置となります

• 
  @shu-chan21162 жыл бұрын

  @@youtube2603 ご丁寧に回答いただきありがとうございました。 apikeyを含めたビルド済みのreactコード一式をS3にホスティングするケースだとバケットポリシーやおっしゃっている通りAPI側の設定でIPなどの制限するしかないですね。。 S3内にシークレットを保管できる場所があれば便利なのですが。 ※静的Webサイトホスティングでフロントエンドのサーバーという意味で使ってました。ややこしくてすみません、、

• 
  @COROCK992 жыл бұрын

  5:48 .env.localファイルを追加して検索しても400エラーが起きる方へ ローカルでアプリを立ち上げたままの状態で検索を行っても、envファイルが認識されていないため400エラー（写真の取得に失敗しました）になります。 一度ターミナルでctrl + Cでアプリを停止してから再度立ち上げ直すと、正常に検索できるかもしれません。

• 
  @youtube26032 жыл бұрын

  補足のコメント助かります！！ ありがとうございます！

• 
  @kenchiro_pt Жыл бұрын

  ありがとうございます！ まさにそこでつまりました（笑）

• 
  @youtube26032 жыл бұрын

  ReduxToolkitって何？？ という方はぜひ先に、以下の動画をご覧ください👍 kzread.info/dash/bejne/q4WulMmMgcy1iqQ.html

• 
  @scramberry_io2 жыл бұрын

  こちら第3回の配信時期は何時ごろになりそうでしょうか？

• 
  @youtube26032 жыл бұрын

  コメントありがとうございます😊 最近プライベートで忙しく更新できておりませんでしたが、6月中には第3回の配信ができる予定です👍

• 
  @masatakehayashi4272 жыл бұрын

  すみません、よろしければ教えてください。 右上にあるAWSアカウント表示のところに@ n-abeとなっていますが、どうやってこの状態にできるのでしょうか？アカウント番号だと何のためのアカウントかわかりにくいので悩んでいました。

• 
  @youtube26032 жыл бұрын

  コメントありがとうございます！ そうですね、AWSのコンソール画面にログインする際に、アカウント番号ではなくアカウントエイリアスでログインしてはいかがでしょうか？そうすることで右上の表示が数字ではなくなるかもしれません！ 一旦お試しいただき、また結果を教えてください🙇‍♂️

• 
  @RS-vm2oy2 жыл бұрын

  チュートリアルみても全然 uscallback 分からなかったのですごく助かりました。

• 
  @youtube26032 жыл бұрын

  コメントありがとうございます！ お役に立てた様で幸いです！

• 
  @sezu4302 жыл бұрын

  コンピュータサイエンスの学生です 日本語を勉強しているので、日本語でのreactjsのビデオを探していたのです あべちゃんの動画がとても役に立ちましたし、分かりやすかったです 本当にありがとうございます

• 
  @youtube26032 жыл бұрын

  こちらこそです！ ぜひ今後もご視聴をよろしくお願いいたします！

• 
  @f.m.83452 жыл бұрын

  分かりやすかったです。ありがとうございました！

• 
  @youtube26032 жыл бұрын

  こちらこそ動画視聴&コメントありがとうございます！

• 
  @pnaka0p02 жыл бұрын

  丁寧な説明でわかりやすかったです！今のところ順調に進められてます！

• 
  @youtube26032 жыл бұрын

  ありがとうございます！ 昔の動画では情報が少し古いところもありますので、適宜調査しながら進めていただけますと幸いです🙇‍♂️

• 
  @pnaka0p02 жыл бұрын

  @@youtube2603 　承知しました！ありがとうございます✨

• 
  @bernie69472 жыл бұрын

  説明は、わかりやすいんですが、設定しているところの表示をもうちょっとズームで大きくして欲しい

• 
  @youtube26032 жыл бұрын

  コメントありがとうございます！ 承知しました！今後作成する動画では、もう少しズームして画面録画をいたしますね👍

• 
  @100asoberghi92 жыл бұрын

  あべんちゃんさま Twitterの方でお仕事依頼のDM送らせて頂きました。もしお時間ありましたらよろしくお願いします。

• 
  @youtube26032 жыл бұрын

  TwitterのDMで返信させていただきましたので、ご確認よろしくお願いいたします🙇‍♂️

• 
  @Cafe-xy7sf2 жыл бұрын

  解説非常にわかりやすいです！ありがとうございます！ 解説でコードが自動整形されているようですが, 必要な設定等を教えていただきたいです！

• 
  @youtube26032 жыл бұрын

  こちらこそありがとうございます！！ コードの自動整形にはprettierというものを使っています。 設定については以下のサイトが参考になるのではないでしょうか？ dev-yakuza.posstree.com/react/prettier/

• 
  @Cafe-xy7sf2 жыл бұрын

  @@youtube2603 ありがとうございます！！ これからも更新楽しみにしています！！

• 
  @hiroyuki_thinking2 жыл бұрын

  ▼自分用メモ import firebase from "firebase/app"; ↓ import firebase from "firebase/compat/app"; にしないとエラーでる

• 
  @user-bc2zd8nh1t2 жыл бұрын

  pixabeyのAPI URL打つと400エラーが出るんですけど同じ人いませんか？

• 
  @youtube26032 жыл бұрын

  400エラーということはリクエストの形式を間違えてAPIを叩いている可能性があります。 e-words.jp/w/400%E3%82%A8%E3%83%A9%E3%83%BC.html 本動画の投稿が1年以上前ということで、動画内の実装方法が現状のPixabayAPIの利用方法と異なる可能性がありますので、以下のPixabayドキュメントを見つつ渡すパラメーター等で間違いがないか確認をお願いします🙇 pixabay.com/api/docs/

• 
  @user-bc2zd8nh1t2 жыл бұрын

  @@youtube2603 ご返信ありがとうございます。調べたところ仕様が変わってるところはなく、単純に書き方が間違っていました。動画内で出てきている変数「params」を「param」としていたことが原因だったようなのですが、変数の命名が原因でこのようなエラーは起きるのでしょうか？

• 
  @youtube26032 жыл бұрын

  @@user-bc2zd8nh1t そうですね！ axiosを用いてparameterを渡す場合には、objectのkeyとして「param」ではなく「params」といった名前を指定する必要があります。 github.com/axios/axios 本動画では、axios.get("endPoint", { params })と記述しているのですが、実はこれはaxios.get("endPoint", { params: params })の省略形となります。 JavaScriptではobjectのkeyとvalueが一致するときはvalueを省略できますので、今回のケースでは{ params }を{ param }にしてしまうとaxiosでparameterを渡す際の命名規則に反するため400エラーが返ってきたのではないかと考えられます🤔 qiita.com/zukkis/items/0508f47e0ee72102f8ba

• 
  @user-pq6fi3zu2i2 жыл бұрын

  すごくわかりやすいです！ 今後も勉強させてもらいます！

• 
  @youtube26032 жыл бұрын

  ありがとうございます！ 今後もよろしくお願いします🙇‍♂️

• 
  @100asoberghi92 жыл бұрын

  yarn add がnot foundと表示されるのですが必要なパッケージのインストールはその前に何か事前準備が必要なのでしょうか。現在firebaseでデプロイは完了していてVScodeと連携させようとしていますが上手くいきません。

• 
  @youtube26032 жыл бұрын

  コメントありがとうございます！ > yarn add がnot foundと表示される こちらに関して「yarn」のコマンド自体のインストールは完了しているでしょうか？？ もし完了していないようでしたら、こちらのサイトを参考にインストールしてみてください👍 classic.yarnpkg.com/lang/en/docs/install/#mac-stable

• 
  @youtube26032 жыл бұрын

  またエラー文を貼っていただくと、より正確に回答できるかなと思いますので、上記回答で解決できない場合は、エラー文を添えて再度ご質問いただければと思います🙇

• 
  @100asoberghi92 жыл бұрын

  @@youtube2603 ご返信ありがとうございます。やはりエンジニアに委託しようと思います。バックエンドの箇所が全く分かりません。。。もしよろしければお仕事の依頼などはできないでしょうか。

• 
  @youtube26032 жыл бұрын

  なかなか自分で実装するのは難しいですよね…😓 承知しました！一旦詳細をお聞かせいただいてから、お仕事を引き受けようか決めたいと思いますので、詳細をTwitterのDMからお教えください🙇‍♂️ Twitterアカウント @abechan_front

• 
  @100asoberghi92 жыл бұрын

  @@youtube2603 アベ様　 大変申し訳ございません。同時にお仕事依頼のお願いをしておりまして別の方に依頼が決定してしまいました。 いきなりコメント欄でお仕事依頼しておいてこのようになってしまい申し訳ございませんでした。

• 
  @ktk67972 жыл бұрын

  Amplifyはほんと便利

• 
  @youtube26032 жыл бұрын

  本当に便利ですよね！！

• 
  @ryo-qj2rw2 жыл бұрын

  実装で困っていたのですが、この動画のおかげで解決しました！内容も非常に分かりやすいです。ありがとうございますー

• 
  @youtube26032 жыл бұрын

  コメントありがとうございます！ こちらこそ、はるにさんのお役に立てて嬉しいです😁

• 
  @azm20502 жыл бұрын

  質問ですが、よく他の動画でJSXを使用する場合、拡張子.jsxが見受けられるのですが先生は.jsのままコードを書いているのは何か違いはありますか？

• 
  @youtube26032 жыл бұрын

  コメントありがとうございます！ JavaScriptを使用している際には拡張子.jsxを使おうが拡張子.jsを使おうが、特に実装上は問題ないです。 しかし、チーム開発をしている際には以下のようなコーディング規約が設けられることがありますので、その際は現場のルールに従うようにするのが良いですね！ - Componentを作る際には.jsxの拡張子を使いましょう等 - ロジックを作る際には.jsの拡張子を使いましょう等

• 
  @MM-tw3cc2 жыл бұрын

  とても役に立つ動画ありがとうございました！ これからも参考にさせていただきます！ 一点疑問点がありますので、お時間が有るときに教えていただきたいです。（初歩的な質問で申し訳ありません…） 現状だとログインした人が同じto do リストを操作することができるアプリだと思うのですが、 これをログインしたユーザー だけが自分のTo do リストを操作するような、各個人専用にすることはできますか？ユーザーの数だけTodoリストがある？というイメージです。 （トレロやNotionのように自分のTo doリストが他の人からみられないようにしたいです） やり方を調べてみたのですが、知識不足でうまく検索ヒットさせることができません… もし類似の方法や参考になる記事などがありましら、教えていただけないでしょうか？

• 
  @youtube26032 жыл бұрын

  コメントを頂きありがとうございます！ > これをログインしたユーザー だけが自分のTo do リストを操作するような、各個人専用にすることはできますか？ > ユーザーの数だけTodoリストがある？というイメージです。 こちらは十分に可能です！ しかし、これらを実現するためには、以下の機能が最低限必要ではないかと思います。 ・ユーザーの認証機能 ・ユーザーを識別しながらのCRUD機能 上記機能はReactやReduxだけでは実現できませんので、FirebaseやAWSAmplifyといったサービスを勉強することで実現可能になります。公式のドキュメントのURLを貼っておきますので、一度覗いてみてください！ Firebase firebase.google.com/?hl=ja AWSAmplify aws.amazon.com/jp/amplify/

• 
  @synergy_products2 жыл бұрын

  理解しづらい単語の解説や、細かく参照して頂けるなど、とてもホスピタリティを感じます。 有料級の動画シリーズかと思われます。登録させて頂きました。ありがとうございます。

• 
  @youtube26032 жыл бұрын

  こちらこそありがとうございます！ 今後もわかりやすい動画を意識してアップロードしていきますので、ご視聴よろしくお願いいたします🙇‍♂️

• 
  @ss-ks1df2 жыл бұрын

  18:19辺りのところ、selectTaskにtasksを代入しておりますが、useSelectorを利用するという意味でselectTaskという名前にしたのでしょうか？これは一般的（ルール）なのでしょうか？

• 
  @youtube26032 жыл бұрын

  コメントありがとうございます！ selectTasksの命名についてはおっしゃる通りです！しかし、これは特段ルールなどではございませんので、個人開発ならご自身の扱いやすいように、チーム開発の場合はチームのルールに従って開発を進めていただければと思います💻

• 
  @beanbeenzou2 жыл бұрын

  @@youtube2603 はなやや4・

• 
  @gif27452 жыл бұрын

  世界一わかりやすいです。ただ、少々マイクの音量が小さくて何回か聞き戻しが発生するのと、広告いった時の音量がでかくてビビりますw

• 
  @youtube26032 жыл бұрын

  コメント頂き本当に嬉しいです！ありがとうございます！ それは申し訳ないです... gif2745さんのアドバイスを元に動画の改善を行ってまいりますので、今後もご視聴をよろしくお願いいたします！

• 
  @jpstarbrightac2 жыл бұрын

  I'm new to Firebase, Easy to understand! Catch you up later!

• 
  @youtube26032 жыл бұрын

  Thanks a lot！

• 
  @skitzhills2 жыл бұрын

  こちらの動画もものすごくわかりやすく大変参考になりました、ありがとうございます！ 一点だけなのですが、firebase.js内のimport部分でエラーが起こってしまい色々としらべると以下の記述でないと作動しないようでした！ import firebase from "firebase/compat/app"; import "firebase/compat/auth"; import "firebase/compat/firestore";

• 
  @youtube26032 жыл бұрын

  貴重な情報のご共有感謝いたします！！

• 
  @skitzhills2 жыл бұрын

  通っているブートキャンプのプロジェクトでReduxを使うことになり、色々なチュートリアルを漁ったのですが この動画の説明が一番わかりやすくしっくりきました！😭 ありがとうございます！！

• 
  @youtube26032 жыл бұрын

  そのように仰っていただき本当にありがとうございます😭 今後も頑張って動画作成を続けていきますので、よろしくお願いいたします！！

• 
  @user-sx3jx8il2h2 жыл бұрын

  yarnのインストールのurl先のページのリンクがnot foundになってました。 ただ、インストールコマンドは動画で説明されていた通りだったので、概要欄の説明を更新いただけるといいかと思います。

• 
  @youtube26032 жыл бұрын

  ご指摘ありがとうございます！ 更新完了しましたので、ご連絡になります！

• 
  @shinhashi20572 жыл бұрын

  動画を見終えて、Redux Toolkitの概要を知ることができました。 もう一度復習して理解を深めて、マイアプリを作れるように頑張っていきます。

• 
  @youtube26032 жыл бұрын

  お役に立てたようで幸いです！ はい！今後も一緒に頑張っていきましょう👏

• 
  @3deppa1242 жыл бұрын

  中々理解できない部分があり、質問させていただきたいです。 Context.Providerの必要性が分からなくなってきてしまいました。 動画の中のAuthContextを受け取りたい場所でimportし、useContext(AuthContext)とすればcreateContextで定義した値を取得できるかと思うのですが、 なぜContext.Providerは必要なのでしょうか？ 単純に公式のドキュメントで、そのように利用することが推奨されているからって感じなのでしょうか。 調べても中々分からず質問させていただきました。 理解度低く申し訳ありませんが、お手隙でご回答いただけますと幸いです！

• 
  @youtube26032 жыл бұрын

  動画のご視聴ありがとうございます！ Providerの存在意義としては2点あると考えておりますのでご確認をお願いいたします！ 1点目は「defaultValueでは指定できない（または実装がめんどくさい） 値をConsumer側に渡したい時に、Providerで値を更新してConsumerに渡すことができる」です。 今回の場合は、「useStateで作成した値と関数をConsumer側に渡したかった」となります。この場合以外にも、「バックエンドとhttp通信を行った結果をConsumer側に渡したい」といった時にも使えますね！ というのも、Consumer側で受け取るvalueは、ツリー内の上位で一番近いこのContext用のProviderの value プロパティと等しくなるからです。 そして、このContext用のProviderが上位に存在しない場合、引数の value は createContext() から渡された defaultValue と等しくなるように作られています。 また、2点目としては「値を渡すコンポーネントの範囲を明示化できるところ」です。 「値を渡すコンポーネントの範囲を明示化できる」ことで、それらのコンポーネント内でしかcreateContextで生成された値を共有しないなどの共通認識をチーム内で持てますので、チーム開発を円滑にすすめることができます。 以上、ご回答となりますが、あくまでこれは私個人の考えですので、1つの参考意見としてご認識ください！

• 
  @3deppa1242 жыл бұрын

  @@youtube2603 お忙しい中ご回答いただきありがとうございます！ 1点目につきましては、まだConsumerの方について理解が浅いので、これから学んで行こうかと思います。 2点目につきましては、現状でも、とてもしっくりきました！ とても勉強になりました。ありがとうございました！

• 
  @sutosyake79012 жыл бұрын

  firebaseのハンズオン、楽しみながら完走できました！ 有益な情報をありがとうございました。 1点ご質問なのですが、 ログインしていないユーザをアプリ画面('/')からログイン画面('user-auth')に強制的に遷移させる処理で、 一瞬だけとはいえアプリ画面('/')が表示されてしまうため、これを防いで見栄えとセキュリティを良くしたいと思っています。 しかしやり方がよく分からず、もしアドバイスがあればお聞きしたいです。

• 
  @youtube26032 жыл бұрын

  動画のご視聴ありがとうございました！ 返信が遅くなり申し訳ありません... このコメント欄で詳細をお伝えするのは難しいので、簡単にご共有させていただきますね！ > 見栄えとセキュリティを良くしたい 様々な手法が考えられますが、今パッと思いついたものの中で比較的簡単そうなものをお伝えすると、モーダルを用いる方法があります！ ページが開かれた際に、loadingアイコンを持ったモーダル（背景色を濃くする）を開くことをデフォルトにしておき、ユーザの認証が確認できたら、そのモーダルを取り払いアプリのTODO画面を表示するという方法です。ぜひお試しいただき、またご連絡をください！ モーダルについてはreact-modalがおすすめです！ github.com/reactjs/react-modal/blob/master/README.md

• 
  @user-ul1ny2kr8s2 жыл бұрын

  TypeError: Cannot read property 'apps' of undefined このエラーが出るんですけどどうしたらよいですか？

• 
  @youtube26032 жыл бұрын

  ご視聴ありがとうございます！ 「TypeError: Cannot read property 'apps' of undefined」で検索したら以下のような記事が出てきました。 ja.stackoverflow.com/questions/81163/firebase%E7%92%B0%E5%A2%83%E6%A7%8B%E7%AF%89%E3%81%A7typeerror-cannot-read-property-apps-of-undefined%E3%81%A8%E5%87%BA%E3%82%8B 上記記事によると、firebase SDKのバージョンが9以上ですと、初期化の方法が変わっているみたいです。 対応方法としては ご自身の追加したfirebaseのversionを確認した後に以下のどちらかのアクションが取れます！ ぜひお試しいただき、またご連絡いただければと思います！ - firebase SDKのバージョンを9未満にする(私はv8.2.3でした) 本アプリに追加しているパッケージのバージョン一覧確認：github.com/Naoya-abe/toolkit-todo/blob/firebase/package.json - 9以上での初期設定方法を行う 参考サイト：lupas.medium.com/firebase-9-beta-nuxt-js-981cf3dac910

• 
  @user-ul1ny2kr8s2 жыл бұрын

  @@youtube2603 返信ありがとうございます！試してみます！

• 
  @episodepal2 жыл бұрын

  わかりやすい動画をありがとうございます。計算機を最後まで作成したのですが、最後の動作確認ができませんでした。 こんなエラーが出ます。 Error: Actions may not have an undefined "type" property. You may have misspelled an action type string constant. onClick /App.jsx:19 16 | <div className="number"> 17 | <div className="upper"> 18 | <Button text={"7"} onClick={() => onNumberClick(7)} /> > 19 | <Button text={"8"} onClick={() => onNumberClick(8)} /> | ^ 20 | <Button text={"9"} onClick={() => onNumberClick(9)} /> 21 | </div> 22 | <div className="middle"> 自分で確認をしたいのですが、Githubとか、どこかにソースはありますか？

• 
  @youtube26032 жыл бұрын

  こちらこそ動画をご視聴いただきありがとうございます！ 以下、ソースコードのリンク先となりますので、ぜひ覗いてみてください！ github.com/Naoya-abe/calculator-app

• 
  @episodepal2 жыл бұрын

  @@youtube2603 GITリンクありがとうございました。無事動作しました！

• 
  @youtube26032 жыл бұрын

  おめでとうございます👏 今後も一緒に頑張っていきましょう！

• 
  @youtube26032 жыл бұрын

  actionやreducerって何？？という方は、先に以下の動画をご視聴ください！ 本動画の理解度が2倍になること間違いなしです！！ ↓【Redux入門】#1 ~Reduxの理解~↓ kzread.info/dash/bejne/fqGo1Jqhnbvcmpc.html

• 
  @abctoxyz772 жыл бұрын

  以前react.Fragmentではなく空タグ(<></>)で囲って返しているコードを見かけましたが、両者で違いはあるのでしょうか？

• 
  @youtube26032 жыл бұрын

  コメントありがとうございます！ React.Fragmentの短縮記法が<></>になりますので、両者で大きな違いはありません。 以下、参考ページになりますので、ぜひご覧ください ja.reactjs.org/docs/fragments.html#short-syntax

• 
  @futoshi75022 жыл бұрын

  いつも動画配信ありがとうございます。 銀行に例えた図がとてもわかりやすく助かりました ! 似たようなものを検索して探してみます。 何度も見て流れを理解していきたいと思います。 ありがとうございます。

• 
  @youtube26032 жыл бұрын

  コメントありがとうございます！ そう言っていただきとても嬉しいです！ 解説している技術は異なるのですが、useReducerについて英語版での解説動画の中に、同様の銀行の例えがありましたので共有です。kzread.info/dash/bejne/dqGs3KqDY8_XZrg.html