[{"data":1,"prerenderedAt":3324},["ShallowReactive",2],{"series-laravel_to_django-1":3},{"doc":4,"prev":1601,"next":1603},{"id":5,"title":6,"body":7,"category":1586,"createdAt":1588,"description":1589,"extension":1590,"index":114,"meta":1591,"navigation":137,"path":1592,"publish":137,"seo":1593,"series":1594,"seriesTitle":1595,"stem":1596,"tag":1597,"thumbnail":1600,"updatedAt":1601,"__hash__":1602},"series\u002Fseries\u002Flaravel-to-django-1.md","Laravel使いがDjangoでwebアプリを作るよその１：アプリの概要と環境構築",{"type":8,"value":9,"toc":1566},"minimark",[10,14,17,20,33,36,39,42,62,65,68,89,93,101,164,171,176,179,221,224,227,232,582,588,600,614,621,638,661,666,674,689,694,697,700,704,735,738,778,781,792,795,798,802,805,808,819,880,883,940,953,956,959,1034,1051,1054,1067,1351,1354,1372,1375,1382,1388,1395,1401,1411,1419,1430,1449,1456,1466,1469,1520,1527,1556,1559,1562],[11,12,13],"p",{},"こんにちはjunです。最近Laravelでシステムを作る機会が何回かあったので、Laravelによる構築がかなり得意になってきました。しかし会社の方で「pythonを使用した機械学習や統計の機能をwebアプリとして使用できるアプリを開発したい」という企画がでてきました。",[11,15,16],{},"pythonで機械学習や統計の処理（モデル）を作成し、UIやロジックの部分をwebフレームワークで作成します。できたらwebフレームワークの処理部分にて統計ロジックをimportして、データの引き渡しを行いたいと思いました。しかしLaravelはPHPなので連携が難しいです。",[11,18,19],{},"そのため「Python製のwebフレームワークであるdjangoを利用できないか？」と思い、Djangoの勉強をスタートしました。チュートリアルはひとまず終えましたが、Laravelをやっていたおかげで",[21,22,23,27,30],"ul",{},[24,25,26],"li",{},"どんな機能があると便利か？",[24,28,29],{},"Laravelのこの機能がDjangoのこの記述にあたるのか？",[24,31,32],{},"実務上必要となるこの機能を実装するには何を使えばいいのか？",[11,34,35],{},"という視点を用いて学習することができました。このシリーズでは「Laravelを使っていたPHP開発者がDjangoとPythonを使用してアプリを作る」ことを通じてDjangoの学習をしたいと思っています。記事内ではDjangoにおける実装とLaravelにおける実装をリンクしながら解説していきたいと思います。",[11,37,38],{},"利用するDjangoのバージョンは3.2で、Laravelは8とします。第１回のこの記事は環境構築とアプリの概要、Djangoの開発コンセプトやディレクトリ説明がメインとなります。",[11,40,41],{},"なおシリーズでは以下の内容を押さえていることを前提としています",[21,43,44,47,50,53,56,59],{},[24,45,46],{},"Laravelの実務開発経験があるまたは、完成したアプリを作ったことがある。",[24,48,49],{},"Laravelのコンセプトやディレクトリ構成を知っている。",[24,51,52],{},"PythonがPCにインストールされ、基本的な記述を理解している。",[24,54,55],{},"PHPを触ったことが多いが、Pythonはそれほどない。",[24,57,58],{},"Djangoのチュートリアルは行っており、必須の内容は知っている。",[24,60,61],{},"MVCの概念を知っている、使える。",[11,63,64],{},"それでは早速始めていきましょう。",[11,66,67],{},"参考資料",[21,69,70,79,82],{},[24,71,72],{},[73,74,78],"a",{"href":75,"rel":76},"https:\u002F\u002Fdocs.djangoproject.com\u002Fja\u002F3.2",[77],"nofollow","Django ドキュメント3.2",[24,80,81],{},"書籍『現場で使える Django の教科書』",[24,83,84],{},[73,85,88],{"href":86,"rel":87},"https:\u002F\u002Fdocs.docker.jp\u002Fcompose\u002Fdjango.html",[77],"クィックスタート: Compose と Django - Docker ドキュメント",[90,91,92],"h2",{"id":92},"環境構築",[11,94,95,96,100],{},"今回の環境構築はdockerを用いて作成しようと思います。適当なディレクトリ を作成し、",[97,98,99],"code",{},"docker-compose.yaml","とビルドファイルを作成します。",[102,103,108],"pre",{"className":104,"code":105,"language":106,"meta":107,"style":107},"language-bash shiki shiki-themes material-theme-ocean","mkdir laravel_django\ncd laravel_django\n\ntouch Dockerfile\ntouch docker-compose.yaml\nmkdir source\n","bash","",[97,109,110,123,132,139,148,156],{"__ignoreMap":107},[111,112,115,119],"span",{"class":113,"line":114},"line",1,[111,116,118],{"class":117},"s5Dmg","mkdir",[111,120,122],{"class":121},"sfyAc"," laravel_django\n",[111,124,126,130],{"class":113,"line":125},2,[111,127,129],{"class":128},"sdLwU","cd",[111,131,122],{"class":121},[111,133,135],{"class":113,"line":134},3,[111,136,138],{"emptyLinePlaceholder":137},true,"\n",[111,140,142,145],{"class":113,"line":141},4,[111,143,144],{"class":117},"touch",[111,146,147],{"class":121}," Dockerfile\n",[111,149,151,153],{"class":113,"line":150},5,[111,152,144],{"class":117},[111,154,155],{"class":121}," docker-compose.yaml\n",[111,157,159,161],{"class":113,"line":158},6,[111,160,118],{"class":117},[111,162,163],{"class":121}," source\n",[11,165,166,167,170],{},"まずはDockerfileでDjangoが稼働するpythonの環境を作成します。なお、この環境ではApacheやnginxといったwebサーバーとpythonとの連携設定は行わないものとします。コンテナ内で",[97,168,169],{},"run serve","を行います。",[172,173,175],"h3",{"id":174},"dockerfile","Dockerfile",[11,177,178],{},"Dockerfileを以下の様に記述します。",[102,180,183],{"className":181,"code":182,"language":175,"meta":107,"style":107},"language-Dockerfile shiki shiki-themes material-theme-ocean","FROM python:3\nENV PYTHONUNBUFFERED 1\nRUN mkdir \u002Fcode\nWORKDIR \u002Fcode\nADD requirements.txt \u002Fcode\u002F\nRUN pip install -r requirements.txt\nADD . \u002Fcode\u002F\n",[97,184,185,190,195,200,205,210,215],{"__ignoreMap":107},[111,186,187],{"class":113,"line":114},[111,188,189],{},"FROM python:3\n",[111,191,192],{"class":113,"line":125},[111,193,194],{},"ENV PYTHONUNBUFFERED 1\n",[111,196,197],{"class":113,"line":134},[111,198,199],{},"RUN mkdir \u002Fcode\n",[111,201,202],{"class":113,"line":141},[111,203,204],{},"WORKDIR \u002Fcode\n",[111,206,207],{"class":113,"line":150},[111,208,209],{},"ADD requirements.txt \u002Fcode\u002F\n",[111,211,212],{"class":113,"line":158},[111,213,214],{},"RUN pip install -r requirements.txt\n",[111,216,218],{"class":113,"line":217},7,[111,219,220],{},"ADD . \u002Fcode\u002F\n",[11,222,223],{},"python3 イメージをもとにpythonが動く環境を用意します。",[172,225,226],{"id":226},"docker-compose",[11,228,229,231],{},[97,230,99],{},"は以下の様に記述します。",[102,233,237],{"className":234,"code":235,"filename":99,"language":236,"meta":107,"style":107},"language-yaml shiki shiki-themes material-theme-ocean","version: '3'\n\nservices:\n  db:\n    image: mysql:5.7\n    command: mysqld --character-set-server=utf8 --collation-server=utf8_unicode_ci\n    environment:\n      MYSQL_DATABASE: preform\n      MYSQL_USER: test\n      MYSQL_PASSWORD: testtest\n      MYSQL_ROOT_PASSWORD: rootroot\n      TZ: Asia\u002FTokyo\n    ports: \n      - \"3306:3306\"\n    volumes: \n      - djangodemo:\u002Fvar\u002Flib\u002Fmysql\n  phpmyadmin:\n    image: phpmyadmin\n    ports:\n      - \"8080:80\"\n    environment:\n     - PMA_ARBITRARY=1\n     - PMA_HOST=db:3306\n     - PMA_USER=root\n     - PMA_PASSWORD=rootroot\n  web:\n    build: .\n    command: python3 manage.py runserver 0.0.0.0:8000\n    volumes:\n      - .\u002Fsource:\u002Fcode\n    ports:\n      - \"8000:8000\"\n    depends_on:\n      - db\nvolumes: \n  djangodemo: {}\n","yaml",[97,238,239,258,262,270,277,287,297,304,315,326,337,348,359,371,386,396,404,412,422,429,441,448,457,465,473,481,489,501,511,518,526,533,545,553,561,571],{"__ignoreMap":107},[111,240,241,245,249,252,255],{"class":113,"line":114},[111,242,244],{"class":243},"s-wAU","version",[111,246,248],{"class":247},"sAklC",":",[111,250,251],{"class":247}," '",[111,253,254],{"class":121},"3",[111,256,257],{"class":247},"'\n",[111,259,260],{"class":113,"line":125},[111,261,138],{"emptyLinePlaceholder":137},[111,263,264,267],{"class":113,"line":134},[111,265,266],{"class":243},"services",[111,268,269],{"class":247},":\n",[111,271,272,275],{"class":113,"line":141},[111,273,274],{"class":243},"  db",[111,276,269],{"class":247},[111,278,279,282,284],{"class":113,"line":150},[111,280,281],{"class":243},"    image",[111,283,248],{"class":247},[111,285,286],{"class":121}," mysql:5.7\n",[111,288,289,292,294],{"class":113,"line":158},[111,290,291],{"class":243},"    command",[111,293,248],{"class":247},[111,295,296],{"class":121}," mysqld --character-set-server=utf8 --collation-server=utf8_unicode_ci\n",[111,298,299,302],{"class":113,"line":217},[111,300,301],{"class":243},"    environment",[111,303,269],{"class":247},[111,305,307,310,312],{"class":113,"line":306},8,[111,308,309],{"class":243},"      MYSQL_DATABASE",[111,311,248],{"class":247},[111,313,314],{"class":121}," preform\n",[111,316,318,321,323],{"class":113,"line":317},9,[111,319,320],{"class":243},"      MYSQL_USER",[111,322,248],{"class":247},[111,324,325],{"class":121}," test\n",[111,327,329,332,334],{"class":113,"line":328},10,[111,330,331],{"class":243},"      MYSQL_PASSWORD",[111,333,248],{"class":247},[111,335,336],{"class":121}," testtest\n",[111,338,340,343,345],{"class":113,"line":339},11,[111,341,342],{"class":243},"      MYSQL_ROOT_PASSWORD",[111,344,248],{"class":247},[111,346,347],{"class":121}," rootroot\n",[111,349,351,354,356],{"class":113,"line":350},12,[111,352,353],{"class":243},"      TZ",[111,355,248],{"class":247},[111,357,358],{"class":121}," Asia\u002FTokyo\n",[111,360,362,365,367],{"class":113,"line":361},13,[111,363,364],{"class":243},"    ports",[111,366,248],{"class":247},[111,368,370],{"class":369},"s0W1g"," \n",[111,372,374,377,380,383],{"class":113,"line":373},14,[111,375,376],{"class":247},"      -",[111,378,379],{"class":247}," \"",[111,381,382],{"class":121},"3306:3306",[111,384,385],{"class":247},"\"\n",[111,387,389,392,394],{"class":113,"line":388},15,[111,390,391],{"class":243},"    volumes",[111,393,248],{"class":247},[111,395,370],{"class":369},[111,397,399,401],{"class":113,"line":398},16,[111,400,376],{"class":247},[111,402,403],{"class":121}," djangodemo:\u002Fvar\u002Flib\u002Fmysql\n",[111,405,407,410],{"class":113,"line":406},17,[111,408,409],{"class":243},"  phpmyadmin",[111,411,269],{"class":247},[111,413,415,417,419],{"class":113,"line":414},18,[111,416,281],{"class":243},[111,418,248],{"class":247},[111,420,421],{"class":121}," phpmyadmin\n",[111,423,425,427],{"class":113,"line":424},19,[111,426,364],{"class":243},[111,428,269],{"class":247},[111,430,432,434,436,439],{"class":113,"line":431},20,[111,433,376],{"class":247},[111,435,379],{"class":247},[111,437,438],{"class":121},"8080:80",[111,440,385],{"class":247},[111,442,444,446],{"class":113,"line":443},21,[111,445,301],{"class":243},[111,447,269],{"class":247},[111,449,451,454],{"class":113,"line":450},22,[111,452,453],{"class":247},"     -",[111,455,456],{"class":121}," PMA_ARBITRARY=1\n",[111,458,460,462],{"class":113,"line":459},23,[111,461,453],{"class":247},[111,463,464],{"class":121}," PMA_HOST=db:3306\n",[111,466,468,470],{"class":113,"line":467},24,[111,469,453],{"class":247},[111,471,472],{"class":121}," PMA_USER=root\n",[111,474,476,478],{"class":113,"line":475},25,[111,477,453],{"class":247},[111,479,480],{"class":121}," PMA_PASSWORD=rootroot\n",[111,482,484,487],{"class":113,"line":483},26,[111,485,486],{"class":243},"  web",[111,488,269],{"class":247},[111,490,492,495,497],{"class":113,"line":491},27,[111,493,494],{"class":243},"    build",[111,496,248],{"class":247},[111,498,500],{"class":499},"sx098"," .\n",[111,502,504,506,508],{"class":113,"line":503},28,[111,505,291],{"class":243},[111,507,248],{"class":247},[111,509,510],{"class":121}," python3 manage.py runserver 0.0.0.0:8000\n",[111,512,514,516],{"class":113,"line":513},29,[111,515,391],{"class":243},[111,517,269],{"class":247},[111,519,521,523],{"class":113,"line":520},30,[111,522,376],{"class":247},[111,524,525],{"class":121}," .\u002Fsource:\u002Fcode\n",[111,527,529,531],{"class":113,"line":528},31,[111,530,364],{"class":243},[111,532,269],{"class":247},[111,534,536,538,540,543],{"class":113,"line":535},32,[111,537,376],{"class":247},[111,539,379],{"class":247},[111,541,542],{"class":121},"8000:8000",[111,544,385],{"class":247},[111,546,548,551],{"class":113,"line":547},33,[111,549,550],{"class":243},"    depends_on",[111,552,269],{"class":247},[111,554,556,558],{"class":113,"line":555},34,[111,557,376],{"class":247},[111,559,560],{"class":121}," db\n",[111,562,564,567,569],{"class":113,"line":563},35,[111,565,566],{"class":243},"volumes",[111,568,248],{"class":247},[111,570,370],{"class":369},[111,572,574,577,579],{"class":113,"line":573},36,[111,575,576],{"class":243},"  djangodemo",[111,578,248],{"class":247},[111,580,581],{"class":247}," {}\n",[11,583,584,587],{},[97,585,586],{},"db","ではデータベースを定義しています。DjangoはSQLiteを使用した簡易的なDBが用意されています。ただし実務ではmysqlなどのDBサーバーを使用することが多いので、今回はmysqlを使用できる様にします。",[589,590,594,595],"div",{"className":591},[592,593],"alert","alert-info","\nDjangoでmysqlを使用するためにはpythonモジュールのmysqlclientが必要です。この環境にはデフォルトでないので注意してください。他のDBサーバーを使用する場合は適宜ドライバをインストールしてください。\n",[73,596,599],{"target":597,"href":598},"_blank","https:\u002F\u002Fdocs.djangoproject.com\u002Fja\u002F3.2\u002Ftopics\u002Finstall\u002F#get-your-database-running","本家ドキュメントを参照",[11,601,602,603,606,607,609,610,613],{},"DB内部をすぐに確認できる様にphpmyadminを入れておきます。（好みなのでなくてもいいです。）\nそして",[97,604,605],{},"web","では同階層にある",[97,608,175],{},"をビルドして実行できる様になります。立ち上げ時に",[97,611,612],{},"python3 manage.py runserver 0.0.0.0:8000","をしてwebサーバを立ち上げる設定にしています。",[11,615,616,617,620],{},"このコンテナを起動する前に ",[97,618,619],{},"requirements.txt"," をDockerfileと同じ階層に生成しておき、以下の内容を記述します。",[102,622,626],{"className":623,"code":624,"filename":619,"language":625,"meta":107,"style":107},"language-txt shiki shiki-themes material-theme-ocean","Django==3.2\nmysqlclient==2.1.0\n","txt",[97,627,628,633],{"__ignoreMap":107},[111,629,630],{"class":113,"line":114},[111,631,632],{},"Django==3.2\n",[111,634,635],{"class":113,"line":125},[111,636,637],{},"mysqlclient==2.1.0\n",[11,639,640,642,643,646,647,650,651,653,654,656,657,660],{},[97,641,619],{}," はpythonライブラリ管理ツールpipの設定ファイルです。npmの",[97,644,645],{},"package.json","やcomposerの",[97,648,649],{},"composer.json","といったものと同じです。pythonのモジュール管理はpipを使用することが多く、",[97,652,619],{}," は環境ないの依存するモジュールとそのバージョンを記述して配置しておきます。そして",[97,655,619],{}," がある階層で ",[97,658,659],{},"pip install","をすることで自動的に依存関係をインストールしてくれます。Django3.2とmysqlclientを記述しておきます。",[11,662,663,665],{},[97,664,619],{},"を記述したら以下のコマンドを実行してDjangoのソースを作成します。",[102,667,672],{"className":668,"code":670,"language":671},[669],"language-text","docker-compose run web django-admin.py startproject djangodemo .\n","text",[97,673,670],{"__ignoreMap":107},[11,675,676,677,680,681,684,685,688],{},"すると",[97,678,679],{},"source\u002F","配下にDjangoのソースが生成されるはずです。\nそして準備が整ったら",[97,682,683],{},"docker-compose up -d --build"," を行って構築を行います。問題なくいった場合はブラウザにて ",[97,686,687],{},"localhost:8000"," を閲覧すると、Djangoのウェルカムページが表示されるはずです。",[690,691],"image-render",{":src":692,":width":693},"'laralve_to_django\u002Fwelcome.png'","'100%'",[90,695,696],{"id":696},"アプリ概要",[11,698,699],{},"今回作成するアプリはn○teみたいなブログサービスを作成しようと思います。",[701,702,703],"h4",{"id":703},"ユーザー系の特徴",[21,705,706,709,712,715,718,721],{},[24,707,708],{},"利用する際にはユーザーとしてアカウントを作る（今回は全てゲストとする）。",[24,710,711],{},"ログインはアドレスとパスワードを使用する。",[24,713,714],{},"アプリを利用する一般ユーザーと管理を行う管理ユーザーが存在する。",[24,716,717],{},"管理ユーザーは特定の管理用ルートから入る。",[24,719,720],{},"退会可能。退会時は関連するデータは削除される。",[24,722,723,724],{},"プロフィールでは以下の項目を持つ\n",[21,725,726,729,732],{},[24,727,728],{},"ユーザー名（仮名）",[24,730,731],{},"プロフィール文",[24,733,734],{},"アバター写真",[701,736,737],{"id":737},"ブログ機能",[21,739,740,743,760,763,766,769,772,775],{},[24,741,742],{},"ブログを作成することができ、公開することができる。",[24,744,745,746],{},"ブログは以下の項目を持つ\n",[21,747,748,751,754,757],{},[24,749,750],{},"タイトル",[24,752,753],{},"内容（リッチテキスト）",[24,755,756],{},"タグ（任意）",[24,758,759],{},"公開日時",[24,761,762],{},"下書きとして保存することができる。更新時も下書き可能。",[24,764,765],{},"任意数のタグを添付できる。タグはユーザーが新しく作成できる。",[24,767,768],{},"削除可能",[24,770,771],{},"画像の添付が可能。",[24,773,774],{},"アップロードした画像は管理できる。",[24,776,777],{},"公開側からコメント可能",[701,779,780],{"id":780},"一覧検索機能",[21,782,783,786,789],{},[24,784,785],{},"サイトトップは投稿された記事が新着順に並ぶ。",[24,787,788],{},"任意のタグを選んで一覧表示することが可能。",[24,790,791],{},"部分一致検索も一応可能とする。",[11,793,794],{},"一通りユーザーエンティティから、記事のCURD、リレーションの練習はできると思います。すべてのビューはpython側でレンダリングを行い、Vue.jsなどは今回使用しません。違う機会にrest apiを使用した構成を作ってみたいとおおいます。",[11,796,797],{},"デザインに関してはいつものbootstrapを使用します。",[90,799,801],{"id":800},"djangoの大まかな解説","Djangoの大まかな解説",[11,803,804],{},"詳細なロジックなどは次の記事で解説したいと思います。今回はDjangoのディレクトリ構成やLaravelと似ているとこやリンクしている中核的な機能を解説したいと思います。",[172,806,807],{"id":807},"コマンドによる制御",[11,809,810,811,814,815,818],{},"Laravelでは ",[97,812,813],{},"php artisan"," を使用することでコントローラーを作ったり、マイグレーションを実行したりできます。Djangoにも似た様なものがあります。使用する時はソーストップの ",[97,816,817],{},"manage.py"," がある箇所で実行します。例えば以下の様な機能があります。",[102,820,822],{"className":104,"code":821,"language":106,"meta":107,"style":107},"# 簡易webサーバーを起動\npython3 manage.py runserve\n\n# マイグレーションを実行\npython3 manage.py migrate\n\n# アプリのテンプレートを作成\npython3 manage.py startapp APP_NAME\n\n",[97,823,824,830,841,845,850,859,863,868],{"__ignoreMap":107},[111,825,826],{"class":113,"line":114},[111,827,829],{"class":828},"sC9rS","# 簡易webサーバーを起動\n",[111,831,832,835,838],{"class":113,"line":125},[111,833,834],{"class":117},"python3",[111,836,837],{"class":121}," manage.py",[111,839,840],{"class":121}," runserve\n",[111,842,843],{"class":113,"line":134},[111,844,138],{"emptyLinePlaceholder":137},[111,846,847],{"class":113,"line":141},[111,848,849],{"class":828},"# マイグレーションを実行\n",[111,851,852,854,856],{"class":113,"line":150},[111,853,834],{"class":117},[111,855,837],{"class":121},[111,857,858],{"class":121}," migrate\n",[111,860,861],{"class":113,"line":158},[111,862,138],{"emptyLinePlaceholder":137},[111,864,865],{"class":113,"line":217},[111,866,867],{"class":828},"# アプリのテンプレートを作成\n",[111,869,870,872,874,877],{"class":113,"line":306},[111,871,834],{"class":117},[111,873,837],{"class":121},[111,875,876],{"class":121}," startapp",[111,878,879],{"class":121}," APP_NAME\n",[11,881,882],{},"Laravelで例えると",[102,884,886],{"className":104,"code":885,"language":106,"meta":107,"style":107},"# 簡易webサーバーを起動\nphp artisan serve\n\n# マイグレーションを実行\nphp artisan migrate\n\n# コントローラーのテンプレートを作成\nphp artisan make:controller CONTROLLER_NAME\n\n",[97,887,888,892,903,907,911,919,923,928],{"__ignoreMap":107},[111,889,890],{"class":113,"line":114},[111,891,829],{"class":828},[111,893,894,897,900],{"class":113,"line":125},[111,895,896],{"class":117},"php",[111,898,899],{"class":121}," artisan",[111,901,902],{"class":121}," serve\n",[111,904,905],{"class":113,"line":134},[111,906,138],{"emptyLinePlaceholder":137},[111,908,909],{"class":113,"line":141},[111,910,849],{"class":828},[111,912,913,915,917],{"class":113,"line":150},[111,914,896],{"class":117},[111,916,899],{"class":121},[111,918,858],{"class":121},[111,920,921],{"class":113,"line":158},[111,922,138],{"emptyLinePlaceholder":137},[111,924,925],{"class":113,"line":217},[111,926,927],{"class":828},"# コントローラーのテンプレートを作成\n",[111,929,930,932,934,937],{"class":113,"line":306},[111,931,896],{"class":117},[111,933,899],{"class":121},[111,935,936],{"class":121}," make:controller",[111,938,939],{"class":121}," CONTROLLER_NAME\n",[11,941,942,943,946,947,952],{},"以上の様になります。この ",[97,944,945],{},"python3 manage.py","で実行できる内容は",[73,948,951],{"href":949,"rel":950},"https:\u002F\u002Fdocs.djangoproject.com\u002Fja\u002F3.2\u002Fref\u002Fdjango-admin\u002F",[77],"こちらのドキュメント","で知ることができます。",[172,954,955],{"id":955},"ディレクトリとファイルの構成",[11,957,958],{},"初期のファイル構成は以下の様になっています。",[102,960,962],{"className":104,"code":961,"language":106,"meta":107,"style":107},"├── db.sqlite3\n├── djangodemo\n│   ├── __init__.py\n│   ├── asgi.py\n│   ├── settings.py\n│   ├── urls.py\n│   └── wsgi.py\n├── manage.py\n",[97,963,964,972,979,990,999,1008,1017,1027],{"__ignoreMap":107},[111,965,966,969],{"class":113,"line":114},[111,967,968],{"class":117},"├──",[111,970,971],{"class":121}," db.sqlite3\n",[111,973,974,976],{"class":113,"line":125},[111,975,968],{"class":117},[111,977,978],{"class":121}," djangodemo\n",[111,980,981,984,987],{"class":113,"line":134},[111,982,983],{"class":117},"│",[111,985,986],{"class":121},"   ├──",[111,988,989],{"class":121}," __init__.py\n",[111,991,992,994,996],{"class":113,"line":141},[111,993,983],{"class":117},[111,995,986],{"class":121},[111,997,998],{"class":121}," asgi.py\n",[111,1000,1001,1003,1005],{"class":113,"line":150},[111,1002,983],{"class":117},[111,1004,986],{"class":121},[111,1006,1007],{"class":121}," settings.py\n",[111,1009,1010,1012,1014],{"class":113,"line":158},[111,1011,983],{"class":117},[111,1013,986],{"class":121},[111,1015,1016],{"class":121}," urls.py\n",[111,1018,1019,1021,1024],{"class":113,"line":217},[111,1020,983],{"class":117},[111,1022,1023],{"class":121},"   └──",[111,1025,1026],{"class":121}," wsgi.py\n",[111,1028,1029,1031],{"class":113,"line":306},[111,1030,968],{"class":117},[111,1032,1033],{"class":121}," manage.py\n",[11,1035,1036,1039,1040,1042,1043,1046,1047,1050],{},[97,1037,1038],{},"djangodemo\u002F"," はDjangoのアプリを最初に作成した時に生成されるディレクトリです。",[97,1041,1038],{}," では特に ",[97,1044,1045],{},"settings.py","と",[97,1048,1049],{},"urls.py","が重要です。",[701,1052,1053],{"id":1053},"設定ファイル",[11,1055,1056,1058,1059,1062,1063,1066],{},[97,1057,1045],{}," はLaravelでいう",[97,1060,1061],{},"config\u002F","ディレクトリ配下のファイルたちを一つにまとめた様なものになっています。特に",[97,1064,1065],{},"config\u002Fapp.php","の記述が近いかもしれません。一部抜粋して解説します。",[102,1068,1072],{"className":1069,"code":1070,"filename":1045,"language":1071,"meta":107,"style":107},"language-python shiki shiki-themes material-theme-ocean","BASE_DIR = Path(__file__).resolve().parent.parent\n\nSECRET_KEY = 'hogehoge'\n\n# SECURITY WARNING: don't run with debug turned on in production!\n# Laravelのapp.debugと同じ\nDEBUG = True\n\n# Application definition\n# Djangoが利用可能なアプリ（モジュール）Laravelにはないかも。\nINSTALLED_APPS = [\n    'django.contrib.admin',\n    'django.contrib.auth',\n    'django.contrib.contenttypes',\n    'django.contrib.sessions',\n    'django.contrib.messages',\n    'django.contrib.staticfiles',\n]\n\n# laravel の app\u002FHttp\u002FKernel.php のmiddlewareみたいなもの\nMIDDLEWARE = [\n    'django.middleware.security.SecurityMiddleware',\n    'django.contrib.sessions.middleware.SessionMiddleware',\n    'django.middleware.common.CommonMiddleware',\n    'django.middleware.csrf.CsrfViewMiddleware',\n    'django.contrib.auth.middleware.AuthenticationMiddleware',\n    'django.contrib.messages.middleware.MessageMiddleware',\n    'django.middleware.clickjacking.XFrameOptionsMiddleware',\n]\n\n# Laravelのroutesみたいなもの。\nROOT_URLCONF = 'djangodemo.urls'\n\n# Laravelのビューテンプレートが resource\u002Fviewであることを決めている様なことと同じ。DjangoないのTemplateの読み込み先を定義している\nTEMPLATES = [\n    # ...\n]\n\nWSGI_APPLICATION = 'djangodemo.wsgi.application'\n\n# Laravelのconfig\u002Fdatabase.phpと同じ。使用するDBドライバやアクセス情報を記述。\nDATABASES = {\n    'default': {\n        'ENGINE': 'django.db.backends.mysql',\n        'NAME': 'preform',\n        'USER': 'root',\n        'PASSWORD': 'rootroot',\n        'HOST': 'db',\n        'PORT': '3306',\n    }\n}\n\n# 静的ファイルを配置する箇所。Laravelのstorageディレクトリ を定義している様なもの。\nSTATIC_URL = '\u002Fstatic\u002F'\n\n","python",[97,1073,1074,1079,1083,1088,1092,1097,1102,1107,1111,1116,1121,1126,1131,1136,1141,1146,1151,1156,1161,1165,1170,1175,1180,1185,1190,1195,1200,1205,1210,1214,1218,1223,1228,1232,1237,1242,1247,1252,1257,1263,1268,1274,1280,1286,1292,1298,1304,1310,1316,1322,1328,1334,1339,1345],{"__ignoreMap":107},[111,1075,1076],{"class":113,"line":114},[111,1077,1078],{},"BASE_DIR = Path(__file__).resolve().parent.parent\n",[111,1080,1081],{"class":113,"line":125},[111,1082,138],{"emptyLinePlaceholder":137},[111,1084,1085],{"class":113,"line":134},[111,1086,1087],{},"SECRET_KEY = 'hogehoge'\n",[111,1089,1090],{"class":113,"line":141},[111,1091,138],{"emptyLinePlaceholder":137},[111,1093,1094],{"class":113,"line":150},[111,1095,1096],{},"# SECURITY WARNING: don't run with debug turned on in production!\n",[111,1098,1099],{"class":113,"line":158},[111,1100,1101],{},"# Laravelのapp.debugと同じ\n",[111,1103,1104],{"class":113,"line":217},[111,1105,1106],{},"DEBUG = True\n",[111,1108,1109],{"class":113,"line":306},[111,1110,138],{"emptyLinePlaceholder":137},[111,1112,1113],{"class":113,"line":317},[111,1114,1115],{},"# Application definition\n",[111,1117,1118],{"class":113,"line":328},[111,1119,1120],{},"# Djangoが利用可能なアプリ（モジュール）Laravelにはないかも。\n",[111,1122,1123],{"class":113,"line":339},[111,1124,1125],{},"INSTALLED_APPS = [\n",[111,1127,1128],{"class":113,"line":350},[111,1129,1130],{},"    'django.contrib.admin',\n",[111,1132,1133],{"class":113,"line":361},[111,1134,1135],{},"    'django.contrib.auth',\n",[111,1137,1138],{"class":113,"line":373},[111,1139,1140],{},"    'django.contrib.contenttypes',\n",[111,1142,1143],{"class":113,"line":388},[111,1144,1145],{},"    'django.contrib.sessions',\n",[111,1147,1148],{"class":113,"line":398},[111,1149,1150],{},"    'django.contrib.messages',\n",[111,1152,1153],{"class":113,"line":406},[111,1154,1155],{},"    'django.contrib.staticfiles',\n",[111,1157,1158],{"class":113,"line":414},[111,1159,1160],{},"]\n",[111,1162,1163],{"class":113,"line":424},[111,1164,138],{"emptyLinePlaceholder":137},[111,1166,1167],{"class":113,"line":431},[111,1168,1169],{},"# laravel の app\u002FHttp\u002FKernel.php のmiddlewareみたいなもの\n",[111,1171,1172],{"class":113,"line":443},[111,1173,1174],{},"MIDDLEWARE = [\n",[111,1176,1177],{"class":113,"line":450},[111,1178,1179],{},"    'django.middleware.security.SecurityMiddleware',\n",[111,1181,1182],{"class":113,"line":459},[111,1183,1184],{},"    'django.contrib.sessions.middleware.SessionMiddleware',\n",[111,1186,1187],{"class":113,"line":467},[111,1188,1189],{},"    'django.middleware.common.CommonMiddleware',\n",[111,1191,1192],{"class":113,"line":475},[111,1193,1194],{},"    'django.middleware.csrf.CsrfViewMiddleware',\n",[111,1196,1197],{"class":113,"line":483},[111,1198,1199],{},"    'django.contrib.auth.middleware.AuthenticationMiddleware',\n",[111,1201,1202],{"class":113,"line":491},[111,1203,1204],{},"    'django.contrib.messages.middleware.MessageMiddleware',\n",[111,1206,1207],{"class":113,"line":503},[111,1208,1209],{},"    'django.middleware.clickjacking.XFrameOptionsMiddleware',\n",[111,1211,1212],{"class":113,"line":513},[111,1213,1160],{},[111,1215,1216],{"class":113,"line":520},[111,1217,138],{"emptyLinePlaceholder":137},[111,1219,1220],{"class":113,"line":528},[111,1221,1222],{},"# Laravelのroutesみたいなもの。\n",[111,1224,1225],{"class":113,"line":535},[111,1226,1227],{},"ROOT_URLCONF = 'djangodemo.urls'\n",[111,1229,1230],{"class":113,"line":547},[111,1231,138],{"emptyLinePlaceholder":137},[111,1233,1234],{"class":113,"line":555},[111,1235,1236],{},"# Laravelのビューテンプレートが resource\u002Fviewであることを決めている様なことと同じ。DjangoないのTemplateの読み込み先を定義している\n",[111,1238,1239],{"class":113,"line":563},[111,1240,1241],{},"TEMPLATES = [\n",[111,1243,1244],{"class":113,"line":573},[111,1245,1246],{},"    # ...\n",[111,1248,1250],{"class":113,"line":1249},37,[111,1251,1160],{},[111,1253,1255],{"class":113,"line":1254},38,[111,1256,138],{"emptyLinePlaceholder":137},[111,1258,1260],{"class":113,"line":1259},39,[111,1261,1262],{},"WSGI_APPLICATION = 'djangodemo.wsgi.application'\n",[111,1264,1266],{"class":113,"line":1265},40,[111,1267,138],{"emptyLinePlaceholder":137},[111,1269,1271],{"class":113,"line":1270},41,[111,1272,1273],{},"# Laravelのconfig\u002Fdatabase.phpと同じ。使用するDBドライバやアクセス情報を記述。\n",[111,1275,1277],{"class":113,"line":1276},42,[111,1278,1279],{},"DATABASES = {\n",[111,1281,1283],{"class":113,"line":1282},43,[111,1284,1285],{},"    'default': {\n",[111,1287,1289],{"class":113,"line":1288},44,[111,1290,1291],{},"        'ENGINE': 'django.db.backends.mysql',\n",[111,1293,1295],{"class":113,"line":1294},45,[111,1296,1297],{},"        'NAME': 'preform',\n",[111,1299,1301],{"class":113,"line":1300},46,[111,1302,1303],{},"        'USER': 'root',\n",[111,1305,1307],{"class":113,"line":1306},47,[111,1308,1309],{},"        'PASSWORD': 'rootroot',\n",[111,1311,1313],{"class":113,"line":1312},48,[111,1314,1315],{},"        'HOST': 'db',\n",[111,1317,1319],{"class":113,"line":1318},49,[111,1320,1321],{},"        'PORT': '3306',\n",[111,1323,1325],{"class":113,"line":1324},50,[111,1326,1327],{},"    }\n",[111,1329,1331],{"class":113,"line":1330},51,[111,1332,1333],{},"}\n",[111,1335,1337],{"class":113,"line":1336},52,[111,1338,138],{"emptyLinePlaceholder":137},[111,1340,1342],{"class":113,"line":1341},53,[111,1343,1344],{},"# 静的ファイルを配置する箇所。Laravelのstorageディレクトリ を定義している様なもの。\n",[111,1346,1348],{"class":113,"line":1347},54,[111,1349,1350],{},"STATIC_URL = '\u002Fstatic\u002F'\n",[701,1352,1353],{"id":1353},"ルーティング",[11,1355,1356,1357,1359,1360,1363,1364,1367,1368,1371],{},"次は",[97,1358,1049],{},"です。これはLaravelでいうところの ",[97,1361,1362],{},"routes\u002F","と内容的には一緒です。ここでHTTPリクエストに対する処理を結びつけています。Urlディスパッチャと言われています。Laravelでは",[97,1365,1366],{},"web.php","や",[97,1369,1370],{},"api.php","などいくらか分かれていますが、Djangoではデフォルトで一つです。詳細な記述は次回説明します。",[701,1373,1374],{"id":1374},"アプリ側のディレクトリ",[11,1376,1377,1378,1381],{},"次にアプリを作成します。Djangoは機能ごとにディレクトリを分割しアプリ(app)と呼んでいます。例としてユーザーのアカウント設定や認証を行う機能を作成するために、",[97,1379,1380],{},"account","というアプリを作成します。",[102,1383,1386],{"className":1384,"code":1385,"language":671},[669],"python3 manage.py startapp account\n",[97,1387,1385],{"__ignoreMap":107},[11,1389,1390,1391,1394],{},"ディレクトリ が一つ増えて、",[97,1392,1393],{},"account\u002F","というのが作成されたはずです。アプリ内には初期では以下の通りテンプレートが作成されます。",[102,1396,1399],{"className":1397,"code":1398,"language":671},[669],"├── account\n│   ├── __init__.py\n│   ├── admin.py\n│   ├── apps.py\n│   ├── migrations\n│   │   └── __init__.py\n│   ├── models.py\n│   ├── tests.py\n│   └── views.py\n├── db.sqlite3\n├── djangodemo\n├── manage.py\n",[97,1400,1398],{"__ignoreMap":107},[11,1402,1403,1404,1407,1408,1410],{},"Laravelは",[97,1405,1406],{},"app\u002F","配下にコントローラーやモデル、ジョブなどのクラスファイルを定義します。独立した機能であっても",[97,1409,1406],{},"配下に配置してクラス名などで判別する感じです。",[11,1412,1413,1414,1418],{},"しかしDjangoは",[1415,1416,1417],"strong",{},"機能ごとにディレクトリ を作成し、その機能に関連するモデル、ビュー、テストの設定を記述","します。ここがLaravelとすこし違うところです。",[11,1420,1421,1422,1425,1426,1429],{},"アプリを",[97,1423,1424],{},"setting.py","の",[97,1427,1428],{},"INSTALLED_APPS","に記述することで、",[102,1431,1433],{"className":1069,"code":1432,"language":1071,"meta":107,"style":107},"from account.model import Account\n\n# account\u002Fmodel.py のAccountクラスを使用する\n",[97,1434,1435,1440,1444],{"__ignoreMap":107},[111,1436,1437],{"class":113,"line":114},[111,1438,1439],{},"from account.model import Account\n",[111,1441,1442],{"class":113,"line":125},[111,1443,138],{"emptyLinePlaceholder":137},[111,1445,1446],{"class":113,"line":134},[111,1447,1448],{},"# account\u002Fmodel.py のAccountクラスを使用する\n",[11,1450,1451,1452,1455],{},"などそのアプリ内機能をモジュールとして使用できます。Laravel（PHP）風に解説すると、適切な名前空間を定義して任意のファイルで",[97,1453,1454],{},"use","する感じです。",[102,1457,1460],{"className":1458,"code":1459,"language":896,"meta":107,"style":107},"language-php shiki shiki-themes material-theme-ocean","use App\\Models\\Account\n",[97,1461,1462],{"__ignoreMap":107},[111,1463,1464],{"class":113,"line":114},[111,1465,1459],{},[11,1467,1468],{},"それぞれのファイルを説明します。",[21,1470,1471,1477,1486,1495,1504,1510],{},[24,1472,1473,1476],{},[97,1474,1475],{},"admin.py",":Djangoが提供する管理者画面でモデルの内容をどう表記するかを定義します。",[24,1478,1479,1482,1483,1485],{},[97,1480,1481],{},"apps.py",":アプリの設定ファイル。アプリの名前やデフォルトのプライマリーキーなどを設定でき、",[97,1484,1428],{},"に必要",[24,1487,1488,1491,1492],{},[97,1489,1490],{},"models.py",": アプリのモデルファイル。テーブルや使用するフィールドの定義などを行う。Laravelでいう",[97,1493,1494],{},"app\u002Fmodels",[24,1496,1497,1500,1501],{},[97,1498,1499],{},"tets.py",": アプリのテストファイル。テストコードを記述する。Laravelでいう",[97,1502,1503],{},"tests\u002F",[24,1505,1506,1509],{},[97,1507,1508],{},"views.py",": アプリのビューファイル。DjangoではビューはLaravelでいうControllerみたいな働きをする。",[24,1511,1512,1515,1516,1519],{},[97,1513,1514],{},"migrations\u002F",": DBに対する変更、マイグレーションファイルが格納されます。Laravelでいう、",[97,1517,1518],{},"database\u002Fmigrations","です。",[11,1521,1522,1523,1526],{},"のこっている ",[97,1524,1525],{},"__init__.py","ですがこれはpythonがディレクトリ をパッケージとして認識して、importできる様にするために必要なファイルです。python2ではこのファイルがないとimportが動作しません。python3からは不要ですが、後方互換性のために作っておいて損はありません。",[102,1528,1530],{"className":1069,"code":1529,"language":1071,"meta":107,"style":107},"from account.models\n\"\"\"\naccountディレクトリ（パッケージ）のmodels.py（モジュール）を読み込むということが,\n__init__.pyがあるとできる。\n\"\"\"\n",[97,1531,1532,1537,1542,1547,1552],{"__ignoreMap":107},[111,1533,1534],{"class":113,"line":114},[111,1535,1536],{},"from account.models\n",[111,1538,1539],{"class":113,"line":125},[111,1540,1541],{},"\"\"\"\n",[111,1543,1544],{"class":113,"line":134},[111,1545,1546],{},"accountディレクトリ（パッケージ）のmodels.py（モジュール）を読み込むということが,\n",[111,1548,1549],{"class":113,"line":141},[111,1550,1551],{},"__init__.pyがあるとできる。\n",[111,1553,1554],{"class":113,"line":150},[111,1555,1541],{},[90,1557,1558],{"id":1558},"今回はとりあえずここまで",[11,1560,1561],{},"ひとまずこの回ではディレクトリやファイルの説明までとしておきます。次回はユーザーモデルを使用した認証の実装とLaravelと比較したCRUDの一部（記事の作成）を実装します。",[1563,1564,1565],"style",{},"html pre.shiki code .s5Dmg, html code.shiki .s5Dmg{--shiki-default:#FFCB6B}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .sC9rS, html code.shiki .sC9rS{--shiki-default:#464B5D;--shiki-default-font-style:italic}",{"title":107,"searchDepth":134,"depth":134,"links":1567},[1568,1572,1577,1585],{"id":92,"depth":125,"text":92,"children":1569},[1570,1571],{"id":174,"depth":134,"text":175},{"id":226,"depth":134,"text":226},{"id":696,"depth":125,"text":696,"children":1573},[1574,1575,1576],{"id":703,"depth":141,"text":703},{"id":737,"depth":141,"text":737},{"id":780,"depth":141,"text":780},{"id":800,"depth":125,"text":801,"children":1578},[1579,1580],{"id":807,"depth":134,"text":807},{"id":955,"depth":134,"text":955,"children":1581},[1582,1583,1584],{"id":1053,"depth":141,"text":1053},{"id":1353,"depth":141,"text":1353},{"id":1374,"depth":141,"text":1374},{"id":1558,"depth":125,"text":1558},[1587],"devstack","2022-02-12","アプリの解説とシリーズの概要","md",{},"\u002Fseries\u002Flaravel-to-django-1",{"title":6,"description":1589},"laravel_to_django","Laravel使いがDjangoでwebアプリを作るよ","series\u002Flaravel-to-django-1",[1598,1071,1599,896],"django","laravel","laralve_to_django\u002Fthumbnail.png",null,"k4TYlI4xXfHM5YMh4HtklCzEfD1cyqgLf2FCDeypoBY",{"id":1604,"title":1605,"body":1606,"category":3314,"createdAt":3315,"description":3316,"extension":1590,"index":125,"meta":3317,"navigation":137,"path":3318,"publish":3319,"seo":3320,"series":1594,"seriesTitle":1595,"stem":3321,"tag":3322,"thumbnail":1600,"updatedAt":1601,"__hash__":3323},"series\u002Fseries\u002Flaravel-to-django-2.md","その２：ビューと認証",{"type":8,"value":1607,"toc":3288},[1608,1611,1618,1629,1632,1636,1639,1642,1645,1660,1671,1677,1680,1683,1688,2193,2196,2199,2206,2249,2265,2268,2298,2306,2309,2312,2317,2320,2323,2326,2351,2358,2381,2384,2406,2409,2412,2465,2467,2539,2545,2548,2551,2714,2720,2723,2729,2756,2762,2784,2791,2800,2804,2813,2819,2830,2836,2839,2842,2849,2852,2934,2939,2942,2956,3163,3172,3223,3229,3232,3254,3257,3261,3267,3270,3274,3277,3279,3282,3285],[11,1609,1610],{},"こんにちはjunです。この記事はLaravel開発者がDjangoでアプリ作成の学習について解説しています。Laravelでいうこの機能はDjangoのここである、その逆はこうだと「Laravelとリンクさせて学習する」ことを重視しています。",[11,1612,1613,1617],{},[73,1614,1616],{"href":1615},"\u002Fseries\u002Flaravel_to_django\u002F1","前回","は環境構築やアプリの概要、設定ファイルとディレクトリ構成の解説を行いました。今回の記事は",[21,1619,1620,1623,1626],{},[24,1621,1622],{},"テンプレートを使用したViewの作成",[24,1624,1625],{},"静的ファイルの使用方法",[24,1627,1628],{},"認証機能の実装",[11,1630,1631],{},"以上を行いたいと思います。",[90,1633,1635],{"id":1634},"viewテンプレートの作成","View（テンプレート）の作成",[11,1637,1638],{},"ではウェルカムページをカスタムのViewを表示することをやってみましょう。ちなみに、DjangoではMVTというコンセプトで作成され、LaravelのMVCとは少し意味合いが異なるそうです。見た目の部分はMVCではV（View）と定義しますが、MVTではT（Template）でありV（View）はリクエストを受け取り、レスポンスを定義します。",[11,1640,1641],{},"そのため今後はMVTに則り、見た目の部分の機能に関してはTemplateと呼ぶこととします。",[172,1643,1644],{"id":1644},"テンプレートの仕組み",[11,1646,1647,1648,1651,1652,1655,1656,1659],{},"テンプレートとは見た目（htmlレスポンス）を定義するファイルのことで",[97,1649,1650],{},".html","で定義します。Laravelでは",[97,1653,1654],{},"resources\u002Fviews\u002F","配下に",[97,1657,1658],{},"~~.blade.php","というブレードを用いて見た目のhtmlを定義するのと同じです。",[11,1661,1662,1663,1666,1667,1670],{},"ソースのルートディレクトリに",[97,1664,1665],{},"templates\u002F","ディレクトリ を作成し、",[97,1668,1669],{},"base.html","をさらに作成します。",[102,1672,1675],{"className":1673,"code":1674,"language":671},[669],"├── db.sqlite3\n├── djangodemo\n├── manage.py\n└── templates\n    └── base.html\n",[97,1676,1674],{"__ignoreMap":107},[11,1678,1679],{},"このソースルートのtemplatesはすべてのアプリで使用することができます。",[172,1681,1682],{"id":1682},"テンプレートの書き方",[11,1684,1685,1687],{},[97,1686,1669],{},"を作成します。まず以下の様に作成してみます。",[102,1689,1693],{"className":1690,"code":1691,"filename":1669,"language":1692,"meta":107,"style":107},"language-html shiki shiki-themes material-theme-ocean","\u003Chtml lang=\"ja\">\n    \u003Chead>\n        \u003Cmeta charset=\"utf-8\">\n        \u003Cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n        \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n        \u003Clink href=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fbootstrap@5.0.2\u002Fdist\u002Fcss\u002Fbootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-EVSTQN3\u002FazprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC\" crossorigin=\"anonymous\">\n        \u003Clink rel=\"stylesheet\" href=\"{% static 'style.css' %}\">\n        \u003Ctitle>test\u003C\u002Ftitle>\n    \u003C\u002Fhead>\n    \u003Cbody>\n        \u003Cheader>\n            \u003Cnav class=\"navbar navbar-light bg-info\">\n                \u003Cdiv class=\"container\">\n                    \u003Ca class=\"navbar-brand\" href=\"\u002F\">Navbar\u003C\u002Fa>\n                \u003C\u002Fdiv>\n            \u003C\u002Fnav>\n        \u003C\u002Fheader>\n        \u003Cmain class=\"d-block bg-light\">\n            \u003Cdiv class=\"container p-4 bg-white l-main-area\">\n                test\n            \u003C\u002Fdiv>\n        \u003C\u002Fmain>\n        \u003Cfooter>\u003C\u002Ffooter>\n        \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fbootstrap@5.0.2\u002Fdist\u002Fjs\u002Fbootstrap.bundle.min.js\" integrity=\"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn\u002FtWtIaxVXM\" crossorigin=\"anonymous\">\u003C\u002Fscript>\n    \u003C\u002Fbody>\n\u003C\u002Fhtml>\n","html",[97,1694,1695,1720,1730,1752,1784,1815,1872,1901,1921,1930,1939,1948,1970,1990,2030,2039,2048,2057,2077,2096,2101,2109,2117,2131,2177,2185],{"__ignoreMap":107},[111,1696,1697,1700,1702,1706,1709,1712,1715,1717],{"class":113,"line":114},[111,1698,1699],{"class":247},"\u003C",[111,1701,1692],{"class":243},[111,1703,1705],{"class":1704},"sJ14y"," lang",[111,1707,1708],{"class":247},"=",[111,1710,1711],{"class":247},"\"",[111,1713,1714],{"class":121},"ja",[111,1716,1711],{"class":247},[111,1718,1719],{"class":247},">\n",[111,1721,1722,1725,1728],{"class":113,"line":125},[111,1723,1724],{"class":247},"    \u003C",[111,1726,1727],{"class":243},"head",[111,1729,1719],{"class":247},[111,1731,1732,1735,1738,1741,1743,1745,1748,1750],{"class":113,"line":134},[111,1733,1734],{"class":247},"        \u003C",[111,1736,1737],{"class":243},"meta",[111,1739,1740],{"class":1704}," charset",[111,1742,1708],{"class":247},[111,1744,1711],{"class":247},[111,1746,1747],{"class":121},"utf-8",[111,1749,1711],{"class":247},[111,1751,1719],{"class":247},[111,1753,1754,1756,1758,1761,1763,1765,1768,1770,1773,1775,1777,1780,1782],{"class":113,"line":141},[111,1755,1734],{"class":247},[111,1757,1737],{"class":243},[111,1759,1760],{"class":1704}," http-equiv",[111,1762,1708],{"class":247},[111,1764,1711],{"class":247},[111,1766,1767],{"class":121},"X-UA-Compatible",[111,1769,1711],{"class":247},[111,1771,1772],{"class":1704}," content",[111,1774,1708],{"class":247},[111,1776,1711],{"class":247},[111,1778,1779],{"class":121},"IE=edge",[111,1781,1711],{"class":247},[111,1783,1719],{"class":247},[111,1785,1786,1788,1790,1793,1795,1797,1800,1802,1804,1806,1808,1811,1813],{"class":113,"line":150},[111,1787,1734],{"class":247},[111,1789,1737],{"class":243},[111,1791,1792],{"class":1704}," name",[111,1794,1708],{"class":247},[111,1796,1711],{"class":247},[111,1798,1799],{"class":121},"viewport",[111,1801,1711],{"class":247},[111,1803,1772],{"class":1704},[111,1805,1708],{"class":247},[111,1807,1711],{"class":247},[111,1809,1810],{"class":121},"width=device-width, initial-scale=1",[111,1812,1711],{"class":247},[111,1814,1719],{"class":247},[111,1816,1817,1819,1822,1825,1827,1829,1832,1834,1837,1839,1841,1844,1846,1849,1851,1853,1856,1858,1861,1863,1865,1868,1870],{"class":113,"line":158},[111,1818,1734],{"class":247},[111,1820,1821],{"class":243},"link",[111,1823,1824],{"class":1704}," href",[111,1826,1708],{"class":247},[111,1828,1711],{"class":247},[111,1830,1831],{"class":121},"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fbootstrap@5.0.2\u002Fdist\u002Fcss\u002Fbootstrap.min.css",[111,1833,1711],{"class":247},[111,1835,1836],{"class":1704}," rel",[111,1838,1708],{"class":247},[111,1840,1711],{"class":247},[111,1842,1843],{"class":121},"stylesheet",[111,1845,1711],{"class":247},[111,1847,1848],{"class":1704}," integrity",[111,1850,1708],{"class":247},[111,1852,1711],{"class":247},[111,1854,1855],{"class":121},"sha384-EVSTQN3\u002FazprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC",[111,1857,1711],{"class":247},[111,1859,1860],{"class":1704}," crossorigin",[111,1862,1708],{"class":247},[111,1864,1711],{"class":247},[111,1866,1867],{"class":121},"anonymous",[111,1869,1711],{"class":247},[111,1871,1719],{"class":247},[111,1873,1874,1876,1878,1880,1882,1884,1886,1888,1890,1892,1894,1897,1899],{"class":113,"line":217},[111,1875,1734],{"class":247},[111,1877,1821],{"class":243},[111,1879,1836],{"class":1704},[111,1881,1708],{"class":247},[111,1883,1711],{"class":247},[111,1885,1843],{"class":121},[111,1887,1711],{"class":247},[111,1889,1824],{"class":1704},[111,1891,1708],{"class":247},[111,1893,1711],{"class":247},[111,1895,1896],{"class":121},"{% static 'style.css' %}",[111,1898,1711],{"class":247},[111,1900,1719],{"class":247},[111,1902,1903,1905,1908,1911,1914,1917,1919],{"class":113,"line":306},[111,1904,1734],{"class":247},[111,1906,1907],{"class":243},"title",[111,1909,1910],{"class":247},">",[111,1912,1913],{"class":369},"test",[111,1915,1916],{"class":247},"\u003C\u002F",[111,1918,1907],{"class":243},[111,1920,1719],{"class":247},[111,1922,1923,1926,1928],{"class":113,"line":317},[111,1924,1925],{"class":247},"    \u003C\u002F",[111,1927,1727],{"class":243},[111,1929,1719],{"class":247},[111,1931,1932,1934,1937],{"class":113,"line":328},[111,1933,1724],{"class":247},[111,1935,1936],{"class":243},"body",[111,1938,1719],{"class":247},[111,1940,1941,1943,1946],{"class":113,"line":339},[111,1942,1734],{"class":247},[111,1944,1945],{"class":243},"header",[111,1947,1719],{"class":247},[111,1949,1950,1953,1956,1959,1961,1963,1966,1968],{"class":113,"line":350},[111,1951,1952],{"class":247},"            \u003C",[111,1954,1955],{"class":243},"nav",[111,1957,1958],{"class":1704}," class",[111,1960,1708],{"class":247},[111,1962,1711],{"class":247},[111,1964,1965],{"class":121},"navbar navbar-light bg-info",[111,1967,1711],{"class":247},[111,1969,1719],{"class":247},[111,1971,1972,1975,1977,1979,1981,1983,1986,1988],{"class":113,"line":361},[111,1973,1974],{"class":247},"                \u003C",[111,1976,589],{"class":243},[111,1978,1958],{"class":1704},[111,1980,1708],{"class":247},[111,1982,1711],{"class":247},[111,1984,1985],{"class":121},"container",[111,1987,1711],{"class":247},[111,1989,1719],{"class":247},[111,1991,1992,1995,1997,1999,2001,2003,2006,2008,2010,2012,2014,2017,2019,2021,2024,2026,2028],{"class":113,"line":373},[111,1993,1994],{"class":247},"                    \u003C",[111,1996,73],{"class":243},[111,1998,1958],{"class":1704},[111,2000,1708],{"class":247},[111,2002,1711],{"class":247},[111,2004,2005],{"class":121},"navbar-brand",[111,2007,1711],{"class":247},[111,2009,1824],{"class":1704},[111,2011,1708],{"class":247},[111,2013,1711],{"class":247},[111,2015,2016],{"class":121},"\u002F",[111,2018,1711],{"class":247},[111,2020,1910],{"class":247},[111,2022,2023],{"class":369},"Navbar",[111,2025,1916],{"class":247},[111,2027,73],{"class":243},[111,2029,1719],{"class":247},[111,2031,2032,2035,2037],{"class":113,"line":388},[111,2033,2034],{"class":247},"                \u003C\u002F",[111,2036,589],{"class":243},[111,2038,1719],{"class":247},[111,2040,2041,2044,2046],{"class":113,"line":398},[111,2042,2043],{"class":247},"            \u003C\u002F",[111,2045,1955],{"class":243},[111,2047,1719],{"class":247},[111,2049,2050,2053,2055],{"class":113,"line":406},[111,2051,2052],{"class":247},"        \u003C\u002F",[111,2054,1945],{"class":243},[111,2056,1719],{"class":247},[111,2058,2059,2061,2064,2066,2068,2070,2073,2075],{"class":113,"line":414},[111,2060,1734],{"class":247},[111,2062,2063],{"class":243},"main",[111,2065,1958],{"class":1704},[111,2067,1708],{"class":247},[111,2069,1711],{"class":247},[111,2071,2072],{"class":121},"d-block bg-light",[111,2074,1711],{"class":247},[111,2076,1719],{"class":247},[111,2078,2079,2081,2083,2085,2087,2089,2092,2094],{"class":113,"line":424},[111,2080,1952],{"class":247},[111,2082,589],{"class":243},[111,2084,1958],{"class":1704},[111,2086,1708],{"class":247},[111,2088,1711],{"class":247},[111,2090,2091],{"class":121},"container p-4 bg-white l-main-area",[111,2093,1711],{"class":247},[111,2095,1719],{"class":247},[111,2097,2098],{"class":113,"line":431},[111,2099,2100],{"class":369},"                test\n",[111,2102,2103,2105,2107],{"class":113,"line":443},[111,2104,2043],{"class":247},[111,2106,589],{"class":243},[111,2108,1719],{"class":247},[111,2110,2111,2113,2115],{"class":113,"line":450},[111,2112,2052],{"class":247},[111,2114,2063],{"class":243},[111,2116,1719],{"class":247},[111,2118,2119,2121,2124,2127,2129],{"class":113,"line":459},[111,2120,1734],{"class":247},[111,2122,2123],{"class":243},"footer",[111,2125,2126],{"class":247},">\u003C\u002F",[111,2128,2123],{"class":243},[111,2130,1719],{"class":247},[111,2132,2133,2135,2138,2141,2143,2145,2148,2150,2152,2154,2156,2159,2161,2163,2165,2167,2169,2171,2173,2175],{"class":113,"line":467},[111,2134,1734],{"class":247},[111,2136,2137],{"class":243},"script",[111,2139,2140],{"class":1704}," src",[111,2142,1708],{"class":247},[111,2144,1711],{"class":247},[111,2146,2147],{"class":121},"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fbootstrap@5.0.2\u002Fdist\u002Fjs\u002Fbootstrap.bundle.min.js",[111,2149,1711],{"class":247},[111,2151,1848],{"class":1704},[111,2153,1708],{"class":247},[111,2155,1711],{"class":247},[111,2157,2158],{"class":121},"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn\u002FtWtIaxVXM",[111,2160,1711],{"class":247},[111,2162,1860],{"class":1704},[111,2164,1708],{"class":247},[111,2166,1711],{"class":247},[111,2168,1867],{"class":121},[111,2170,1711],{"class":247},[111,2172,2126],{"class":247},[111,2174,2137],{"class":243},[111,2176,1719],{"class":247},[111,2178,2179,2181,2183],{"class":113,"line":475},[111,2180,1925],{"class":247},[111,2182,1936],{"class":243},[111,2184,1719],{"class":247},[111,2186,2187,2189,2191],{"class":113,"line":483},[111,2188,1916],{"class":247},[111,2190,1692],{"class":243},[111,2192,1719],{"class":247},[11,2194,2195],{},"bootstrapを入れておきます。変数などは定義していませんが、ひとまずウェルカムページを上記の内容に書き換えましょう。",[172,2197,2198],{"id":2198},"テンプレートをレスポンスで返してみる",[11,2200,2201,2202,2205],{},"テンプレート作成したら",[97,2203,2204],{},"djangodemo\u002Furls.py","を以下の様に変更します。",[102,2207,2209],{"className":1069,"code":2208,"filename":1049,"language":1071,"meta":107,"style":107},"from django.contrib import admin\nfrom django.urls import path\nfrom django.views.generic import TemplateView # わすれずに\n\nurlpatterns = [\n    path('',TemplateView.as_view(template_name='base.html')), # これを追加\n    path('admin\u002F', admin.site.urls),\n]\n",[97,2210,2211,2216,2221,2226,2230,2235,2240,2245],{"__ignoreMap":107},[111,2212,2213],{"class":113,"line":114},[111,2214,2215],{},"from django.contrib import admin\n",[111,2217,2218],{"class":113,"line":125},[111,2219,2220],{},"from django.urls import path\n",[111,2222,2223],{"class":113,"line":134},[111,2224,2225],{},"from django.views.generic import TemplateView # わすれずに\n",[111,2227,2228],{"class":113,"line":141},[111,2229,138],{"emptyLinePlaceholder":137},[111,2231,2232],{"class":113,"line":150},[111,2233,2234],{},"urlpatterns = [\n",[111,2236,2237],{"class":113,"line":158},[111,2238,2239],{},"    path('',TemplateView.as_view(template_name='base.html')), # これを追加\n",[111,2241,2242],{"class":113,"line":217},[111,2243,2244],{},"    path('admin\u002F', admin.site.urls),\n",[111,2246,2247],{"class":113,"line":306},[111,2248,1160],{},[11,2250,2251,2253,2254,2256,2257,2260,2261,2264],{},[97,2252,1049],{},"はLaravelでいう",[97,2255,1362],{},"配下のファイルであり、URLに対応する処理やテンプレートを指定する箇所です。上記の記述を用いて、",[97,2258,2259],{},"http:\u002F\u002Flocalhost:8000\u002F","にアクセスした時に先ほどの、base.htmlを表示する様にしています。テンプレートを直接指定してレスポンスとして返すには",[97,2262,2263],{},"TemplateView","が必要です。",[11,2266,2267],{},"Laravel的には以下の様な記述です。",[102,2269,2272],{"className":1458,"code":2270,"filename":2271,"language":896,"meta":107,"style":107},"use Illuminate\\Support\\Facades\\Route;\n\nRoute::get('\u002F', function () {\n    return view('base');\n});\n","routes\u002Fweb.php",[97,2273,2274,2279,2283,2288,2293],{"__ignoreMap":107},[111,2275,2276],{"class":113,"line":114},[111,2277,2278],{},"use Illuminate\\Support\\Facades\\Route;\n",[111,2280,2281],{"class":113,"line":125},[111,2282,138],{"emptyLinePlaceholder":137},[111,2284,2285],{"class":113,"line":134},[111,2286,2287],{},"Route::get('\u002F', function () {\n",[111,2289,2290],{"class":113,"line":141},[111,2291,2292],{},"    return view('base');\n",[111,2294,2295],{"class":113,"line":150},[111,2296,2297],{},"});\n",[11,2299,2300,2302,2303,2305],{},[97,2301,1049],{},"を編集したら",[97,2304,2259],{},"にアクセスして以下の様な画面が表示されればひとまず、特定のURLにテンプレートを返すという感覚がわかると思います。",[690,2307],{":src":2308,":width":693},"'laralve_to_django\u002F2\u002Fbase_html.png'",[11,2310,2311],{},"ひとまずカスタムテンプレートを表示できたのでDjangoで使用できる様々なディレクティブを解説します。",[589,2313,2316],{"className":2314},[592,2315],"alert-success","\nディレクティブというのはそのプログラム（ここではDjango）が解釈できる文字列の記述のことです。Djandgoでは {% if %}　のような記号を用いて表現します。Laravelのブレードでは @if などです。\n",[172,2318,2319],{"id":2319},"テンプレートで使えるディレクィブ",[701,2321,2322],{"id":2322},"変数展開",[11,2324,2325],{},"Viewからはテンプレートにはデータを渡すことができます。渡す時はDictで渡します。",[102,2327,2329],{"className":1069,"code":2328,"filename":1508,"language":1071,"meta":107,"style":107},"from django.shortcuts import render\ndef index(request):\n    context = {'value': 123}\n    return render(request, 'polls\u002Findex.html', context)\n",[97,2330,2331,2336,2341,2346],{"__ignoreMap":107},[111,2332,2333],{"class":113,"line":114},[111,2334,2335],{},"from django.shortcuts import render\n",[111,2337,2338],{"class":113,"line":125},[111,2339,2340],{},"def index(request):\n",[111,2342,2343],{"class":113,"line":134},[111,2344,2345],{},"    context = {'value': 123}\n",[111,2347,2348],{"class":113,"line":141},[111,2349,2350],{},"    return render(request, 'polls\u002Findex.html', context)\n",[11,2352,2353,2354,2357],{},"そして変数を展開する時は",[97,2355,2356],{},"{{ }}"," を用いて展開をします。値は自動的にエスケープ処理されます。ここはLaravelと同じですね。",[102,2359,2362],{"className":1690,"code":2360,"filename":2361,"language":1692,"meta":107,"style":107},"\u003Cp>{{ value }}\u003C\u002Fp>\n","template.html",[97,2363,2364],{"__ignoreMap":107},[111,2365,2366,2368,2370,2372,2375,2377,2379],{"class":113,"line":114},[111,2367,1699],{"class":247},[111,2369,11],{"class":243},[111,2371,1910],{"class":247},[111,2373,2374],{"class":369},"{{ value }}",[111,2376,1916],{"class":247},[111,2378,11],{"class":243},[111,2380,1719],{"class":247},[11,2382,2383],{},"↓",[102,2385,2387],{"className":1690,"code":2386,"filename":2361,"language":1692,"meta":107,"style":107},"\u003Cp>123\u003C\u002Fp>\n",[97,2388,2389],{"__ignoreMap":107},[111,2390,2391,2393,2395,2397,2400,2402,2404],{"class":113,"line":114},[111,2392,1699],{"class":247},[111,2394,11],{"class":243},[111,2396,1910],{"class":247},[111,2398,2399],{"class":369},"123",[111,2401,1916],{"class":247},[111,2403,11],{"class":243},[111,2405,1719],{"class":247},[701,2407,2408],{"id":2408},"for文",[11,2410,2411],{},"for分は以下の様に使用します。",[102,2413,2415],{"className":1690,"code":2414,"language":1692,"meta":107,"style":107},"\u003C!-- list = [{'name':'jun'},{'name':'apps'},{'name':'python'}] -->\n\u003Cul>\n{% for item in list %}\n\u003Cli>{{ item.name }}\u003C\u002Fli>\n{% endfor %}\n\u003C\u002Ful>\n",[97,2416,2417,2422,2430,2435,2452,2457],{"__ignoreMap":107},[111,2418,2419],{"class":113,"line":114},[111,2420,2421],{"class":828},"\u003C!-- list = [{'name':'jun'},{'name':'apps'},{'name':'python'}] -->\n",[111,2423,2424,2426,2428],{"class":113,"line":125},[111,2425,1699],{"class":247},[111,2427,21],{"class":243},[111,2429,1719],{"class":247},[111,2431,2432],{"class":113,"line":134},[111,2433,2434],{"class":369},"{% for item in list %}\n",[111,2436,2437,2439,2441,2443,2446,2448,2450],{"class":113,"line":141},[111,2438,1699],{"class":247},[111,2440,24],{"class":243},[111,2442,1910],{"class":247},[111,2444,2445],{"class":369},"{{ item.name }}",[111,2447,1916],{"class":247},[111,2449,24],{"class":243},[111,2451,1719],{"class":247},[111,2453,2454],{"class":113,"line":150},[111,2455,2456],{"class":369},"{% endfor %}\n",[111,2458,2459,2461,2463],{"class":113,"line":158},[111,2460,1916],{"class":247},[111,2462,21],{"class":243},[111,2464,1719],{"class":247},[11,2466,2383],{},[102,2468,2470],{"className":1690,"code":2469,"language":1692,"meta":107,"style":107},"\u003Cul>\n\u003Cli>{{ item.jun }}\u003C\u002Fli>\n\u003Cli>{{ item.apps }}\u003C\u002Fli>\n\u003Cli>{{ item.python }}\u003C\u002Fli>\n\u003C\u002Ful>\n",[97,2471,2472,2480,2497,2514,2531],{"__ignoreMap":107},[111,2473,2474,2476,2478],{"class":113,"line":114},[111,2475,1699],{"class":247},[111,2477,21],{"class":243},[111,2479,1719],{"class":247},[111,2481,2482,2484,2486,2488,2491,2493,2495],{"class":113,"line":125},[111,2483,1699],{"class":247},[111,2485,24],{"class":243},[111,2487,1910],{"class":247},[111,2489,2490],{"class":369},"{{ item.jun }}",[111,2492,1916],{"class":247},[111,2494,24],{"class":243},[111,2496,1719],{"class":247},[111,2498,2499,2501,2503,2505,2508,2510,2512],{"class":113,"line":134},[111,2500,1699],{"class":247},[111,2502,24],{"class":243},[111,2504,1910],{"class":247},[111,2506,2507],{"class":369},"{{ item.apps }}",[111,2509,1916],{"class":247},[111,2511,24],{"class":243},[111,2513,1719],{"class":247},[111,2515,2516,2518,2520,2522,2525,2527,2529],{"class":113,"line":141},[111,2517,1699],{"class":247},[111,2519,24],{"class":243},[111,2521,1910],{"class":247},[111,2523,2524],{"class":369},"{{ item.python }}",[111,2526,1916],{"class":247},[111,2528,24],{"class":243},[111,2530,1719],{"class":247},[111,2532,2533,2535,2537],{"class":113,"line":150},[111,2534,1916],{"class":247},[111,2536,21],{"class":243},[111,2538,1719],{"class":247},[11,2540,810,2541,2544],{},[97,2542,2543],{},"@for","ディレクティブでしたね。ですが基本的に似ています。",[701,2546,2547],{"id":2547},"if文",[11,2549,2550],{},"if文は以下の様に使用します。",[102,2552,2554],{"className":1690,"code":2553,"language":1692,"meta":107,"style":107},"{% if user.is_authenticated%}\n\u003Cli class=\"nav-item\">\n    \u003Ca class=\"nav-link\" href=\"{% url 'logout' %}\">ログアウト\u003C\u002Fa>\n\u003C\u002Fli>\n{% else %}\n\u003Cli class=\"nav-item\">\n    \u003Ca class=\"nav-link active\" aria-current=\"page\" href=\"{% url 'login' %}\">ログイン\u003C\u002Fa>\n\u003C\u002Fli>\n{% endif %}\n",[97,2555,2556,2561,2580,2619,2627,2632,2650,2701,2709],{"__ignoreMap":107},[111,2557,2558],{"class":113,"line":114},[111,2559,2560],{"class":369},"{% if user.is_authenticated%}\n",[111,2562,2563,2565,2567,2569,2571,2573,2576,2578],{"class":113,"line":125},[111,2564,1699],{"class":247},[111,2566,24],{"class":243},[111,2568,1958],{"class":1704},[111,2570,1708],{"class":247},[111,2572,1711],{"class":247},[111,2574,2575],{"class":121},"nav-item",[111,2577,1711],{"class":247},[111,2579,1719],{"class":247},[111,2581,2582,2584,2586,2588,2590,2592,2595,2597,2599,2601,2603,2606,2608,2610,2613,2615,2617],{"class":113,"line":134},[111,2583,1724],{"class":247},[111,2585,73],{"class":243},[111,2587,1958],{"class":1704},[111,2589,1708],{"class":247},[111,2591,1711],{"class":247},[111,2593,2594],{"class":121},"nav-link",[111,2596,1711],{"class":247},[111,2598,1824],{"class":1704},[111,2600,1708],{"class":247},[111,2602,1711],{"class":247},[111,2604,2605],{"class":121},"{% url 'logout' %}",[111,2607,1711],{"class":247},[111,2609,1910],{"class":247},[111,2611,2612],{"class":369},"ログアウト",[111,2614,1916],{"class":247},[111,2616,73],{"class":243},[111,2618,1719],{"class":247},[111,2620,2621,2623,2625],{"class":113,"line":141},[111,2622,1916],{"class":247},[111,2624,24],{"class":243},[111,2626,1719],{"class":247},[111,2628,2629],{"class":113,"line":150},[111,2630,2631],{"class":369},"{% else %}\n",[111,2633,2634,2636,2638,2640,2642,2644,2646,2648],{"class":113,"line":158},[111,2635,1699],{"class":247},[111,2637,24],{"class":243},[111,2639,1958],{"class":1704},[111,2641,1708],{"class":247},[111,2643,1711],{"class":247},[111,2645,2575],{"class":121},[111,2647,1711],{"class":247},[111,2649,1719],{"class":247},[111,2651,2652,2654,2656,2658,2660,2662,2665,2667,2670,2672,2674,2677,2679,2681,2683,2685,2688,2690,2692,2695,2697,2699],{"class":113,"line":217},[111,2653,1724],{"class":247},[111,2655,73],{"class":243},[111,2657,1958],{"class":1704},[111,2659,1708],{"class":247},[111,2661,1711],{"class":247},[111,2663,2664],{"class":121},"nav-link active",[111,2666,1711],{"class":247},[111,2668,2669],{"class":1704}," aria-current",[111,2671,1708],{"class":247},[111,2673,1711],{"class":247},[111,2675,2676],{"class":121},"page",[111,2678,1711],{"class":247},[111,2680,1824],{"class":1704},[111,2682,1708],{"class":247},[111,2684,1711],{"class":247},[111,2686,2687],{"class":121},"{% url 'login' %}",[111,2689,1711],{"class":247},[111,2691,1910],{"class":247},[111,2693,2694],{"class":369},"ログイン",[111,2696,1916],{"class":247},[111,2698,73],{"class":243},[111,2700,1719],{"class":247},[111,2702,2703,2705,2707],{"class":113,"line":306},[111,2704,1916],{"class":247},[111,2706,24],{"class":243},[111,2708,1719],{"class":247},[111,2710,2711],{"class":113,"line":317},[111,2712,2713],{"class":369},"{% endif %}\n",[11,2715,810,2716,2719],{},[97,2717,2718],{},"@if","ディレクティブでした。基本的に似ています。上記の例はユーザーのログイン状態で表示を分岐しています。",[701,2721,2722],{"id":2722},"フィルタ",[11,2724,1403,2725,2728],{},[97,2726,2727],{},"{{ count($value) }}"," のように変数展開しつつもメソッドを使用することができます。しかし、Djangoの場合は内部にロジックを書くことができません。その代わりフィルタというものを使用して変数の値を変更します。",[102,2730,2732],{"className":1690,"code":2731,"language":1692,"meta":107,"style":107},"\u003C!-- usersはリスト -->\n\u003Cp>登録者数は{{ users|length }}人です。\u003C\u002Fp>\n",[97,2733,2734,2739],{"__ignoreMap":107},[111,2735,2736],{"class":113,"line":114},[111,2737,2738],{"class":828},"\u003C!-- usersはリスト -->\n",[111,2740,2741,2743,2745,2747,2750,2752,2754],{"class":113,"line":125},[111,2742,1699],{"class":247},[111,2744,11],{"class":243},[111,2746,1910],{"class":247},[111,2748,2749],{"class":369},"登録者数は{{ users|length }}人です。",[111,2751,1916],{"class":247},[111,2753,11],{"class":243},[111,2755,1719],{"class":247},[11,2757,2758,2761],{},[97,2759,2760],{},"{{ 変数名|フィルタ名:\u003C引数など>}}","この様な入力規則になっています。",[102,2763,2765],{"className":1690,"code":2764,"language":1692,"meta":107,"style":107},"\u003Cp>作成日：{{ created_at|date:\"Y年m月d日 H:s:i\" }}\u003C\u002Fp>\n",[97,2766,2767],{"__ignoreMap":107},[111,2768,2769,2771,2773,2775,2778,2780,2782],{"class":113,"line":114},[111,2770,1699],{"class":247},[111,2772,11],{"class":243},[111,2774,1910],{"class":247},[111,2776,2777],{"class":369},"作成日：{{ created_at|date:\"Y年m月d日 H:s:i\" }}",[111,2779,1916],{"class":247},[111,2781,11],{"class":243},[111,2783,1719],{"class":247},[11,2785,2786,2787,2790],{},"上記の例は",[97,2788,2789],{},"created_at","を所定の日付フォーマットに変えるフィルタです。",[11,2792,2793,2794,2799],{},"使用可能なフィルタは",[73,2795,2798],{"href":2796,"rel":2797},"https:\u002F\u002Fdocs.djangoproject.com\u002Fja\u002F3.2\u002Fref\u002Ftemplates\u002Fbuiltins\u002F#built-in-filter-reference",[77],"こちらのドキュメントに記載","されています。",[701,2801,2803],{"id":2802},"url","URL",[11,2805,810,2806,2809,2810,2812],{},[97,2807,2808],{},"route()"," というヘルパーを使用することで",[97,2811,2271],{}," などで定義した名前付きルートのURLを出力できます。Djangoにも似た様なものがあり、以下の様に表現します。",[102,2814,2817],{"className":2815,"code":2816,"language":671},[669],"{% url \"index\" %}\n",[97,2818,2816],{"__ignoreMap":107},[11,2820,2821,2822,2825,2826,2829],{},"またキーワード引数がある場合、例えばブログ記事の詳細を",[97,2823,2824],{},"\u002Fblogs\u002F1"," のように示す場合",[97,2827,2828],{},"route('blogs',['blog_id'=>1])","のように引数を指定できます。Djangoも同様に",[102,2831,2834],{"className":2832,"code":2833,"language":671},[669],"{% url \"blogs\" blog_id=1 %}\n",[97,2835,2833],{"__ignoreMap":107},[11,2837,2838],{},"のように表示します。",[701,2840,2841],{"id":2841},"エスケープ解除",[11,2843,2844,2845,2848],{},"リッチテキストを表示したい時などLaravelでは",[97,2846,2847],{},"{!! !!}","とすることでエスケープを解除していました。Djangoの場合は２通りあります。",[11,2850,2851],{},"１つはsafeフィルタを使う方法と、２つ目はエスケープ解除ディレクティブで囲むことです。",[102,2853,2855],{"className":1690,"code":2854,"language":1692,"meta":107,"style":107},"\u003Cdiv class=\"editor\">\n{{ value|safe }}\n\u003C\u002Fdiv>\n\n{% autoescape off %}\n\u003Cdiv class=\"editor\">\n    {{ value }}\n\u003C\u002Fdiv>\n{% endautoescape %}\n\n",[97,2856,2857,2876,2881,2889,2893,2898,2916,2921,2929],{"__ignoreMap":107},[111,2858,2859,2861,2863,2865,2867,2869,2872,2874],{"class":113,"line":114},[111,2860,1699],{"class":247},[111,2862,589],{"class":243},[111,2864,1958],{"class":1704},[111,2866,1708],{"class":247},[111,2868,1711],{"class":247},[111,2870,2871],{"class":121},"editor",[111,2873,1711],{"class":247},[111,2875,1719],{"class":247},[111,2877,2878],{"class":113,"line":125},[111,2879,2880],{"class":369},"{{ value|safe }}\n",[111,2882,2883,2885,2887],{"class":113,"line":134},[111,2884,1916],{"class":247},[111,2886,589],{"class":243},[111,2888,1719],{"class":247},[111,2890,2891],{"class":113,"line":141},[111,2892,138],{"emptyLinePlaceholder":137},[111,2894,2895],{"class":113,"line":150},[111,2896,2897],{"class":369},"{% autoescape off %}\n",[111,2899,2900,2902,2904,2906,2908,2910,2912,2914],{"class":113,"line":158},[111,2901,1699],{"class":247},[111,2903,589],{"class":243},[111,2905,1958],{"class":1704},[111,2907,1708],{"class":247},[111,2909,1711],{"class":247},[111,2911,2871],{"class":121},[111,2913,1711],{"class":247},[111,2915,1719],{"class":247},[111,2917,2918],{"class":113,"line":217},[111,2919,2920],{"class":369},"    {{ value }}\n",[111,2922,2923,2925,2927],{"class":113,"line":306},[111,2924,1916],{"class":247},[111,2926,589],{"class":243},[111,2928,1719],{"class":247},[111,2930,2931],{"class":113,"line":317},[111,2932,2933],{"class":369},"{% endautoescape %}\n",[589,2935,2938],{"className":2936},[592,2937],"alert-danger","\nエスケープを解除するとXSS脆弱性の元になります。展開する変数のチェックを怠らない様にしましょう。\n",[172,2940,2941],{"id":2941},"テンプレートの共通化と継承",[11,2943,2944,2945,2948,2949,2952,2953,2955],{},"Laravelのテンプレートには ",[97,2946,2947],{},"@extends"," や",[97,2950,2951],{},"@section","をなどを用いて共通化を行うことができます。Djangoでも同じ様な方法で共通化が行えます。例えば",[97,2954,1669],{}," に共通のヘッダやメニューなどを書いておき、任意のテンプレートに継承させてコンテンツだけ出力させることができます。",[102,2957,2960],{"className":1690,"code":2958,"filename":2959,"language":1692,"meta":107,"style":107},"\u003Chtml>\n    \u003Chead>\n        \u003Cmeta charset=\"utf-8\">\n        \u003Cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n        \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n        \u003Ctitle>{% block title %}{% endblock  %}\u003C\u002Ftitle>\n    \u003C\u002Fhead>\n    \u003Cbody>\n        \u003Cheader>\n            \u003C!-- 省略 -->\n        \u003C\u002Fheader>\n        \u003Cmain>\n            {% block content %}{% endblock  %}\n        \u003C\u002Fmain>\n        \u003Cfooter>\n            \u003C!-- 省略 -->\n        \u003C\u002Ffooter>\n    \u003C\u002Fbody>\n\u003C\u002Fhtml>\n","templates\u002Fbase.html",[97,2961,2962,2970,2978,2996,3024,3052,3069,3077,3085,3093,3098,3106,3114,3119,3127,3135,3139,3147,3155],{"__ignoreMap":107},[111,2963,2964,2966,2968],{"class":113,"line":114},[111,2965,1699],{"class":247},[111,2967,1692],{"class":243},[111,2969,1719],{"class":247},[111,2971,2972,2974,2976],{"class":113,"line":125},[111,2973,1724],{"class":247},[111,2975,1727],{"class":243},[111,2977,1719],{"class":247},[111,2979,2980,2982,2984,2986,2988,2990,2992,2994],{"class":113,"line":134},[111,2981,1734],{"class":247},[111,2983,1737],{"class":243},[111,2985,1740],{"class":1704},[111,2987,1708],{"class":247},[111,2989,1711],{"class":247},[111,2991,1747],{"class":121},[111,2993,1711],{"class":247},[111,2995,1719],{"class":247},[111,2997,2998,3000,3002,3004,3006,3008,3010,3012,3014,3016,3018,3020,3022],{"class":113,"line":141},[111,2999,1734],{"class":247},[111,3001,1737],{"class":243},[111,3003,1760],{"class":1704},[111,3005,1708],{"class":247},[111,3007,1711],{"class":247},[111,3009,1767],{"class":121},[111,3011,1711],{"class":247},[111,3013,1772],{"class":1704},[111,3015,1708],{"class":247},[111,3017,1711],{"class":247},[111,3019,1779],{"class":121},[111,3021,1711],{"class":247},[111,3023,1719],{"class":247},[111,3025,3026,3028,3030,3032,3034,3036,3038,3040,3042,3044,3046,3048,3050],{"class":113,"line":150},[111,3027,1734],{"class":247},[111,3029,1737],{"class":243},[111,3031,1792],{"class":1704},[111,3033,1708],{"class":247},[111,3035,1711],{"class":247},[111,3037,1799],{"class":121},[111,3039,1711],{"class":247},[111,3041,1772],{"class":1704},[111,3043,1708],{"class":247},[111,3045,1711],{"class":247},[111,3047,1810],{"class":121},[111,3049,1711],{"class":247},[111,3051,1719],{"class":247},[111,3053,3054,3056,3058,3060,3063,3065,3067],{"class":113,"line":158},[111,3055,1734],{"class":247},[111,3057,1907],{"class":243},[111,3059,1910],{"class":247},[111,3061,3062],{"class":369},"{% block title %}{% endblock  %}",[111,3064,1916],{"class":247},[111,3066,1907],{"class":243},[111,3068,1719],{"class":247},[111,3070,3071,3073,3075],{"class":113,"line":217},[111,3072,1925],{"class":247},[111,3074,1727],{"class":243},[111,3076,1719],{"class":247},[111,3078,3079,3081,3083],{"class":113,"line":306},[111,3080,1724],{"class":247},[111,3082,1936],{"class":243},[111,3084,1719],{"class":247},[111,3086,3087,3089,3091],{"class":113,"line":317},[111,3088,1734],{"class":247},[111,3090,1945],{"class":243},[111,3092,1719],{"class":247},[111,3094,3095],{"class":113,"line":328},[111,3096,3097],{"class":828},"            \u003C!-- 省略 -->\n",[111,3099,3100,3102,3104],{"class":113,"line":339},[111,3101,2052],{"class":247},[111,3103,1945],{"class":243},[111,3105,1719],{"class":247},[111,3107,3108,3110,3112],{"class":113,"line":350},[111,3109,1734],{"class":247},[111,3111,2063],{"class":243},[111,3113,1719],{"class":247},[111,3115,3116],{"class":113,"line":361},[111,3117,3118],{"class":369},"            {% block content %}{% endblock  %}\n",[111,3120,3121,3123,3125],{"class":113,"line":373},[111,3122,2052],{"class":247},[111,3124,2063],{"class":243},[111,3126,1719],{"class":247},[111,3128,3129,3131,3133],{"class":113,"line":388},[111,3130,1734],{"class":247},[111,3132,2123],{"class":243},[111,3134,1719],{"class":247},[111,3136,3137],{"class":113,"line":398},[111,3138,3097],{"class":828},[111,3140,3141,3143,3145],{"class":113,"line":406},[111,3142,2052],{"class":247},[111,3144,2123],{"class":243},[111,3146,1719],{"class":247},[111,3148,3149,3151,3153],{"class":113,"line":414},[111,3150,1925],{"class":247},[111,3152,1936],{"class":243},[111,3154,1719],{"class":247},[111,3156,3157,3159,3161],{"class":113,"line":424},[111,3158,1916],{"class":247},[111,3160,1692],{"class":243},[111,3162,1719],{"class":247},[11,3164,3165,3167,3168,3171],{},[97,3166,1669],{},"では共通のヘッダーなどを定義しておきます。そして",[97,3169,3170],{},"{% block content %}{% endblock  %}","で子テンプレートで入力できる値を定義します。ここではタイトル（title）と内容（content）を入力できる様にします。",[102,3173,3176],{"className":1690,"code":3174,"filename":3175,"language":1692,"meta":107,"style":107},"{% extends 'base.html' %}\n\n{% block title %}詳細ページ{% endblock  %}\n\n{% block content %}\n\u003Cp> content \u003C\u002Fp>\n{% endblock  %}\n","templates\u002Fdetail.html",[97,3177,3178,3183,3187,3192,3196,3201,3218],{"__ignoreMap":107},[111,3179,3180],{"class":113,"line":114},[111,3181,3182],{"class":369},"{% extends 'base.html' %}\n",[111,3184,3185],{"class":113,"line":125},[111,3186,138],{"emptyLinePlaceholder":137},[111,3188,3189],{"class":113,"line":134},[111,3190,3191],{"class":369},"{% block title %}詳細ページ{% endblock  %}\n",[111,3193,3194],{"class":113,"line":141},[111,3195,138],{"emptyLinePlaceholder":137},[111,3197,3198],{"class":113,"line":150},[111,3199,3200],{"class":369},"{% block content %}\n",[111,3202,3203,3205,3207,3209,3212,3214,3216],{"class":113,"line":158},[111,3204,1699],{"class":247},[111,3206,11],{"class":243},[111,3208,1910],{"class":247},[111,3210,3211],{"class":369}," content ",[111,3213,1916],{"class":247},[111,3215,11],{"class":243},[111,3217,1719],{"class":247},[111,3219,3220],{"class":113,"line":217},[111,3221,3222],{"class":369},"{% endblock  %}\n",[11,3224,3225,3226,3228],{},"小テンプレート では上記の様に書くことで、親の",[97,3227,1669],{}," に当てはめられた形でレンダリングされます。",[90,3230,3231],{"id":3231},"静的ファイルの呼び出し",[11,3233,3234,3235,3238,3239,3242,3243,3242,3246,3249,3250,3253],{},"プロジェクトで配置しておくcss,js,画像といった静的ファイルをLaraveで扱うときは",[97,3236,3237],{},"public\u002F"," ディレクトリ配下に",[97,3240,3241],{},"css\u002F",",",[97,3244,3245],{},"js\u002F",[97,3247,3248],{},"images\u002F","などを配置して ",[97,3251,3252],{},"{{assets('\u002Fcss\u002Fstyle.css')}}"," とすることで自動的にパスの解決をしてくれます。",[11,3255,3256],{},"Djangoで静的ファイルを利用するためには２つほど設定が必要です。",[172,3258,3260],{"id":3259},"settingpyでの設定","setting.pyでの設定",[11,3262,3263,3264,3266],{},"まず",[97,3265,1424],{}," にて静的ファイルを配置するディレクトリの設定を確認します。",[90,3268,3269],{"id":3269},"認証機能実装",[172,3271,3273],{"id":3272},"djangoの基本機能を使用する","Djangoの基本機能を使用する",[172,3275,3276],{"id":3276},"ユーザー登録",[172,3278,2694],{"id":2694},[172,3280,3281],{"id":3281},"パスワード忘れ",[172,3283,3284],{"id":3284},"メールアドレスに変更する",[1563,3286,3287],{},"html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sC9rS, html code.shiki .sC9rS{--shiki-default:#464B5D;--shiki-default-font-style:italic}",{"title":107,"searchDepth":134,"depth":134,"links":3289},[3290,3304,3307],{"id":1634,"depth":125,"text":1635,"children":3291},[3292,3293,3294,3295,3303],{"id":1644,"depth":134,"text":1644},{"id":1682,"depth":134,"text":1682},{"id":2198,"depth":134,"text":2198},{"id":2319,"depth":134,"text":2319,"children":3296},[3297,3298,3299,3300,3301,3302],{"id":2322,"depth":141,"text":2322},{"id":2408,"depth":141,"text":2408},{"id":2547,"depth":141,"text":2547},{"id":2722,"depth":141,"text":2722},{"id":2802,"depth":141,"text":2803},{"id":2841,"depth":141,"text":2841},{"id":2941,"depth":134,"text":2941},{"id":3231,"depth":125,"text":3231,"children":3305},[3306],{"id":3259,"depth":134,"text":3260},{"id":3269,"depth":125,"text":3269,"children":3308},[3309,3310,3311,3312,3313],{"id":3272,"depth":134,"text":3273},{"id":3276,"depth":134,"text":3276},{"id":2694,"depth":134,"text":2694},{"id":3281,"depth":134,"text":3281},{"id":3284,"depth":134,"text":3284},[1587],"2022-02-13","ビューと認証の構築を行います",{},"\u002Fseries\u002Flaravel-to-django-2",false,{"title":1605,"description":3316},"series\u002Flaravel-to-django-2",[1598,1071,1599,896],"TmNXrWmCS1lg0MAxTXzLdzGEE-1FXZWpN43q3D-FCsc",1780987146751]