Svelte REST-APIプロジェクト

Name: Svelte REST-APIプロジェクト
Rating: 4.9 (15 reviews)

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

（4.9）受講レビュー 15件

受講生 1,022名

難易度初級

受講期間 無制限

Indie Coder

Svelte

REST API

Svelte

REST API

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

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. Svelteの基本的な使い方を知る必要がありますか？

Svelteの基礎は、私の他の無料講義を通じて1〜2時間で学習することができます。その講義を最初に受講してから、この講義をさらに聞くことをお勧めします。

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

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

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

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

💾授業参考資料

レッスンで使用されているパッケージのリストと参考になるサイトとプロジェクトコードのgitアドレスがまとめられています。
フロントエンド結果リンク
デザイン結果ソースリンク（HTML + CSS）
バックエンドサーバーソースリンク

こんな方に
おすすめです

学習対象は
誰でしょう？

フロントエンド開発に興味がある方
ウェブでもっと早く何かをしたい人
HTML、Javascriptの基本的な使い方を身につけた後、これを通じて何かを実装してみたい方

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

HTML、CSSの基礎知識
Javascriptの基本
Svelteの基礎

こんにちは
です。

2,502

受講生

受講レビュー

回答

4.8

講座評価

講座

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、教本文庫、Aladin

カリキュラム

全体

20件 ∙ (3時間 14分)

セクション 1．Svelte REST-APIプロジェクト

20件 ∙ (3時間 14分)

1. SLOGプロジェクトの説明
02:44
2. APIサーバーのインストールと使い方の学習
08:50
3. プロジェクトの作成とコンポーネントの配置
18:37
4. ルーターの設定
08:40
5. axiosを使用したサーバー通信の設定
07:00
6. ストアの配置
03:20
7. 認証の実装 - store
12:47
8. 認証の実装 - コンポーネント
17:09
9. 投稿リストの実装
21:24
10. 投稿作成の実装
06:12
11. 投稿の編集と削除の実装
16:54
12. コメント関連機能の実装
20:55
13. 'いいね'機能の実装
06:49
14. ビューモード変更の実装
07:51
15. アプリの完成度を上げる1 - フォーム検証
11:05
16. アプリの完成度を上げる2 - 日付を見る
03:42
17. アプリの完成度を上げる3 - URLによるビューモードの変更
04:50
18. アプリの完成度を上げる4 - 投稿の重複排除
03:02
19. アプリの完成度を高める5-ページネーションのコンポーネント化
11:36
20. 仕上げ
01:28

講座掲載日:

最終更新日:

受講レビュー

全体

15件

4.9

15件の受講レビュー

ozacgyo7535
受講レビュー 2
∙
平均評価 4.0
4
100% 受講後に作成
hoon44077661
受講レビュー 15
∙
平均評価 5.0
5
30% 受講後に作成
短くて簡単簡単に意識の流れに沿って見ていると基本的な枠組みが身につく講義だと思います。いいですね！
aaaaboooo4835
受講レビュー 5
∙
平均評価 5.0
5
60% 受講後に作成
vincentmattari8178
受講レビュー 2
∙
平均評価 5.0
5
30% 受講後に作成
スベルトを初めて触れるのに良い講義だと思います~^^
ataraxia8084204
受講レビュー 3
∙
平均評価 5.0
5
30% 受講後に作成
最高です..... バックエンドについて少し知っていればああ！これがこうして通信になるんだと言ってわかります。本当にありがとうございます。

無料

Indie Coderの他の講座

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

次世代Node.jsバックエンドサーバーの開発（Fastify＆Prisma＆Typescriptと共に）

Indie Coder

速いスピードを誇るNode.jsフレームワークfastify、orm Prisma、およびTypescirptを活用した最新のNode.jsバックエンドREST APIを学習するコース

Basic

Node.js, TypeScript, Prisma

次世代Node.jsバックエンドサーバーの開発（Fastify＆Prisma＆Typescriptと共に）

Indie Coder

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

Indie Coder

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

Basic

Svelte

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

Indie Coder

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

Indie Coder

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

Basic

GraphQL, Svelte, MongoDB

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

Indie Coder

作りながら学ぶSvelte

Indie Coder

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

Basic

Svelte

作りながら学ぶSvelte

Indie Coder

似ている講座

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

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

Michael Kwon

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

Basic

Svelte, sveltekit, supabase

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

Michael Kwon

作りながら学ぶSvelte

Indie Coder

Basic

Svelte

作りながら学ぶSvelte

Indie Coder

Svelte.js [Core API] 完全ガイド

HEROPY

21時間を超える分量の最高のSvelte.js講義！

Basic

Svelte, Rollup, Sortable

Svelte.js [Core API] 完全ガイド

HEROPY

Spring BootとReactで学ぶ超簡単REST API掲示板作り

neneee

Spring BootとReact.jsで超簡単掲示板を手軽に構築する実践講義！この講義は、理論は少なめに、実習に集中して素早く完成させるウェブアプリケーション開発過程を盛り込んでいます。

Beginner

Spring Boot, react.js, JPA

Spring BootとReactで学ぶ超簡単REST API掲示板作り

neneee

Open API を使用 with Python

admin0013

Open APIとPythonを活用して、業務効率を向上させるために必要なスキルとノウハウを学ぶことができます。

Beginner

Python, REST API, OAuth

Open API を使用 with Python

admin0013

Javaマイクロサービス（MSA）プロジェクトの実践

ishrhrl

実務にすぐ適用可能なJavaベースのマイクロサービスアーキテクチャ（MSA）実習講義！この講義は、Java開発者のためのマイクロサービスプロジェクト中心の実習講義です。単純な理論にとどまらず、実際のサービス開発フローに沿ってマイクロサービスアーキテクチャの核心原理と実装方式を実習を通じて身につけることができます。