Svelte.js入門ガイド
HEROPY
無料
初級 / Svelte
4.9
(154)
3,300+
2時間を超える入門者のためのSvelte.js無料講義！
初級
Svelte
Svelte
Svelte
SPA
SPA
講座 を紹介して、成長と収益を得ましょう！
マーケティングパートナーズ
講座 を紹介して、成長と収益を得ましょう！
学習した受講者のレビュー
学習した受講者のレビュー
5.0
5.0
jude
100% 受講後に作成
スベルトで作る映画検索プロジェクト頑張りました:) 実はこの講義を購入しておいて前の部分だけ少し見てから時間がかなりになりましたが、退社後本格的にフロント開発の勉強準備をしながら再度探すことになりました。 講師様を初めて知ったのはYouTubeスベルト講義でしたが、説明が簡単明瞭で、なんだろうか… ファーストキャンパスの超格差パッケージでvue.jsで作った映画検索サイトの例を進めてからこの講義を比較しながら進めてみましたが、やはりコード量が大幅に減ったことがわかります。大きな絵をもっと明瞭に捉えることができると思います。 そしてスベルトは本当に日々急速に発展していくフレームワークだと思います。 それでもreactやvueが多いですが、採用市場で少しずつスベルトラという言葉が出てくるのも見えますよㅎㅎ 今後フロント開発者になりたい方は、この講義だけでなく、パク・ヨンウン講師様のスベルト入門、完璧ガイド講義も積極的におすすめします。 ありがとうございます。
5.0
mysend12
100% 受講後に作成
フロント側に興味が多かったのですが、進行がすっきりして頭の中にすっぽり詰まっている感じで、何よりもおもしろく見ました！
5.0
정현진 Jeong
100% 受講後に作成
実際に役立つ情報が豊富でたくさん学びました。
受講後に得られること
Svelte.jsのSPA（シングルページアプリケーション）を設定できます！
SPAのメリットを活かしてデメリットを補うことができますよ！
Serverless Functionsを使って簡単にバックエンドAPIを設定できます！
スベルト活用、自分で作るSPAの例として！
.jpg?w=960)
他の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
こんにちは
HEROPYです。
4,215
受講生
222
受講レビュー
162
回答
4.9
講座評価
3
講座
こんにちは〜はじめまして！私は現在、小さなスタートアップで企業管理ソリューションを開発しているフロントエンド開発者のパク・ヨンウンです。HEROPY技術ブログを運営
こんにちは、はじめまして！
私は現在、小さなスタートアップで企業管理ソリューションを開発しているフロントエンド開発者のパク・ヨンウンです。
HEROPY技術ブログを運営しており、
その他に企業研修やオン・オフラインでの講師活動も行っています。
ブログ: https://heropy.blog
Youtube: https://www.youtube.com/channel/UCcjhMpoaNvyy0StN9KgtF6w
メール: thesecon@gmail.com
カリキュラム
全体
49件 ∙ (7時間 46分)
講座掲載日:
最終更新日:
受講レビュー
全体
30件
5.0
30件の受講レビュー
shk72301233受講レビュー 7
∙
平均評価 5.0
5
100% 受講後に作成スベルトで作る映画検索プロジェクト頑張りました:) 実はこの講義を購入しておいて前の部分だけ少し見てから時間がかなりになりましたが、退社後本格的にフロント開発の勉強準備をしながら再度探すことになりました。 講師様を初めて知ったのはYouTubeスベルト講義でしたが、説明が簡単明瞭で、なんだろうか… ファーストキャンパスの超格差パッケージでvue.jsで作った映画検索サイトの例を進めてからこの講義を比較しながら進めてみましたが、やはりコード量が大幅に減ったことがわかります。大きな絵をもっと明瞭に捉えることができると思います。 そしてスベルトは本当に日々急速に発展していくフレームワークだと思います。 それでもreactやvueが多いですが、採用市場で少しずつスベルトラという言葉が出てくるのも見えますよㅎㅎ 今後フロント開発者になりたい方は、この講義だけでなく、パク・ヨンウン講師様のスベルト入門、完璧ガイド講義も積極的におすすめします。 ありがとうございます。
- the27920609
受講レビュー 13
∙
平均評価 5.0
HEROPYの他の講座
知識共有者の他の講座を見てみましょう！
![Svelte.js [Core API] 完全ガイド講義サムネイル](https://cdn.inflearn.com/public/course-325523-cover/f70444f1-ed0a-4b46-b5ec-39c250885e9a?w=420)
似ている講座
同じ分野の他の講座を見てみましょう！
![GraphQL完全征服（キオスクを作って学ぶフルスタックコース） - [2024部分リニューアル]講義サムネイル](https://cdn.inflearn.com/public/courses/329186/cover/a63c6c95-2318-4e7a-a4f0-34d4512b3ae6/329186-eng.png?w=420)
