강의

멘토링

로드맵

BEST
Programming

/

Front-end

Svelte.js SPA映画検索プロジェクト

SvelteベースのSPAムービー検索サイトを作成して配布します!

  • HEROPY
Svelte
SPA

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

こんなことが学べます

  • Svelte.jsのSPA(シングルページアプリケーション)を設定できます!

  • SPAのメリットを活かしてデメリットを補うことができますよ!

  • Serverless Functionsを使って簡単にバックエンドAPIを設定できます!

スベルト活用、自分で作るSPAの例として!

他のSvelte講義も参考にしてください!
「Svelte.js Core API 完全ガイド」
「Svelte.js入門ガイド」


スタートしながら!

Svelte.jsを使ってシングルページアプリケーション(SPA)の例を作成しましょう!
ルーターを使用してページを区別し、トランジション効果やスクロールリカバリなど、さまざまな機能を適用できます。

負担のない別途のサーバー構築なしでSF(サーバーレス関数)を使用し、
すばやくバックエンドAPIを作成して簡単に管理できます。
SPAの欠点であるセキュリティ問題をすばやく簡単に解決しましょう!

Snowpackは最新のビルドツールで、
開発ビルド時間を大幅に短縮できます。
より快適な環境で開発できますよ!

NetlifyのCD(継続的な配布)を使用してください。
GitHubリポジトリにアップロードするとすぐにサイトが自動的に展開されます。
サイトの配布に時間がかかる必要はありません!


参考にしてください!

今回の講義は選手知識が必要な講義ですが、できるだけ簡単に解いて説明しています。
先にリリースした「 Svelte.js Core API完全ガイド」でSvelte Basicを刻んだ後
本講義を聞くとさらに良いです。


OMDb APIを活用して、実際の映画を検索できるSPAサイトを作成しましょう!
Netlify Serverless FunctionsでバックエンドAPIを設定し、
API Key インプレッションなしでユーザーに検索機能を提供できます。

GitHub Repo: https://github.com/HeropCode/Svelte-Movie-app
Demo: https://competent-cori-258206.netlify.app


Specs

Svelte
Snowpack
SPA Router
OMDb API
Netlify Hosting with GitHub(CD)
Netlify Serverless Functions


Packages

snowpack
@snowpack/plugin-svelte
@snowpack/plugin-dotenv
@snowpack/plugin-sass
@snowpack/plugin-optimize
@snowpack/plugin-babel
babel-plugin-transform-remove-console
svelte
svelte-spa-router
autoprefixer
postcss
lodash
axios
qs
netlify-cli


質問があれば?

受講中に質問がある場合は、質問&回答ページを使用してください。
できるだけ早く回答させていただきます。

受講が悩んだり、他の受講前に不思議な部分があれば、
受講前のお問い合わせページをご利用ください。


Svelteドキュメント。

Svelte APIのハングルドキュメントが必要な場合は、
「Svelte.js 完全ガイド」の投稿をご覧ください。
https://heropy.blog/2019/09/29/svelte


お知らせ!

20 20.12.24
次のパーツを追加しました!
完全なレッスンの例を始める前にぜひご覧ください!
- 2-1.レッスンの例モジュールのバージョンを一致させる

こんな方に
おすすめです

学習対象は
誰でしょう?

  • Svelte.jsの活用例が必要な方!

  • SPAサイト制作をご準備される方!

  • Netlify Serverless Functionsを体験したい方!

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

  • HTML

  • CSS(SCSS)

  • JS

  • Svelte

こんにちは
です。

4,190

受講生

221

受講レビュー

162

回答

4.9

講座評価

3

講座

   

안녕하세요~ 반갑습니다!
저는 현재 작은 스타트업에서 기업 관리 솔루션을 개발하고 있는 프론트엔드 개발자 박영웅입니다.

HEROPY 기술 블로그를 운영하고 있고,
그 외 기업 출강이나 온/오프라인 강의 활동도 하고 있습니다.

Blog: https://heropy.blog
Youtube: https://www.youtube.com/channel/UCcjhMpoaNvyy0StN9KgtF6w

Email: thesecon@gmail.com

    

カリキュラム

全体

49件 ∙ (7時間 46分)

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

受講レビュー

全体

30件

5.0

30件の受講レビュー

  • shk72301233님의 프로필 이미지
    shk72301233

    受講レビュー 7

    平均評価 5.0

    5

    100% 受講後に作成

    I completed the movie search project using Svelte :) Actually, I bought this course and watched only the beginning part, but it's been quite a while since I've been preparing to study front-end development in earnest after quitting my job, so I looked it up again. I first got to know the instructor through the YouTube Svelte course, and the explanations were simple and clear, and I guess... since he was a designer, he was really excellent at making it so that anyone could understand even if they had little basic knowledge, as long as they followed the explanations. I compared this course with the movie search site example made with Vue.js in the Fast Campus Super Gap package, and I could see that the amount of code was greatly reduced, and since the complex store concept of Vue was completely eliminated, I think I could grasp the big picture of the project design more clearly. And Svelte seems to be a framework that is developing rapidly day by day. Daum's home screen is already using Svelte, so I think it's more promising in the future because it has no shortcomings that can be used in practice. There are still a lot of react and vue, but I see the word svelte coming out little by little in the job market. ㅎㅎ If you want to become a front-end developer in the future, I highly recommend not only this lecture, but also instructor Park Young-woong's svelte introduction and complete guide lectures :D Thank you.

    • mysend님의 프로필 이미지
      mysend

      受講レビュー 4

      平均評価 5.0

      5

      100% 受講後に作成

      I was very interested in the front end, and the progression was so clean that it stuck in my head, and above all, I enjoyed it!

      • heropy
        知識共有者

        Thank you for liking my lecture~ I'm glad you enjoyed it. I hope the lecture was helpful~ Thank you.😉

    • mdhyunjin님의 프로필 이미지
      mdhyunjin

      受講レビュー 4

      平均評価 5.0

      5

      100% 受講後に作成

      I learned a lot from the wealth of information that was actually helpful.

      • heropy
        知識共有者

        I'm glad my lecture was helpful! Thank you so much for your kind words. Have a nice week~😊

    • hanmg님의 프로필 이미지
      hanmg

      受講レビュー 10

      平均評価 4.9

      5

      100% 受講後に作成

      Thank you for the great lecture. I was able to get a lot of information about not only svelte but also netlify, which is necessary for practical deployment.

      • heropy
        知識共有者

        I'm glad that my lecture was helpful to HAN_MG. I hope I can come back with a better lecture~😆 Thank you.

    • the27920609님의 프로필 이미지
      the27920609

      受講レビュー 13

      平均評価 5.0

      5

      100% 受講後に作成

      It's the best. It's a very clean lecture structure.

      • heropy
        知識共有者

        Hi Jon~ Thank you for the wonderful and encouraging class review~👍 Have a nice day!🍀

    期間限定セール、あと6日日で終了

    ¥25

    23%

    ¥5,108

    HEROPYの他の講座

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

    似ている講座

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