강의

멘토링

커뮤니티

Programming

/

Front-end

Learning Vue.js by Picking Out the Essentials

Vue.JS is a must-learn for front-end beginners!! We will thoroughly explore Vue.JS from basic to advanced levels!

難易度 初級

受講期間 無制限

  • sucoding
실습 중심
실습 중심
Vue.js
Vue.js
Vue 3
Vue 3
pinia
pinia
실습 중심
실습 중심
Vue.js
Vue.js
Vue 3
Vue 3
pinia
pinia

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

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

4.9

5.0

hz

34% 受講後に作成

初めて講義を聞く人にも理解できるように、本当にお上手だと思います! 他の講義(例えばnext.js)がアップロードされたら、ぜひ聞きたいです... カリキュラムも非常に充実していて、勉強するのにとても良いです!!

5.0

김주원

99% 受講後に作成

1. 学習資料 講義目次と一致するようにフォルダが構成されています。 講義開始、講義完了フォルダが区分されており、 各フォルダは新しいプロジェクトできれいに始められるようになっているので、 分からない内容を部分的に学習したい時 本当に有用です。 gitでソースコードを順次整理する方式もありますが、 学習用にはこの戦略がベストのようです。 もちろん講師の方はこのように整理するだけで 時間がかなりかかったと思います。 2. options api, composition api Inflearn vue講義の中で両方とも一つの講義で扱う 場合はないのですが、 本講義は二つのタイプを全て扱い、 核心だけ扱うと言いましたが、 広範囲な範囲をコンパクトで、 一目瞭然に説明しています。 3. 認証 認証部分は講義するのに少し厄介な部分があり、 ほとんどの講師の方々が認証部分を 大まかにだけ扱っているのですが、 本講義では 直接バックエンド、フロントを構築して 実習するため 最近最も多く使用される jwt accessToken、refreshToken関連で 概念をしっかりと掴むことができます。 4. 講義力 講義実力が優れているので 没入感が良く、 Inflearn vue講義のほとんどを聞きましたが、 最も満足した講義でしたし、 今vueを始めるなら この講義あの講義聞くと 時間の無駄をせずに、 本講義一つで終わらせるのを お勧めします。

5.0

pcdo.omco

7% 受講後に作成

よく聞きますね〜

受講後に得られること

  • Complete Vue 2 syntax.

  • Vue 3 basic concepts (Vue Instance, Template Syntax, Data Binding)

  • Composition API Usage (reactive, ref, computed, watch)

  • Vue Router configuration and routing

  • Pinia state management

  • Vue 3's reactivity system

  • Component design and data transfer (Props, Emits, Slots)

  • How to use Vue 3 lifecycle hooks

  • Composition API vs Options API

  • Communication with the server (Axios, Fetch, async/await)

  • Application performance optimization

  • Building and deploying a Vue app

非専攻者もわかりやすいVue.JS!!
🛩スコーディングのフロントエンドロードマップシリーズ4段階! 🛩

Vue.js入門分野のベストセラー

スコーディングオンライン講義が本でも出版されました!

2024『コーディング自律学習Vue.JS』出版! 🎉

スコーディングオンライン講義が本としても発売されました。
発売以来、一度も1位から降りてきたことがないほど
Vue 3入門分野のベストセラーです。 😎
本と一緒に見ると、相乗効果が数倍になります。

購入する

気になる

何を学びますか?

Vue.jsでは、動的なWebページを実装するための重要な機能を学びます。 Vueは、JavaScriptだけでは実装が難しいレスポンシブUIコンポーネントベースの開発を可能にする強力なフレームワークです。しかし、Vueのすべての機能を一度に学び、マスターするのは少し難しいかもしれません。

このレッスンでは、実務でよく使用されるコアVue.js機能のみを厳選して学習します。複雑な機能やうまく使用されていない機能は、思い切って除外して、コンポーネントの構成、双方向のデータバインディングVue Router 、およびpiniaなど、実際のWebアプリケーションでよく使用される部分に焦点を当てました。

これにより、初心者でもVue.jsの重要な概念技術を簡単かつ効率的に学ぶことができ、実務ですぐに活用できるフロントエンド開発能力を自然に習得することができます。

完全初心者でも大丈夫です、

基礎からじっくりとみんなお知らせします。

基礎からじっくりとみんなお知らせします。

Vue.jsはフロントエンド開発で最も重要な技術の1つですが、
初心者には初めて触れると少し難しいかもしれません。
しかし、心配しないでください!

基礎からしっかりと積み重ねられるよう、
丁寧で親切に一つ一つ説明します。

初めて始める人も自信を持って学べるように
簡単な例と実践を通して一緒にしましょう! 🚀

Vue.jsのコアコンセプトを一つずつ学び、
実際のWebアプリケーションに適用できる技術を自然に習得してください!

スコーディング講義だけ
特別なポイント

実務に最適化されたコア中心カリキュラム

  • 複雑な理論は減り、実際のプロジェクトでよく使われるVue 3の機能だけが厳選されました。

  • コンポーネントベースの開発、レスポンシブデータ管理、ルーターとステータス管理など、実務にすぐに適用できる技術を学びます。

理解を助ける直感的な説明と実践中心の講義

  • Vue.jsを初めて学ぶ人も簡単に理解できるように、概念を段階的に説明し、例→実習方式で学習します。

  • 手で直接コーディングして学ぶ練習中心の講義で、理論を実践にすぐに適用するのに役立ちます。

Composition API 完全マスター

  • Vue 3のコアであるComposition APIを深く扱うことで、よりきれいで効率的なコードを書く方法を学ぶことができます。

  • 既存のOptions APIとの違いも明確に比較して学習します。

本番プロジェクトで学ぶVue.js

  • 単純なコード実践ではなく、実際のWebアプリケーション開発を通じてVueの活用法を学びます。

  • Todoリスト、掲示板、SPAなど様々なミニプロジェクトで実務感覚を育てることができます。

実務のヒントと開発者のノウハウ惜しみなく公開

  • 教科書にない現業開発者だけの実戦のヒント業務効率を高める方法までお知らせします。

  • JavaScriptだけでなく、フロントエンド開発者として成長するための方向性も提示します。

受講生のカスタムフィードバックと入念なQ&Aサポート

  • 受講生の質問に対する迅速でフレンドリーなフィードバックを提供します。

  • よくあるミスや混乱する部分をつかみ、個々の学習効果を最大化します。

ちょっと待ってください!

講義にも私と合う「決」があることをご存知ですか?

誰にも認められる大作ゲームが私には面白くないように
講義も皆に同じように合うわけではありません。

いくら賞賛が自らの講義でも私と合わないことができ
逆に、誰かに普通の講義が私にとって最高の講義になることができます。

だから私のすべての講義は少なくとも10%以上無料で公開されています。
直接聞いて、私とスタイルの「結」が合っていることを確認してみてください!

もし私と結ばれたら、
フロントエンド開発者への最速の近道をご案内いたします。
信じてフォローしてください! 🚀

この講義で作る
各種
実戦プロジェクト

computed & watch
人である文字数世紀


Vue 3のコア機能であるcomputedwatchを活用して、
人であるサイトで使用される文字数世紀機能を直接クローンコーディングしてみます。

  • computedを使って入力された文字数をリアルタイムで計算し、

  • ウォッチを活用してユーザーの入力変化を効率的に検出します。

実務で活用される機能をそのまま実装しながら、
レスポンシブデータ処理の概念を簡単かつ明確に学ぶことができます! 🚀

component
検索語のオートコンプリート

Vue 3のコアコンセプトであるコンポーネント(Component)を活用して
検索エンジンサービスでよく使用されるクエリオートコンプリート機能を直接実装します。

  • コンポーネントの分離により、検索ボックスとオートコンプリートリストを効率的に管理できます。

  • propsemetを活用して、コンポーネント間のデータフローを自然に習得します。

  • リアルタイムデータレンダリングで、ユーザー入力に素早く反応するインタラクティブなUI実装まで!

実務ですぐに使える機能を自分で作ってみて
Vueコンポーネントの活用方法と構造化開発方法を学ぶことができます。 🚀

コンポーネントの深化
タブメニューUI

Vue 3のダイナミックコンポーネント(Dynamic Component)の概念を活用して
ユーザーエクスペリエンスを向上させるタブメニューUIを直接実装します。

  • 動的コンポーネントの切り替えにより、複数のタブコンテンツを効率的に管理できます。

  • v-bindとis属性を使用して柔軟なコンポーネントレンダリングを学習します。

  • 状態管理イベント処理により、タブ間の自然な遷移を実装します。

このプロセスにより、複雑なUIも再利用可能でスケーラブルなコンポーネントにする方法を学ぶことができます。 🚀

タスク管理アプリ
Todo List


Vue 3で学んだすべての概念と技術を活用して
完成度の高いTodo Listアプリケーションを直接作成します。

  • コンポーネントの分離により、仕事の追加、削除、修正機能を効率的に管理します。

  • Reactiveデータバインディングは、リアルタイムの状態変化に反応するUIを実装します。

  • computed、watch、v-modelを活用して、状態管理とデータフローを自然に習得します。

  • ローカルストレージを活用してデータ永久保存機能まで実装!

このプロジェクトを通じて、Vueのコア機能を本番のように統合し
実務ですぐに使用できる開発能力を高めることができます。 🚀

Auth
認証と認可

Webアプリケーションの重要な機能である認証(Authentication)認可(Authorization)の概念を明確に理解し、
**JWT(Json Web Token)**を活用して、安全なログイン機能を直接実装してみてください。

  • 認証と認定の違いを理論と実践を通して明確に区別します。

  • JWTトークンの発行と検証プロセスを通じて、安全なログインロジックを学びます。

  • トークンの保存と管理(LocalStorage、SessionStorage)方法を実践します。

  • ログイン後にユーザー情報を安全に保ち、権限に基づいてアクセスを制御する方法を学びます。

この過程を通じてフロントエンド開発者に不可欠な認証・認可概念を実戦のように経験し、
安全で効率的なユーザー管理方法を学ぶことができます。 🚀

映画
Movie App 🎬

これまでに学んだVue 3のすべての概念と技術を活用して
映画情報を提供するWebアプリケーションを直接作成します。

  • 外部ムービーAPIを使用して、リアルタイムでムービーデータをインポートして表示します。

  • コンポーネント構造化により、映画リスト、詳細情報、検索機能などを効率的に管理します。

  • Axiosを利用したAPIリクエストと非同期処理でデータフローを制御します。

  • ルーター(Vue Router)を使ってページ切り替え機能を実装し、動的ルーティングも経験します。

  • レスポンシブUIヘルスケアを介して、実戦のようなユーザーエクスペリエンス(UX)を提供します。

このプロジェクトを通じてVue 3のコア機能を統合的に活用し
実務に近い開発経験とともに、APIベースのアプリケーション開発能力を向上させることができます。 🚀

よくある質問

Q. 本当に何も知らない初心者です。大丈夫でしょうか?
A. はい。本当に大丈夫です。何も知らない方が学習できるように構成したカスタム講座です。

Q. 本を購入しました。オンラインレッスンも購入する必要がありますか?
A.本を購入した場合は、さらに購入することをお勧めします。本では扱わない内容も多く含まれています。

Q.選手知識が必要ですか?

A. はい、このコースは必ず HTML5/CSS3/JavaScript に関する先行知識が必要です。

受講前の注意

練習環境

  • オペレーティングシステムとバージョン(OS):Windows、macOS

  • 使用ツール:ビジュアルスタジアコード(Visual Studio Code)、Chrome(Chrome)

  • PC仕様:Webサーフィンが可能なレベルの最低仕様も可能です。

学習資料

  • 実習進行のための講義別学習資料提供します。


選手の知識と注意事項

  • 完全非専攻者、初心者も受講可能

  • ただし、HTML5/CSS3/JavaScript の学習は先行する必要があります。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • Someone who has never studied Vue before.

  • Someone who has tried to study Vue, but has given up every time.

  • Someone who needs to build a service right away using Vue

  • Someone who wants to learn simply and easily without complicated explanations

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

  • HTML/CSS

  • JavaScript

こんにちは
です。

4,862

受講生

269

受講レビュー

135

回答

4.9

講座評価

7

講座

수코딩은 온라인과 오프라인을 병행하면서
코딩을 가르치는 활동을 하고 있습니다.

다년간의 오프라인 강의 경험을 바탕으로,
더 많은 사람들이 코딩을 쉽고 재미있게 배울 수 있도록
매일 고민하고, 끊임없이 노력하고 있습니다.

현재까지 다음과 같은 4권의 책을 출판하며
프런트엔드 강의 분야를 선도하고 있습니다:

또한, 유튜브 채널을 통해 다양한 무료 강의도 제공하고 있습니다.
👇 지금 바로 방문해 보세요
[유튜브 채널 링크]

カリキュラム

全体

229件 ∙ (23時間 32分)

講座資料(こうぎしりょう):

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

受講レビュー

全体

8件

4.9

8件の受講レビュー

  • beauvy11134101님의 프로필 이미지
    beauvy11134101

    受講レビュー 3

    平均評価 5.0

    5

    100% 受講後に作成

    • sucoding
      知識共有者

      こんにちは beauvy1113様! 良い評価ありがとうございます :) 良い一日を!!

  • hyeju54324508님의 프로필 이미지
    hyeju54324508

    受講レビュー 2

    平均評価 5.0

    5

    34% 受講後に作成

    初めて講義を聞く人にも理解できるように、本当にお上手だと思います! 他の講義(例えばnext.js)がアップロードされたら、ぜひ聞きたいです... カリキュラムも非常に充実していて、勉強するのにとても良いです!!

    • sucoding
      知識共有者

      わあ、こんなに丁寧なフィードバック、本当にありがとうございます! 講義が初めての方にもお役に立てたとのこと、本当に嬉しいです😊 近日中にReact.JSの講義がオープンします! ご期待に応えられるよう、より充実した内容になるよう構成してみます💪 今後も良い学習となることを願っています!

  • hyeonajeong8233님의 프로필 이미지
    hyeonajeong8233

    受講レビュー 1

    平均評価 5.0

    5

    100% 受講後に作成

    • sucoding
      知識共有者

      こんにちは hyeona.jeong様! 高評価ありがとうございます! より良い講義をお届けします。

  • pcdoomco8345님의 프로필 이미지
    pcdoomco8345

    受講レビュー 16

    平均評価 5.0

    5

    7% 受講後に作成

    よく聞きますね〜

    • sucoding
      知識共有者

      ありがとうございます!お役に立てれば幸いです:)

  • yujinseok3246님의 프로필 이미지
    yujinseok3246

    受講レビュー 8

    平均評価 5.0

    5

    100% 受講後に作成

    • sucoding
      知識共有者

      こんにちは、ユジンソクさん! 良い評価ありがとうございます。 より良い講義でお会いしましょう!

¥9,714

sucodingの他の講座

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

似ている講座

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