AIと一緒に学ぶNext.js
captain
複雑なNext.jsの様々な概念を短時間で核心だけ学べます。Next.jsを初めて学ぶ方のための実務必須知識だけをお伝えします。フレームワーク講義だけで8年目を迎えるキャプテンパンギョのNext.js新規講義。「AI時代のフロントエンド開発者」のコーディングと学習方法を学べます！:)
入門
JavaScript, React, Next.js
BEST
Nuxt.jsを始める
自分が作ったVue.jsサイトがより多くの人に露出されることを望むなら？キャプテンパンギョのVue.jsシリーズを全て聞いて、今度はサーバーサイドレンダリングもやってみたい方におすすめの講座です。Nuxt.js入門講座！
Nuxt.js
Nuxt.js
Vue.js
Vue.js
ssr
ssr
学習した受講者のレビュー
学習した受講者のレビュー
4.9
5.0
toki moki
100% 受講後に作成
私はバックアンド開発者です。 チャン・ギヒョ先生の最高レベルの良い講義を聞いてWeb開発に 膨大な関心が生まれています。 しかし、私が実装したいシステムの最終的な外観は Nuxt3(SEO) + Vue3 です。 Nuxt3も最近Releaseになったそうです。 Nuxt3に基づいてトレーニングを要求します。 Vuetify2 YouTubeの動画を聴いたのに、思ったより難しくないですね Vuetify3は公式ホームページを見ると来年上半期にリリースされる 見てください。 良い教育ありがとうございました。 ^^
5.0
mj Song
100% 受講後に作成
まだ韓国にnuxt関連の書籍や講義がないかまれに多くの助けになっています。 もし与えた実務レベルのクローンコーディングnuxt講義は計画がないでしょうか？ たとえば、nuxt-authのようなパッケージを使って設定やapiモジュールを設定するなど... nuxtではどのように構成するのか気になります！
5.0
찬규
100% 受講後に作成
フロントエンドに関心がありながら2ヶ月間頑張って勉強している大学生です！ 一人で漠然と勉強していて理解もできず、とても大変でしたが、偶然キャプテン板教様に触れて今講義まで聞いて復習もしていますよ！ありがとうございます。 本物の講義はとても良いですが、今回のnuxt講義も助けてくれました。 今後新しい講義が出たら、すぐに走って受講しますㅠㅠ
受講後に得られること
Server Side Rendering
Vue.js開発
フロントエンド開発
Nuxt.jsで出会うサーバーサイドレンダリング！
今すぐVue.jsをより強力に使ってみましょう。
Vue.js、もっと上手に使いたいなら?
Vueの開発者ならNuxtを通じて
サーバーサイドレンダリングを実装できます。
ところで、
サーバーサイドレンダリングって何ですか？🤔
サーバーサイドレンダリングとは、サーバーでページを描画してクライアント（ブラウザ）に送った後、画面に表示する技法です。検索エンジン最適化（SEO: Search Engine Optimization）とSNSで自分のサイト情報を正確に伝えるためにサーバーサイドレンダリング技術を使用します。
このようなサーバーサイドレンダリングを実装するために、Vue.js開発者がよく使うフレームワークがNuxt.jsです。自分が作ったサイトをより多くの人に露出させる役割を果たします。
ただし、国内にはまだNuxt.jsの専門講座がなく、参考になる資料も多くないため、授業を開設してほしいというリクエストをよく受けました。この講座がNuxt.jsでサービスを開発しなければならない方々に有用な資料になればと思います。
Nuxt.jsを始める方々に
役立つように。
プロジェクト作成からサービスデプロイまで、
Nuxtで開発する際に必ず知っておくべき
すべての内容をお伝えします。
「Nuxtを使わなきゃいけないけど、Vueと開発方式がどう違うんだろう?」
サーバーサイドレンダリングの概念に馴染みのない方、会社でNuxt.jsで開発しなければならないのに一度も扱ったことがない方に適した講座です。簡単なショッピングモールサイトの一部を制作しながら、Nuxt.jsと既存のVue.jsの開発方式がどう違うのか一緒に学んでみませんか?
✅ Nuxt.jsを初めて始める方
✅ Vue.js開発の基本概念は知っているが、サーバーサイドレンダリングに慣れていない方
✅ 会社でNuxt.jsプロジェクトを進めているが、どこから始めればいいのか感覚がつかみにくい方
✅ サーバーサイドレンダリングに興味があるフロントエンド開発者
この講義を作った
知識共有者を紹介します 😎
現場開発実務者の
ノウハウをお教えします 🎁
この講座だけの特徴を
確認してください ✨
講義資料を提供します。
講義で扱うNuxt.jsおよびサーバーサイドレンダリング関連の主要概念を、よく作成された教材と図を通じて簡単に理解できるようにします。
直接サイトを制作してみましょう。
ショッピングモールサイトを制作しながら、Nuxt.jsの長所と文法を自然に体得できます。(実習70%以上)
自然に構造を比較します。
キャプテンパンギョのVue.jsシリーズの内容が自然にNuxt.js講座につながるよう、シングルページの構造と比較して説明します。
📢 前提知識を確認してください！
- この講義はキャプテンパンギョVue.jsシリーズと連携する講義です。(1) Vue.js 始めよう - (2) Vue.js 中級 - (3) Vue.js 完璧ガイド - (4) Vue.js 完全マスターをすべて学習された方に適した講義ですので、必ず前提課程を受講してください 🙂
講座で学ぶ
内容をお知らせします 🎈
サーバーサイドレンダリング
既存のVue CLIで生成したプロジェクトで開発した場合との違いや、サーバーサイドレンダリングの動作方式、そしてメリットなどを詳しく説明します。
サーバーサイドレンダリングの動作方式の理解
実際にSSRが適用されたサイトとそうでないサイトを比較しながら、目で学んだ概念を簡単に理解できるように手助けします。
レイアウトパターンの理解
Nuxt.jsのレイアウトコンポーネントを理解するための図式と既存のシングルページアプリケーションとの相違点を詳しく説明します。
Nuxt.jsのESLintルール
Vue CLIプロジェクトより強化されたNuxt.jsのESLintルールを説明します。コードで実際にESLintがどのように適用されているか見ていきます。
バックエンドAPIサーバーの構成と連携
ショッピングモールサイト開発のためのバックエンドAPIサーバー構成方法を案内します。サーバーを構成するための手順は、授業後も自ら進められるようにガイドを提供します。
コンポーネント設計方式
React、Vueなどコンポーネントベースのフレームワークで考慮すべきコンポーネント設計方式について案内し、実装された内容についてレビューします。
ショッピングモールに似たウェブサイト制作
ショッピングモールに似たウェブサイトを実際のAPIと連動して制作してみます。制作する過程でNuxt.jsの概念を順番に一つ一つ適用してみながら、既存のVue.jsアプリケーションとの違いを理解します。
マークアップ&スタイリングは必要な分だけ
画面開発のための主要レイアウトマークアップとスタイリングのみ進行し、詳細なスタイリングはGitHubリポジトリのソースコードで提供します。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つ程度の違いと考えていただければよく、大きな差はありません。
キャプテンパンギョの
他の講座が気になる方は?
講師紹介 👨🏫
キャプテンパンギョ
- 13年目のフロントエンド開発者
- "Do it! Vue.js 入門" 、"쉽게 시작하는 타입스크립트" 著者
- ネイバー、eBayコリア、サムスン、LG、SKグループなどでVue.js講義
- ファストキャンパス Vue.js 征服キャンプ講義
- Google ウェブ技術公式サイト翻訳者
- 技術ブログ、Github
"講義収益でVue.jsオープンソース +
生活コーディングを後援しています 😁"
こんな方に
おすすめです
学習対象は
誰でしょう？
Nuxt.jsを初めて始める方
サーバーサイドレンダリングを学びたい方
Vue.jsで多くの人に露出されるサイトを作りたい方
フロントエンド開発者
パブリッシャー
就職活動中の人
前提知識、
必要でしょうか？
Vue.js 入門
Vue.js 中級
Vue.js 完全ガイド
Vue.js 完全マスター
49,267
受講生
4,853
受講レビュー
3,816
回答
4.9
講座評価
19
講座
Inflearnで8年目、知識を共有しています。 🏠 技術ブログ, 📣 Twitter, 💻 GitHub
📗 Do it! Vue.js入門、簡単に始めるTypeScript など 書籍3冊を執筆
📖 Cracking Vue.js、TypeScriptハンドブック、Webpackハンドブック。 オンライン無料ガイドブック3冊を執筆
👨💻 キャプテン板橋のフロントエンド開発YouTubeチャンネル 運営 - 就活生、ジュニア開発者の悩みが聞ける場所
🥤 キャプテン板橋のカカオトークオープンチャット 運営 - フロントエンド開発の最新情報と業界の仲間の考えや悩みを聞ける場所
カリキュラム
全体
73件 ∙ (6時間 11分)
9. Nuxtプロジェクトの作成
05:38
10. プロジェクトフォルダ構造の説明
05:49
11. メインページの作成と結果の確認
04:05
13. エラーページの定義方法
02:45
15. レイアウトコンポーネントの紹介
06:44
16. nuxt-linkタグの紹介
02:29
講座掲載日:
最終更新日:
受講レビュー
全体
127件
4.9
127件の受講レビュー
fordev受講レビュー 6
∙
平均評価 5.0
- mjso
受講レビュー 6
∙
平均評価 5.0
- rnlghdals7335
受講レビュー 8
∙
平均評価 5.0
5
100% 受講後に作成vueだけで最初から環境設定してくれなければならない部分が多かったのですがnuxtフレームワークを使ってサポートしてくれることも多く、SSRがメリットが大きいですね
- captain知識共有者
その町ビューをある程度知っていれば nuxt で始めるのがむしろ楽な部分が多いようです。
- derrickrodo
受講レビュー 72
∙
平均評価 5.0
￥6,801
captainの他の講座
知識共有者の他の講座を見てみましょう！
似ている講座
同じ分野の他の講座を見てみましょう！
![企画者様 この程度ウェブ開発は学んでみてはいかがでしょうか？ [理論+実習]講義サムネイル](https://cdn.inflearn.com/public/courses/333579/cover/5bfdb903-721c-4e32-803b-ed0d4cfc28b7/333579.png?f=avif&w=420)
