ターゲット

• Vue.js 初心者
• django 初心者

はじめに

本記事は「急がば回れ」精神に基づいて、じっくり確実にフロントエンド Vue.js バックエンド django の構成でWebサービスを構築するための学習教材を列挙しました。 Vue.js と django の知識がゼロの方でも、それらを組み合わせてAPI連携できるようになります。

Vue.js の学習教材

JavaScript 製のフレームワークで状態管理でリッチなフロントエンドを実装できます。

→ Vue.js の基礎を一通り動画で学べます。セールで1300円くらいになったときに買いましょう。

django の学習教材

Python のWebフレームワークでバックエンドを実装します。できることは Laravel や Ruby on Rails と概ね変わりませんが、比較したときに、コードが直感的でないため内部的な処理もしっかり理解されることをおすすめします。

→ django の基礎を一通り動画で学べます。セールで1300円くらいになったときに買いましょう。

django REST framework の学習教材

django 単体だとAPIサーバーを構築が難しいので、django REST framework を導入します。
django 単体で実装する場合はフロントは django の template で実装しますが、フロントを Vue を採用する場合はバックエンドにやってほしいことは、リクエストに対して json を返してもらうことです。それを実現するために django REST framework を使います。

→ こちらの記事のコードを写経して概要を掴めます。

→ View の詳細でわかりやすい解説が載っています。
django ではMVCモデルではなく、MTVモデルを採用しています。紛らわしいですが、以下の対応関係になっています。Controller 的な処理を書くのが View です。

→ Serializer の詳細でわかりやすい解説が載っています。
名前の通りモデルから json に変換するときにゴニョゴニョしてくれるやつです。

→ django REST framework の基礎と Vue.js との組み合わせ方を一通り動画で学べます。セールで...（以下略）
英語動画なのですが、英語字幕出せますし上記の知識を踏まえれば苦手な人でもなんとかなると思います。残念ながら日本語の良質な動画は執筆時点では見つかりませんでした。
認証方式も紹介されています。
お急ぎの方は、セクション1,5,7だけ見ると良いです。

さいごに

アップデートがあれば追記します。