Djangoハンズオン

Python製ウェブフレームワークDjangoの簡単なハンズオンです。
認証機能のないTodoアプリを作成し、CRUD実装の流れを理解してもらいます

Transcript

1. Djangoハンズオン#1 Kazuki Y(cuz)
2. お前誰よ？ 名前 ：Kazuki. Y (@cuz_t3ch) 仕事 ：SE(Fortran,VBA,C#)兼流体解析 Python歴 ：１年強？主にDjangoとか数値データの処理に使っています 　「大阪Pythonの会」の運営のお手伝い 皆さんの心の声「ちょっとまって？実務で Django使ってないの？大丈夫？」 マサカリ大歓迎です、逆にご指導いただきたいくらいです 至らぬ点があるかと思いますが、精一杯がんばります これをきっかけに私より強強になって教えてください！
3. Agenda 1. Djangoの基本的な流れ 2. 環境構築 3. ハンズオン（CRUDの実装） 4. 次のステップ
4. Agenda 1. Djangoの基本的な流れ 2. 環境構築 3. ハンズオン（CRUDの実装） 4. 次のステップ
5. Djangoの処理の流れ(MVTモデル） クライアント ①リクエスト http://****/list URL path(‘list’,hoge…) http://****/list View ②URLとViewを対応 ③TemplateにModelを レンダリング Template Model ④レスポンス ※Djangoの中は簡略化しています。
6. ディレクトリ構成 プロジェクト全体の設定 プロジェクトの管理 アプリ
7. URLconf • urlの’/’より後ろの文字列を設定します • urlpatternsという変数にpathを登録していきます。 • path関数の内訳は”URL文字列,対応するビュー関数,urlの名前” • プロジェクト全体のurls.pyとは別にアプリ側にurls.pyを作成し、includeすることが 多いです
8. ビュー • DBからデータを取り出し、テンプレートにレンダリングします ◦ DBからの取り出しにはobjects.all()などでデータを取り出します ◦ render関数などでtemplateとDBから取り出したデータをレンダリングし、レスポンスを返します • 関数ベースのView、クラスベースのViewがあります
9. テンプレート • htmlファイルの中にdjango特有の表現が含まれています。 • {%...%} ：　for文,if文などの制御文の記述、若干Pythonと違います • {{ … }} ：　データへのアクセス
10. Agenda 1. Djangoの基本的な流れ 2. 環境構築 3. ハンズオン（CRUDの実装） 4. 次のステップ
11. プロジェクトの作成 これに備えて書いた記事がありますhttps://qiita.com/cuz/private/bee679dc426b690d2fe3 一応一緒にやっていきましょう
12. Agenda 1. Djangoの基本的な流れ 2. 環境構築 3. ハンズオン（CRUDの実装） 4. 次のステップ
13. 今回のハンズオンについて • 今回は見た目・機能がかなり残念なTodoアプリを作成します • 設計は適当です • 実装の順番 ◦ モデル ◦ ビュー ◦ テンプレート ◦ ルーティング
14. 事前準備(アプリの作成〜settings.pyの編集) 先程作成したディレクトリの中で、以下のコマンドを打ちます コマンド：django-admin startapp mytodo settings.pyは以下の点を編集します • INSTALLED_APPS • LANGUAGE_CODE • TIME_ZONE • TEMPLATES
15. settings.py 先程作成したアプリをDjangoに登録します
16. settings.py タイムゾーンと言語の設定 テンプレートの場所を登録・作成 manage.pyの階層にtemplatesフォルダを 作成します
17. モデルの実装 • DBのテーブルとクラスが対応します • フィールドは多数あります ◦ 公式のドキュメントを確認しましょう • 実装が終わればMigrationです ◦ python manage.py makemigrations ◦ python manage.py migrate • Migrationが終われば確認です
18. READの実装(一覧・詳細ビューの実装) 今回はクラスベースビューを使用します メリット • コード量が大幅に減らすことができ大変便利です デメリット • 記述量が少なすぎるため、Post・Getの理解がないと少しとっつきにくい かもしれません
19. 一覧ビュー 「ね？かんたんでしょう？」 アプリのviews.pyに実装します model：表示したいモデル template：表示用のhtmlファイルの場所
20. 詳細ビュー アプリのviews.pyに追記します 実装は先程とほぼ同じです
21. テンプレート 1. templatesディレクトリ中にアプリ名と同じ名前のディレクトリを作成します 2. その中にlist.htmlとdetail.htmlを作成します
22. 一覧のテンプレート ファイル名：templates/mytodo/list.html 実装：下の通り
23. 詳細のテンプレート ファイル名：templates/mytodo/detail.html 実装：下の通り
24. ルーティング 1. アプリディレクトリにurls.pyの作成 2. プロジェクト全体のurls.pyにアプリ側のurls.pyをインクルード
25. アプリ側のurls.pyの設定 app_nameを設定することpathに名前をつけることがポイントです また、データを指定する必要があるもの詳細ビューや削除・編集などにはurlに主キーの 登録が必要です
26. プロジェクト全体のurls.pyの設定 includeによって、Djangoとappがより粗結合になり良い感じになります appのルートとincludeするときの文字列が対応するようになります。 ここまで来たらサーバを起動しましょう
27. Createのビュー実装 fields ：django側で受け取るパラメータの指定 initial ：modelに登録したChoiceフィールドの初期値の指定 success_url ：postが成功したあとのページ遷移先の指定
28. テンプレートの実装 {% csrf_token %}はおまじないです {{form.as_p}}でmodelに対応したformが表示されます。
29. ルーティングの実装 作成したViewをインポートしてルーティングに追加します
30. Updateの実装 詳細画面に編集画面への遷移を追加します。 UpdateはCreateの大部分を再利用して使うことができます。 同じようにViewから実装していきます
31. ビューの実装 UpdateViewをimportし、継承してクラスベースビューを作成します。 UpdateはCreateとほぼ同じです。
32. テンプレートの実装 Createと同じ！名前だけupdate.htmlとして保存してください。
33. ルーティングの実装 詳細画面同様にurlに主キーを含める必要があります。
34. Deleteの実装 Deleteを実装する前にlist.htmlを変更しておきます。 deleteへの遷移を実装しておきます。 ついでにif文などの使い方にも軽く触れます。コピペで構いません。
35. ビューの実装 他のViewと代わりありません。 DeleteViewをインポート・継承して作成します
36. テンプレートの実装 Postでアクセスするのでformタグを実装するだけです
37. ルーティングの実装 deleteを更にpathに追記すれば終了です
38. Agenda 1. Djangoの基本的な流れ 2. 環境構築 3. ハンズオン（CRUDの実装） 4. 次のステップ
39. 今回のハンズオンでわからない点が多かった方 躓きポイント • Webの知識 ：HTTP(get,post)、HTML・CSS、Session・Cookieなど • DBの知識 ：正規化、カラムの属性など • Python文法 ：特にOverride • framework ：お作法、ウェブアプリの挙動 • 環境 ：Linux,仮想環境など そしてなによりも。。。 • わかりにくい説明
40. 今回のハンズオンで物足りない方 足りない機能の追加などを試してみてください • adminの設定、認証・認可、検索機能、モデルのリレーション、RestAPI化... • デプロイ、settings.py・views.pyなどの分割 • テスト、エラー処理 • セキュリティ対策 • キャッシュ、N+1問題などのパフォーマンス改善 …..etc • 私に教わるまでもないくらい強い方
41. 学習の参考に.. Django Girls Tutorial….https://tutorial.djangogirls.org/ja/ Naritoさんのblog….https://narito.ninja/ William Vincent…..https://wsvincent.com/ Make組blog...https://blog.hirokiky.org/ akiyoko blog …. https://akiyoko.hatenablog.jp/ 何より公式を見ましょう！