Reactを体系的に学びたいならFull stack openがオススメ

はじめに

皆さまはじめまして。WASD Inc.開発チームの U76NER と申します。 現場のアナログな業務を効率化する 「デジちゃいむ」 というサービスの開発・運営に携わっています。

digichime.com

本記事では、これからReactを学ぶ方におすすめしたい教材としてFull stack openをご紹介します。

Full stack openとは

fullstackopen.com

Full stack openは、フィンランドヘルシンキ大学が運営しているオンライン講座です。

名前の通り、この講座を通じてフロントエンド、バックエンド双方の知識を身につけることができます。

弊社でも、Web開発未経験の方がデジちゃいむの開発に参加される場合には、Full stack openを用いてキャッチアップしていただいています。

Full stack openのよいところ

フルスタックエンジニアになるための講座であるため、フロントエンドやバックエンドの開発、さらにはテストの書き方やCI/CDまでカバーしているため、Full stack openひとつでWebサービスを作ることができます。

技術スタックとしても、フロントエンドでのReact + GraphQLを筆頭に世界的にシェアの高いフレームワークが採用されています。(過去の記事にもあるように、デジちゃいむの技術スタックともかぶるところが多いです)

  • 書き方がモダン

書き方がモダンであるかというのは、初学者にとって判断することが非常に難しい問題です。

例えばReact 16.8でHooksが導入されて以来、従来のClass Componentで書かなければならない場面は極めて限定的となり、より簡潔に記述できるFunction Componentが一般的になりました。しかし、Reactについて検索をすると、Class Componentで書かれた記事がヒットすることも度々あります。(公式のComponentのページですらClass Componentで書かれています)

これらの心配をせずに学ぶことができるというのは大きい長所です。

  • 更新が活発

この1年でも、Full stack openにはPart 10のReact Native、Part 11のCI/CDといった痒いところに手が届くコンテンツが追加されました。

今後も、Web開発において役立つコンテンツが追加されるという期待感があります。

Full stack openを学ぶ上での注意点

  • 現在日本語には対応していない

2021年6月現在、Full stack openはフィンランド語、英語、中国語、スペイン語の4ヶ国語にのみ対応しています。

広範囲の分野をカバーしている以上、分量としてもそれなりであるため、上記の言語に不慣れであると負担が大きいかもしれません。

  • 基本的なプログラミングの知識がある人向け

Part 0のPrerequisitesの項目にもある通り、プログラミングやデータベース、Git等の基本的な知識が前提として求められます。

ただし、JavaScriptのモダンな書き方(ES2015以降)はFull stack open内でカバーしてくれています。 (アロー関数やそれを用いた配列処理、 async/await を用いた非同期処理など)

  • TypeScriptは独立した章

基本的にFull stack openは全編JavaScriptで書かれており、現在Reactの開発に幅広く使われているTypeScriptについては独立した章となっています。

少々チャレンジングではありますが、Full stack open内の課題をTypeScriptで書くのも良い勉強になるかもしれません。

おわりに

Full stack openはWeb開発における広範囲の分野をカバーしているため、私も実務上で基本的なことを確認したくなった場合、Full stack openを参照することも多いです。

先述の通り決して簡単ではない教材ですが、取り組んだことに対するリターンはとても大きいです。

この記事が一人でも多くの方のWeb開発の入り口になれば幸いです。