All Articles

ヘルシンキ大学の「フルスタックWeb開発」(React)のチュートリアル

2019/09/19

はじめに

Reactを学習したくて、記事をあさると以下のReact学習記事を発見
学習した際のコンテツとかかった時間等とレビューがまとまっていて大変参考になる。

https://developer.feedforce.jp/entry/2019/09/04/140000#React-公式のチュートリアルを2周する

現時点(2019年後期)で、にReactを学習する際に、なにを使うかって結構迷う。というのも、ReactでHooksという機能が最近(?)追加されて、既存のチュートリアルだと「Hooks」を使っていないものが多数。

ヘルシンキ大学の「フルスタックWeb開発」チュートリアル

上記の記事内で言及されていた ヘルシンキ大学 が提供しているチュートリアル(英語)サイトがよさそう。
OSSとして管理されている(?()ようで、誰でも無料でアクセスできるし、タイポとか発見しいたらPullRequest投げれるようです。

https://fullstackopen.com/en

2019 09 23 18 12 34

※“Full Stack Open 2019” by Matti Luukkainen, contributers,Houston inc,Ava Heinonen, Ilkka Kuisma, Harri Mehtälä and Jesper Pettersson is licensed under CC BY-NC-SA 3.0

概要説明

※Google翻訳

このコースでは、最新のJavaScriptベースのWeb開発を紹介します。
主な焦点は、Node.jsで構築されたREST APIを使用するReactJSで単一ページアプリケーションを構築することです。

このチュートリアルで、学ぶ技術スタック

  • React(※Hooks利用)
  • Redux
  • Node.js
  • MongoDB
  • GraphQL

ようは2019年時点で、モダンなフロントエンド開発をSPA(単一ページアプリケーション)を作りながら、学べる内容となっている模様。
Reactだけに焦点をあてているというよりも、Reactを使ってフロントエンド実装、Node.jsを使ってバックエンド実装し、SPAを作っていく内容になっているようで、得るものが多そう。
そこそこの分量がありそうで、Railsチュートリアル?ぐらいの規模感なのかぁと、想定。
(※わりかし最近(?)の機能のHooksを使ったチュートリアルが、まだそんなにない中、Hooks対応しているのが、とても有り難い)

対象者

プログラミング初心者がいきなりやると負荷が高すぎて辛いと思う。 前提条件 として挙げられている内容は以下

前提条件
参加者には、優れたプログラミングスキル、Webプログラミングとデータベースの基本的な知識、Gitバージョン管理システムの基本的な使用法の習熟が求められます。また、問題を解決し、独立して情報を検索するための忍耐力と能力が求められます。 JavaScriptまたはその他のコーストピックに関する予備知識は必要ありません。

ヘルシンキ大学の単位取得として利用するのでなければ、特にGit使わなくても良さそうです。
課題提出の方法としてにGitを使っているようなので。

スマートフォンアプリ開発がメインで、Railsを少々かじったことあり、Javascriptもちょっと書いた、ぐらいのレベル感の自分として、わりとそつなく進められそうで、得るもの多そうなのでよさそう。

コンテンツの内容

全9partに分かれていて(0~8part)それぞれ内容は以下

  • part0 : Fundamentals of Web apps
    (webの仕組みの基礎解説)
  • part1 : Introduction to React
    (Reactの説明)
  • part2 : Communicating with server
    (サーバを介したデータやり取り方法の説明)
  • part3 : Programming a server with NodeJS and Express
    (REST APIを作りながらバックエンドの実装の説明)
  • part4 : Testing Express servers, user administration
    (テストを含めたバックエンドの説明)
  • part5 : Testing React apps, custom hooks
    (認証機能とフロントのテスト実装の解説)
  • part6 : State management with Redux
    (Reduxで状態管理の実装・リファクタしながら解説)
  • part7 : React router, styling app with CSS and webpack
    (ReactRouter、CSS、Webpackについての説明)
  • part8 : GraphQL
    (GraphQLの説明後に、GraphQLで書き換え実装っぽい)

各パートのTopページ

(※色味がpartごとに異なっていておしゃれ)

(※part2とpart7が小見出し数多いので内容多そう)

2019 09 23 11 23 17

2019 09 27 10 12 52

2019 09 27 10 13 10

2019 09 27 10 13 22

2019 09 27 10 13 39

2019 09 27 10 13 51

2019 09 27 10 14 01

2019 09 27 10 14 21

2019 09 27 10 14 29

コンテンツの内容書き出してみて

part0の中身をちょろっと見てみると、Chromeを使って、webの仕組みをキャプチャ付きでいじりながら、丁寧に解説しているので、よさそう。
テストコードの説明まであるので、お得あるなぁ。
平日は、2,3日で 1part 進めて、土日で 2part 進められれば、2週間かからないかなぁ、と。
そうすると、RailsTutorialぐらいの規模感、とみてよさそう。 あと、サイトのデザインがシンプルで、partごとに淡い色のテーマカラーがアクセントになっていて、可愛い感じでよい。 ヘルシンキ大学の通信講座(?)で実際に使われている内容なので、コンテンツとしてしっかりしているし、小難しところを、今年はアップデートしたとか、記載あったので、毎年良くなっているんだと思う。

北欧の大学、通信制度について

全然関係ないけど、北欧の大学って外国人でも授業料無料の国がまぁまぁあったっぽいけど、ここ数年で、EU圏外の人は、授業料有料化の流れがあるようですね。まぁ、そうなりますよね。それでも授業料安めのところがありますね。
シンガポールかどっかだと、奨学金出るけど卒業後、何年間かは、国内で働いてね!という制限があったりしますね。 キャンパス通わない、通信オンリーのコースだと、依然格安なとこそこそこありますね。 通信の授業でも、キャンパス通う方式と同様の卒業証明書?が付与されるところもあるみたいで、ちょっと気になっています。

追記:各パートやってみて