Vue-Django-Bootstrap 뚝딱ブログ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

応用まで考えた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技術を学びます。

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

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

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

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