강의

멘토링

로드맵

Inflearn brand logo image
Programming

/

Database

GraphQL完全征服(キオスクを作って学ぶフルスタックコース) - [2024部分リニューアル]

次世代API制御技術であるGraphQLの基本と高度な使い方、そしてGraphQLで作っていく仮想のキオスクサービスを通じて、実際のプロジェクト体験を学びます。 コースは、2024年2月現在の最新バージョンであるapollo-server v4でコースを部分的に更新しました。

  • Indie Coder
GraphQL
Svelte
MongoDB
Apollo

学習した受講者のレビュー

こんなことが学べます

  • Graphql

  • Apollo

  • MongoDB

  • Svelte

  • NodeJs

  • nodeJsファイルのアップロード

  • トークンベースの認証方法

  • フルスタック(ウェブバック&ウェブフロント&)

  • 仮想キオスクサービスの開発

フロントエンド、バックエンドとも実装可能!
GraphQLの実践を体験してください💪


自信の最高の秘訣は
何かを最初から最後まで作ってみることです。
Webの基礎を少しでも学んだら
今回の機会に様々な技術で一歩進んでみてください!

GraphQL完全征服👑

REST APIを補完、発展させて作られた次世代API制御技術GraphQL。 GraphQLの基礎から高級、完結したサービスまで!この講義では、バックエンド、フロントエンド、展開までのすべてのコースを学ぶことができます。一緒にスマートメニューを作ってみますか?

簡単に理解できるように準備した講座内容

#1.
GraphQLの
基本文法と高度な文法

GraphQLに必要な文法をすべて漸次学習することになります。講義の理論部分は、イメージ、アニメーションなどを活用し、できるだけ簡単に理解できるように準備しました。

#2.
実際のプロジェクト
(スマートメニュー)実装

基本的な使い方を学んだら、次は実際のプロジェクトの実装でしょうか?仮想のキオスクサービスであるスマートメニューをGraphQlを利用して作成します。バックエンドサーバーからフロントエンドまで、すべてGraphQLを中心に実装します。

#3.
様々な問題の
解決策

コードをたどりながらデータを読み書きすることを超えて、サービスを作成するときに発生する可能性のあるさまざまな問題と解決策を学びます。 Apolloキャッシュを使用する際に発生するデータ整合性の問題、NodeJSからファイルをアップロードする際の注意点、サービスに必要な認証などを学ぶことができます。

#4.
より効率的な
フロントエンド開発方法

最近ホットに浮かんでいるSvelteというフレームワークを利用して、より効率的にフロントエンド開発する方法もお知らせします。これにより、GraphQLの基礎知識はもちろん、1つのサービスのバックエンド、フロントエンド、デプロイまで体験できるようになります。


こんな方におすすめですよ🙋‍♀️

GraphQLに興味があり、入門を悩む方

Webバックエンド、フロントエンドフルスタックを体験したい方

Apollo、Svelteなど最新技術で作るウェブが気になる方

HTML、Javascriptの基礎を身につけた後に何か実装したい方


実装プロジェクトのプレビュー👀

無限スクロールで実装されたメニュー表示画面

ログイン画面

メニュー登録画面

ご注文後のアラーム画面

講義参考資料📍

  • 講義に使用されているパッケージやソースコードなどのリンクについては、「セクション2 GraphQL基本 - 講義資料の紹介」を参照してください。

参考講義📚


予想される質問 Q&A 💬

Q. GraphQLの理論講義ですか?

基本的な使い方から実際のプロジェクトに適用する方法のすべてを学びます。プロジェクトでは、バックエンドとフロントエンドの両方でGraphQLを実装する方法が用意されています。

Q.フロントエンドの場合、Svelteを事前に学習する必要がありますか?

講義の途中で簡単にSvelteの基本的な使い方を用意しました。準備した内容だけを知り、進んでいけば十分に最後まで学習可能だと思います。

Q.開発環境はどうなりますか?

Mac、Windows、LinuxなどのnodeJsをインストールできるどのPCでも、開発環境に必要なプログラムをインストールして進めることができます。


知識共有者の紹介✒️

2000年度半ばから本格的にウェブ開発を始め、現在までフリーランスの開発者として活動しています。約5年間、Amplix BIソリューションの実務者教育を進め、開発を支援し、新しい技術を効率的に伝えることに多くの経験と悩みを持ってきました。

現在は、開発業務とともに、開発者に役立つWeb関連分野の新技術を探し、講座や本を通じて共有しています。

  • 県)フリーランサー
  • 前)(株)ビーズプラグ戦略ソリューション事業部チーム長
  • 前) (株)ファーニーモンキースウィニストリーサービス開発チーム長

email: freeseamew@gmail.com

blog: https://medium.com/freeseamew

出版書


こんな方に
おすすめです

学習対象は
誰でしょう?

  • javascriptの基礎を学ぶ

  • Webサービスを最初から最後まで一度作りたい方

  • Webバックエンドエンジニア

  • Webフロントエンドエンジニア

前提知識、
必要でしょうか?

  • html

  • javascript

こんにちは
です。

2,417

受講生

56

受講レビュー

84

回答

4.8

講座評価

5

講座

2000년도 중반부터 본격적으로 웹개발을 시작하여 현재까지 프리랜서 개발자로 활동하고 있습니다. 약5년간 Amplix BI 솔루션 실무자 교육을 진행하고 개발을 지원하며 새로운 기술을 효율적으로 전달하는 것에 대한 많은 경험과 고민을 했습니다. 

현재는 개발 업무와 함께 개발자들에게 도움이 될만한 웹관련 분야의 새로운 기술을 찾고 강좌와 책을 통해 공유하고 있습니다. 

 

현) 프리랜서

전) (주) 비즈플러그 전략솔루션 사업부 팀장

전) (주) 퍼니몽키스 위니스토리 서비스 개발 팀장

youtube: https://www.youtube.com/channel/UC3cJspjF4TRTyD_RS0azeaw 

email: freeseamew@gmail.com

blog1: https://medium.com/freeseamew

blog2: https://dev.to/freeseamew

 

강좌 목록

출간도서

yes24, 교보문고, 알라딘

 

 

 

カリキュラム

全体

72件 ∙ (10時間 28分)

講座掲載日: 
最終更新日: 

受講レビュー

全体

6件

4.5

6件の受講レビュー

  • wndtlr10248980님의 프로필 이미지
    wndtlr10248980

    受講レビュー 5

    平均評価 4.4

    3

    100% 受講後に作成

    Overall, the lecture time is short, so there is no burden, and the answer to questions is fast. The disadvantage is... They explain by showing the already written code in PPT format (If you click, the existing code flies away and the code is added smoothly) Even without that, since I listen to the explanation while looking at the unfamiliar code structure in PPT format, it is hard to understand the flow of the code and follow along. You may think, "Since there is a lecture code on GitHub for this part, why don't you just copy and paste it?" But if you intended to do that, you should have saved the code by branching GitHub by lecture section part.. The GitHub lecture code was already completed code, and it was very tiring to compare these codes with the lecture I am currently listening to and copy and paste them.. I listened to the server part lecture at the beginning of the lecture and ran passionately for four hours without stopping, but when I entered the front part, I thought that the tuition fee was too expensive compared to the lecture quality, but I thought it was because I got really good answers when I asked questions, so I let it go. Lastly, since it is not a seminar like a technology tech, I think there will be more people who dislike this kind of PPT-style lecture than who like it. Furthermore, the code is not that complicated or long, so I think it would have been better if you had added explanations while typing the code together. Following the lecture with PPT, it really ㅠㅠ is so tiring for the listener. I just clicked the “I watched” button for the latter half of the lecture and skipped over it..

    • viewee님의 프로필 이미지
      viewee

      受講レビュー 3

      平均評価 3.7

      4

      100% 受講後に作成

      I completed the course. I took the course because I wanted to create a full-stack service after learning the basics of Javascript, HTML, and CSS. There are also React and Vue, but Svelte is easy and hot, so I chose this library. This course covered the entire process of creating a smart menu service from scratch. The explanation was also very detailed, so I understood it well. /// What was disappointing was that I kept getting stuck during the course. I made typos when I wrote the code, but there were many important typos in the lecture videos, so I had problems when I just watched the lecture videos and followed along. There were also occasional typos in the example code, so whenever I ran the server and tested it, I was often confused as to whether I made a mistake or there was a typo in the lecture content. (I don't understand how other people who wrote course reviews could proceed with the course without asking questions on the bulletin board.. Didn't they complete the course?) The environment in which the course was conducted was MacOS, and I was in a Windows environment, so the server execution command was not meteor but meteor.bat, which was different from the course. Or, there were problems such as the course proceeding differently because the course and the current meteor version were different. Still, when I asked questions about these problems on the community bulletin board, the teacher answered them well within a day or two, so I was able to continue the course. // From Section 4, which creates a SMART MENU, it was okay at first, but as the code got bigger and bigger, it was very important to compare the differences with the previous code when a bug occurred, so I felt the need for version control, studied git separately, and applied it while listening. As I listened to the class while creating a branch every time the code of each section ended without a bug, and committing every time a small chapter in the section ended, I was able to quickly deal with bugs that occurred after Sections 12 and 13. I recommend that beginners like me study git separately and use it in class. Also, in class, regarding debugging, if there were more parts where you check the terminal window for the backend and the console window for the frontend, wouldn't it have been better for beginners like me? Since this is basic content, it doesn't seem to be included in the flow of the class. However, I thought it would be good if you made a brief mention of git or debugging methods in class. // < Subtitle Coverage Issue > There were videos with subtitles in the middle of the lecture, but when you renew the subtitles, please make sure they are positioned above the play bar. The subtitles are covered every time you stop and watch. ㅠ // While I was teaching, I diligently reported the parts that I was stuck on and minor typos, etc., and since the teacher said that he will be renewing the course in March 2023 to reflect these parts, I think those who take the class after that will be able to take the class more comfortably. // After completing the class, - I was able to learn about the overall operation of GraphQL and how to operate it on the Apollo server. - How to build a front-end that connects to the back-end easily and quickly using Svelte. I listened hard and understood, but I think I need to do the class two or three times to become more familiar with the structure and operation. Personally, I think I need to study more about creating a front-end using Svelte, so I think I need to do some additional learning. I'm a beginner who only watched videos of react and vue, so I don't know much, but when I made a service using svelte, I felt that svelte was easy and intuitive. There's a svelte-only integrated framework called svelteKit, so I wish the teacher would make a lecture on this part too. ㅎㅎ.. The lecture content is really informative, so if you want to listen, please listen.

      • holocoding
        知識共有者

        I'm glad you finished the lecture safely. I've improved the typos and problematic parts by commenting them on the video. Thank you for pointing this out. And I'll try to make sveltekit as soon as possible. Congratulations again on completing the course. Thank you.

    • sycheon3883님의 프로필 이미지
      sycheon3883

      受講レビュー 2

      平均評価 5.0

      5

      80% 受講後に作成

      The composition is so good

      • holocoding
        知識共有者

        I'm glad you like the class. I will continue to work hard to prepare good lectures in the future. :)

    • lsmin01님의 프로필 이미지
      lsmin01

      受講レビュー 1

      平均評価 5.0

      5

      100% 受講後に作成

      Thank you for the great lecture. I got used to developing frontend/backed based on graphql, and the cache, link, file upload, and authentication parts were also very helpful. It's my first time with meteor, but I found it useful after following along until the final deployment. I look forward to good content in the future.

      • holocoding
        知識共有者

        Thank you for your review. I'm glad you found the content helpful. Have fun coding :)

    • leaguematter7718님의 프로필 이미지
      leaguematter7718

      受講レビュー 5

      平均評価 4.6

      5

      31% 受講後に作成

      ¥6,528

      Indie Coderの他の講座

      知識共有者の他の講座を見てみましょう!

      似ている講座

      同じ分野の他の講座を見てみましょう!