강의

멘토링

로드맵

Inflearn brand logo image
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,185

受講生

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件の受講レビュー

  • hanbin85705100님의 프로필 이미지
    hanbin85705100

    受講レビュー 1

    平均評価 5.0

    5

    99% 受講後に作成

    When explaining a concept, you will be very meticulous in explaining additional usage methods, so you can see that most of the things you are generally curious about are included in the lecture. Also, since you write by making the most of the advantages of ES6, you will be able to develop the habit of writing clean and concise code by the end of the lecture. This is a very good lecture for those who do not have framework experience. I look forward to the next lecture ㅎㅎ

    • heropy
      知識共有者

      Thank you so much for your great review. :D Congratulations on completing the course, and I sincerely hope that this lecture was helpful to madstone dev! I will prepare the next lecture diligently and upload it and announce it. Have a nice day~ Thank you^^

  • simongs님의 프로필 이미지
    simongs

    受講レビュー 2

    平均評価 5.0

    5

    28% 受講後に作成

    Recently, I heard that Svelte is gaining attention while learning Vue.js. So I became interested and bought it. I haven't finished the course yet, but if I were to write an intermediate review, I feel that you have prepared the course with great sincerity. Looking at the curriculum you designed, I can feel your affection and concern for this course. I will also wait for updates on the new features you commented on.

    • heropy
      知識共有者

      Thank you for the touching evaluation that makes me feel the worth of making the lecture :) I really hope this lecture will be of great help to SIMONS. I will also update and announce new features quickly. Have a nice day~

  • sorayeon님의 프로필 이미지
    sorayeon

    受講レビュー 81

    平均評価 5.0

    5

    98% 受講後に作成

    I took the class because I liked it after listening to the sample lecture^^

    • heropy
      知識共有者

      Thank you for your good review^^ I hope you like other parts too! Have a nice day~

    • I really like the other parts too! Especially the Trello example is so fun that I'm saving it for later^^

    • heropy
      知識共有者

      I'm glad you like the other parts too :D I'm really glad you enjoyed the Trello exampleㅜㅠ I really hope Svelte.js will be of great help to Sorayeon's web development! Have a refreshing and happy weekend~

    • I had a great time. Thank you. The lecture was really great! I look forward to the next lecture. I hope you have a great weekend too, instructor~

    • heropy
      知識共有者

      The lecture time was not short, but I sincerely congratulate you for completing it :D I will prepare the next lecture quickly and diligently and announce it! I hope you have a great week, Sora Yeon^^

  • hanmg님의 프로필 이미지
    hanmg

    受講レビュー 10

    平均評価 4.9

    5

    91% 受講後に作成

    Thanks to your kind guidance, I was able to learn Svelte + @(terms, scss, etc.) in a fun way.

    • heropy
      知識共有者

      I sincerely hope that my lecture was helpful~ Thank you.👍

  • truestar님의 프로필 이미지
    truestar

    受講レビュー 26

    平均評価 4.9

    5

    100% 受講後に作成

    I don't usually write reviews, but since your lecture reading skills are so outstanding, I think I would listen to any lecture without hesitation. I play the lecture at 1.5 speed, and even then, I can hear the content very well, perhaps because of your good pronunciation. I'm only halfway through listening, so I'm leaving a review! 0. You explain the Q&A in great detail. 1. The table of contents and the division of items are clearly aligned with the lecture content. 2. There is a frame in the information delivery method, so you can roughly guess what kind of content is being covered at each specific point in the lecture. 3. It is easy to apply by providing examples of frequently used patterns (it feels like using a utility function) 4. The best part is that it briefly explains the context before and after the beginning of each video, which makes it very easy to understand the flow (It may feel a bit boring at times, but I think it doesn't matter because there is a speed-up function. In my case, it was actually good for understanding the whole thing) 5. It explains deep concepts in a way that anyone can easily understand. 6. It covers each topic in depth step by step, in detail, and with many examples. I recommend it so much that I will write down the advantages for a few days. Above all, I was impressed by the generous amount of lectures.

    • heropy
      知識共有者

      Oh! Hello Truestar. I think you answered in the 'Questions & Answers' that you put a lot of effort into organizing the text, so I'm really touched that you left such a long, nice, and neat reviewㅠㅜ I hope the remaining lectures after the middle part won't disappoint Truestar, and I really hope they'll be of great help!! Then, have a good night, and have a fun and happy week~👍 I sincerely thank you for your nice review~😭

    • Oh my.. Did I leave something that could be misunderstood?^^; I just have a habit of writing my lecture notes like a book, so I briefly mentioned that a lot of work went into it, so there was a misunderstanding.. The lecture is really good.. It's a lecture that suits `high quality`. Is it just me that thinks of 박리다매.. I'm grateful that you keep updating it.. This lecture shows the effort that went into making it. I hope you'll do well in the application section after finishing the basics!

¥6,359

HEROPYの他の講座

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

似ている講座

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