この記事はコネヒト Advent Calendar 2019の11日目の記事です！
はじめに
半年ほど前から新規事業のチームで仕事するようになり、主な技術スタックもPHPからGo, Next.jsへと変わりました。 その中で、特にフロントエンドのテスト周りにおいてキャッチアップ不足を感じていたのですが、たまたま見つけた*1「Full Stack Open 2019」という教材がとても良かったので紹介したいと思います。
「Full Stack Open 2019」とは
フィンランドのヘルシンキ大学で実際に使われているテキストベースのオンライン教材です。
Nodeで作られたREST APIとReactを使ったSPAの実装を通して、React・Redux・Node.js・MongoDB・GraphQLが一度に学べる教材となっています。
教材のコースはPart 0〜Part 8の全9パートで構成されていて、各パートの内容は以下のようになっています。
- Part 0. Webアプリの基礎
- Part 1. Reactの紹介
- Part 2. サーバーとの通信
- Part 3. Node.jsとExpressを使ったAPIの構築
- Part 4. APIのテスト／ユーザー管理
- Part 5. Reactアプリのテスト／React Hooksのカスタムフック
- Part 6. Reduxによる状態管理
- Part 7. React router／CSSとwebpackを使用したスタイリング
- Part 8. GraphQL
全編英語での解説で日本語はありませんが、平易な文章ばかりなので特に不自由なく読めました。万が一困ったらGoogle先生に翻訳してもらえば大丈夫！
また随所にキャプチャも貼ってあるので視覚的なサポートもあって理解しやすかったです。
注意点
最初の方のパートは既知の内容が多かったのでスイスイ進んだのですが、後半はメモを取りながら、学んだことを整理しながら作業をしていたので全てのパートをこなすのに 約40〜50時間 程度かかりました。（私は要領が悪いほうなのであしからず!）
結構骨太なコンテンツなので時間がない人は適宜飛ばして、必要に応じて読みたいパートだけつまみ食いするのもよいかもしれません！
実際にやってみて良かった点
webの基本から学べる
だいたい既知の内容だったので流し読み程度ですが、Part 0ではChromeのデベロッパーツールを使いながらwebの基礎的な仕組みを解説していたり、JavaScriptのフレームワークやライブラリの歴史が簡潔にまとまっていて素直に良い教材だなと思いました。
割と新しめな開発スタイルが学べる
こういった類のチュートリアル・教材にしては珍しくReact Hooksを使ったコンポーネントのレンダリングの解説をしていたり、Jestを使ったテスト、さらにはReduxまで踏み込んで1つのアプリケーションを題材に解説が進むので割と新しめな開発スタイルが学べる教材でした。
教材の計算されたコース設計と丁寧な説明
Full Stack Open をやっていてよく感じるのは「コース設計がとても計算されている」ということです。
簡単な例でいうと、APIサーバーと通信してデータを取得する処理を説明しようとするとき、いきなり useEffect() の説明はしません。
まずは以下のように axiosを使ってデータを取得し無理やりRootコンポーネントにぶち込んで要件を満たします。
その後、「いまのやり方はあんまり推奨できない！こうしたらもっとクリーンでスマートなコードが書ける！」という風な流れから useEffect() の説明に入っていきます。
これは簡単な例でしたが、このように漸進的に解説していくスタイルが随所に見られ、目的と納得感を持って学習を進めることができました。
まとめ
ということで、駆け足でしたがReact, Redux, GraphQLを学べるオンライン教材「Full Stack Open 2019」が素晴らしいという話でした！アディオス！
PR
/assets/images/3646599/original/fd7ec863-64bf-4040-8bbe-abb84dcfc070?1569290418)
”Full Stack Open 2019" by Matti Luukkainen is licensed under the Creative Commons BY-NC-SA 3.0 License.
