大学院生がプログラミングとブログを駆使して稼ぐ方法を解説していくブログです

【Udemyセール】JavaScriptおすすめ講座【5ヶ月で手に職をつけるために使った講座】

更新日:

こんにちはカレイドです。

 

私は2019/02から約5ヶ月間Udemyによる独学を続けました。そしてその後、医療系アプリ開発を行なっているベンチャー企業にてインターンという形で一つのアプリ開発をさせてもらっています

 

今回はそんな私がUdemyで使った講座のご紹介をします。まずはみてみたいという方はこちらから

 

Udemyでいろいろな講座を見てみる。

 

簡単な自己紹介です。

 

この記事は完全な初心者向けではないので、0から始めたいという方はこちらから読んでいただけるといいと思います。

【Udemy】HTML/CSSを初心者から一人前になれる講座を紹介!【0からでもOK】

 

こんな方におすすめ

  • HTML/CSSの基本的内容は習得済み(どういう書き方かぐらいがわかってれば大丈夫です)
  • フロントエンドエンジニアとして最先端で働きたい人
  • フルスタックエンジニアとして働きたい人
  • モダンな環境で働きたい人

 

 

前提条件

 

基本的に私が紹介する講座なのですが、英語がベースになっています。

初めは慣れるまでに時間がかかると思いますが、プログラミングはすべて英語で書いていきますから英語で勉強した方が効率もいいし、質もいい。

というのが私の結論でした。

以下の記事で英語の字幕を日本語に直して勉強する方法を解説していますので、受講される場合はこちらとセットでお読みください

【Udemy】英語字幕しかない講座を日本語字幕にして勉強する方法を解説する【セールとおすすめ講座】

 

またUdemyでは購入から30日以内の返金対応も行なっていますので、安心して始めてもらえればなと思います。

【Udemy】返金制度の実際の流れと活用方法【デメリットなし】

 

 

JavaScriptの基礎を勉強しよう

HTML/CSSを終えたばかりで、変数って何?とか関数って何?っていう人はこちらの記事を見てから講座を受けていただければスムーズに学習が進むと思います。

【プログラミング】HTML/CSSを学んだら次はJavaScript!最低限の知識を紹介します

 

この記事では知らないと何も出来ない、どの言語でも使う必須のものについてわかりやすく紹介した記事です。

別のそのぐらいはわかるよというかたはいきなり講座から始めてしまってOKです。

 

これからJavaScriptのフレームワークであるReactやNode.jsについてご紹介します。

ですがその前に、React以外の基礎となる部分(頻繁に出てくる構文や、非同期関数)について扱っているお手軽な講座をご紹介します。

 

【世界で2万人が受講】JavaScriptエンジニアのためのES6完全ガイド

【世界で2万人が受講】JavaScriptエンジニアのためのES6完全ガイド

これを学べば一通りJavaScriptで扱う基本的な文の仕組みについては学ぶことが出来ます

 

普通の言語だとfor(...)みたいなのありますが(JSにもあります)ほとんど使わず、JSではforEachという新しい構文で書くことが多いです。

そのような感じのReactで頻繁に出てくる文についての解説になりますので、ここをきっちり抑えておくことがまずは大事です。

 

JavaScriptで頻繁に使う構文を学ぶ

 

 

JavaScriptの世界を広げるフレームワーク Reactについて学ぼう [フロントエンド]

 

みなさんはReactが何かご存知でしょうか?

ReactとはJavaScriptのフレームワークであり。個人的なイメージは HTML/CSS/JavaScript 一体型だと思っています。(厳密には違う)

 

筆者はこのReactを重点的に学ぶことでわずか5ヶ月でベンチャー企業へインターン生として、即戦力で雇ってもらえることになりました

以下で基礎から応用に向けて順番にご紹介していきますね。

 

 

React - The Complete Guide (incl Hooks, React Router, Redux)

React - The Complete Guide (incl Hooks, React Router, Redux)

 

なんと実はこの講座一つだけでアプリが作れてしまう......いいですかたった1200円ですよ。

趣味程度でやるならぶっちゃけこれ一つで十分だと思います。

 

ただアプリを全体通して一つしかつくらないので概念を学ぶものだと考えてください。

それでも実際に自分が書いたコードがブラウザ上で動くのはとても楽しいし、モチベも高まります。

まずはReactってこういうものなのかーという認識をしてもらえればOKです。

SectionのタイトルにBonusとあるもの以外はすべてやることをお勧めします。

 

Reactの基礎を身につけてWebアプリを作る

 

Reactは主にフロントエンドを構築する部分になるので、データベースを扱う時には別のもの(バックエンドに相当するもの)を使う必要があります。

この講座ではお手軽にFirebaseを使っています。つまりバックエンドはブラックボックスということになります。

 

次の講座ではバックエンドに重点を当てたNode.jsの講座を紹介します。

 

JavaScriptの世界を広げる バックエンド Node.jsについて学ぼう

ではJavaScriptで本格的にバックエンドを学ぶ講座に移りましょう。

NodeJS - The Complete Guide (incl. MVC, REST APIs, GraphQL)

 

こちらはReactでログインしたデータを管理したり、ログイン情報をどういう風に管理したりしてくれるか、先ほどのFirebaseが行なってくれているブラックボックスな部分について基礎からしっかり学ぶことが出来ます

 

実務でReact使うならば必然的にデータベースとのやりとりも入ると思いますので、データベースってどういう風にデータを管理しているのかぐらいは知っておいた方がいいと思います。

 

というわけでこちらの講座であれば最近注目されているNoSQLと呼ばれる新しいデータ管理方法+通常のSQLと呼ばれるデータ管理方法

そして新しく入ったGraphQLと呼ばれる単一エンドポイントによる簡単なデータ取り出しなど、多くのことを学べると思います。

そしてこの講座と前の講座で学ぶべき知識については終わりです。

 

あとはそれを応用して、どのようにアプリが作られているのかを学べば自分でアプリが作れるようになると思います。

もちろん紹介した二つの講座でもアプリは作っていますが、私はそれだけでは少し不十分でもう少しパターンを学ぶべきだと思っています

 

NodeJS  MongoDBの基礎を身につけてWebアプリを作る

 

JavaScript応用編 学んだ知識を生かして実際のアプリを構築する

 

ここからは応用編。今までの知識を総動員して復習も兼ねて使えるJavaScript講座をご紹介していきます。

今回はパターンに応じて3種類紹介しようと思います。

 

パターン① React+Firebaseでシンプルな掲示板アプリ

React+Firebaseで掲示板アプリの作成

一番お手軽なパターンです。バックエンドはブラックボックスにしつつReactを重視してアプリを構築するものになります。

データの取り出し方がきちんとわかっていれば、そのデータをどう扱うかはReactで操作できます。

 

なので、実質一番最初に紹介した講座の後に取り組むことができて、基礎から教えてくれているので復習にも使えます!

 

React+FirebaseでSNSアプリ

 

パターン②− 1 React+Node.js でフルスタックエンジニアとしての第一歩をスタート

Node with React: Fullstack Web Development

こちらは両方学んだのなら両方生かしたいよ!という方のためのものです。私が3週間ほど居させてもらったインターンでは一個前のReact+Firebaseという形でした

 

そして現在働いている会社ではこちらのフルスタックのフロントもバックも両方触るパターンになります。

 

この講座では、みなさんがよく見るGoogleユーザー登録から、クレカ決済、メール送信など今までやってきたことの集大成になります。

説明がかなり丁寧なのでペースはゆっくり進んでいきます。特にユーザー登録の部分はなんども見返して理解していきましょう。

 

MERNのフルスタックアプリを作る

 

パターン②− 2 React+Node.js でフルスタックエンジニアとしての第一歩をスタート

React+Node.jsで本格的なアプリを構築しよう

 

こちらも同じような感じになります。どちらも内容としては素晴らしいものなので両方やるもよし、クリックして中の講座をみるとプレビューがありますので面白い方を選択するもよしです。こちらは王道の似たような処理やvalidationを繰り返しやってくれるので、アプリ全体ってこういう風に作られているんだと把握しやすい講座だと思います。

 

私がいつも意識しているのはアプリを細分化して、似たような構造に落とし込むことなのでこの講座を受講した時にそれが少しでもわかっていただけたら嬉しいなと感じます。

 

MERNスタックでSNSアプリ

 

パターン③ React+Node.js+GraphQLで最先端の勉強をする

React+Node.js+GraphQLで最新の技術を学ぶ

 

これはかなりアドバンスな内容になります。このパターンで実装をしているのは日本の会社ではほぼないと思いますので、必ず前の二つのどちらかをやった方がいいと思います。その上でさらなるスキルアップとして選択するとよりGraphQLの強みがわかると思います。

 

私は、色々なデータ管理方法を学びたかったのと、単純にGraphQLの管理方法が美しかったのでこれで是非アプリを作ってみたいと思って作成してみました。

 

MERNスタック+GraphQLでレシピサイトを構築する

 

終わりに UdemyのJavaScriptを学べばなんでもできる。

いかがでしたでしょうか。

今回は私が本格的に勉強をしたJavaScriptについてご紹介させていただきました。

 

実は世界的に見るとReactやNode.jsの勢いはすごいです。

しかし日本では徐々に広まっている段階なので大した講座や書籍がありません

なので、日本語の講座を使うより英語の講座を使った方が質が高いのです。

 

そして会社の先輩に言われたことが、今やJavaScriptができればなんでもできるという一言です。

確かにその通りだと思います。 HTML/CSSは必要最低限として、あとJavaScriptを学ぶだけでアプリが作れてしまう。しかもフロントの制御もバックの制御も両方できてしまう。

 

最初に私はReactを会社で使う目的で学んでいましたが、気づけばインターン生として雇ってもらえるレベルには実力が付いていました。

どの言語を学ぶか不安がある人はたくさんいると思います。

私もどの言語を学ぶべきか非常に悩みました。でもこれからの将来性や、モダンな環境で働きたいならモダンな言語にしようと思ってReactを選びました。今は全く後悔していないし、むしろ先取りして勉強できているので割と将来的にもかなり視野を広げた勉強ができていると思っています。

 

これからJavaScriptを学ぶ方の助けになれば幸いです。

  • B!