こんにちはカレイドです。
【Udemy】30講座以上取った筆者がおすすめ英語字幕講座と勉強法を解説してみる.
こちらの記事ではHTML/CSSから始まり特にJavaScript系を中心に初心者脱出を目指した講座を紹介させていただきました。
ただ、やはり実践的なアプリというよりはあくまでJSを学ぶことに重点おいたアプリ構築だったりしているので、
まだまだアプリ作れないよと思う方もいたかもしれません。
今回はManehabiを作る上で、このアプリの構築概念わかりやすかったなーとか単純に勉強になったもの、難しいけどリアルのアプリを模倣しているので実感が湧きやすいものなど筆者が実際に購入したものをまとめてみました。
記事の対象者
- JavaScriptの基礎は学んだけれど自分のアプリのアイディアがない人
- 基礎はできるけど実践的なアプリを一から作りたい人
- React極めたいって人
初級〜中級者向け
以下では基礎も解説しながら実践的なアプリを構築する講座についてご紹介します。
フロントエンドではReactに絞って紹介をさせていただきます。
ただし、BackEndは様々なものをご紹介させていただくので興味あるものを選んでいただければと思います。
React＋GraphQL＋StrapiでオンラインECサイトアプリ
strapiとよばれるCMS（コンテンツ管理システム）を導入することによって極限までアプリ構築を簡潔にした講座になります。
プログラミングがメインというよりはどんなことができるのかを知るのがメインになっていますのでゴリゴリコーディングがしたいっていうことであればおすすめはしません。
Strapi自体はNode.jsを利用してMongoDBにデータを保存しているのでコードを見ようと思えば見ることができます。
決済サービスに利用するStripeも導入するので実際のECサービスがどのような構築をしているのかを知ることができます。
講座がそもそも90分で実践的にアプリを作るという趣旨なのでじっくりがっつりではないのでご注意を
王道のReact+Redux（Hooks）＋Firebaseで掲示板アプリ作成
多分Reactを極めたいフロントエンドにとって一番負担にならないタイプがこのタイプになります。
私は現在実務でReactを使っていますが結局両方やると言ってもどちらかに戦力を絞って実装することになります。
その時にBackendは最低限できればいいという方にはFirebaseと呼ばれるプラットフォームが存在します。
もちろん両方できることに越したことはないし、Firebaseでも十分なBackEndを構築することができます。
Firebaseとは？
FirebaseとはBackendの実装を極限まで簡単にしてくれたものです。（ある程度の柔軟性を担保しつつ）
例えばアプリのログイン機能や、リアルタイム通信など、他にもTwitterログインやGoogleログインなどの実装を簡単に行ってくれるので実装側はフロント側に力を絞って実装を進めることができるなどのメリットがあります。
最近では使用する企業も多くなってきているのでその概要を知っておくだけでも有意義だと思います。
さて、話は戻ってこのアプリでは実際のオンラインの掲示板サービスなどを基礎から教えてくれます。学んできた人からしたら最初の部分は割と重なっている部分があるので冗長かもしれませんが、復習や、違う人の考え方を学ぶという意味で無駄になることもないので時間ある方は復習も兼ねてやるといいでしょう。
アプリのデザインにはフレームワークであるSemanticUIを使用していますので、簡単にデザインする力も身につくかと思います。
ちなみに私のManehabiはSemanticUIデザインになっています。
もちろんReduxの実装に加えて最近のHooksによる実装の仕方もプラスαで学ぶことができるのでその点もプラスですね！
実際の業務でClassベースから関数ベースのコンポーネントへの書き換えは頻繁に起こるので覚えておくといいかも知れません。
React＋Node.js＋MongoDB＋ExpressでSNSアプリの作成
これがフルスタックでしっかりやるもので一番整った形（フロントもバックも充実）になると思います。
認証からデータ登録まで全て学ぶことができ、フロントとバックを切り離した実装の注意点などのノウハウを全て網羅しています。
これだけやること多そうに見えて使っている言語は本当にJavaScriptのみってところが驚きですよね....
デザインはBootStrapを使ってモダンなデザインで作られているのでその点も安心ですね！
またこの講座は中級編と書いてありますが、それぞれの内容は一から説明されているのでいきなり挑戦したいという方はこちらから進めることもできますが、できれば前回おすすめした記事でバックエンドフロントエンド個別に勉強した上で組み合わせて実装という形が一番理解が深まると個人的には思います。
React+Redux＋Node.js＋MongoDB＋（GraphQL）でレシピ投稿アプリ
僕のオリジナルアプリManehabiではデータの取り出しにGraphQLと呼ばれるものを使っています。
一つ前に紹介したアプリ構築は通称 MERNスタックと呼ばれる形で M（MongoDB）E（Express）R（React）N（Node.js）
の頭文字を取ったものになります。今後のベースはこれになっていくんじゃ無いかなと個人的に思っています。
ここで紹介する講座は MERNスタック＋GraphQLとよばれるものになります。個人的には扱うスキルはGraphQLが追加されて複雑になっているように感じるかも知れませんが、実装のしやすさとロジックを簡略化する意味ではむしろ簡単になっていると思います。
GraphQLとは？
GraphQLとはReactを開発したFacebookが開発したものになります。
みなさんは自分が普段よく行くサイトのURLはご存知だと思います。その後ろに色々付け足してページを移動していると思うのですが、その移動先のページが複雑になればなるほど後ろで動くBackEndは複雑性が増していきます。
俗にAPIと呼ばれるもので管理されているわけですが、GraphQLではそのAPIの管理は/graphqlと呼ばれる場所しかありません。
そこにリクエストを投げ込むことによって欲しいデータのみを返してくれるような仕組みになっています。
まだまだ取り入れている企業は少ないですが、一度API管理をした後にGraphQLを使うと便利だなぁと思います。
今回紹介している講座ではデータの保存にMongoDBと呼ばれるNoSQL型のものを使用しています。
データの取り出しにGraphQLを応用していると言った感じです。新しいものを学びたい方はぜひ活用してみては？
話は戻って、それ以外にもReactの基礎からReduxの応用。基本的なログインからナビゲーションバーまで学べるのでかなりボリュームがありますよ！
React＋Redux＋Node,js＋PostgreSQLでドラゴン育成アプリ
これはコンセプトが面白いのであげさせてもらいました。
割と紹介したアプリってSNSチックなものが多いのですが、新しい視点を取り入れるためにこのアプリをやりました。
実際にはドラゴンを育成するアプリでトレードや運要素など、アプリのコンセプトや実装の仕方、ロジックを学ぶことができます。
ただデータベースがSQLなのでMongoDBは学んでないけどPostgreは学んだよっていう人は一から学ぶことができてデータベースの知識を活かすことができるのでいいかも知れません。
私はどちらも触れられた方がいいなということで好き嫌いせずデータベースは学ぶようにしています。
おまけ（中級編〜上級編）
ここまでで割とBackENDが王道のもののご紹介と、基礎を復習する上で使える講座のご紹介をしました。
この他に基礎はさらりと説明する程度で難易度をあげてより実践的な講座もいくつかあるので最後にそれをご紹介しようと思います。
React+Redux＋FirebaseでSlack模倣アプリ作成
みなさんはSlackというチャットツール知っていますでしょうか。
知っている方からすればそれを作れるのか！ってなったかもしれないです。このアプリではSlackアプリを本当に一から作っていきます。
動画時間が短く感じるかも知れないですがボリュームはかなりたっぷりです。
コンポーネントの管理もかなり複雑なのでPropsの渡し方やStateの管理、またそのStateをどうやって分配していくかなど、動画の通りになぜやるのか、こっちの方がいいんじゃないかなど色々考えながら学ぶといいと思います。
そしてこのアプリはDeskTop用に作られているので時間がある時にモバイル版の表示もできるような改築を自分で加えられればもう１人前だと思って大丈夫です。
紹介した中だと個人的に一番達成度が高いアプリでなんどもコードを見ながら復習しました。そのぐらいState管理が複雑で難しかったです。
ただやはりロジック一つ一つの組み合わせでしか無いのでユーザのログイン状況含めてReactの集大成だと思って取り組んでみるといいです。
React+Hooks＋GraphQLでおすすめスポット共有アプリ
Reactは最近Classコンポーネントではなく関数型で実装するHooksが発表されました。
ちなみに私がインターンをした２社とも実装にHooksを応用していました。
こちらの講座ではデザインにMaterialデザインを採用しており、モダンなデザインで実装されています。
加えてリアルタイム通信をFirebaseを使わずにGraphQLを使うことによってどう成し遂げるかまで入ります。
基礎の説明はあまりないので中級者以上の方におすすめします。実践でHooksをどうやって実装に取り入れるか、基礎では学べない部分まで入っていくのでかなり力がつきますよ！
React＋Python（Django）＋GraphQLで音楽管理アプリ
こちらはバックエンドのデータ保存にPythonを活用しています。PythonにもGraphQLを管理するライブラリのGrapheneを利用して実装しています。
これは完全におまけのコースで私はもともとPythonを勉強していてこれとReact組み合わせたら最強じゃね？と思ってたまたま見つけた講座です。
実装はハードですが、Manehabiを作る際になん度も見返して実装でパクれそうなものはなるべく応用しながら活用していきました。
アプリを作る際に大事なのはその実装をするために必要な知識はもちろんですが、これあれに似ているなぁみたいな既視感が重要なのでそういう目線を持って取り組めるとこの講座も学ぶところがたくさん出てきます。
ちなみに私はインターンでMaterialUIをベースにデザインを組んでいたので実務ベースであることも間違い無いです。
まとめ
今回は色々要望が多かった中級者以上の講座をご紹介させていただきました。
全てもちろん英語で難易度がそもそも高いかも知れませんが、残念ながら日本語でこのクオリティの講座はありませんでした....
講座の字幕を英語に変換して読むのも結局は英語の公式ドキュメントを日本語に変換して読む動作となんら変わりありませんので
早いうちから練習して慣れておくと一気に周りとさをつけられると思いますよ！