こんにちは。カナダのバンクーバーでフロントエンジニアになるべく、バンクーバーにあるカレッジのWeb developmentコースに通っているmiaです。
今日のブログは、私がプログラミング学習で使っているUdemyの教材を紹介してほしいというリクエストがありましたので、Udemyの講座も含めてプログラミング学習をする際に使った、使っている教材を紹介していきたいと思います！
バンクーバーのカレッジの授業内容について気になる方は、こちらのブログ記事で紹介していますのでどうぞ！（まだプレクラスの内容しか書いていませんが…）
CICCCのWMADのPreクラスが終わりました！【バンクーバーでプログラミングを学ぶ】
もくじ
私のバックグラウンド
まずは、私のバックグラウンドについて書いていきたいと思います。
私はプログラミングは完全な初心者です！！ただ実は、全く、100%、経験がないかと聞かれると、Noなんですよ…。
思い返してみると、簡単なHTMLの仕組みは小学生高学年〜中学生のときに理解したと思います。
なぜなら、その当時、自分のホームページを作ることが流行っていたからです。ありましたよね？友達との共同ホムペとか！（同世代なら分かってくれるはず…！）
当時は簡単にホームページが作れるサイトがあり（フォレストとか）、HTMLのタグをちょっと書くだけで自分のホームページを作ることができました。
そこで、HTMLの基本であるタグで囲むことや、<br>などのタグがどのような働きをするのかを理解したと記憶しています。
その後、ホームページの更新に飽き、高校生になる頃にはホームページの存在も忘れていました。いまどうなっているんだろう…？
高校では映画制作部という映画をつくる部活に入ったので、動画を取ったり編集したり、絵コンテを書いたりすることに没頭していました。
次に私がプログラミングに触れることになるのは大学に入ってからです。私はメディア関係を専攻していて、大学では特に動画に関する研究や制作をしていたのですが、選択の授業の中にプログラミング関係の授業も複数ある学科でした。
Webデザインのクラスではドリームウィーバー（今もある？）を使ってのサイト制作をしたり、プログラミングの授業ではHTML、CSS、Javascriptを習いました。ただ、どの授業も半年で終わってしまった＋週に１回しか授業がないということで、身につきませんでした。
そのときは、プログラミングにさほど興味がなかったので、覚えようともしていなかったと思います。今思えば、あのときちゃんと授業を受けていれば、少しは理解力が違っていたかもしれないと思ったりもします。
ちなみに、大学時代にITパスポートは取得しています。役に立ったことないけど。
その後、自動車関係の会社に就職して４年ほど働いた後、退職。コロナの関係でビザが降りるのを待つ間、約１年間コワーキングスペースでアルバイトをして、バンクーバーに来ました。
過去にプログラミングに触れる機会はあったものの、真剣に勉強していなかったので身につかず。
私は現在、完全初心者の状態でバンクーバーのカレッジでプログラミングを学んでいます。
カレッジの授業でプログラミングが分かる、コードが書けるようになる？
プログラミングを学ぶカレッジに入学する予定の方は、落胆してしまうかもしれませんが、少なくとも私が通うカレッジの授業ではプログラミングができるようにはならないと思います。（今日のブログでは詳細は省略します。）
私のプログラミングの勉強として基本になるのは、自己学習です。
カレッジの授業があったからできるようになったというより、自己学習をしていたからできる、わかるということが大半を占めます。
自己学習ベースというのは、今後も変わらないと思います。
一番初めに使った教材は、Progate
プログラミング学習者ならみんな知っていると言っても過言ではない「Progate」で最初は勉強をしていました。
私がProgateで勉強したコースは、「HTML」「CSS」「Javascript」「React」の4つです。
Progateで勉強をするときに、「何周もしない、終わったら他の教材をやる」ということを推奨している人をTwitterなどで何人か見たことがあるのですが、
私は何周も繰り返して勉強をしました。
HTMLとCSSは2周、JavascriptとReactは3周以上やっています。
これは単純に、１周やっただけでは覚えられないという理由からです。
道場コースというコースの総まとめをするテストのようなページがあるのですが、その道場コースを問題なくクリアできるようになってから、Progateを解約し卒業しました。
私はProgateでReactまでしか勉強しなかったのですが、興味がある分野に関連する言語を勉強すると良いと思います。
最初のとっかかりやすさが魅力です。
Progateで表面をちょっと理解した後は、本を使って勉強しました。
私は、Web制作会社が運営するコワーキングスペースでバイトをしていたので、エンジニアの人に相談できる環境がありました。
エンジニアの人に、どうやって勉強したら良いか相談してみると、初心者向けの本を１冊やりきるという方法を勧められました。
また、留学エージェントの方からもおすすめの本を聞くことができたので、その本を買って読みました（実際に本に出てくるコードを書いてみたりもしました）。
Javascript ふりがなプログラミング
この本は、タイトル通りコードにふりがながふってある本です。この本のふりがなのおかげで、Progateで得たふんわりとした変数や関数の意味を理解することができたと思います。
1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座
この本は、働いていたコワーキングスペースの本棚に置かれていた本です。
タイトルの通り、Webデザインの本ではあるのですが、CSSの説明が分かりやすいと思います。
カレッジのプレクラスで自分のポートフォリオサイトを作るときに、Webデザインを自分でする場面もあったのですが、この本で見た内容を反映させながらなんとかデザインを作ることができました。
エンジニア志望の方のCSSの勉強や、ちょっとデザインに関しての知識もつけたいという方におすすめです！
初めてのJavaScript
この本は初めての、というタイトルにはなっていますが、分厚いですし、私にとっては簡単ではありませんでした。ただ、私は読んでおいてよかったなと思う１冊でもあります。
Javascriptのスコープや、正規表現、オブジェクトに関する説明は分かりやすく、Javascriptの理解を深めるのに役に立ったと思います。
リーダブルコード
エンジニアになりたいのなら、この本を読んでおかないといけないよと言われて購入した本です。
読みやすいコードとは、良いコードとはどんなコードなのか、ということが書かれています。
ただ、この本を読んだ当時はペーペーの初心者だったので、 あまりピンときませんでした。
今は少し自分でもコードが書けるようになってきたので、もう１度読みたいと思っています。
Javascriptの勉強で使ったサイト
JavaScript Primer
このサイトは、Javascriptの基礎となることが書かれています。Webで見ることができるので、今もどうだったかな？というときに参照しています。
一通り目を通しただけですが、Ptogeteよりも発展した内容なので、知識を定着させることやステップアップにはもってこいだなと思いました。
javascript30
このサイトは英語ですが、私のJavascriptの知識をかなり定着させてくれたサイトです。
30日間のプロジェクトになっていて、1日1プロジェクトをこなすというコンセプトになっています。
無料で受けられますし、Javascriptを使って実際にどんなことができるのかを知ることができるのでおすすめです。
Progateをやっただけでは、コンソールに表示することしかできないと思うので、この講座はやってよかったと心から思います。
終盤になるとちょっと難しくなってきて、前にやったときは写経状態になってしまったところもあったので、もう１回やり直したいなと思っています。
受講済み、受講中のUdemyの講座
上記の本やサイトでの学習を終えてからUdemyの講座をいくつか購入して受講しています。
【JavaScript＆CSS】ガチで学びたい人のためのWEB開発徹底実践（フロントエンド編）
中でも私のおすすめは、こちらです。
この講座は、特にフロントエンジニアを目指している人におすすめできる講座だと思います。
レスポンシブのサイトを作りながらCSSとJAvascriptを学ぶことができます。
どちらかというと、JavascriptよりCSSの内容の割合の方が高め。
画像を中央寄せしたいけど、結局どうしたら良いんだっけ？みたいな、私の中のCSSでどうしたらいいんだっけ？という部分を見事に解消してくれました。
また、CSSは全てSassで書いていくので、Sassの書き方も学ぶことができます。
サイトをレスポンシブにする方法も学ぶことができ、私はこの講座のおかげでカレッジのプレクラスで作ったサイトを自力でレスポンシブにすることができました。
Javascriptパートでは、画面に要素が入ったときにアニメーションを作動させる、など知っておけてよかったという内容を勉強することができました。
実は私、この講座を過去に進めていたときに、全然わかんない、難しすぎ！と思って放置した経験があります。
ですがカナダに来て、隔離をしているときに、放置していちゃ駄目だと思い、また最初から取り組み、終わらせることができました。
わからなくなったら、分かるまでググる、根気よくやり続けるということを意識していました。
また、動画だと見返すのが大変だということに気づき、Udemyの講座で勉強するときには、Notionでまとめながら進めています！
実際のNotionのページはこんな感じです。書き出すことで知識のアウトプットにもなり、知識が定着しやすい気がします。
現在取り組んでいるUdemyの講座は２つです。
The Modern JavaScript Bootcamp
１つ目は、
です。英語です。
とにかくJavascriptの理解を深めたい、Javascriptが書けるようになりたいという私にはもってこいの講座です。Javascriptに関することが網羅的に解説されています。 もう少しで完了するところなのですが、特にオブジェクト指向の説明が詳しくされており、完全にオブジェクト指向を理解できたとは言えないものの、理解する助けにはなったと思っています。
The Complete 2021 Web Development Bootcamp
２つ目は、
こちらです。英語です。
この講座は、特にJavascriptに特化しているわけではなく、webデベロッパーを目指す人向けの講座になっています。そのため、HTML・CSSからJavascript,
Node.js、SQL、Bootstrapなど他分野の学習が１つの講座にまとまっています。個人的にはコスパの良い講座だなと思っています。
ただ、2021というタイトルがついているのですが、動画の内容が古いまま更新されておらず、講座の通りに書いてもBootstrapが使えないということがありました。私の場合、Bootstrapについてはyoutubeのクラッシュコースをやっておきました。
その点は少し残念でしたが、英語が聞き取りやすいことと、講座の内容が豊富な点は気に入っています。
プログラミング、英語で勉強するか日本語で勉強するか
私は断然日本語で勉強した方が良い派です。日本語だと講座の数がすくなかったり、サイトのページ数が少なかったりするので、日本語が良いけれど英語でも可という感じです。
プログラミング自体、すぐ理解できるものではないので、やはり母国語で理解することが１番だなと思っています。
カレッジの授業でも、英語で説明をされてもしっくりこなかったときには、日本語のサイトを探すようにしています。
今日のブログはここまでにしたいと思います。
まだ初心者で学習中の私が使っている講座なので、プログラミング初心者の方に有益な記事になっていたら嬉しいです。
これからもっと勉強して、バンクーバーで就職できるようにがんばります！
また、デベロッパーの方で、このページいいよ！この本がわかりやすいよ！などがあったら教えていただけると嬉しいです。私はフロントエンジニアになりたいと思っているので、この勉強をしておいたほうが良いというアドバイスもお待ちしています！
ここまで読んでくださり、ありがとうございました！
