【勉強日記】簡単なwebアプリを作ってみよう③【第27回】

webアプリ

はじめに

これまで、Webアプリを製作する上で、便利なひな型となるフレームワーク(Django)について、全体の構成・各部門のはたらきについて解説してきました。

今回はweb製作を始める前の準備について具体的に何を行えばよいか、実際にコマンド等を紹介しながら述べていきます。

もくじ

  • webアプリ製作前に必要なもの
  • 「仮想環境」って何?
  • ①「仮想環境」を作ってみよう ・・・「作成」と「有効化」について
  • ②Djangoをインストールしよう
  • ③「プロジェクト」と「アプリケーション」を作ろう
  • ④Djangoの設定をしよう
    • 「setting」のファイルで言語と時間を設定しよう
  • ⑤開発用サーバーを立ち上げよう ・・・ロケットを飛ばしてみよう!
  • まとめ

webアプリ製作前に必要なもの

前回までのブログでは、アプリ製作でフレームワークというひな型を使用するメリットと、そのフレームワークのひとつである「Django」の特徴や、各部門のはたらきについて解説してきました。今回は、実際にwebアプリを作成するうえでの下準備について解説していきます。

今回、Djangoを使用してtodoアプリを作成する下準備は、

  • 「visual studio」 をインストールする 
  • 「python」をインストールする
  • 「仮想環境」を作成する
  • 「Django」をインストールする
  • 「Django」においてプロジェクトを作成・各種設定をする
  • 「開発サーバー」を立ち上げる

の順番で行っていきます。上記のほかにもデータベースの設定などを行う場合もありますが、今回は最低限Webアプリを製作するうえで必要な手順のみ紹介します。また、「visual studio」 をインストールする・「python」をインストールする行程については、これまでのブログで使用していたため今回は省略します。

仮想環境って何? 

仮想環境とは、(主に自分のPC内で)仮想的に作成された場所のことです。今回使用するPythonには、コマンドを打ち込むことで仮想環境を作成してくれる機能がついています。この作成した仮想環境内でwebアプリを作成すると、pythonやDjangoのバージョン違いでの差による不具合を避けたり、他のアプリからの影響を受けたりせず作業を進めることができます

仮想環境は独立した箱のようなもので、複数作成することができます。プロジェクトごとに仮想環境を作成しておくのが一般的です。

①「仮想環境」を作ってみよう ・・・「作成」と「有効化」について

さっそく仮想環境を作成してみます。pythonを使用すれば、以下のコマンドで簡単に仮想環境を作成することができます。

仮想環境の作成

C:XXX…\XX(現在のディレクトリ)> python -m venv venv_todoapp

▼作成できた仮想環境

上記のコマンドのうち、1つめの「venv」は仮想環境を作成するときに共通で、2つめの「venv_todoapp」というのは仮想環境の名前を示しています(このため、venv_todoappの部分は好きな名前を付けて問題ありません)。

仮想環境は作成しただけでは使用できないので、これを「有効化」して仮想環境に入ってみます。

仮想環境の有効化

C:XXX…\XX\venv_todoapp\Scripts> activate.bat

▼仮想環境に入っていると先頭に(仮想環境の名前)が表示される

仮想環境に入れることが確認できたら、以下のコマンドで「無効化」して仮想環境からいったん抜けておきます。

仮想環境の無効化

(venv_todoapp) C:XXX…\XX\venv_todoapp\Scripts> deactivate

▼仮想環境から抜けたので先頭の()が無くなっている

②Djangoをインストールしよう

次に、以下のコマンドで仮想環境内でDjangoをインストールしてみます。今回は最新版のDjangoをインストールします(バージョンを指定してインストールすることも可能です)。

Djangoのインストール

(venv_todoapp) C:XXX…\XX\venv_todoapp> pip install django

※仮想環境に入っている状態か先に確認しましょう!

▼仮想環境内に「django-admin」などが存在していたらインストール完了

③「プロジェクト」と「アプリケーション」を作ろう

Djangoのインストールが完了したら、「プロジェクト」と「アプリケーション」を作成します。これからtodoアプリの機能を記述していくファイルが「アプリケーション」で、その大元のフォルダが「プロジェクト」です。

☆「プロジェクト」作成

(venv_todoapp) C:XXX…\XX\venv_todoapp> django-admin startproject todo_project

※ここでも仮想環境に入れているか確認!

▼「todo_project」の部分は任意のプロジェクト名でOK

☆「アプリケーション」作成

アプリケーションを作成するさいには、manage.pyのあるディレクトリでコマンドを実行します。

(venv_todoapp) C:XXX…\XX\venv_todoapp\todo_project> python manage.py startapp todoapp

▼「todoapp」の部分は任意のアプリケーション名でOK

④Djangoの設定をしよう

Djangoでプロジェクトとアプリケーションを作成したら、早速Djangoの設定をしていきます。

☆Setting.py のファイルで「言語」と「タイムゾーン」の設定をする

まずは、「setting.py」というファイルで「言語」と「タイムゾーン」の設定をしていきます。

初期設定では以下のように欧米仕様になっているため、それぞれ日本語と日本標準時が使われるように「ja」「Asia/Tokyo」に設定します。

▼変更前

▼変更後

⑤開発用サーバーを立ち上げよう ・・・ロケットを飛ばしてみよう!

設定が完了したら、開発用のサーバーを立ち上げてみます。開発用のサーバーとは、webアプリを作成していくと反映される場所のことです。これは、自分のPCをwebサーバーとして、ブラウザからリクエストを受ける形を作っています。(サーバーとブラウザについては、ブログ第23回・24回参照)

各ファイルにプログラムを書き連携することにによって、このサーバーでアプリの内容が確認できるようになります。

manage.pyのあるディレクトリに移動したあと、以下のコマンドでサーバーを立ち上げます。

☆開発サーバー立ち上げ🚀

(venv_todoapp) C:XXX…\XX\venv_todoapp\todo_project> python manage.py runserver

コマンドを打ち込んだあと、「http://127.0.0.1:8000/」というURLを入力し、以下のようなロケット打ち上げ画面が表示されていたらサーバーの立ち上げ成功です。

これによって、Djangoで機能を作成していくとブラウザから確認することができます。

☆ 127.0.0.1:8000って何?

127.0.0.1とはPCの住所を表す「IPアドレス」のひとつで、自分自身のPCを表す特別なアドレスです。その後の「8000」はポート番号を指しています。runserverというコマンドは、自分自身のPCの8000番というポートに、webサーバーを立ち上げるコマンドになります。127.0.0.1:8000を入力することによって、このサーバーにアクセスすることができます。

まとめ

visual studioとpythonをインストール後、webアプリ製作前の準備では、まず仮想環境を作成します。仮想環境を作成しその環境内で作業することで、バージョン違いによる仕様の差や他アプリへの影響なくアプリ製作を行うことができます。

仮想環境を作成したら、Djangoをインストールし、「プロジェクト」と「アプリケーション」を作成します。このうち「アプリケーション」の各ファイルに、今回作成したいアプリの記述をしていきます。

プロジェクトとアプリケーションを作成したら、Djangoの設定を「setting.py」のファイルで行っていきます。設定が完了したら、開発用のサーバーを立ち上げて下準備は完了です。

サーバーが立ち上がるとロケットが飛ぶので、これを確認したらひとまず安心です。

ここまで読んでくださってありがとうございました!

コメント

タイトルとURLをコピーしました