강의

N
챌린지

멘토링

N
클립

커뮤니티

Programming

/

Web Development

プロジェクトで簡単に学ぶSvelte（SvelteKit + Supabase）

体系的な段階のプロジェクト実習と展開、ビルトインストア活用、SvelteKitとSupabaseでフルスタックアプリケーションまで一発で！

（5.0）受講レビュー 10件

受講生 86名

  • Michael Kwon
실습 중심
Svelte
sveltekit
supabase

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

受講後に得られること

  • ホームページからカジュアルゲーム、フルスタックアプリケーションまで、さまざまなテーマのプロジェクトを通じてフロントエンドのコア機能を習得し、問題解決能力を育てます。

  • Svelteの簡潔で直感的な文法を使用してコンポーネントベースのアーキテクチャを構築し、状態管理、イベント処理、ルーティングなどの主なトピックをカバーします。

  • Viteでプロジェクトを作成してビルドし、FitHubとVercelを介して簡単にWebにデプロイします。

  • ビルトインストアを使用すると、グローバルな状態管理を簡単に処理する方法を習得できます。

  • SvelteKitとSupabaseでフルスタックアプリケーションを簡単に開発できます。

  • 最小限の時間に比べて多くのことを習得できます。

体系的な段階のプロジェクト実習と展開、ビルトインストア活用、SvelteKitとSupabaseでフルスタックアプリケーションまで一発で！

このレッスンは、最新のWeb開発トレンドに準拠したSvelteの基礎を実践的に習得するための目標で構成されています。 Svelteは、直感的で軽量で優れたパフォーマンス、効率的なコンパイル時最適化によるコードサイズの削減、優れたパフォーマンスを誇ります。

HTML、CSS、JavaScriptの基礎を学び、フレームワーク（ライブラリ）を学びたい入門者には開発に興味を持ち、すでに他のフレームワークを使用していた開発者は、既存のUIフレームワークに比べてスベルトの簡潔で柔軟性を体験できる最高のセカンドチョイスです！

現在、より多くの開発者や企業がSvelte（sveltekit）を使用してWebアプリケーションを開発しており、 Svelteで構築されたプロジェクトが正常に運営されています。文法だけを学んで退屈してあきらめないでプロジェクトを作成しながら学びましょう！

💡プロジェクトによる実践中心の構成

  • 文法中心ではなく、プロジェクトを通じて徐々に習得する興味深いクラスを体験することができます。

  • ビジュアルな資料と、まったくない簡潔な説明により、初心者でも無理なく学習が可能です。

このようなことを学びます。

1⃣ 映画情報ホームページ

component、データバインディング、状態変数の取り扱い方法、動的コンテンツ、ライフサイクルなど、フロントエンドアプリケーション開発の基礎を習得することになります。

1

映画情報ホームページ

2⃣ ブランディングホームページ

ページをリンクするルーティング機能とURLパラメータでページにデータを渡すことで、動的なページを実装できます。最後に、結果をWebに配布します。

2.branding-home

ブランディングホームページ

3⃣カジュアルゲームを作る

コンポーネント単位の機能的開発、状態管理、イベント、ライフサイクルなど、これまで学んだ核心的な開発能力を総制的に取り扱い、ゲームスコア管理のためにグローバル状態管理を本格的に活用します。

3.card-game

カジュアルゲーム（片付け）

4⃣日記帳アプリ（SvelteKit + Supabase）

Svelteの機能を拡張したSvelteKitプロジェクトを通じて、ファイルベースのルーティング、サーバーサイドロジックを処理し、実際のデータベースと連携するフルスタックアプリケーションまで学習します。 supabaseを使用すると、クラウドベースのデータベースを簡単に処理できます。

4.diary app

日記帳アプリ

受講前の注意

練習環境

  • オペレーティングシステムとバージョン（OS）：Windows、macOS、LinuxなどのすべてのOSが利用可能です。

  • 使用ツール：Visual Studio Code、FitHubアカウント

  • PC仕様：インターネット接続が可能な基本仕様のPC

学習資料

  • 提供する学習資料の種類：FitHubリンクの共有、テキスト、ソースコードなど

  • 分量と容量：各セクションで学習資料を提供する

選手の知識と注意事項

  • HTML、CSS、JavaScriptの基本


  • 本講義の著作権は著作者にあり、不正な配布および複製を禁止します。学習資料も著作権があり、個人的な学習目的以外の使用を禁じます。

こんな方に
おすすめです

学習対象は
誰でしょう？

  • HTML、CSS、JavaScriptの基本的な理解がありますが、フレームワークやライブラリを使用した経験が少ない方

  • フロントエンドの基本技を習得したい方

  • 実習中心に早く勉強したい方

  • 投入に比べて迅速な結果を求める開発者

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

  • HTML、CSS、JavaScriptの基礎

こんにちは
です。

233

受講生

29

受講レビュー

17

回答

4.9

講座評価

5

講座

스타트업에서 멀티미디어 콘텐츠 크리에이터로 입문하여 한 분야에만 머물지 않고 게임과 웹, 멀티미디어 분야에서 기획과 개발을 주도하며 현업에서 다양한 상용 작품을 런칭했습니다. 대학에서 디지털 미디어와 영상학을 전공했으며 주요 교육기관에서 웹 디자인과 프론트엔드 개발 및 미디어 교육(10년 이상) 등을 진행하면서 튜토리얼도 제작하고 있습니다.

- 저서 -

자바스크립트 프로젝트북(한빛미디어,2017)

カリキュラム

全体

104件 ∙ (8時間 23分)

講座資料（こうぎしりょう）:

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

10件

5.0

10件の受講レビュー

  • leaguematter7718님의 프로필 이미지
    leaguematter7718

    受講レビュー 5

    ∙

    平均評価 4.6

    5

    100% 受講後に作成

    機能単位の実装で短い講義が構成されていて、どんどん学べました。

    • csslick
      知識共有者

      イ・ジョンス様、貴重なご意見ありがとうございます〜

  • startop10님의 프로필 이미지
    startop10

    受講レビュー 4

    ∙

    平均評価 4.0

    5

    100% 受講後に作成

    svelteの魅力をゆっくりと説明してくれて、とても分かりやすいです。 ありがとうございます。

    • csslick
      知識共有者

      貴重な評価と意見ありがとうございます~

  • grooveturtle290048님의 프로필 이미지
    grooveturtle290048

    受講レビュー 10

    ∙

    平均評価 5.0

    5

    100% 受講後に作成

    svelteを初めて入門される方々にウォーミングアップで良い講義になると思います。

    • csslick
      知識共有者

      振るカメ様、大切な評価ありがとうございます！

  • antk7894님의 프로필 이미지
    antk7894

    受講レビュー 1

    ∙

    平均評価 5.0

    5

    100% 受講後に作成

    スベルトとスベルトキットを使ってみたくて受講したのですが、基本機と応用の両方がよく学習できたようです。 実際のリファレンスと一緒に説明してくれる部分が良かったし、講義の星のブランチで羽毛を参考できる部分もとても満足でした。 ベルリューハイレクチャーありがとうございます！

    • csslick
      知識共有者

      積極的な授業参加と大切なコメントありがとうございます^^;

  • kimks018540님의 프로필 이미지
    kimks018540

    受講レビュー 1

    ∙

    平均評価 5.0

    5

    92% 受講後に作成

    この講義を通して、SvelteとSvelteKit、そしてSupabaseの魅力をしっかり感じました！基礎から応用までカリキュラムが簡潔ながらも体系的に組まれており、特にプロジェクトのおかげで学習した内容をすぐに適用してみることができ、理解がはるかに簡単です。他のフレームワークを使った経験があり、比較になりますが、Svelteの簡潔さと効率性にすっかり落ちます。 Supabaseを利用したバックエンド統合も全く難しくないように説明していただきました。講師様の説明が明確でフレンドリーで簡単に理解でき、授業中途中の実際のエラーを修正する部分やヒントも役に立ちました〜

    • csslick
      知識共有者

      スベルトの簡潔さは大きな魅力です。私たちの講義もそうです。大切なコメントありがとうございます〜

￥6,175

Michael Kwonの他の講座

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

Figma デザインからパブリッシングまで講義サムネイル

Figma デザインからパブリッシングまで

Michael Kwon

デザイナーと開発者のためのオールインワン講座！新しいUI3を反映

初級

初級

HTML/CSS, Figma

Figma デザインからパブリッシングまで講義サムネイル

Figma デザインからパブリッシングまで

Michael Kwon

プロジェクトで簡単に学ぶTypeScript基礎講義サムネイル

プロジェクトで簡単に学ぶTypeScript基礎

Michael Kwon

タイプスクリプトの核心概念を基礎から実践までまるごと！ プロジェクトを通して実務活用まで

初級

初級

JavaScript, TypeScript, TailwindCSS

プロジェクトで簡単に学ぶTypeScript基礎講義サムネイル

プロジェクトで簡単に学ぶTypeScript基礎

Michael Kwon

バニラ JavaScript & Tailwind CSS講義サムネイル

バニラ JavaScript & Tailwind CSS

Michael Kwon

AI活用とコンポーネント中心UI制作で学ぶ実務型Web UI開発、 デザイナー＋開発者必須コース！

初級

初級

JavaScript, vanilla-javascript, frontend

バニラ JavaScript & Tailwind CSS講義サムネイル

バニラ JavaScript & Tailwind CSS

Michael Kwon

Vue3とSupabaseで求人求人サイトを作る講義サムネイル

Vue3とSupabaseで求人求人サイトを作る

Michael Kwon

独自のフルスタックアプリケーション開発からプログレッシブWebアプリ（PWA）まで！

初級

初級

Vue.js, PWA, supabase

Vue3とSupabaseで求人求人サイトを作る講義サムネイル

Vue3とSupabaseで求人求人サイトを作る

Michael Kwon

似ている講座

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

Vue3とSupabaseで求人求人サイトを作る講義サムネイル

Vue3とSupabaseで求人求人サイトを作る

Michael Kwon

独自のフルスタックアプリケーション開発からプログレッシブWebアプリ（PWA）まで！

初級

初級

Vue.js, PWA, supabase

Vue3とSupabaseで求人求人サイトを作る講義サムネイル

Vue3とSupabaseで求人求人サイトを作る

Michael Kwon

[フルスタック完成] Supabaseでウェブサイト3つをクローン (Next.js 14)講義サムネイル

[フルスタック完成] Supabaseでウェブサイト3つをクローン (Next.js 14)

lopun

フルスタック開発にブーストをかけるSupabase！ 3つのクローンプロジェクトを通して、Next.js 14とSupabaseを使って実務レベルのフルスタック開発を行う方法を短期集中で学べます。

初級

初級

Next.js, supabase, TailwindCSS

[フルスタック完成] Supabaseでウェブサイト3つをクローン (Next.js 14)講義サムネイル

[フルスタック完成] Supabaseでウェブサイト3つをクローン (Next.js 14)

lopun

SupabaseとNextを使ったフルスタック開発入門 (Supabase OAuth、Next.js 14をフィーチャー)講義サムネイル

SupabaseとNextを使ったフルスタック開発入門 (Supabase OAuth、Next.js 14をフィーチャー)

dodocoding

FirebaseのSQL版！Supabaseを通じてNext.jsのフルスタックの基礎をマスターできます！

初級

初級

Next.js, supabase, React

SupabaseとNextを使ったフルスタック開発入門 (Supabase OAuth、Next.js 14をフィーチャー)講義サムネイル

SupabaseとNextを使ったフルスタック開発入門 (Supabase OAuth、Next.js 14をフィーチャー)

dodocoding

GraphQL完全征服（キオスクを作って学ぶフルスタックコース） - [2024部分リニューアル]講義サムネイル

GraphQL完全征服（キオスクを作って学ぶフルスタックコース） - [2024部分リニューアル]

Indie Coder

次世代API制御技術であるGraphQLの基本と高度な使い方、そしてGraphQLで作っていく仮想のキオスクサービスを通じて、実際のプロジェクト体験を学びます。 コースは、2024年2月現在の最新バージョンであるapollo-server v4でコースを部分的に更新しました。

初級

初級

GraphQL, Svelte, MongoDB

GraphQL完全征服（キオスクを作って学ぶフルスタックコース） - [2024部分リニューアル]講義サムネイル

GraphQL完全征服（キオスクを作って学ぶフルスタックコース） - [2024部分リニューアル]

Indie Coder

作りながら学ぶSvelte講義サムネイル

作りながら学ぶSvelte

Indie Coder

最新のフロントエンドフレームワークSvelte（スベルト）を学ぶ講座です。 Svelteの基本的な使い方を習得した後、Todoアプリを一緒に作成しながら、実際のプロジェクトでどのようにSvelteを使用できるかを学ぶコースです。

初級

初級

Svelte

作りながら学ぶSvelte講義サムネイル

作りながら学ぶSvelte

Indie Coder

Inflearnクローンコーディングで学ぶオールインワンLMSソリューション：Next.js・Flutter・AWS・Supabase・prismaで実装する多言語HLSストリーミング基盤MVPプロジェクト講義サムネイル

Inflearnクローンコーディングで学ぶオールインワンLMSソリューション：Next.js・Flutter・AWS・Supabase・prismaで実装する多言語HLSストリーミング基盤MVPプロジェクト

ludgi

この講義は単純なクローンコーディングや基礎講義ではありません。 Inflearn(Inflearn)のようなLMS(Learning Management System)プラットフォームをMVP(エム ブイ ピー)レベルで最初から最後まで実装しながら、フリーランサー・1人開発者・スタートアップ初期メンバーが実務ですぐに活用できるオールインワンソリューションを提供します。 Next.js、Flutter、Supabase、Firebase(FCM)、AWS、Vercel、Xcode、Android Studio、ElevenLabs、トスペイメンツまで実際の実務で使用するスタックを一度に扱います。 ウェブとアプリを同時に開発し、ソーシャルログイン、多言語自動ダビング、HLSストリーミング基盤講義再生、決済連動、アップストア・プレイストア配布まで全過程を直接経験できます。 この講義は細かいコード一行よりも、実務で重要な流れ、設定、配布過程に重点を置きました。 したがってフリーランサーとして独立しようとする開発者、スタートアップで迅速にMVPを検証しなければならないチーム、そして実務全般を経験したいジュニア開発者に適しています。

中級以上

中級以上

Flutter, AWS, supabase

Inflearnクローンコーディングで学ぶオールインワンLMSソリューション：Next.js・Flutter・AWS・Supabase・prismaで実装する多言語HLSストリーミング基盤MVPプロジェクト講義サムネイル

Inflearnクローンコーディングで学ぶオールインワンLMSソリューション：Next.js・Flutter・AWS・Supabase・prismaで実装する多言語HLSストリーミング基盤MVPプロジェクト

ludgi

一口サイズで食べやすい実戦プロジェクト - SNS編講義サムネイル

一口サイズで食べやすい実戦プロジェクト - SNS編

winterlood

いよいよ実戦に挑戦する番です 🔥 React.js + TypeScript + Supabaseで実務レベルのSNSを一緒に開発しながら、認証&認可、無限スクロール、画像アップロード、いいね、無限ネスト型コメント、ダークモードなどの機能を作ってみます。この過程でZustandとTanstack Queryを利用したサーバー及びグローバル状態管理技法も見ていく予定です。

中級以上

中級以上

supabase, zustand, react-query

一口サイズで食べやすい実戦プロジェクト - SNS編講義サムネイル

一口サイズで食べやすい実戦プロジェクト - SNS編

winterlood

Svelte REST-APIプロジェクト講義サムネイル

Svelte REST-APIプロジェクト

Indie Coder

この講義は、私が執筆した「スベルトで始まるWebフロントエンド」という本の後半にSLOGプロジェクトを作成する部分についての映像講義です。本で少し足りなかった部分を補完し、もっと多くの方がSvelteというフロントエンドフレームワークに関心を持つことを望む心でこの講義を設けました。

初級

初級

Svelte, REST API

Svelte REST-APIプロジェクト講義サムネイル

Svelte REST-APIプロジェクト

Indie Coder

Svelteで始まるWebフロントエンド講義サムネイル

Svelteで始まるWebフロントエンド

Indie Coder

世界的に関心が高まっているフロントエンドフレームワーク、Svelte（スベルト）の核心使用方法をまとめた基礎講義です。韓国のもっと多くの方がSvelteを簡単かつ便利に利用したいという気持ちで講義を作りました。

初級

初級

Svelte

Svelteで始まるWebフロントエンド講義サムネイル

Svelteで始まるWebフロントエンド

Indie Coder

非開発者が4週間で収益化サービスを作る：AIバイブコーディング ウェブ + アプリ ALL IN ONE

dingcodingco

コーディング知識不要！ あなたのアイデアをたった4週間で実際の収益に変えてみませんか。 AIと最新ツールを活用して、ウェブサイトとアプリを同時に作り、すぐにサービスまで連携します。

入門

入門

Flutter, Next.js, cursor

非開発者が4週間で収益化サービスを作る：AIバイブコーディング ウェブ + アプリ ALL IN ONE

dingcodingco