Svelte.js入門ガイド
HEROPY
無料
初級 / Svelte
4.9
(156)
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を構築できます！
Svelteを活用し、自作するSPAの例題で！
.jpg?w=960)
他のSvelte講座も参考にしてください！
"Svelte.js Core API 完璧ガイド"
"Svelte.js 入門ガイド"
はじめに！
Svelte.jsを利用して、SPA（シングルページアプリケーション）の例を作ってみましょう！
ルーターを使用してページを区分し、遷移効果やスクロール復元など、さまざまな機能を適用できます。
面倒な別途のサーバー構築なしでSF（サーバーレス関数）を使用し、
素早くバックエンドAPIを作成して簡単に管理できます。
SPAの短点であるセキュリティ問題を、素早く簡単に解決しましょう！
Snowpackは最新のビルドツールで、
開発ビルド時間を画期的に短縮できます。
より快適な環境で開発できますよ！
NetlifyのCD（継続的デプロイ）を使用します。
GitHubリポジトリにアップロードすれば、すぐにサイトが自動デプロイされるので、
サイトのデプロイに時間をかける必要はありません！
ご参考ください！
cette 講義は予備知識が必要な講義ですが、最大限わかりやすく説明しています。
以前リリースした「Svelte.js Core API 完璧ガイド」でSvelteの基礎を固めた後、
本講義を受講されるとより効果的です。
OMDb APIを活用して、実際に映画を検索できるSPAサイトを作成します！
Netlify Serverless FunctionsでバックエンドAPIを構成し、
APIキーを露出させることなくユーザーに検索機能を提供することができます。
GitHub Repo: https://github.com/HeropCode/Svelte-Movie-app
Demo: https://competent-cori-258206.netlify.app
スペック
Svelte
Snowpack
SPA Router
OMDb API
Netlify Hosting with GitHub(CD)
Netlify Serverless Functions
パッケージ
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完全ガイド(Renew)」ポストを確認してください。
https://heropy.blog/2019/09/29/svelte
お知らせ！
2020.12.24
次のパートを追加しました！
全講義の演習を始める前に必ず見てください！
- 2-1. 講義演習モジュールのバージョンを一致させる
こんな方に
おすすめです
学習対象は
誰でしょう？
Svelte.jsの活用例が必要な方！
SPAサイトの制作を準備されている方！
Netlify Serverless Functionsを体験してみたい方！
前提知識、
必要でしょうか？
HTML
CSS(SCSS)
JS
Svelte
こんにちは
HEROPYです。
キャリア認証
4,243
受講生
224
受講レビュー
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件の受講レビュー
the27920609受講レビュー 13
∙
平均評価 5.0
- shk72301233
受講レビュー 7
∙
平均評価 5.0
5
100% 受講後に作成スベルトで作る映画検索プロジェクト頑張りました:) 実はこの講義を購入しておいて前の部分だけ少し見てから時間がかなりになりましたが、退社後本格的にフロント開発の勉強準備をしながら再度探すことになりました。 講師様を初めて知ったのはYouTubeスベルト講義でしたが、説明が簡単明瞭で、なんだろうか… ファーストキャンパスの超格差パッケージでvue.jsで作った映画検索サイトの例を進めてからこの講義を比較しながら進めてみましたが、やはりコード量が大幅に減ったことがわかります。大きな絵をもっと明瞭に捉えることができると思います。 そしてスベルトは本当に日々急速に発展していくフレームワークだと思います。 それでもreactやvueが多いですが、採用市場で少しずつスベルトラという言葉が出てくるのも見えますよㅎㅎ 今後フロント開発者になりたい方は、この講義だけでなく、パク・ヨンウン講師様のスベルト入門、完璧ガイド講義も積極的におすすめします。 ありがとうございます。
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)