誰でも理解できるGraphQL入門！REST APIとの違いを分かりやすく解説【ハンズオン形式】
Вставка
- Опубліковано 7 лют 2025
- #入門 #GraphQL #API #REST API #nodejs #react
【さらに詳しく学びたい方へ。Udemy90%割引クーポン発行中🚀】
↓↓↓↓↓
shincode.info/2...
＼ShinCode_Camp開校しました／
プログラミング講座＆副業・起業＆就職・転職が学べるプラットフォーム🚀
🎁月額2500円で全講座が見放題
🎁分からない箇所は質問し放題
🎁7日間無料キャンペーン実施中
🎁コミュニティ機能付き
🎁いつでも解約可能etc...
↓↓↓↓↓
code-s-school-...
-----------------------------------------------------------------------------------------------------------------------------
【この動画を視聴するメリット】
・GraphQLの概観が理解できる
・GraphQLでAPI構築ができる
・Reactを使ってGraphQLで実装したAPIの叩き方が学べる
・Apollo Clientライブラリの使い方が学べる
【信頼性】
・Udemy講師
・講師レビュー評価94.6%
・Udemy受講生延べ300人突破
・Webアプリ/サイト開発数：200以上
★チャンネル登録はこちらから★
/ @programming_tutorial_...
★今回のソースコード★
（フロント）github.com/Shi...
（バック）github.com/Shi...
★運営者SNS★
Twitter： / shin_engineer
★この動画で使用している機材★
キーボード(Keychron K6 赤軸)：amzn.to/3F4zca5
マウス(Logicool G ロジクール G ゲーミングマウス)：amzn.to/3DZaaYB
マイク(サンワダイレクト USBマイク PCマイク)：amzn.to/30AVwJF
マイクスタンド(Luling Arts マイクスタンド マイクアーム スタンド)：
amzn.to/3se5onZ
※アフィリエイトリンクになります。
22:00 先生が急にサイヤ人になって笑ってしまいました。いつもありがとうございます。
GraphQLはブラウザにグラフを描画するAPIなのかなと勝手に思っていましたｗチュートリアル動きました。ありがとうございました！
参考になりました！
1:17 GraphQL とは
API, クエリ言語について
7:08 REST API との違いやメリット
7:55 GraphQL のエンドポイント
11:14 メリットまとめ
12:06 ハンズオン
16:15 クエリ作成
18:49 クエリの型や resolver について
22:50 vite を使ってセットアップ
25:39 apollo/clinet をインストール
28:29 アプロクライアントのキャッシュ設定
34:52 ハンズオン後
GraphQL いろいろ調べても良く分からなかったのが、一気に解決。
ありがとうございます。
めちゃくちゃ分かりやすいです！！！
フロントエンドの解説から髪型が爆発したのが面白かったです
結構見た目気にしないタイプなので、、すみません💦
graphql気になってましたがこんなに便利だとは！
とても分かりやすいです。ありがとうございます。
わかりやすい！！！
めちゃくちゃ分かりやすかったです！またGraphQLの動画あげていただけると嬉しいです！🤩
今現在GraphQLを用いたバックエンドAPI構築のUdemy講座を作成中です。
UA-camでもいくつか挙げる予定なのでしばらくお待ちくださいませ。
ありがとうございます。
わかりやすかったです。
ものすごく分かりやすいですね。
Udemyでも購入させて頂きました。ありがとうございました。
ニッケさん、ご視聴ありがとうございます。
ご購入ありがとうございます。GraphQLの学習がんばってくださいね。
めちゃくちゃ便利ですね！！
今回も非常に勉強になりました！
ありがとうございました。
ShinさんのあるUdemy講座のように、フロントをAWS Amplify で、バックエンドをAWS App Runner で、デプロイできないものか試してみたのですが、できませんでした。。そんなフロントとバックなのでもしかして同じでは、、と思いやってみましたが。。
難しいのですね。。
GraphQLを使った場合のデプロイはVercelとかAppSyncとかになるんですかね～。あまり僕もそこらへんの情報に詳しくないので、僕も勉強してみますね。
@@programming_tutorial_youtube すみません、ありがとうございます！現状依然Shinさんコンテンツに頼りっぱなしの超駆け出しエンジニアです。何卒、よろしくお願いいたします。
Prod環境ではExpressやApolloよりもプロバイダーのライブラリーをおすすめします（例aws-amplify/amplify-js）
16:30 この記号は、バッククォートじゃないですか？
いろんな動画を拝見しています！すごくわかりやすくて勉強になります。躓くことが少なくなりました。
こういう先端の技術情報ってどうやって仕入れるのでしょうか？海外サイトなどにアンテナを張ってるのでしょうか？知るきっかけを教えていただけると嬉しいです～！
ありがとうございます！
海外の動画やサイトを覗いてますね。あとは普通に検索で調べます。
初心者向けの動画にしては、
追加変更した箇所を見やすく表示されてないため、
画面に映らない間に変更された事に気づけずに、
まだ同じような動作を確認できていません。
30:00くらいの所で止まっています。
私が物わかりが悪いだけなのですが、
リストの全文を確認できるように表示してもらえると、
助かります。
本当の初心者の私には、
かなり難しいです。
申し訳ございませんでした。
もう少し分かりやすく解説ができるように、今後改善していこうと思います。
動画の方をみていただきまして、ありがとうございました。GraphQLを分かりやすく学びたい場合は、ブログ記事もしくはドキュメントの方を覗いていただけると良いかもしれません。
理解の手助けになれずに申し訳ございませんでした。
@@programming_tutorial_youtube ソースコードのリンクの方を確認して、修正して、同じ動作になることが確認できました。
ありがとうございました。
とても参考になりました！様々な有益な発信、ありがとうございます！
ひとつお尋ねしたいのですが、バッククウォート内の文字色をハイライトするのは拡張機能によるものでしょうか？通常だとバッククウォート内は一色で表示されてしまい判別しづらいので…😓
VSCode拡張機能で解決しました！backquotes highlightでググって逆に時間かかってました😅お騒がせしました！今後とも配信を楽しみにしております♪
11:12 GraphQLのメリット
わかりやすかったです。ありがとうございました。