はじめてDjangoで成果物を作ってみた



研修の一環としてチーム開発を想定してDjangoでアプリケーション開発を行い、苦労した部分などをまとめました。初めて成果物を作る人の参考になると嬉しいです。

# アプリケーション概要
* 対象者…[オーバーウォッチ2](URL "https://overwatch.blizzard.com/ja-jp/")のプレイヤー
* 目的…快適にオーバーウォッチ2が遊べること
* 作成期間…2ヶ月

自分の趣味における経験をもとにアプリケーションを作成しました。ユーザー目線で作成できたのではないかと思います。

### 主な機能　
1. API[(OverFast)](URL "https://overfast-api.tekrop.fr/")を用いたプレイヤー検索、戦績情報の表示
2. パーティー募集

# 設計
要件定義、画面設計、データベース設計を行いました。

### 要件定義
#### スケジュールの見積もり
定義した内容だと開発期間に無理があった。当初１ヶ月半の想定だったが、終わらせるのは難しそうだという感覚もあり、実際１ヶ月半では無理だった。
- 原因 : 開発にかかる時間の見積もりができなかった
- 対策 : どんな作業にどのくらい時間がかかったか計測し、経験を積んで工数や作業時間を見積もり計画を立てる

作業時間の計測を行い、css1ページの割り当てや新規機能開発に３時間、修正に1時間半、分岐を含む重めの機能に６時間といった目安が分かった。

### 画面設計
#### ツールの選択
最初はgoogleスライドで画面遷移図を作ろうとしました。しかし、要素の配置の際にあまりにも繊細なドラッグ&ドロップが必要だったので諦め、大学時代にハッカソンで適当に触っただけのFigmaを今回ガッツリ使ってみることにしました。ことwebデザインにおいてはFigmaの方が断然使いやすいと感じました。

![スクリーンショット 2024-07-04 17.49.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3584394/c9ba2480-e6f8-2a01-5c73-ddc7c6935e1a.png)
*画面設計図の一部*

当時、googleスライドではできない要素の細かい指定ができたり、レイヤーを使えることがFigmaでできることに舞い上がっていましたが、手に余って扱いきれていない感覚がありました。
研修後にfigmaをもっと便利に使えるようになりたいと思い、以下の書籍でコンポーネントやスタイル、オートレイアウトなどについて勉強しました。タイトル通り、これからFigmaを使いはじめる人におすすめの書籍です。

<img width="200" src="https://m.media-amazon.com/images/I/81BDdp0i6iL._SY522_.jpg">

[これからはじめるFigma Web・UIデザイン入門](https://www.amazon.co.jp/%E3%81%93%E3%82%8C%E3%81%8B%E3%82%89%E3%81%AF%E3%81%98%E3%82%81%E3%82%8BFigma-Web%E3%83%BBUI%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E5%85%A5%E9%96%80-Compass-Web-Development/dp/4839980314/ref=sr_1_5?crid=2XDDJCFRVPUZB&dib=eyJ2IjoiMSJ9.-8yO59D5SQeetGJF0kt_7FsPRBbey42d14JGZf_lXDiJZRhqmpqN52muzNBX7WZspm2NYXNEMwfhON9MnTHO7A0kZ69ppggdQ2OaXbEhQmp4iR_OJlifU59_hNTESZG8W5lGTcFSMmNhJsyMp-6NM8IbuwHr4I8DlsZr1iD6zK5HLpsZuTVnW3V7cZJZZZLYlk_Mn6FOl5KxlEQDA64w2eobPrHFAtSK0x2R6xMdFfCIbgadxDzTYmU60qgZKZj2w_HZvZQw8VFmTM_dS22IXyAPKRzVmOX4ylzy0xe4xI8.8_v3-Rvdvio1VM5bYX6ui_nmU-eQ6qvXA8esFoR5PqE&dib_tag=se&keywords=figma+%E6%9C%AC&qid=1719821185&sprefix=figma+%2Caps%2C164&sr=8-5)


### ER図

draw.ioで記述しました。特にパーティー募集機能における部分において、多重度とカラム名に悩みました。
例えば、〇〇_role_numというカラムによってパーティーで役割ごとに募集ができるようにすると同時に、他の人にもその意味合いが伝わるように工夫しました。

![_________ER__drawio - Page-1 · 4.45pm · 07-02.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3584394/547567f5-b2ce-997f-839e-bd9e38e2742f.jpeg)
*ER図の一部*



# 開発で苦しんだ部分
### Git
#### ローカルリポジトリのブランチがぐちゃぐちゃになった

原因:新しいブランチをmainブランチではなく、別の開発中のブランチから切った後、そのままstashしまくって訳がわからなくなった

![Capture-2024-07-02-170103.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3584394/589e3a78-782e-3397-5479-9c75757fdc9f.png)
*リモートリポジトリの該当部分*

大きな変更ではなかったことと、途中まで復元できたことが幸いしました。

対処:
1. cherry-pickで新しいブランチをmainから切り一部のcommitをpick
2. stashを溜めすぎないためにstash popを使ったり、stash save "〇〇"　で名前をつける

### Django

#### リンクのエスケープ
問題:クエリパラメータに「#1234」を含む文字列を渡す必要があったが、#以降が渡されていない

原因:リンクの#以降はスクロール等する際の場所を指定する時などに使われている、フラグメント識別子と呼ばれている。URLにフラグメント識別子がない場合、このプロパティには空文字列 ("") が入るため、正しく文字列が渡されていなかった。　
参考：[mdn URL:ハッシュプロパティ](https://developer.mozilla.org/ja/docs/Web/API/URL/hash)

対処:テンプレートタグでフィルターを使う
```html:template.html
<a class="player-name-link" href="{% url 'overwin:game_player_info' %}?battle_tag={{ player.name|urlencode  }}">{{ player.name }}</a> 
```

#### ログインがうまくいかない
原因:フォームを使い回していたため
対処:ログインページではログイン用のフォームを使用する
```python:forms.py
class UserRegisterForm(CustomForm, UserCreationForm):
    class Meta:
        model = User
        fields = ('username', 'email')

class LoginForm(CustomForm, AuthenticationForm):
    class Meta:
        model = User
```

### HTML・CSS
#### 配置がうまくいかない
インライン要素、ブロック要素で中央揃えの方法が違いました。
対処:インライン要素では`text-align: center;`、インラインブロック要素とブロック要素では`margin: 0 auto;`を使う。
インラインブロック要素は何に使うんだと考えていましたが、画像にaタグをうまく付ける時に重宝しました。

# まとめ

研修の内容を今後に活かせるように、設計から開発において良かった点と苦しんだ点を書きました。
２ヶ月で多くの学びを得ることができました。今後も挑戦と経験を重ねて成長し続けられるように努めます。