inflearn logo
inflearn logo

Svelte REST-APIプロジェクト

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

難易度 初級

受講期間 無制限

Svelte
Svelte
REST API
REST API
Svelte
Svelte
REST API
REST API
Thumbnail
날개 달린 동전

講座 추천하고 성장과 수익을 만들어 보세요!

날개 달린 동전

マーケティングパートナーズ

講座 추천하고 성장과 수익을 만들어 보세요!

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

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

4.9

5.0

임상훈

30% 受講後に作成

短くて簡単簡単に意識の流れに沿って見ていると基本的な枠組みが身につく講義だと思います。いいですね!

5.0

김경태

30% 受講後に作成

スベルトを初めて触れるのに良い講義だと思います~^^

5.0

ataraxia808

30% 受講後に作成

最高です..... バックエンドについて少し知っていればああ!これがこうして通信になるんだと言ってわかります。 本当にありがとうございます。

受講後に得られること

  • Svelte中級の使い方

  • Rest APIを使用した通信方法

  • Axiosを用いた効率的なサーバ通信方法

  • infinite scroll(無限スクロール)を使用したページネーションの実装

  • JWTトークンを利用した認証方法

  • フォーム検証

浮上するFE大勢スベルト(Svelte)
中級開発者に必要なコアをすばやく!

Svelteで構築する必須要素

Svelteの基本的な使い方を学んだら、以下は当然実際のプロジェクトです。 Svelte REST-APIプロジェクト講義を通じて、実際のプロジェクトを進める基礎経験を築きましょう!

このレッスンでは、Svelteを使用してCRUD:サーバーにデータを書き(Create)、読み取り(Read)、変更(Update)、削除(Delete)する方法を学びます。ここで、JWTトークンを利用した認証方法や無限スクロールを利用したページネーションなどフロントエンドでプロジェクトを進行するために不可欠で知っておくべき要素を学習できます。

投稿作成ページ

コメントページ

ログインページ


これらのことを学びます✒️

スベルト本作者直講!

この講義は、「スベルトで始まるWebフロントエンド」の本の最後の章を映像にした講義です。
(選手の知識:HTML / CSSとJavaScriptの基礎、Svelteの基礎)

フロントエンドの開発をしながら最も多く行うことは、おそらくREST APIと通信するサービスを作成することです。サーバーからデータを要求し、要求されたデータを画面に表示し、データの追加、修正、削除(CRUD)などを要求する過程は、フロントエンド開発をする誰でも必ず知るべき要素です。

このレッスンでは、フロントエンドの観点からこれらのREST API必須の使用法について説明します。

  • ✅Svelte中級の使い方
  • ✅ Rest APIを使用した通信
  • ✅ Axiosを使用した効率的なサーバー通信
  • ✅無限スクロール(Infinite Scroll)を使用したページネーションの実装
  • ✅ JWTトークンを使用した認証
  • ✅フォーム検証、Routerの使い方

REST APIデータ通信、各種解決方法...
中級FE開発者ならぜひ知っておくべき内容!

REST API必須の使用法に加えて、SvelteのStoreを活用してリストに変化があるときにすべてのデータを再ロードするのではなく、部分修正による通信効率を高める方法などの悩みから、現在広く使われている無限スクロール方式のUIを実装する際に発生する可能性のある問題やその解決方法なども用意されています。

なお、JWTを利用した認証方法とアプリの完成度を高めるためのフォーム検証、より直感的な日付ビューモード、その独立して再利用できるコンポーネントの作成などを通じて、フロントエンド開発の初級を超えて中級開発者になったときに一度苦労しなければならない部分を学習できるようになります。一緒に挑戦しましょう! (Svelte、Axios、Yup、Datejs)

こんな方におすすめです🙆‍♀️

フロントエンド開発に興味がある方

ウェブでもっと早く何かをしたい人

HTML、JavaScriptの基本を介して何かを実装したい人

中級 FE 開発者として成長したい初心者のフロントエンド開発者


フロントエンドの授業を終えたら、そのサービスのAPIサーバーを作成する過程を聞くことをおすすめします。最新のNode.jsテクノロジであるFastify、Prisma、およびTypescriptを使用するバックエンドプロセスを準備しました。

コースリンク: https://inf.run/mpCv8


Q&A 💬

Q. 開発環境はどうなりますか?

macOS、Windows、LinuxなどNode.jsをインストールできるどのPCでも、開発環境に必要なプログラムをインストールして進めることができます。

Q. 本「スベルトで始まるウェブフロント」でのプロジェクト内容とまったく同じですか?

プロジェクト自体は同じですが、本の内容の大部分を補完して映像を作りました。 JWTトークンを利用した認証方法とスクロールに関連する部分を一つの独立したコンポーネントに分離する過程などが追加されたので、もし本を既に学習した方も一度聞いてみることをお勧めします。

💾授業参考資料

こんな方に
おすすめです

学習対象は
誰でしょう?

  • フロントエンド開発に興味がある方

  • ウェブでもっと早く何かをしたい人

  • HTML、Javascriptの基本的な使い方を身につけた後、これを通じて何かを実装してみたい方

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

  • HTML、CSSの基礎知識

  • Javascriptの基本

  • Svelteの基礎

こんにちは
Indie Coderです。

2,508

受講生

66

受講レビュー

87

回答

4.8

講座評価

5

講座

2000年代半ばから本格的にウェブ開発を始め、現在までフリーランスの開発者として活動しています。約5年間、Amplix BIソリューションの実務者教育を担当し、開発を支援しながら、新しい技術を効率的に伝えることについて多くの経験を積み、模索してきました。

現在は開発業務とともに、開発者の役に立つようなウェブ関連分野の新技術を探求し、講座や書籍を通じて共有しています。

 

現) フリーランス

元) (株)ビズプラグ 戦略ソリューション事業部 チーム長

元) 株式会社パニーモンキーズ WeenyStoryサービス開発チーム長

youtube: https://www.youtube.com/channel/UC3cJspjF4TRTyD_RS0azeaw

email: freeseamew@gmail.com

blog1: https://medium.com/freeseamew

blog2: https://dev.to/freeseamew

講座一覧

出版書籍

yes24教保文庫アラジン

エンドサーバー開発(Fastify & Prisma & TypeScriptによる)GraphQL完全攻略(仮想キオスクの実装を通じて学ぶフルスタックコース)出版書籍:yes24、教保文庫、アラジン

エンドサーバー開発(Fastify & Prisma & TypeScriptによる)GraphQL完全攻略(仮想キオスクの実装を通じて学ぶフルスタックコース)出版書籍:yes24、教保文庫、アラジン

エンドサーバー開発(Fastify & Prisma & TypeScriptによる)GraphQL完全攻略(仮想キオスクの実装を通じて学ぶフルスタックコース)出版書籍 yes24、教本文庫、Aladin

もっと見る

受講レビュー

全体

15件

4.9

15件の受講レビュー

  • ataraxia8084204님의 프로필 이미지
    ataraxia8084204

    受講レビュー 3

    平均評価 5.0

    5

    30% 受講後に作成

    最高です..... バックエンドについて少し知っていればああ!これがこうして通信になるんだと言ってわかります。 本当にありがとうございます。

    • vincentmattari8178님의 프로필 이미지
      vincentmattari8178

      受講レビュー 2

      平均評価 5.0

      5

      30% 受講後に作成

      スベルトを初めて触れるのに良い講義だと思います~^^

      • aaaaboooo4835님의 프로필 이미지
        aaaaboooo4835

        受講レビュー 5

        平均評価 5.0

        5

        60% 受講後に作成

        • hoon44077661님의 프로필 이미지
          hoon44077661

          受講レビュー 15

          平均評価 5.0

          5

          30% 受講後に作成

          短くて簡単簡単に意識の流れに沿って見ていると基本的な枠組みが身につく講義だと思います。いいですね!

          • ozacgyo7535님의 프로필 이미지
            ozacgyo7535

            受講レビュー 2

            平均評価 4.0

            4

            100% 受講後に作成

            Indie Coderの他の講座

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

            似ている講座

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

            無料