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
24
twitter-cloneを作った話
Ogata Katsuya
November 12, 2024
Tweet
Share
More Decks by Ogata Katsuya
See All by Ogata Katsuya
大学のサークルプラットフォームを作った話
ogatakatsuya
0
55
Go College
ogatakatsuya
0
70
文化祭で使うアプリを1人で作った話
ogatakatsuya
0
50
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Adopting Sorbet at Scale
ufuk
77
9.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
183
54k
Site-Speed That Sticks
csswizardry
10
780
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.4k
Typedesign – Prime Four
hannesfritz
42
2.8k
For a Future-Friendly Web
brad_frost
179
9.9k
Unsuck your backbone
ammeep
671
58k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
770
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 反省