강의

멘토링

로드맵

Inflearn brand logo image
Programming

/

Front-end

【ウェブ開発フルスタックコース】Vue.jsプロジェクト投入1週間前 - 基礎から実務まで

本講義は、フルスタックウェブ開発者養成のための「ウェブ開発フルスタックコース」講義シリーズのフロントエンド部分についての講義です。この講義は、講師の著書 <Vue.js プロジェクト投入一週間前>の内容に基づいて作られた講義です。

  • realprogrammers
vue.js
프론트엔드
front-end
Vue.js

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

こんなことが学べます

  • Vue 最新の構文

  • ミックスイン、プラグイン、Custom Directive

  • サーバー通信

  • Vuexの状態管理

  • 便利な外部モジュールを使う

  • UIテンプレートの実装

基礎が格別なフロントエンド開発!
Vue.js、ちゃんと学んでください✨

✅このレッスンは、[フルスタックWeb開発者ロードマップ]シリーズのレッスンです。

  • 本講義は、フルスタックWeb開発者養成のための「Web開発フルスタックコース」講義シリーズのうち、フロントエンド部分を扱う講義です。
  • Web開発フルスタックコースには、HTML&CSS→バニラJavaScript→ブートストラップ→Vue.js→データベース→Node.js→ポートフォリオまで、フルスタックWeb開発のための全コースが含まれています。
  • Web開発のフルスタックコースをすべて受講すれば、Web開発の基礎だけでなく、実践にすぐに適用できるスキルを身につけることになります。
  • 本講義を受講する前 [ウェブ開発フルスタックコース] HTML&CSS → [ウェブ開発フルスタックコース] バニラJavaScript → [ウェブ開発フルスタックコース] ブートストラップ → [ウェブ開発フルスタックコース] Vue.js講義を順次受講することをおすすめします。

Vue.js 프로젝트 투입 일주일 전 저자 직강

What is Vue.js?

모든 웹 브라우저에는 인터프리터(Interpreter)가 내장되어 있어서 자바스크립트를 실행할 수 있어요.

ウェブ&ネイティブアプリのメリットを一度に掴むフロント開発!
プログレッシブフレームワークVue.jsで体験してください。

Vue.jsは、ユーザーインターフェイスを開発するためのプログレッシブフレームワークです。ここでProgressiveとは、Webとネイティブアプリの利点をすべて受け入れ、標準パターンを使って開発されたという意味です。

ウェブは別途のインストールなしでブラウザだけで接続が可能なため、アクセシビリティが非常に優れています。一方、ネイティブアプリは、一般的なウェブよりも高速で優れたユーザーエクスペリエンスを提供するという利点があります。

結局、Vue.jsが目指すのは、 Webの利点とアプリの利点の両方を収容できる進化したWebアプリを作成できるフレームワークを提供することです。


Vue.js、なぜ学ぶべきですか?

フロントエンド開発者になりたい場合は、
必ずVue.jsのような
フロントエンドフレームワークを知る必要があります。

すでにWebアプリケーションは、モバイル専用のネイティブアプリケーションと同様にパフォーマンスが向上しています。そのため、多くのサービスとビジネスアプリケーションがVueなどのフロントエンドフレームワークを使用して開発されています。そのため、フロントエンド開発者になるためには、Vueのようなフロントエンドフレームワークを学ぶ必要があります。

#1.
コードの読みやすさ
優れています。

Vue(ビュー)は、HTMLコードを実装する領域、JavaScriptコードを実装する領域、デザインCSSを実装する領域が完全に分離されているため、コードに対する読みやすさに非常に優れています。

#2.
デザイナー、パブリッシャーと
効果的なコラボレーション
可能です。

アプリケーションを開発するときは、開発者一人で作業することはごくまれです。一般的には、UIデザイナーやWebパブリッシャーからHTML / CSSなどの結果を受け取り、それをプログラムに適用する必要があります。 VueはHTML、CSSコードが完全に分離されており、リアクトやアンギュラよりもコラボレーションプロジェクトを進める上ではるかに利点があります。

#3.
多数の大企業が選択
標準フレームワークです。

バックオフィスシステムとは、企業内の業務に関連するシステムを意味します。たとえば、ERP、CRM、HRなどがバックオフィスシステムです。国内の大多数の大企業がバックオフィスシステム開発のための標準的なWebフロントエンドフレームワークとしてVue.jsを選択する割合が大幅に増えています。

一般ユーザーを対象とするB2Cサービスとは異なり、バックオフィスシステムは各業務別画面がすべて分割されており、コンポーネントの複雑度が高くありません。このような場合、迅速かつ安定的に開発できることが最も重要です。また、バックオフィスシステムの場合、開発チームと運営チームが別々の場合がほとんどです。運営チームの場合、短時間で開発されたシステムを引き継ぐことができなければならないため、ランニングカーブが短くなければならず、直感的でコラボレーションが便利でなければなりません。この点で、Vue.jsは最も適切なフロントエンドフレームワークとして認識されています。


基礎から実務まで完璧に

詳細な説明を通じて基礎をしっかり!

基本基をうまく積むほど重要なことはありません。私たちはたった1~2年だけこの仕事をするために勉強しているわけではありません。少なくとも何十年もこの仕事をする準備をしています。それなら、もう少し遠く見てきちんと準備しなければなりません。

このレッスンは徹底的にVue.js自体について説明します。基本を学ぶが退屈ではないように、実務で何を考慮すべきかについての経験までお届けします。初心者もうまく従うように、概念/文法/機能を最大限に分けて、すべての内容のサンプルコードまで提供します

おそらくこの講義を最後まで受講しているなら、どんな固守よりももっと知ることになるかもしれません。 (しかし、コスがなぜこだわります!多くの実戦経験を持っているからでしょう。😉)

標準画面パターンを身につけて実務能力まで完璧に!

Vue.jsの基本を完全に積み重ねてから、すぐに1人の良い開発者の役割を果たすことができるように、実務で最も開発されたWeb画面パターンを習得します。驚くべきことに、大半のシステムは、全画面の約70%以上がわずかな画面パターンで構成されています。

ListToDetailパターン、MasterDetailパターン、MultipleEditパターン、Shuttleパターンなど標準パターンについてだけは完全に理解して開発できるようにWeb画面標準パターン開発講義を学びます。だから、皆さんが今後行くことになる無数の実戦を面白くてお得に!そして、よく遂行できる実務力量まで積み重ねられるような講義になってくれるでしょう。


この講義の特徴!

簡単かつ詳細に
実務応用中心
サンプルコードまで!
  • Vue.jsの基本文法を次々とお知らせします。
  • Vue.jsの最新バージョン、 Vue.3.xバージョンとして最近追加された機能について詳しく説明します。
  • 初心者にも簡単に従うために、サンプルコードを最小単位に分けて進めます。
  • 実務プロジェクトの進行順に合わせて、各段階でどのような作業を進めるべきかをお知らせします。
  • 実務で最も開発されたWeb画面パターンを完全に実装できるようにします。
  • さまざまな外部モジュールの使い方を学びます。
  • すべてのサンプルコードはFitHubを介して提供されています。

何を学びますか?

  • 開発 IDE ツールとしては、Visual Studio Codeを使用します。ビジュアルスタジオコードを使った開発方法と有用な拡張プログラムを知ります。
  • Node.js (ノードJS)をインストールし、Node.jsが何であるかを知ることができます。
  • NPM (Node Package Manager)に登録されている多数のオープンソースを利用できます。
  • Vue CLIを使用してVueプロジェクトをすばやく作成、管理、展開する方法を学びます。
  • Vuexによる状態管理方法を学びます。
  • Vue Routerでアプリケーションメニューをどのように設定し、メニューのコードをロードするかを分離してアプリケーションのパフォーマンスを向上させる方法を学びます。
  • Vueコンポーネントの開発に関連するすべての文法と機能がわかります。
  • Vue 3バージョンに追加されたコンポジション API、Plugins などの便利な機能がわかります。
  • 実務で最も多く開発するUIパターン5つを完璧に習得します。これだけでも皆さんは実務で開発する70%以上の画面を実装できるようになります。

選手の知識を確認してください。



Web開発フルスタックコース、

他の講義も一緒に会いましょう!

1. [ウェブ開発フルスタックコース - HTML&CSS基礎]

  • Webの基礎言語であるHTMLとCSSをじっくり学びます。

2. [ウェブ開発フルスタックコース - バニラJavaScript]

  • 純粋なJavaScriptを正しく習得しなければリードする開発者になることができます。

3. [ウェブ開発フルスタックコース - ブートストラップ基礎]

  • 誰でも簡単にクールなデザインを持つレスポンシブウェブを作成できます。

4. [Web開発フルスタックコース - Vue.jsプロジェクト投入1週間前 - 基礎から実務まで] 現在講義

  • 最も簡単で強力なフロントエンドフレームワークであるVue.jsを学びます。

5. [ウェブ開発フルスタックコース - ネットフリックスとニンジンマーケット分析を通じて学ぶデータベースの理解]

  • ネットフリックス、ニンジン市場を分析しながら、自然にデータベースを設計する方法を理解するようになります。

6. [ウェブ開発フルスタックコース - Node.jsプロジェクト投入一週間前 - 基礎から実務まで]

  • JavaScript言語でバックエンドまで実装できます。 Node.jsなら可能です。

7. [ウェブ開発フルスタックコース - ポートフォリオ]

  • Web開発フルスタックコースで学んだすべての技術に基づいて、製品販売ミニWebを開発します。

この講義をした人は
誰ですか?

開発者の品格

ソフトウェア技術を通じて世界に良い影響力を与えたい24年目のソフトウェア開発者
知識を分かち合うのが好きで、常に新しいスキルを身につけることを楽しんでいます。

国内外60社を超えるグローバル企業ERPシステムを構築するコンサルタントおよび開発者として活動し、直接開発したソフトウェアを国内はもちろん海外有数の企業に販売した経験も持っています。 ITスタートアップ代表取締役でもあります。

開発者だけでなく、UXコンサルタントとして、時にはビジネスコンサルタントとして働きながら、アプリケーションやサービス開発時の企画から開発まで、全過程について数多くの経験を積んできました。今は20年以上の実務経験をもとに、後輩たちに本当に必要な技術、本当にきちんとした知識を伝える使命感で知識を分かち合うことをしています。

もっと学びましょうか?

「開発者の品格」 YouTubeチャンネルに公開
「1時間で終わるVue.js入門」講義です。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • Vue.jsでプロジェクトを開始するビジネス開発者

  • Webフロントエンド開発者

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

  • HTML

  • CSS

  • JavaScript

こんにちは
です。

10,966

受講生

248

受講レビュー

152

回答

4.9

講座評価

8

講座

소프트웨어 기술을 통해 세상에 선한 영향력을 주고 싶은 24년차 소프트웨어 개발자.
지식을 나누는 것을 좋아하고 항상 새로운 기술을 익히는 것을 즐겨요.

국내외 60개가 넘는 글로벌 기업 ERP 시스템을 구축하는 컨설턴트 및 개발자로 활동하였고, 직접 개발한 소프트웨어를 국내는 물론 해외 유수의 기업에 판매를 한 경험 또한 가지고 있어요. IT스타트업 대표이사 이기도 해요.

개발자 뿐만 아니라, UX 컨설턴트로, 때로는 비즈니스 컨설턴트로 일하면서 애플리케이션과 서비스 개발 시 기획에서 개발까지 전과정에 대한 수많은 경험을 쌓았고, 이제는 20년이 넘는 실무 경험을 바탕으로 후배들에게 정말 필요한 기술, 정말 제대로 된 지식을 전달하는 사명감을 갖고 지식 나눔에 일을 하고 있어요.

 

  • (현)주식회사 더그레잇 대표이사
  • (현)주식회사 썬슈어 CTO
  • (현)주식회사 리턴밸류 CTO
  • (현)팬임팩트코리아 유한회사 기술전문위원

 

이메일 - seungwon.go@gmail.com

カリキュラム

全体

35件 ∙ (23時間 59分)

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

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

受講レビュー

全体

6件

5.0

6件の受講レビュー

  • mirage7402님의 프로필 이미지
    mirage7402

    受講レビュー 1

    平均評価 5.0

    5

    31% 受講後に作成

    관련 실무를 하는 사람이 보기에도 매우 도움되고 유용한 강의 입니다

    • 심상화님의 프로필 이미지
      심상화

      受講レビュー 1

      平均評価 5.0

      5

      97% 受講後に作成

      이해하기 쉬운 설명과 좋은 예시들로 많은 도움이 되었습니다.

      • 때구니님의 프로필 이미지
        때구니

        受講レビュー 25

        平均評価 5.0

        修正済み

        5

        100% 受講後に作成

        실무에 사용되는 코드위주로 강의가 진행되기에 현장 및 프로젝트에 실질적으로 도움이 되는 최고의 강의입니다. 개인적으로 Vue 관련 강의의 종결자라고 평합니다.

        • 김재표님의 프로필 이미지
          김재표

          受講レビュー 16

          平均評価 4.6

          5

          31% 受講後に作成

          알찬 강의해주셔서 감사합니다.^^

          • rnd님의 프로필 이미지
            rnd

            受講レビュー 1

            平均評価 5.0

            5

            31% 受講後に作成

            ¥28,447

            realprogrammersの他の講座

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

            似ている講座

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