강의

멘토링

로드맵

BEST
Programming

/

Front-end

Nuxt.js の開始

私が作成したVue.jsサイトをより多くの人に公開したい場合は?キャプテン板橋のVue.jsシリーズを全部聴いて今はサーバーサイドレンダリングもやってみたい方が聴きやすい講座です。 Nuxt.jsはじめに講義!

  • captain
Nuxt.js
Vue.js
ssr

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

こんなことが学べます

  • サーバー側レンダリング

  • Vue.js 開発

  • フロントエンド開発

Nuxt.jsで出会うサーバーサイドレンダリング!
今Vue.jsをより強力に使用してみてください。

Vue.js、もっと使いたいなら?

Vue.jsを使用するフロントエンド開発者なら、Nuxt.jsでサーバーサイドレンダリングを実装できます。

ビュー開発者なら、ノプストを通して
サーバーサイドレンダリングを実装できます。


さて、
サーバーサイドレンダリングとは何ですか? 🤔

サーバーサイドレンダリングとは、サーバーからページを描画してクライアント(ブラウザ)に送信して画面に表示する手法です。検索エンジンの最適化(SEO:Search Engine Optimization)SNSから自分のサイト情報を正確に配信するために、サーバーサイドレンダリング技術を使用します。

このようなサーバーサイドレンダリングを実装するために、Vue.js開発者がよく書くフレームワークはNuxt.jsです。私が作ったサイトをより多くの人々に公開してくれる役割をします。

ただ、国内にはまだNuxt.js専門講義がなく、参考になる資料も多くないため、授業を開設してもらうよう要請を受けました。この講義がNuxt.jsでサービスを開発しなければならない方に役立つ資料になれば幸いです。


Nuxt.jsを起動している方へ
役に立つように。

プロジェクト作成からサービス展開まで
ノックストで開発するときは必ず知っておくべきこと
すべての内容を扱います。

「ノプスト書くべきだが、ビューラン開発方式がどう違うのか?」
サーバーサイドレンダリングの概念が見知らぬ方、会社でNuxt.jsで開発する必要がありますが、一度も扱っていない方に適した講座です。簡単なショッピングモールサイトの一部を制作しながら、Nuxt.jsと既存のVue.jsの開発方法がどう違うかを学びましょう。

✅Nuxt.jsを初めて起動する方
✅ Vue.js開発の基本概念はわかりますが、サーバーサイドレンダリングが慣れていない方
✅会社でNuxt.jsプロジェクトを進行するのにどこから始めるべきかを感じにくい方
✅サーバーサイドレンダリングに興味があるフロントエンド開発者


この講義を作った
知識共有者を紹介します😎

事業開発実務者の
ノウハウを教えてください🎁


この講義だけの特徴
確認してください✨

講義の教案を提供します。

講義で取り上げるNuxt.jsとサーバーサイドレンダリングに関する主な概念を、よく書かれた教案と図で簡単に理解できるようにします。

直接サイトを作成してみてください。

モールサイトを作成しながら、Nuxt.jsの長所と文法を自然に体験できます。 (実習70%以上)

自然に構造を比較します。

キャプテン板橋Vue.jsシリーズの内容が自然にNuxt.js講義につながるように、シングルページの構造と比較して説明します。

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


講義で学ぶ
内容をお知らせします🎈

サーバーサイドレンダリング

既存のビューCLIで作成したプロジェクトで開発したときとの違いと、サーバーサイドレンダリングの仕組みや利点などについて詳しく説明します。

サーバーサイドレンダリングの仕組みを理解する

実際のSSRが適用されたサイトとそうでないサイトを比較しながら、目で学んだ概念を簡単に理解するのに役立ちます。

レイアウトパターンについて

Nuxt.jsのレイアウトコンポーネントを理解するためのスキームと既存のシングルページアプリケーションとの違いについて詳しく説明します。

Nuxt.jsのESLintルール

ビューCLIプロジェクトよりも強化されたNuxt.jsのESLintルールについて説明します。コードで実際のESLintがどのように適用されているかを見てください。

バックエンドAPIサーバーの構成と連携

モールサイトを開発するためのバックエンドAPIサーバーの設定方法を案内します。サーバーを構成するための手順は、授業後も自分で進めるようにガイドを提供します。

コンポーネントの設計方法

React、Vueなど、コンポーネントベースのフレームワークで悩む必要があるコンポーネントの設計方法についてご案内し、実装された内容についてレビューします。

ショッピングモールに似たウェブサイト制作

モールに似たウェブサイトを実際のAPIに連動して制作してみます。制作の過程で、Nuxt.jsの概念を順番に適用し、既存のVue.jsアプリケーションとの違いを学びます。

マークアップ&スタイリングは必要なだけ

画面開発のための主要なレイアウトマークアップとスタイリングのみが行われ、詳細なスタイリングは羽毛リポジトリのソースコードとして提供されます。 Nuxt.jsの概念学習に集中でき、迅速かつ効率的な学習が可能です。


よくある質問 💬

Q. Vue.jsは初めて接するのにこの講義を聞くことができますか?

このレッスンは、Vue.jsの基本概念を知っている人が聞くのに適しています。 Nuxt.jsは、Vue.jsで開発する際に知っておくべき基本的な知識にルールがもう少し追加されたフレームワークとして見れば良いと思います。キャプテン板橋のVue.jsシリーズの講義を始める~終了するまで先に受講してから聞くのがおすすめです。

Q. サーバーサイドレンダリングの概念を全く知らないのにクラスを聞くことができますか?

はい、聞いてください。 Nuxt.jsのAPIや使い方だけを扱うだけでなく、なぜサーバーサイドレンダリングを書けば良いのか、既存のクライアントサイドレンダリング(シングルページアプリケーション)との違いは何か一つ一つ細かく詳しく取り上げています。クラスを聞いたら、サーバーサイドレンダリングの概念をしっかりとつかむことができます。

Q. フロントエンド開発が初めてなのに受講しても大丈夫でしょうか?

この講義はフロントエンドの開発を初めて始める方には適していない講義です。 HTML、CSS、JSの基本的な概念がある方が、聞きやすく講義を構成しました。少なくとも、Vue.jsの基本概念とルーターを使ったシングルページアプリケーションの概念を理解した状態で聞くことをお勧めします。

Q. Vue.js 3が出ましたが、Vue 3に進みますか? Vue 2に進みますか?

このクラスはVue 2に基づいて行われます。まだVue 3をベースにしたNuxt.jsの公式バージョンはリリースされておらず、Vue 3も現業での使用には制約が多いため、学習後すぐに適用できるVue 2を基準に製作しました。今後Vue 3をベースにしたエコシステムが安定したら、Vue 3の内容も追加でアップデートする予定ですので参考にしてください:)

※Vue 2で学んだ内容をすべてVue 3でそのまま適用できます。 Vue 2とVue 3の違いは主なAPI 1つ程度の違いで見ればよく、大きく違いはありません。


キャプテン板橋の
他の講義が気になったら?

知識共有者の紹介👨‍🏫

チャン・ギヒョ(キャプテン板橋)

「Inflearnが出会った人」インタビュー

「講義収益でVue.jsオープンソース+
ライフコーディングを後援します😁」

講義割引を提供します!

シリーズ「Vue.jsで完成するフロントエンド
開発者ロードマップ" 25%オフ(クリック)

収入のない中・高校生、
大学生のための学生の50%割引(クリック)

こんな方に
おすすめです

学習対象は
誰でしょう?

  • Nuxt.js を初めて使用される方

  • サーバーサイドレンダリングを学びたい方

  • Vue.js を使用して、多くの人に公開されるサイトを作成したい方

  • フロントエンド開発者

  • パブリッシャー

  • 就職準備生

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

  • Vue.js の始め方

  • Vue.js中級

  • Vue.js 完全ガイド

  • Vue.js を徹底的に理解する

こんにちは
です。

48,224

受講生

4,701

受講レビュー

3,813

回答

4.9

講座評価

17

講座

인프런에서 8년째 지식을 공유하고 있습니다. 🏠 기술블로그, 📣 트위터, 💻 깃헙

📗 Do it! Vue.js 입문, 쉽게 시작하는 타입스크립트, 나는 네이버 프런트엔드 개발자입니다. 책 3권 집필
📖 Cracking Vue.js, 타입스크립트 핸드북, 웹팩 핸드북. 온라인 무료 가이드북 3권 집필
👨‍💻 캡틴판교의 프론트엔드 개발 유튜브 채널 운영 - 취준생, 주니어 개발자들의 고민을 들을 수 있는 곳
🥤 캡틴판교의 카카오톡 오픈 채팅방 운영 - 프런트엔드 개발 최신 정보와 업계 동료들의 생각과 고민을 들을 수 있는 곳

カリキュラム

全体

73件 ∙ (6時間 11分)

講座掲載日: 
最終更新日: 

受講レビュー

全体

121件

4.9

121件の受講レビュー

  • fordev님의 프로필 이미지
    fordev

    受講レビュー 6

    平均評価 5.0

    5

    100% 受講後に作成

    I am a backend developer. After listening to the best lectures by Jang Gi-hyo, I am becoming very interested in web development. But the final form of the system I want to implement is Nuxt3(SEO) + Vue3. I heard that Nuxt3 was recently released. I would like to request training based on Nuxt3. I watched the Vuetify2 YouTube video and it wasn't as difficult as I thought. I think Vuetify3 will be released in the first half of next year according to the official website. Thank you for the great training. ^^

    • dkaskgkdua님의 프로필 이미지
      dkaskgkdua

      受講レビュー 6

      平均評価 5.0

      5

      100% 受講後に作成

      There are still no or rare books or lectures related to nuxt in Korea, so this was very helpful. Do you have any plans for a semi-practical level clone coding nuxt lecture?? For example, using a package like nuxt-auth to configure or configure an API module... I wonder how you would configure it in nuxt!!

      • sujin34731147님의 프로필 이미지
        sujin34731147

        受講レビュー 1

        平均評価 3.0

        3

        14% 受講後に作成

        Since it's an old version, the project creation method is a little different. I think it would be good if you could upgrade it like the Vue 3 lecture.

        • chan9yu님의 프로필 이미지
          chan9yu

          受講レビュー 1

          平均評価 5.0

          5

          100% 受講後に作成

          I'm a college student who has been studying hard for 2 months because I became interested in front-end! I studied vaguely on my own and didn't understand anything and it was so hard, but I happened to come across Captain Pangyo and I'm currently listening to all the lectures and reviewing them! Thanks to him, I feel like I'm studying in a good directionㅜㅜ The lectures are really good and this Nuxt lecture was also very helpful. I'm really grateful to you personally! I'll jump right in and take the new lectures as soon as they come out in the futureㅠㅠ

          • captain
            知識共有者

            Oh my, Chan-gyu, thank you so much for the great review! Haha Please look forward to future lectures. I will prepare a real lecture! :)

        • rnlghdals7335님의 프로필 이미지
          rnlghdals7335

          受講レビュー 8

          平均評価 5.0

          5

          100% 受講後に作成

          Since I only used Vue, there were a lot of things that had to be set up from the beginning, but since I use the Nuxt framework, there are a lot of things that are supported, and SSR is a big advantage.

          • captain
            知識共有者

            Right, if you have some knowledge of views, I think it's actually easier to start with Nuxt.

        期間限定セール、あと5日日で終了

        ¥33

        23%

        ¥6,708

        captainの他の講座

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

        似ている講座

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