강의

멘토링

로드맵

BEST
Programming

/

Front-end

Svelte.js [Core API] 完全ガイド

21時間を超える分量の最高のSvelte.js講義!

  • HEROPY
Svelte
Rollup
Sortable

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

こんなことが学べます

  • 最新のSvelte.jsのCore APIを基礎からしっかり学習します!

  • JavaScriptデータの不変性(Immutable)と可変性(Mutable)について理解できます!

  • JavaScriptの非同期について理解し、いくつかの非同期パターンを学びましょう!

  • Rollup.jsの基本的な構成を理解し、追加の構成で実際のプロジェクトを作成しましょう!

  • Sortable.jsをコアモジュールとして'Trelloクローンアプリ'を作成し、Netlifyサービスに参加し、プロジェクトを継続的に配布(CD)することができます!

ホットな最新のJavaScript FEフレームワーク、
スベルト(Svelte.js)の魅力にすっかり浸ってみてください!

他のSvelte講義も参考にしてください!
「Svelte.js SPA映画検索プロジェクト」
「Svelte.js入門ガイド」


スタートしながら!

入門者のためのより簡単な例と詳細な説明、
中級者以上のためのSvelte APIの様々なパターンや新しい文法など、
Svelteを学ぶ誰にでも役立つ内容で構成しました!

ホームページの例よりも理解しやすくするため、
ほとんどのパートの例を頭を絞り、自分で準備しました!

講義をすぐに受講しなくても、
プレビューを通してSvelteの基本概念を味わえます!
プレビューの最後に、単純なTodoの例も作成します。
React、Vueよりも簡単で便利なフロントエンドフレームワークであることがわかりますよ〜
そして全体のカリキュラムもぜひご覧ください!

昨年(2019)、今のSvelteを持つ3バージョンが初めて公式リリースされました。
今やっと1年が過ぎたとても暖かくて興味深く魅力的なフレームワークです〜
必須学習!


主な例!

Svelte Core APIの学習が終わったら、Trelloサービスのクローンアプリを作成しましょう!
Rollupバンドラに基づいてプロジェクトを整理し、多くの技術を導入します(SCSSも学習します)
最新のSnowpackビルドツールでエスカレートしたバージョンも新たに追加しました!
Netlifyサービスを使用して、GitHubリポジトリに基づいて継続的な展開(Continuous Deployment)も進めます〜
詳しくはカリキュラムをご覧ください。

GitHub Repo: https://github.com/HeropCode/Svelte-Trello-app
Snowpack GitHub Repo: https://github.com/HeropCode/Svelte-Trello-app-Snowpack
Demo: https://boring-agnesi-165a0d.netlify.app


参考にしてください!

序盤、いくつかの講義が過ぎると音質が良くなります。
もっと高価で良いマイクロを変えました〜


質問があれば?

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

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


Svelteドキュメント。

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


お知らせ!

20 20.10.22
講義のオープン準備を終えた状態で最新のSvelteバージョンの技術がいくつか追加されました。
すぐに更新します!

20 20.11.03
「Svelte.js Perfect Guide(Renew)」で投稿を更新しました。
ビデオ講義と一緒に見てください。

20 20.11.08
このレッスンに以下のパートを追加しました!
- 7-4 。キーブロック
- 11-4 。スロット転送(Forwarding)
- 18-1 。 Snowpackとは?
- 18-2 。 SnowpackベースのSvelteテンプレートのインストールと構成について
- 19-1 。メインディレクトリのコピーとHMRの適用
- 19-2 。コアモジュールの取り付けと構成
- 19-3 。 SCSSとSvelte Preprocessの設定
- 19-4 。製品モードのログ削除の設定
- 19-5 。コード最適化(最小化)とパスエイリアスの設定
- 19-6 。 GitHubリポジトリの作成とプロジェクト Push
- 19-7 。 Netlifyによる継続的な展開

20 20.12.24
このレクチャーに以下のパートを追加しました!
「Trelloクローンアプリを作成する」レッスンの例を始める前に、ぜひご覧ください。
- 15-1 。レッスンの例モジュールのバージョンを一致させる

20 20.12.30
このレクチャーに以下のパートを追加しました!
- 11-5 。 $$slots

Svelte.js, Frontend, Framework, Core API, Sortable,js Rollup.js, React, Vue.js, Angular, リアクト, ビュー, アンギュラ

こんな方に
おすすめです

学習対象は
誰でしょう?

  • 新しい最新のWebフロントエンドフレームワークを体験してください!

  • フロントエンド開発経験が足りない方!

  • Svelte.jsの公式ドキュメントでは、学習が難しい人や一部理解できない方!

  • 説明が多くても大丈夫な方!

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

  • HTML

  • CSS

  • JS

こんにちは
です。

4,190

受講生

221

受講レビュー

162

回答

4.9

講座評価

3

講座

   

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

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

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

Email: thesecon@gmail.com

    

カリキュラム

全体

116件 ∙ (21時間 18分)

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

受講レビュー

全体

38件

4.9

38件の受講レビュー

  • madstone dev님의 프로필 이미지
    madstone dev

    受講レビュー 1

    平均評価 5.0

    5

    99% 受講後に作成

    하나의 개념을 설명하실때 부가적인 활용방법까지 엄청 꼼꼼하게 알려주시기 때문에 일반적으로 궁금할만한 사항들 대부분이 강의에 포함되어있다고 보시면됩니다. 또 es6의 장점을 최대한 활용해서 작성하시기 때문에 강의가 끝날 때쯤엔 깔끔하고 간결한코드의 습관도 기를 수 있습니다. 프레임워크 경험이없는분들이 듣기에도 아주 좋은 강의입니다. 다음 강의가 기대됩니다 ㅎㅎ

    • HEROPY
      知識共有者

      좋은 평가 남겨주셔서 정말 감사합니다. :D 완강 축하드리고, 이 강의가 madstone dev님께 많은 도움이 되었길 진심으로 바랍니다! 다음 강의도 열심히 준비해서 업로드하고 공지하겠습니다. 즐거운 하루 보내세요~ 감사합니다^^

  • Taylor님의 프로필 이미지
    Taylor

    受講レビュー 2

    平均評価 5.0

    5

    28% 受講後に作成

    최근에 vue.js를 학습하는 과정에서 svelte 가 주목받고 있다는 정보를 들었습니다. 그래서 흥미를 가지게 되었고 구매를 하게 되었습니다. 아직 완강을 하진 못했지만 중간 소감을 적는다면 참 성의있게 강의를 준비하셨다는 느낌을 받습니다. 설계해주신 커리큘럼을 보니 이 강의에 대한 애착과 고민이 느껴집니다. 코멘트 적어주신 신규 기능에 대한 업데이트도 기다리고 있겠습니다

    • HEROPY
      知識共有者

      강의를 만든 보람이 느껴지는 감동적인 평가 감사합니다 :) 이 강의가 SIMONS 님께 많은 도움이 되면 정말 좋겠습니다. 신규 기능도 빠르게 업데이트하고 공지하겠습니다. 기분 좋은 하루 보내세요~

  • 소라연님의 프로필 이미지
    소라연

    受講レビュー 81

    平均評価 5.0

    5

    98% 受講後に作成

    샘플강의 듣고 반해서 수강합니다^^

    • HEROPY
      知識共有者

      좋은 평가 감사합니다^^ 다른 파트도 마음에 드셨으면 좋겠습니다! 즐거운 하루 보내세요~

    • 다른 파트도 완전 마음에 들어요! 특히 Trello 예제는 너무 재미있어서 아껴듣는중입니다^^

    • HEROPY
      知識共有者

      다른 파트도 마음에 드셔서 다행입니다 :D Trello 예제도 재미있으시다니 정말로 기쁘구요ㅜㅠ Svelte.js가 소라연님의 웹 개발에 많은 도움이 되길 진심으로 바랍니다! 상쾌하고 행복한 주말 보내세요~

    • 즐겁게 완강 했습니다. 감사합니다. 강의 정말 최고에요! 다음 강의도 기대하겠습니다. 강사님도 즐거운 주말 보내세요~

    • HEROPY
      知識共有者

      강의 시간이 짧지만은 않은데 완강하셨다니 진심으로 축하드려요 :D 다음 강의도 빠르게 열심히 준비해서 공지하겠습니다! 소라연 님도 즐거운 한 주 보내세요^^

  • HAN_MG님의 프로필 이미지
    HAN_MG

    受講レビュー 10

    平均評価 4.9

    5

    91% 受講後に作成

    친절히 알려주셔서 재미있게 Svelte + @(용어, scss 등)을 배울 수 있었습니다.

    • HEROPY
      知識共有者

      제 강의가 도움이 되셨길 진심으로 바라요~ 감사합니다.👍

  • Truestar님의 프로필 이미지
    Truestar

    受講レビュー 26

    平均評価 4.9

    5

    100% 受講後に作成

    제가 리뷰는 잘 안하는 편인데 일단 강의 리딩 실력이 너무 출중하셔서 어떤 강의를 하셔도 주저없이 들을 것 같습니다. 강의 배속을 1.5 로 맞춰 재생하는데 그럼에도 발음이 좋은신 탓인지 내용이 쏙쏙 들어옵니다 중반정도 듣고있는데, 리뷰 남겨요! 0. 질의 응답을 괭장히 세세하게 설명해주십니다 1. 목차와 항목 구분이 강의내용과 확실히 매칭됩니다 2. 정보전달방식에 프레임이 있어, 매 강의 특정시점 마다 대략적으로 이런내용을 다루는구나 라고 짐작이 가능합니다. 3. 자주쓰이는 패턴 예시를 두어 응용하기가 좋습니다(유틸함수 쓰는 느낌) 4. 무엇보다 좋다고 생각이 드는부분은, 매 영상초반에 전달하는 전,후 맥락에 대한 설명을 가볍게 설명해주시는데 이 때문에 흐름을 파악하기 매우좋습니다 (때에 따라서 다소 지루한 감이 있을 순 있지만, 배속 기능이 있기에 상관없다 생각합니다. 저의 경우는 오히려 전체를 파악하기 좋았던 것 같습니다) 5. 골이 깊은 개념을 누구나 알기 쉽게 풀어서 설명합니다. 6. 각 주제를 단계적이고, 디테일 하고, 많은 예시를 두어 깊게 다룹니다. 몇 일간 장점을 정리해서 남길 정도로 추천합니다. 무엇보다.. 혜자스러운 강의 분량에 감탄을 했습니다.

    • HEROPY
      知識共有者

      앗! Truestar 님 안녕하세요. '질문 & 답변'에서 글 정리하시는 데 많은 공이 들어간다고 답변해주신 거 같은데, 이렇게 장문의 멋지고 깔끔한 수강평을 남겨주시니 정말 감동적입니다ㅠㅜ 남은 중반 이후 강의가 Truestar 님께 실망을 안겨드리지 않았으면 좋겠고, 정말 도움이 많이 되시길 희망합니다!! 그럼 좋은 밤 되시고, 즐겁고 행복한 한 주 보내시길 바라요~👍 멋진 수강평 진심으로 감사드립니다~😭

    • 아이고.. 제가 가 오해할만한 얘길 남긴건가요?^^; 전 그냥 제가 강의노트를 책쓰듯 하는 버릇이 있어서 공이 많이 들어간다는 소릴 짧게 남겨서 오해가 있으셨네요.. 강의 정말 좋아요.. `고퀄`이 어울리는 강의 입니다. 박리다매 가 떠오르는건 저만 그런건가요.. 업데이트도 계속 해주셔서 감사할 따름이지요.. 이 강의 만드시느라 든 노고가 느껴지는 강의입니다 기초 끝내고 응용편 에서도 잘 부탁드립니다!

期間限定セール、あと19:17:13日で終了

¥40,420

25%

¥6,542

HEROPYの他の講座

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

似ている講座

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