Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
twitter-cloneを作った話
Search
Ogata Katsuya
November 12, 2024
0
18
twitter-cloneを作った話
Ogata Katsuya
November 12, 2024
Tweet
Share
More Decks by Ogata Katsuya
See All by Ogata Katsuya
大学のサークルプラットフォームを作った話
ogatakatsuya
0
41
Go College
ogatakatsuya
0
59
文化祭で使うアプリを1人で作った話
ogatakatsuya
0
46
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
A better future with KSS
kneath
238
17k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Transcript
インターン成果発表 緒方 克哉 1
2 自己紹介 名前 : 緒方 克哉(おがた かつや) 出身 : 宮崎県小林市
所属 : 大阪大学 基礎工学部 情報科学学科 B3 趣味 : 登山 旅行 サウナ 屋久島登山 地元小林市 ブルネイのビーチ
3 大事にしたい価値観 ・謙虚 ・努力 ・おもしろい ・成長 ・躍動的な・ワクワクする ・行動 ・心の平穏
インターンでやったこと • X(旧Twitter)クローンの作成 • 環境構築から実装する機能選定 • 機能の設計 • 機能の実装 •
ユニットテスト・APIテスト作成 • CIの実装 • AWSへのデプロイ • CDの実装 4
5 機能一覧 ・認証機能 ・ツイート機能 ・リプライ機能 ・フォロー機能 ・いいね機能 ・プロフィール機能 ・プロフィール編集 ・画像アップロード
デモ 6
7 使用技術(開発環境)
8 DB設計
9 API設計
10 フロントエンド • 工夫点 • コンポーネントに分割 • レンダリングをコンポーネント単位で行う • フロントエンドにNext.jsを用いてできるだけリアクティブな使いやす
いUIを実装 • 改善点 • ロジックの部分の設計が甘かったせいで、投稿を行った時に投稿を保 持している変数が別のコンポーネントにあるため、変数のバケツリレ ーを行う必要がある(もしくは更新を行えない) • ロジック部分とビューが同じファイルの中にあるので可読性が低い • ユースケースとしてスマートフォンからのアクセスも考えられるが、 レスポンシブ対応できなかった
11 バックエンド • 工夫点 • スキーマを積極的に用いることで可読性を上げる努力をした • Pythonだけど、できるだけ型(annotation)をつけた • コントローラーの部分とリポジトリ(主にdbとのやり取り)を分
離すること、責務の分離を実現 • これのおかげでテストも書きやすかった • 改善点 • swaggerUIを自動生成できるので設計の段階でしっかりと詰めて おけば、API設計とスキーマを決めてもっと開発スピードを上げれ た気がする(スキーマ駆動開発) • バックエンドのアーキテクチャについてもう少し学ぶ必要がある
12 ユニットテスト ・Pytestを利用 ・mockを用いて既存のDBに影響しないように配慮 ・parametrizeを用いてテスト関数を共通化 ・テストのベストプラクティス ・関数の命名法(関数名_状態_結果) ・AAA(Arange-Act-Assert)
13 APIテスト ・テストの前後のセットアップ (fixture)でテスト用のDBを用意し てAPIテストを実施 ・AsyncSessionクラスを継承し、 commitを行わないように工夫 ・DI(Dependency Injection)を用いて いたので、元のdbをoverrideしてテス
ト用dbを用いることができる!
14 CI ・PR作成時に自動でテストが 行われるようにGitHub Actions を用いてCIを実装 ・テスト終了後にテストが落ち ていないか、全て通過していた らカバレッジがPRのコメント に表示される
15 AWSアーキテクチャ(設計段階)
16 AWSアーキテクチャ
CD • AWS CodePipelineと AWS CodeDeployを利 用して実現 • GitHubのmainブランチ にpushしたら実行
• appspec.yml内の操作 を自動で実行 • systemdを用いてEC2 の再起動時も自動でサ ーバー起動 17 appspec.yml
18 気づき・今後に向けて ・タスク管理・スケジュール管理が杜撰だったので、設計 段階でタスク・スケジュールをドキュメントに起こす。 ・設計段階で細かい部分まで設計を行うべきだった。今回 の実装で重要な点がわかったので、それを活かす。 ・早い段階で、設計のレビューをもらうべきだった。設計 の重要さがわかったので、慎重に設計を行う。 ・インフラの知識があれば最初にデプロイしておけばよか った。
19 反省