🗼

有名アプリをクローンして学ぶ講座一覧

に公開
JavaScript
PHP
Python
Ruby
TypeScript
tech

Real World Exampleで学びたい

トイアプリよりReal World Exampleで学びたい

新しいプログラミング言語、ジャンルでの開発を学ぶ上で本を読んだり公式ドキュメントを見るのは有用ですが、実際のプロダクションエンジニアとしてのお仕事プログラミングとは乖離があります。

本についているサンプルコードも一つの参考となりますがコード量は小さく局所的にしか参考にならなかったり、公式ドキュメントはレファレンスに徹底していてチュートリアルがなかったりそれぞれはまりどころがあったりします。

トイアプリより実際の業務コード(Real World Example)で学びたい！

最近は有名アプリをクローンする動画講座(作業動画)をあげている方もおり、勉強メモがてらまとめておきます。

Ruby on Rails

Django

  • Instagram Clone
    • Good
      • 無料
      • GitHubにコードあり
      • ある程度規模のあるアプリ
      • デザインがインスタなのできれい
    • Bad
      • 動画とコードが少し不一致。一度作ったものをあんまり見ずに再現している構成。
      • プレイリストの動画の順番がまれにおかしい。抜けあり。
  • Twitter Clone
  • StackOverflow
  • Airbnb Clone

Laravel

Gin

  • ECサイト(のAPI)
    • Good
      • 無料
      • GitHubにコードあり
      • ある程度規模のあるアプリ
    • Bad
      • DBがMongoDBでRDBに人気では負ける
      • ラフ全体像から詳細を詰めて最後にちょろっと動作確認するスタイル。ちょっとずつ確認とかないハードウェイ

Next.js

  • Slack Clone
    コードは有料
  • Miro Clone
    コードは有料
  • Notion Clone
    コードは有料
  • Twitch Clone
    コードは有料
  • ECサイト
    バックエンドはWix Headlessを採用
    • Good
      • 無料
      • GitHubにコードあり
      • ある程度規模のあるアプリ
      • API通信があり業務に近い
      • App Routerベース
      • 裏側ヘッドレスなので表側に注力できる
    • Bad
      • Wix Headless部分の更新耐性、再現性が低い
      • CSSパート多め。Tailwind CSS講座味はある

Nuxt

  • Twitter Clone
    • Good
      • 無料
      • GitHubにコードあり
      • ある程度規模のあるアプリ
      • API通信があり業務に近い
      • prisma+MongoDBでバックエンドまで実装
      • Vercelへのdeployあり
    • Bad
      • TypeScriptでなくJavaScriptベース
      • Nuxtのバージョンが3.0.0のrcをベースにしており最新の4.xと挙動差が少しあり
      • ライブラリー周りも最新と挙動差あり
      • セクションの完成単位が少し大きめ。一気見しないと前フェーズ忘れる。

iOS(Swift)

Android(Kotlin)

Flutter

React Native

Discussion