ハーバード大学のCS50Wを視聴してみたので内容まとめ

ハーバード大学のCS50Wを視聴してみたので内容まとめ

December 31, 2020

2020 年はもうすぐに終わり、2021 年を迎えようとしています。いまさらここに記載するまでもなく、今年は色々なことが変わった一年でした。…というふうに来し方をしみじみと振り返る時間もこれまでほとんどなかったのですが、年末になりようやく一息つける時間ができたので今年の振り返りをしつつ、せっかく時間ができたので、いつか視聴しようと考えていた講義動画に取り組んだので記録です。

視聴した動画はハーバード大学が無償で公開してくれている CS50 というシリーズの講義動画のひとつです。

CS50

CS50 (Computer Science 50) is an on-campus and online introductory course on computer science taught at Harvard University and, as of 2015, Yale University as well.

The course material is available online for free on EdX with a range of certificates available for a fee.

After a participant has completed CS50, there are several follow on programs including CS50 Computer Science for Web Programming, CS50 Computer science for Artificial Intelligence, CS50 Computer Science for Game Development and CS50 Computer Science and Mobile Apps. These programs are all available on the EdX platform.

CS50 - Wikipedia

Wikipedia にも記載の通り、EdX というオンライン学習サービス上で無償公開されています。

順番としては、「CS50’s Introduction to Computer Science」という入門用の講座を受講した後、技術別に分けられたより詳細な講座を受講する流れを想定しているようです。ただ、私の場合、それを知らずにいきなり Web プログラミングの詳細な講座の方である「CS50’s Web Programming with Python and JavaScript」を受講してしまいました（ちなみに略す場合は CS50W と書くようです）。

今回、せっかく最後まで視聴し終えたので、講座の内容を書き残したいと思います。

CS50’s Web Programming with Python and JavaScript #

https://www.edx.org/course/cs50s-web-programming-with-python-and-javascript

About this course

Topics include database design, scalability, security, and user experience. Through hands-on projects, you’ll learn to write and use APIs, create interactive UIs, and leverage cloud services like GitHub and Heroku. By course’s end, you’ll emerge with knowledge and experience in principles, languages, and tools that empower you to design and deploy applications on the Internet.

CS50’s Web Programming with Python and JavaScript | edX

講義全９回

  1. HTML and CSS
  2. Git
  3. Python
  4. Django
  5. SQL, Models, and Migrations
  6. JavaScript
  7. User Interfaces
  8. Testing, CI/CD
  9. Scalability and Security

1. HTML and CSS #

動画時間は 2 時間 3 分。

HTML と CSS の基本的な説明からスタート、Flex ボックスや Grid レイアウトについての説明などもあり、最後は SCSS を扱って終了。

自分でウェブアプリを作ったことがあれば知っているような内容なので、HTML と CSS については理解しているよという方は視聴する必要ないかなという感想です。

2. Git #

動画時間は 53 分。

Git や GitHub についての基本的な説明と、実際にどうやって操作するかを試してみる内容。

Git と GitHub を使ったことがある人ならば、この講義も視聴する必要はなさそうです。ただ、図なども使ってかなりすっきりと整理して説明してくれるので、良い復習になります。

3. Python #

動画時間は 1 時間 7 分。

Python の if 文や for 文、リスト・タプル・ディクショナリ（辞書）・セット（集合）の説明の後、クラスを扱って終わりです。

HTML・CSS と、Git のときは余裕余裕という感じでしたが、私は python 未経験でしたので、ここからはちゃんと聞かないと理解できないぞ、と気持ち的にもしっかり取り組みました。HTML の講座を２時間もやったのに Python はたった１時間だけで大丈夫なのか、と思いましたが、１時間で説明できてますね笑。すごい。

4. Django #

動画時間は 1 時間 39 分。

Django のプロジェクトを作成した後、「入力された名前を元にハロー XX と表示するアプリ」「今日が１月１日か判定して YES/NO を表示するアプリ」「ToDo リストアプリ」の３つの簡易的なアプリを作って Django の基本的な開発方法を学びます。

わかりやすくて良いですね。Django 公式もチュートリアルを用意していて、そちらも非常に親切ですが、それをやるよりもまずこちらの動画を見たほうがわかりやすいかもしれないです。

講義中、以下のアプリが紹介されます。今日がクリスマスかどうか判定するアプリのようです。（で、それのニューイヤー判定バージョンを自分で作ろうという流れになります。）

https://isitchristmas.com/

いやいや、さらっと紹介されたこのアプリ、シュールすぎません笑？有名なアプリなんですかね。ぜひとも YES と表示される瞬間を見たいものです。

5. SQL, Models, and Migrations #

動画時間は 1 時間 54 分。

最初に SQL についての概要と書き方の説明をした後、Django におけるデータベースの操作について説明が移ります。エアラインアプリ（空港・フライト・顧客の管理をするアプリ）の開発を通じて、データの操作やリレーションについて理解を進め、最後は Django の特徴でもある管理者画面についても手を加えて終わりです。

個人的に、ここから先は１回では理解しきれないだろうなと感じました。講義が悪いということではなく、フレームワークの理解って、何回もアプリを作る中で段々と理解が進んでいくものだと思うので。自分自身が一度で消化できるかは別として、講義自体はこれまで通りわかりやすいです。

6. JavaScript #

動画時間は 1 時間 51 分。

Python や Django を一度離れて、素の HTML と JavaScript について扱います。DOM の説明をした後、イベントに合わせて DOM を操作する方法を学びます。続いて、JSON を学び、外部のウェブ API を使ってみるという流れです。

ちなみに、利用する API 以下です。為替レートを返してくれる API です。

https://exchangeratesapi.io/

自分で作ったアプリの中で DOM 操作をしたり、ウェブ API を使ったことがあるよという方は、この回は飛ばしても良いかもしれないですね。

7. User Interfaces #

動画時間は 1 時間 32 分。

シングルページアプリケーションについて説明があった後、Ajax について説明があり、次に、それを利用してインフィニットスクロール機能を実装します。最後に React に取り組んで終わりです。

どんどん先に進みますね。インフィニットスクリーンまではまだ余裕だなと思っていたら、まさか React まで登場するとは思いませんでした。私は React 未経験なのですが、どんな感じなのか感覚は掴むことができました。

8. Testing, CI/CD #

動画時間は 1 時間 33 分。

テストの必要性について説明があったあと、python の assert を用いたテストの紹介、次に Django でのテストの方法について説明があります。最後に GitHub Actions を用いた CI の説明があり、最後は Docker が登場して、CD について説明が入って終わりです。

テストまでは自分で手を動かしてコードを書きますが、以降は（次回の第９回目の講義含め）講義を視聴するのがメインになります。

講義中、CI/CD とはなんぞやというのをまとめたスライドが登場するのですが、これが簡潔で非常にわかりやすい。下記です。

  • CI/CD
    • Continuous Integration
      • Frequent merges to main branch
      • Automated unit testing
    • Continuous Delivery
      • Short release schedules

9. Scalability and Security #

動画時間は 1 時間 27 分。

スケーラビリティについては、ロードバランサの説明、サーバのスケールアップ（垂直方向への拡張＝能力増強）やスケールアウト（水平方向への拡張＝台数増強）に関する説明およびそれに伴って考慮しなければいけなくなる新たな問題についての説明、データベースのパーティショニングやレプリケーションの説明などがありました。セキュリティについては、XSS や CSRF や SQL インジェクションなどの脆弱性とその対策、秘密鍵と公開鍵についての説明などがありました。最後に、これまでの全講義で学んだ内容を振り返って終わりです。

テキストで学ぶような内容を扱いますが、聞いていて退屈さは全く感じず、非常に楽しんで視聴できますね。

感想 #

今回の講義を試聴したそもそもの目的は python と Django を学ぶことだったのですが、次は自分でアプリを作ってみる番ですね。

あと、意図せず飛ばしてしまった「CS50’s Introduction to Computer Science」の方も、せっかくなのでいつか受講してみたいと思います。こちらは C 言語などを使って取り組む内容のようです。C 言語やってみたいと思っていたのでちょうど良いです！