【Web開発初心者に教えたい！】世界６０万人が選んだWeb開発入門講座で華麗にスキルアップしよう


スキルアップを求めてここまで行き着いたみなさん！
新しい技術を習得したい、プログラミングを学びたい、web関連に強くなりたい！私もそんなスキルアップを求めるひとりです。この記事はここ半年間の自身の経験を元に、オンライン学習でweb開発を学ぶ方法を紹介します。本文最後には知っていると便利なリンク集を加えました。


#目次
[**どんな人向け？**](#どんな人向け)
[**どうしてweb開発の勉強をするの？**](#どうしてweb開発の勉強をするの)
[1. **Udemyのすすめ**](#1-udemyのすすめ)
&#x000A0;&#x000A0; [1.1 MOOC:オンライン学習プラットホーム](#11-mooc統合型公開オンライン学習コース)
&#x000A0;&#x000A0;  [1.2 Udemyとは？](#12-udemyとは)
&#x000A0;&#x000A0;  [1.3 Udemyの利用](#13-udemyの利用)
[2. **Web開発講座と自作アプリの紹介**](#2-web開発講座と自作アプリの紹介)
&#x000A0;&#x000A0;  [2.1 Web開発講座の二大派閥](#21-web開発講座の二大派閥)
&#x000A0;&#x000A0;  [2.2 The Web Developer Bootcamp 2020の紹介](#22-the-web-developer-bootcamp-2020-colt-steeleの紹介)
&#x000A0;&#x000A0; [2.3 自作webアプリケーション](#23-自作webアプリケーション)
[**まとめ**](#まとめ)
[**リンク集**](#リンク集)
&#x000A0;&#x000A0;  [A. 便利なwebサービス](#a-便利なwebサービス)
&#x000A0;&#x000A0;  [B. 次に読みたい関連するQiita記事](#b-次に読みたい関連するqiita記事)


# どんな人向け？

- 本で勉強するのに飽きた人
- プロから系統的に何かを教わりたい人
- Web開発の基本を身につけたい人


# どうしてweb開発の勉強をするの？
- かっこいい自分のwebサイトが欲しい[^1]
- 研究室・プロジェクト・会社のwebサイト管理 or 製作を任された
- BootstrapのようなCSSフレームワーク使えるようになりたい

みなさん各々事情があるかと思います。Web開発の技術があれば、上記のようなニーズに答えられることはもちろん、その他にもこんな<font color='blue'>web開発技術習得のメリット</font>があるかもしれません。

- [今最も需要のあるプログラミング言語のtop3](https://qiita.com/dhirabayashi/items/0cbe01f403af7a0223b9)を網羅する
- [Webサービスで収入](https://qiita.com/jabba/items/1a49e860a09a613b09d4)を得る
- [好きなところに就職・転職](https://qiita.com/ryokky59/items/833cb3cf916ec0fd1e19)する

（クリックすると関連するQiita記事へと飛べます。）


[^1]: 私がweb開発の勉強を決意したきっかけはこれです。Qiita記事:"[【GitHubPages】GitHub.ioで自己紹介ページを作りました](https://qiita.com/ryokosuge/items/f929821ba5ae9ba2c32b)"で紹介があるように、例えばyoshikoさんの個人ページ([http://yoshiko-pg.github.io/](http://yoshiko-pg.github.io/))はとってもかっこいいです。


#1. Udemyのすすめ
###1.1 MOOC:オンライン学習プラットフォーム

新しく勉強を始めるとき、最初にすることって何でしょう？&#129300; 良さそうな参考書&#128218;を探しますか？東急ハンズへお洒落なペン&#9998;とノートを買いに行きますか？とりあえずタリーズでコーヒー&#x2615;を飲みますか？私は**MOOC** (Massive Open Online Courses)と総称されるオンライン学習プラットフォームを利用することがあります。その理由は、**人に教えてもらうのって楽ぅー！！**というのが一番ですが、その他にもMOOCではその道の専門家&#129497;&#127999;から良質な授業を受けることができ、大抵の授業は無料か一冊の参考書を買うより安く、スマートホンやタブレットでいつでも好きなときに視聴可能な手軽さがあったりと**独学にはないメリットがたくさんある**からです。

###1.2 Udemyとは？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172224/71233b14-99f7-16ff-f013-2cbcaa151ceb.png)

[**Udemy**](https://www.udemy.com)はMOOCの中でも特に人気の高いオンライン学習プラットフォームで、2010年に米国でサービスを開始しました。Udemyはweb開発、データサイエンスやプログラミング言語に関する学習コースが充実しています。<font color='blue'>Udemyの特徴</font>として、
<h5><ul><li> 受講期間が無制限
<li> 受講料が安価
<li> 学習者が多い
<li> サポートが手厚い
</ul></h5>

があります。
まず受講期間の制限がないので、各自好きなタイミングで自由なペースで進められます。次に、Udemyの講座は1講座平均2,000円&#128176;くらいです。本来の1講座あたりの料金は大体1〜2万円くらいに設定されていますが、Udemyは割引キャンペーンを頻繁に行うので数千円まで安くなります。また、Udemyの利用者は世界に約3500万人居ます。たくさんの人によってレビュー・評価される為、それぞれ講座の良し悪しがはっきりと分かります。さらに、受講者へのサポートもきちんとしています。筆者がサポートを利用した際は、問い合わせの24時間以内にサポートから返事を頂き、その後のメールのやりとりも円滑でした。

### 1.3 Udemyの利用
##### 1.3.1 自分に合った講座の選び方
<font color='blue'>講座選択</font>の際に気を付けたいポイントは以下の三点です。

- 評価と評価の数
- 公開された日付
- 講師

Udemyの良いところは受講者の多さです。講座の評価を見れば、良い講座とそうでない講座がひと目で分かります。また、公開された日付にも注意が必要です。高評価の講座でもデジタルの世界は進みが速いのであまり古いと現在では役に立たなかったり、また思いがけないアップデートがあったりします。講座は講師にとっても無期限です。講師は半永久的に講座を自由に更新できます。また、見落とされがちですが講師との相性も大切です。講座によっては50時間を超えるものもあり、継続して楽しく勉強するためにも相性が良いに越したことはありません。

#2. Web開発講座と自作アプリの紹介
###2.1 Web開発講座の二大派閥
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172224/240c4561-1225-e893-0d96-9f9d6c43c71c.png)

Udemyでweb開発と検索をすると約1万ものヒットがあります。どれがいいか迷ってしまったら、

- [<h4>The Complete 2020 Web Development Bootcamp (Angela Yu)</h4> ](https://www.udemy.com/course/the-complete-web-development-bootcamp/)
- [<h4>The Web Developer Bootcamp 2020 (Colt Steele)</h4>](https://www.udemy.com/course/the-web-developer-bootcamp/)


のどちらかの受講をおすすめします。基本的な講座の情報を下のテーブルにまとめました。個人的にはどちらも高評価で、内容に大きな違いはないと思うので、どちらを選んでも良いと思います。筆者は今回、Steele氏の方を選びました。
*2020年12月22日11時時点

|   　　　 |料金|時間|練習問題|受講者|星の数|レビューの数|最終更新|
|----|  ---- | ---- | ---- | ---- | ---- | ---- |----|
| **Angela Yu** |¥1,890|54.5h|8問|33万人|4.7|約10万件|2020年12月|
| **Colt Steel**|¥1,960|63h|62問|63万人|4.7|約20万件|2020年12月|

|   　　　 |HTML|CSS|JavaScript|Node|React|Express|MongoDB|
|----| :---:| :---: |  :---:| :---:| :---: |  :---:| :---:| :---: | 
| **Angela Yu** |○|○|○|○|○|-|○|○|
| **Colt Steel**|○|○|○|○|-|○|○|○|

###2.2 The Web Developer Bootcamp 2020 (Colt Steele)の紹介
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172224/4cb366b0-c1a2-73d8-7e92-bbb1c05ac40f.png)
**[The Web Developer Bootcamp 2020](https://www.udemy.com/course/the-web-developer-bootcamp/)** は今Udemyで最も人気のあるweb開発が学べる初学者向けの講座です。**2ヶ月前に完全リニューアル**し、最新のコンテンツでフロントエンドとバックエンドの両方の基礎が学べます。はじめてプログラミングを勉強する人にも分かりやすいように、エンジニアとしての基本的な技術の説明なども内容に含まれています。


##### 2.2.1 この講座のすごいところ

- 学習者の力を効率よく伸ばす工夫が凝らされている
- これひとつでweb開発の包括的な知識を得られる
- エンジニアっぽい思考とコーディングの作法が身に付く
- 学習者コミュニティが大きい

この講座のすごいところは、<font color='red'>ただWeb開発について教えるだけでなく、学習者が今後エンジニアとして独り立ち、成長するために必要な技術(e.g.どう新しい言語やフレームワークやライブラリを学ぶか、どうエンジニアっぽい思考をするか、どうエラーから抜け出すか[^2])</font>がweb開発というテーマを通じて学習者に自然と身に付くように工夫されているところです。また、この講座をひとつ完了すれば、<font color='red'>他に手を出す必要がなく</font>、フロントエンド・バックエンド両方の知識が身に着けられるので、<font color='red'>面倒なロードマップを追わなくてよい</font>のもポイントです。他にもこの講座にはdiscordというslackのようなサービス内にグループがあり、数千人の学習者とチャットや情報交換ができる場が設けられています。

[^2]: 間違えやすいところでわざとエラーを示し、注意すべきポイントを教えてくれます。

##### 2.2.2 授業のスタイル 
講師と一緒にコードを書きながら学ぶスタイルです。練習問題がなんと60以上あり、全て<font color="red">ウェブブラウザ上で直接コーディングができる</font>ようになっています。その他に13このプロジェクトも用意されています。
【練習問題のイメージ】受講画面が下の画像のように自動で切り替わります。スキップすることも可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172224/ac192ae7-a36e-5021-1463-93b110f3bc69.png)

【プロジェクトの例】
<p class="codepen" data-height="284" data-theme-id="dark" data-default-tab="js,result" data-user="honyurui" data-slug-hash="KKgXJzq" style="height: 284px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Pokemon Index">
  <span>See the Pen <a href="https://codepen.io/honyurui/pen/KKgXJzq">
  Pokemon Index</a> by honyurui (<a href="https://codepen.io/honyurui">@honyurui</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="">https://production-assets.codepen.io/assets/embed/ei.js</script>

##### 2.2.3 学習に必要な時間
<h4>フロントエンドだけなら1ヶ月</h4>
(1日2時間+程度の学習が目安)
講座のコンテンツは全部で63時間あります。しかし通常再生の場合、コーディングをしながらだと学習時間はコンテンツ自体の時間よりずっと多くかかる印象です。講座は前半と後半で内容がそれぞれフロントエンドとバックエンド分かれています。私は約30時間ある前半のフロントエンド部分を1ヶ月で終了しました。参考までに私のスケジュールを紹介します。統計があるのはSection 22から27(前半の終わり)までです。統計を見ると、実際に受講にかかる時間は、コンテンツ時間の約2倍だということが分かります。つまり、フロントエンド部分の学習には60時間程度あれば十分だと言えそうです。

|Section                 |22|23|24|25|26|27|平均|
|----|  ---- | ---- | ---- | ---- | ---- |---- | ---- | ---- | 
| **授業コンテンツ(hour)**|1|0.7|1.8|1.7|0.8|1.7|1.7|1
| **実際(hour)**|1.1|0.5|3.2|4.25|2|2|2.2|
| **比(実/授)**|1.1|0.7|1.8|2.5|2.5|1.2|1.6|

##### 2.2.4 受講して良かった点(前半まで)
- **テキストエディタをVimからVScodeに乗り換えた**
- **フロントエンドの基本が身についた(HTML,CSS, JavaScript)**
- **コーディングの作法を知った**
  - 中身がtrueかfalseの変数の名前の先頭にisを付ける。e.g.) isAnimal, isSleepy, isKid ... etc.
  - JavaScriptの変数は基本キャメル型を使う。e.g.) userAge, userID, goodFood, ... etc.
- **数式をHTMLで書く方法を知った(&lt;sup&gt;と&lt;sub&gt;とHTML Entities)**

<p class="codepen" data-height="178" data-theme-id="dark" data-default-tab="html,result" data-user="honyurui" data-slug-hash="abmLwdz" style="height: 178px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Euler Equation">
  <span>See the Pen <a href="https://codepen.io/honyurui/pen/abmLwdz">
  Euler Equation</a> by honyurui (<a href="https://codepen.io/honyurui">@honyurui</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

- **便利なwebサービスをたくさん知った (リンクを本文最後に追加しました)**


##### 2.2.5 進め方の実用的なテクニック
- **英語を楽に聞く方法**
  - 英語字幕ON
  - 再生スピードの調節 (0.5 ~ 2倍)
  - Chromeで自動翻訳を利用する [^3]
  - 日頃から英語に触れる意識をする[^4]
 
- **練習問題を解くやる気を引き出す方法**
  - 問題を画面いっぱいに大きくする。文字が大きいと不思議と問題が易しくなる。
- **Chromeで開発者ツールを開くショートカットキー**
  -  **windows**: Ctrl + Shift + j, **mac**: command + option + j
 
- **動画を見ながらコーディングする方法**
  - 画面分割を使う[^5]
  - [Codepen](https://codepen.io/your-work)を使う

[^3]: 実際にトランスクリプションを画面の横に表示しながら受講するのは至難の技でした。

[^4]: おすすめは通勤や通学などの隙間時間に英語のpodcastを聞くことです。筆者は毎日BBCニュースを聞くことを心がけています。
[^5]: Macなら[Magnet](https://codepen.io/your-work)というアプリがおすすめです。

##### 2.2.6 最終プロジェクト
The Web Developer Bootcampの最終プロジェクトとして、"Yelp Camp"と呼ばれるwebアプリを作成します。私はまだ最後まで終わっていないので、多くのことを語ることができませんが、今から楽しみです！
完成後のイメージはこちら：[Yelp Camp DEMO](https://node-fullstack-yelp-camp.herokuapp.com/)

#### 2.3 自作webアプリケーション
フロントエンドの学習を終了し、ひと段落したところで**卓球のスコアボード**を作りました。使用言語はHTML、CSS、JavaScriptで、その他CSSフレームワークのBootstrapを使いました。制作期間は3日くらいです。現在[Github pagesを利用して公開中](https://honyurui.github.io/)です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172224/d297b2c0-8f60-25e4-1dca-b68bf8bbccca.png)
# まとめ
<h3><ul><li> スキルアップの手段としてUdemyを紹介した
<li> Udemyにはたくさんの講座があるが、web開発については
<ul><li>The Complete 2020 Web Development Bootcamp</li>
<li>The Web Developer Bootcamp 2020</ul>のどちらかが良い
<li>Web開発のフロントエンドの学習に必要な時間は60時間
<li>学習中とその後に作成した自作webアプリを紹介した
</ul></h3>


#リンク集

###A. 便利なwebサービス
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172224/d7c09b6e-e0d9-8d4a-eee5-30d83719eed8.png)

- [MDN Web Docs](https://developer.mozilla.org/ja/)
  // HTML, CSS, JavaScript, 等のドキュメント
- [Codepen](https://codepen.io/)
    // ブラウザ上のコーディングプラットホーム
- [Character Entity Reference](https://dev.w3.org/html5/html-author/charref)
    //　特殊文字のHTML表記一覧　(e.g. &#945;【&amp;#945;】 &#946;【&amp;#946;】&#947;【&amp;#947;】 &#9742;【&amp;#9742;】)
- [Google Fonts](https://fonts.google.com/)
    //　Fontのカタログ
- [Unsplalsh](https://unsplash.com/)
    //　フリー画像素材
- [Coolors](https://coolors.co/)
    //　カラーパレット
- [CSS Tools: Reset CSS](https://meyerweb.com/eric/tools/css/reset/)
    //　ブラウザ間で違う独自のデフォルトCSS設定を無にするスニペット

###B. 次に読みたい関連するQiita記事
- [【個人開発・ポートフォリオに】簡単にいい感じのデザインにできるサービスまとめ](https://qiita.com/aiandrox/items/4196c8f5b564d29fdce7)
- [2019年版 最先端のフロントエンド開発者になるために学ぶべきこと](https://qiita.com/baby-degu/items/da30fa71b8f48fffc568)
- [WEB開発に役に立つAPI一覧+API毎に関連するQiita記事を分類 ！](https://qiita.com/hamaup/items/cd7212aa1d0b1f0e37de) 
- [Webサービス個人開発するなら読みたい情報源13](https://qiita.com/curryperformer-kato/items/a7dc9a41200b6c9c1912)
- [開設後３週間で収益１０万円を得た個人開発サイトでやったことの全部を公開する](https://qiita.com/jabba/items/1a49e860a09a613b09d4)
- [【翻訳】コードは書けないけど、1人で作ったwebサービスを収益化した話](https://qiita.com/__shinji__/items/053380d981fa26c4c092)
- [2020年にフロントエンド開発者が作りたい9つのプロジェクト](https://qiita.com/baby-degu/items/df70cccf686ad9fe4940)
- [【2020年版】フロントエンドのおすすめMac無料ツール](https://qiita.com/amita/items/a103210bdab8bfb6a889)
- [Raspberry PiでWebサーバを構築し自作アプリを使う](https://qiita.com/jun6231jp/items/5596ef0c912c7f57ef0a)
- [フロントエンドを100倍速くした（ ＾ω＾）](https://qiita.com/nanocloudx/items/ed53c1cdb90f8d0f120c)
- [Web開発のためのOSSのトレンドの調べ方](https://qiita.com/kannkyo/items/139ff736b72946ae07ad)
- [Pythonさえ分かればDjangoでWebアプリは作れる](https://qiita.com/Taro_man/items/19613663ef7bb3c57d4f)