twitter-cloneを作った話

Transcript

1. インターン成果発表 緒方 克哉 1
2. 2 自己紹介 名前 : 緒方 克哉（おがた かつや） 出身 : 宮崎県小林市 所属 : 大阪大学 基礎工学部 情報科学学科 B3 趣味 : 登山 旅行 サウナ 屋久島登山 地元小林市 ブルネイのビーチ
3. 3 大事にしたい価値観 ・謙虚 ・努力 ・おもしろい ・成長 ・躍動的な・ワクワクする ・行動 ・心の平穏
4. インターンでやったこと • X(旧Twitter)クローンの作成 • 環境構築から実装する機能選定 • 機能の設計 • 機能の実装 • ユニットテスト・APIテスト作成 • CIの実装 • AWSへのデプロイ • CDの実装 4
5. 5 機能一覧 ・認証機能 ・ツイート機能 ・リプライ機能 ・フォロー機能 ・いいね機能 ・プロフィール機能 ・プロフィール編集 ・画像アップロード
6. デモ 6
7. 7 使用技術(開発環境)
8. 8 DB設計
9. 9 API設計
10. 10 フロントエンド • 工夫点 • コンポーネントに分割 • レンダリングをコンポーネント単位で行う • フロントエンドにNext.jsを用いてできるだけリアクティブな使いやす いUIを実装 • 改善点 • ロジックの部分の設計が甘かったせいで、投稿を行った時に投稿を保 持している変数が別のコンポーネントにあるため、変数のバケツリレ ーを行う必要がある（もしくは更新を行えない） • ロジック部分とビューが同じファイルの中にあるので可読性が低い • ユースケースとしてスマートフォンからのアクセスも考えられるが、 レスポンシブ対応できなかった
11. 11 バックエンド • 工夫点 • スキーマを積極的に用いることで可読性を上げる努力をした • Pythonだけど、できるだけ型(annotation)をつけた • コントローラーの部分とリポジトリ（主にdbとのやり取り）を分 離すること、責務の分離を実現 • これのおかげでテストも書きやすかった • 改善点 • swaggerUIを自動生成できるので設計の段階でしっかりと詰めて おけば、API設計とスキーマを決めてもっと開発スピードを上げれ た気がする（スキーマ駆動開発） • バックエンドのアーキテクチャについてもう少し学ぶ必要がある
12. 12 ユニットテスト ・Pytestを利用 ・mockを用いて既存のDBに影響しないように配慮 ・parametrizeを用いてテスト関数を共通化 ・テストのベストプラクティス ・関数の命名法（関数名_状態_結果） ・AAA(Arange-Act-Assert)
13. 13 APIテスト ・テストの前後のセットアップ （fixture）でテスト用のDBを用意し てAPIテストを実施 ・AsyncSessionクラスを継承し、 commitを行わないように工夫 ・DI(Dependency Injection)を用いて いたので、元のdbをoverrideしてテス ト用dbを用いることができる!
14. 14 CI ・PR作成時に自動でテストが 行われるようにGitHub Actions を用いてCIを実装 ・テスト終了後にテストが落ち ていないか、全て通過していた らカバレッジがPRのコメント に表示される
15. 15 AWSアーキテクチャ(設計段階)
16. 16 AWSアーキテクチャ
17. CD • AWS CodePipelineと AWS CodeDeployを利 用して実現 • GitHubのmainブランチ にpushしたら実行 • appspec.yml内の操作 を自動で実行 • systemdを用いてEC2 の再起動時も自動でサ ーバー起動 17 appspec.yml
18. 18 気づき・今後に向けて ・タスク管理・スケジュール管理が杜撰だったので、設計 段階でタスク・スケジュールをドキュメントに起こす。 ・設計段階で細かい部分まで設計を行うべきだった。今回 の実装で重要な点がわかったので、それを活かす。 ・早い段階で、設計のレビューをもらうべきだった。設計 の重要さがわかったので、慎重に設計を行う。 ・インフラの知識があれば最初にデプロイしておけばよか った。
19. 19 反省