BEST

Full-stack

Vue-Django-Bootstrap 뚝딱ブログ

Name: Vue-Django-Bootstrap 뚝딱ブログ
Price: 33000 KRW
Rating: 4.8 (12 reviews)

人気3総士（Vue + Django + Bootstrap）を活用して、簡単かつ素敵な自分のブログを作ることができます。レスポンシブは基本、スマートフォンでも見ることができます。

（4.8）受講レビュー 12件

受講生 295名

難易度初級

受講期間 無制限

bestdjango

Vue.js

Django

Bootstrap

Vue.js

Django

Bootstrap

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

4.8

5.0

때구니

100% 受講後に作成

ブートストラップとDjangoテンプレートとVUE.JSをどのように効率的に使用するかを確認するための良い講義でした。ありがとうございます。

5.0

mo app

96% 受講後に作成

djangoとvuejsを連動開発するためには必ず見なければならない講義です。完成度の高い開発例と講義で多くを学ぶことができます。

5.0

호타물

100% 受講後に作成

良い講義です。クラス型ビュー（CBV）についてたくさん学びました。後でDRFを利用する際に多くの役に立つと思います。

受講後に得られること

Django を利用した Python Web プログラミング
jQuery の代わりに Vue.js を使用
Bootstrap 無料テーマ/テンプレートの活用

私の手で、私だけのブログ🏠
ビュー+ジャンゴ+ブートストラップWeb開発！

_{カテゴリを移動し、コメントを残し、ページネーションは直接実装します。}

_{スクロールによってメニューが変わるscrollspy UIも実装できます。}

簡単で迅速ながら
素晴らしいWeb開発？

Webプログラミングでは、UIはますますカラフルになっています。
だから初心者なら誰でも悩むようになります。「私も素敵なウェブを作ることはできませんか？」します。

この質問に対する私の答えを申し上げます。
これはVue.js + Django + Bootstrapで可能です。

一方、VueとDjangoを連動してWebプログラミングをします。
どちらも、UI では Bootstrap でサポートするテーマを使用します。

これら3人とも多くの人が使いながらも簡単だと話す人気フレームワークです。
今回の講義では、素敵なブログのWebページを直接作成し、フロントエンドとバックエンドを連動するWeb開発の原理とコア技術を学習してみましょう。それでは一緒に見てみましょうか？

こんな方へ
おすすめです。

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

Vue.jsとDjangoの基本知識を持つ方を対象とした講義です。

_{簡単で迅速ながら
素晴らしいWebプログラミング
したい方}

_{すでに作られている
テーマを活用する
素敵なUIを作る人}

_{技術トレンドイン
フロントエンド/バックエンド
連動したい方}

もしかしたら、こんな悩みをお持ちですか？

DjangoとVue.jsの基本的な機能を知っている方が受講できる講義です。

チュートリアルくらいは作れますが、
自分でやる時は詰まる時があります。

簡単なウェブプログラミングはできますが、
UIが気に入らない。

Djangoは書くと思いますが、フロントに
最新の技術であるVue.jsを使いたいです。

Vue.jsは書くと思いますが、サーバー技術として
Djangoを使いたいです。

Djangoを使うのに、どんどんエラーが出て詰まる時があります。
👉 Django(ジャンゴ)は多様な機能や開発者を楽にする機能が多いのに対し、そのような機能をよく把握していなければエラーに対処できます。これを行うために、Django Documentationを読む方法を教えてください。主な内容について詳しく説明します。
今よりも素敵なUIを作りたいです。
👉素晴らしいUIは誰でも欲しいですが、フロントエンドの技術とデザイン感覚が必要な分野なので、別途勉強が必要です。このレッスンでは、事前に作成されたBootstrap（ブートストラップ）テーマを使用する方法について説明します。専門家が作った素敵なUIでありながら、初級者も活用できる良い方法だからです。
わかりました/単語推薦など Async/Interactiveな機能を作りたいです。
👉 Webプログラムでは、Async / Interactive機能はほとんど必須です。以前はjQuery（ジェイクエリ）でコーディングした場合は、このレッスンではVue.js（ビュー）を使用します。 VueはjQueryのすべての機能を置き換えることができ、パフォーマンスが向上した最新の技術だからです。
スマートフォンでも動作するWebプログラムを作りたいです。
👉このレッスンで活用するStart Bootstrapテンプレートは、基本的にレスポンシブアクションをサポートします。そのため、別途コーディングせずにPCとスマートフォンの両方で動作するWebページを作成します。

この講義が特別な理由
お知らせします。

この講義を聞いたら！

Vue-Djangoを連動するための、axios/JsonResponseの使い方がわかります。
jQueryで作成した機能を、今では最新の技術であるVueで作成できるようになります。
Start Bootstrapテーマ/テンプレートなどを自分で活用できます
利点が多いというDjangoのクラス型ビューを確実に理解できます。

応用まで考えたWeb開発学習講義です。

単に「Webプログラムが戻る」「コードできる」というレベルを超えて、 Djangoの動作原理や背景知識を伝えようと努力しました。そうすれば一つを学んでも10個で応用して拡張できるからです。

また、主な内容は初級機能に合わせましたが、▲Pagination▲JSにデータ配信▲prefetch-relatedなどの中級機能も含め、皆さんがもう少し発展できるよう講義を構成しました。

最後に、重要な内容はPPTで作成し、動画で説明することで理解を助けるよう努めました。ソースコードとレッスンに使用される資料を提供します。

普通のシングルページアプリケーション連動方式に比べ、本講義のメリットです。

Vue-Django連動方式でありながら、VueRouter/Vuex/DRFを使用する必要はありません。
Vue-Django連動方式ながらも、DjangoのAdmin機能をそのまま使用します。
DjangoをAPIサーバーだけで使用するのではなく、テンプレート処理も同時に可能です。
必要に応じて、Djangoの認証機能をそのまま再利用できます。

Django Rest Framework いいけど、よく詰まったら？

DRFは最初は簡単に見えますが、アプリケーションには頻繁に詰まることがあります。
DRF のシリアライズ、クラス継承、オーバーライディングが慣れていないからでしょう。
このレッスンで基本的なスキルを習得し、その後必要に応じてDRFを使用することをお勧めします。
DRF に基本となる技術は、やはりクラス型ビュー（CBV）だからです。

次の順序で
学習します。

Start Bootstrapテーマを活用する

ブートストラップのテーマとテンプレートをダウンロードして活用する方法を学び、Djangoでテーマを修正してみてください。

DjangoでBlogアプリを開発する

Djangoでブログアプリの基本構造を作成する方法を学びます。

Vue-Django APIの開発

DjangoにVue.jsを連動させることで、どのような利点があるのかを調べ、APIを設計します。

各種拡張機能

ページネーション、JSへのデータ配信、CSRFトークン機能など、さまざまな拡張機能を学習します。

DB Queryのパフォーマンス向上

データベースのパフォーマンスを向上させるためにクエリを改善します。

スマートフォンで見る

デスクトップだけでなく、スマートフォン、タブレットなどのモバイルデバイスでも画面を見やすくするために、レスポンシブWeb技術を学びます。

よくある質問
確認してみてください。

Q. Python - Djangoは初めてです。講義に従えますか？

Django OneでWebプログラミングを行った経験が必要です。それ以降にVueを追加し、本講義のような一段階アップグレードされたVue-Django連動方式のプログラムを行います。

Q. ビューを必ず使うべきですか？ DjangoだけでWebプログラミングできませんか？

もちろんジャンゴだけで可能です。ただし、ビューを使用すると、UIがアップグレードされます。 UIはサーバー側で処理するのではなく、クライアント側で扱う方がはるかに効率的です。本レッスンではjQueryレベルで使用しており、レッスンを終えてもう少し勉強すれば、アニメーションなどのUI高度な機能に対する実装も可能でしょう。

Q. ビューの代わりにリアクト（React）を使用できますか？

可能です。連動とDjango側のコードは同じです。ビューコードだけをリアクトに置き換えてください。

ビューとリアクトの両方が良いフレームワークで、自分の状況に合わせて選択できます。ただし、本講義のように既に存在するHTMLファイルを活用する場合は、ビューがリアクトに対してはるかに有利であることは考慮してください。

Q. 簡単だというのにどんな点が簡単ですか？

View-Djangoを連動するときは、多くの場合、Vue Router、Vuex、DRFなどを使用します。これら3つを使用しなくてもかまいません。それだけ勉強量が減ります。

また、インターネット上のブートストラップテーマを活用して、すばやく簡単で素敵なUIを作成できます。

Q. 知識共有者様の他の講義とはどう違いますか？

難易度は私の Inflearn 講義 (Vue-Django 連動) 基本編と実戦編中程度です。

実戦編と比べるとブログアプリは同じですが、いいね非同期（Async）機能とコメントフォーム処理が追加され、ページネーション（Pagination）機能は直接焼き付けます。

主な違いは、Vuetifyの代わりにBootstrapを使用することです。

知識共有者の
他の講義が気になったら？

Vue.js - Django連動
Webプログラミング
ツードゥーアプリをコーディングする

Vue.js - Django連動
Webプログラミング(実践編)
美容パイの活用まで

こんな方に
おすすめです

学習対象は
誰でしょう？

簡単で迅速かつ素晴らしい Web プログラミングを行いたい方
すでに作成されたテーマを活用して、素晴らしい UI を作成したい方
フロント/バックエンドを連携させる技術トレンドを知りたい方

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

Django チュートリアルおよびクラス型ビューには、コーディング経験が必要です。
Vue.js の基本ディレクティブ (v-for、v-if など) を理解している必要があります。

こんにちは
です。

2,104

受講生

154

受講レビュー

224

回答

4.6

講座評価

講座

プログラム開発はC言語から始まり、Javaを経て、最近では主にPythonを使用している。
KT ucloudサービスのバックエンドサーバー開発プロジェクトに参加し、Javaで顧客のフォルダ/ファイルに対するメタ情報処理エンジンを、Pythonでクライアントプッシュサービスを開発した。

また、KTインターネット回線の速度測定プログラム、ネットワーク機器の運用管理プログラム、膨大な量のトラフィックデータ分析プログラムを開発した経歴がある。個人的にはPythonの魅力に惹かれ、できるだけPythonでコーディングすることを楽しんでいる。

その一環として、最近はDjangoを活用したウェブプログラミング、Django Rest Frameworkを活用したJSON連動、Pandasを活用したデータ分析、Scikit-learn/Tensorflow/ChatGPTを活用したAIソリューション開発などのプロジェクトを開発しながら、Pythonの活用範囲を広げている。

< 著書 >

1. Djangoで学ぶPython Webプログラミング（初版、ハンビッメディア、2015.4月）
2. Djangoを活用したPython Webプログラミング - 実戦編（初版、ハンビッメディア、2016.7月）
3. Djangoで学ぶPython Webプログラミング（改訂版、ハンビッメディア、2018.8月）
4. Djangoを活用したPython Webプログラミング - 実戦編（改訂版、ハンビッメディア、2019.11月）
5. Djangoで学ぶPython Webプログラミング（第3版、ハンビッメディア、2022.11月）

< 動画講義 >

1. Vue.js - Django 連携ウェブプログラミング (Inflearn 動画、2019.4月)
2. Vue.js - Django 連携ウェブプログラミング - 実践編 (Inflearn 動画、2020.9月)
3. Vue - Django - Bootstrap パパッと作るブログ (Inflearn 動画、2021. 9月)
4. Django REST framework 核心事項 (Inflearn 動画、2022.2月)
5. AI Web Programming (Inflearn 動画、2024.2月)

カリキュラム

全体

50件 ∙ (5時間 44分)

講座資料（こうぎしりょう）:

授業資料

セクション 1．完成プログラムプレビュー

2件 ∙ (7分)

セクション 2．Start Bootstrap テーマの使い方

4件 ∙ (32分)

セクション 3．Djangoでブログアプリ開発

9件 ∙ (1時間 9分)

7. サイトトップページ作り
04:56
8. 自己紹介ページ作成
07:03
9. ブログアプリ作成
11:29
10. テーブルおよびテーブル間の関係
06:14
11. Post-Detail 仮画面
09:15
12. Django でのテーマ-2修正
06:29
13. メインメニューおよびテンプレート継承
08:13
14. Post-Detail画面作成
08:24
15. Scrollspy 機能
07:19

セクション 4．Vue-Django API 開発 (I)

6件 ∙ (47分)

セクション 5．Vue-Django API 開発 (II)

9件 ∙ (1時間 17分)

セクション 6．拡張 - ページネーション機能

5件 ∙ (32分)

セクション 7．拡張 - Django to JS データ伝達

3件 ∙ (24分)

セクション 8．拡張 - CSRF Token 機能等

3件 ∙ (16分)

セクション 9．DBクエリの性能改善

2件 ∙ (10分)

セクション 10．スマートフォンで表示

2件 ∙ (8分)

セクション 11．追加映像 - Start Bootstrap ソース変更点

2件 ∙ (9分)

セクション 12．付録

3件 ∙ (8分)

講座掲載日:

最終更新日:

受講レビュー

全体

12件

4.8

12件の受講レビュー

dcloyal10737
受講レビュー 30
∙
平均評価 5.0
5
100% 受講後に作成
taegeunkim2252
受講レビュー 25
∙
平均評価 5.0
5
100% 受講後に作成
ブートストラップとDjangoテンプレートとVUE.JSをどのように効率的に使用するかを確認するための良い講義でした。ありがとうございます。
moapp20200336
受講レビュー 14
∙
平均評価 5.0
5
96% 受講後に作成
djangoとvuejsを連動開発するためには必ず見なければならない講義です。完成度の高い開発例と講義で多くを学ぶことができます。
hyeok53374629
受講レビュー 1
∙
平均評価 5.0
5
100% 受講後に作成
良い講義です。クラス型ビュー（CBV）についてたくさん学びました。後でDRFを利用する際に多くの役に立つと思います。
hyunho388168
受講レビュー 1
∙
平均評価 5.0
5
100% 受講後に作成
良い講義ありがとうございます。

￥4,185

bestdjangoの他の講座

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

AIウェブプログラミング (Streamlit)

bestdjango

AIデータ分析およびモデリング結果をWebプログラムにしてみてください。

Beginner

streamlit, Machine Learning(ML), Django

AIウェブプログラミング (Streamlit)

bestdjango

Django REST Framework の要点

bestdjango

"DRF, 이것만은 알고 사용하자." クラス型ビューの1号講師として、DRFのクラスを正しく活用し、継承とオーバーライドを正確に学べる講義です。重要な基本事項を正しく学習しましょう!

Basic

Django, REST API

Django REST Framework の要点

bestdjango

Vue.js - DjangoインターロックWebプログラミング（実践編）

bestdjango

クライアントプロフェッショナルFWのVue.jsとサーバープロフェッショナルFWであるDjangoを一緒に活用して、アップグレードされたWebプログラミングをしましょう。 Vue側のVueRouterとVuexを使わなくても、Django側のDRFを使わなくても、簡単にできる。

Basic

Vue.js, Django, Vuetify

Vue.js - DjangoインターロックWebプログラミング（実践編）

bestdjango

Vue.js - DjangoインターロックWebプログラミング

bestdjango

Vue.jsとDjangoフレームワークを使用してWebプログラミングを行うことができます。

Basic

Vue.js, Django

Vue.js - DjangoインターロックWebプログラミング

bestdjango

似ている講座

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

Vue.js 完全マスター - 実務に必要なすべて

captain

Vue.jsで実務をされている方に必要なすべてを盛り込みました。実際のバックエンドAPIで実装する学習ノートCRUDアプリケーション。生産性の高いプロジェクト環境構築とバックエンド開発者と協業する方法についてのメッセージをぜひご確認ください :)

Intermediate

JavaScript, Vue.js, Vuex

Vue.js 完全マスター - 実務に必要なすべて

captain

Vue 3 & Firebase 10 コミュニティ作成フルスタック - 「活用編」 (with Pinia、Quasar、Tiptap、VueUse)

gymcoding

Vue3＆amp; Firebase(v10)を活用してコミュニティを作る講義でVue3実践活用法、Firebase基礎から実戦、最新のWeb技術活用法、知識共有者経験共有など多様な方面で開発者として一段階成長できるようにします！

Intermediate

Vue.js, Firebase, Quasar

Vue 3 & Firebase 10 コミュニティ作成フルスタック - 「活用編」 (with Pinia、Quasar、Tiptap、VueUse)

gymcoding

Do It! Django + Bootstrap：Python Web開発の定石

SungYong Lee

Python Web 開発 A to Z を学びながら作成! Web の基礎からブログ開発、公開までを一度に学べます。

Basic

Python, Django, Bootstrap

Do It! Django + Bootstrap：Python Web開発の定石

SungYong Lee

Vue.js - DjangoインターロックWebプログラミング（実践編）

bestdjango

Basic

Vue.js, Django, Vuetify

Vue.js - DjangoインターロックWebプログラミング（実践編）

bestdjango

ユン・ジェソンのブートストラップ4＆3フレームワークチュートリアル

softcampus

ブートストラップ4のために、HTML5 Webフレームワークライブラリ、CSSクラスを介したWebアプリケーションFront Endを開発することができます。

Basic

Bootstrap

ユン・ジェソンのブートストラップ4＆3フレームワークチュートリアル

softcampus

Vue.jsとUIを一度に学習/Nuxt3 + OpenWeatherMapでリアルタイム天気アプリ作成

gis

Nuxt UI, Nuxt SEO, Nuxt Server Api, Pinia, PWA, Firebase, Email Login, Google Login を簡単に学べます~~

Basic

Vue.js, PWA, Firebase

Vue.jsとUIを一度に学習/Nuxt3 + OpenWeatherMapでリアルタイム天気アプリ作成

gis

企画者様この程度ウェブ開発は学んでみてはいかがでしょうか？ [理論+実習]

bokchi

忙しい企画者の方々のための急速に進行する開発講義です。より多くの説明では、Webフロントエンド、バックエンド、DBを直接開発し、全体的な開発プロセスを学ぶことができます。

Beginner

HTML/CSS, JavaScript, Vue.js

企画者様この程度ウェブ開発は学んでみてはいかがでしょうか？ [理論+実習]

bokchi

Bootstrap を活用したレスポンシブ Web 制作 [基本概念編] ブートキャンプ

youngcodikimssam

デバイスに応じてレイアウトが変更されるレスポンシブなWebページを作成するために、Bootstrapを活用する方法について解説した講義です（改訂版）。

Basic

Bootstrap, Responsive Web, Web Design

Bootstrap を活用したレスポンシブ Web 制作 [基本概念編] ブートキャンプ

youngcodikimssam

シリコンバレーのエンジニアが教えるPython Django Webプログラミング

altoformula

シリコンバレーのソフトウェアエンジニアから学ぶ、Python Django Web開発の基礎と実務のすべて！ PythonベースのDjangoフレームワークを使ったWebプログラミングを学ぶ絶好の機会を絶対に逃さないでください！初心者でも安心してWebプログラミングを始めることができるよう、HTMLとBootstrapも一緒に学べる破格の機会をぜひ手に入れてください！

Basic

Python, Django, REST API

シリコンバレーのエンジニアが教えるPython Django Webプログラミング

altoformula