web開発独学のためのロードマップと参考資料

# WEB開発
友達のために最初の取っ掛かりのためのカリキュラムを書きます。
これを見ながら勉強の方針を立て、それをもとに自分で検索して、いろいろな勉強サイトを使って勉強していく感じで。
全部やろうとしなくていいです。
随時更新予定。
環境はwindowsを想定してます。


## はじめに
プログラミングは挫折しやすいです。
すべてを理解しようとはせず、ある程度できたらアウトプットしてまた次の新しいものを学び、飽きたり挫折したりしないようにがんばりましょう。
ググってもわからないことがあったら、なるべく早めにできる人に聞くといいと思います。
時間を無駄にしている可能性が高いです。


## 開発環境構築
まずは自分のパソコンにプログラミングをする環境を作ります。

#### [VSCode](https://code.visualstudio.com)をインストール
これはエディタです。これを使ってプログラムを書いていきます。
便利な拡張機能を紹介
* Bracket Pair Colorizer(括弧に色がつく)
* ESLint
* HTML CSS Support
* HTML Snippets
* IntelliSense for CSS class names in HTML
* Prettier - Code formatter
* GitLens
* Remote WSL
など、その都度必要なものを入れていく感じで。
ダウンロード数が多いものを入れていったら間違いないと思ってます。

#### コマンド
便利なコマンドがいくつかあるので覚えていきましょう。
コマンドを使うとストレスが減るし開発スピードが上がります。
個人的にはマルチカーソルとか便利と思います。
[VScodeチートシート](https://qiita.com/aoinu/items/681f932ce0b162cd9520)

#### 使う言語をインストール
後ほどいくつか紹介しますが、使うと決めた言語をインストールします。
例：[Python](https://www.python.org/downloads/windows/)
最初はなるべく新しいのをダウンロードしましょう。

#### Google Chrome Developer Toolsを使おう
ブラウザは基本的にChromeを使っていくほうがいい気がします。(ほか使ったことないです)
Ctrl+Shift+Iとか右クリックの検証で出てくるので、色々使ってみましょう。

#### Qiitaを活用しよう
調べるのはもちろんのこと、自分で学んだことを書いていくといいです。
Qiita以外を使ってもいいですが、学んだことをアウトプットすることは自分の知識の整理や、あとからの参照のためにもいいと思います。
QiitaはMarkDown記法で書きます。
参考→[MarkDownチートシート](https://qiita.com/Qiita/items/c686397e4a0f4f11683d)


## HTMLとCSS
HTMLやCSSは厳密にはプログラミング言語ではなくマークアップ言語といいます。
無料の教材として有名なのは[Progate](https://prog-8.com/)、[Paizaラーニング](https://paiza.jp/works)、[ドットインストール](https://dotinstall.com/)などです。
あとは、なるべく公式ドキュメントを見るようにしましょう。
デザインをしたい人はここを重点的にやりましょう。
pythonとかバックエンドとか早くやりたいって人は程々にしましょう。

#### HTML, CSS
[MDN](https://developer.mozilla.org/ja/docs/Learn)など

#### JavaScript
jQueryもさらっとやると、JavaScriptの使い方がわかって良いです
jQueryは古いと思われがちですが、実際使っている現場はまだまだ多いと思います。
もっとフロントエンドやりたかったらreact.jsとかvue.js、typescriptなど
JavaScript特化型オンライン学習サイト[JS-Pro](https://js-pro.jp)

#### Bootstrap
これも使ってみるとびっくりするほどページが早く作れて面白いです。
有名所では、[aribnb](https://www.airbnb.jp/)がbootstrapを使っていたと思います。
レスポンシブなWEBページを簡単に作れます。（レスポンシブがわからない人は[【入門】レスポンシブWebデザインとは？概要と作り方を丁寧解説](https://www.kagoya.jp/howto/webhomepage/responsive/)など見てください）

#### アウトプット
それぞれprogateなどを一通りやったらアウトプットのために一枚ページを作ってみてもいいですね。
自己紹介ページなんかどうでしょうか。
拙いものですが、Bootstrapを使って適当に作った自分のものを参考に乗せておきます。
[For Recruiter Page](https://kota7175.github.io/ForRecruiterPage/)
これは後述のGithubの機能であるGitHub Pagesというもので上げています。


## プログラミング言語
各々の言語にはそれぞれ特性や強みがあります。
[プログラミング初学者はこれを見ろ！](https://kcs1959.jp/archives/5465/general/look)←メジャーな言語の説明あります
言語に慣れるためには、[AtCoder](https://atcoder.jp/)や[HuckerRank](https://www.hackerrank.com/)などの競技プログラミングサイトの過去問を説いてみることをおすすめします。
以下にメジャーなものと、そのwebフレームワークを挙げておきます。
### C

### C++

### C\# 

### Go
[Echo](https://echo.labstack.com/)、Gin

### Dart
Flutter

### Java
Spring

### JavaScript
Node.js, React.js, Vue.js

### PHP
CakePHP, Laravel

### Python

[Django](https://docs.djangoproject.com/ja/2.2/intro/tutorial01/)の練習として、[Django Brothers](https://djangobrothers.com/)や[DjangoGirls](https://tutorial.djangogirls.org/ja/)などがあります。

### Ruby
Ruby on Rails

### Swift


## オブジェクト指向
クラスやインスタンスについて学んでおきましょう。

## webの技術
多少はwebの技術を知らないとwebアプリを作ることができません。
通信やネットワーク、セキュリティについて学んでおきましょう。
[「プロになるためのWeb技術入門」を読んだのでまとめてみた【前編】](https://qiita.com/yosemite2307/items/6179ddeeac09aaadca16)


## データベースとSQL
データベースの構造やmysqlなどのミドルウェア、リレーションの仕組みなど。
SQLはデータベース操作のための言語です。


## Git
Gitは開発において欠かせないので実務を目指している人は特によく勉強しておきましょう。
[さるわか](https://backlog.com/ja/git-tutorial/)はかなり分かりやすかったです。


## Docker
作り始めたアプリケーションをローカルで実行する必要があります。
前まではVagrantなどで仮想環境を作る必要がありましたが、技術の進歩によってWindowsでもDokcerが使えるようになりました。
４月のwindows updateでwindows 10 バージョン2004にすると、wsl2が使えるようになり、Docker Desktop for Windowsが使えます。
Dokcerを使うと簡単にローカルでサーバーを立ててアプリケーションを実行できるだけでなく、インフラをコードで管理できるので、学習コストはやや高いですが積極的に使っていきましょう。
[Docker公式](https://docs.docker.com/)
[世界一わかりみが深いコンテナ & Docker入門](https://tech-lab.sios.jp/archives/18811)
[Docker入門 #1 【Dockerとは】](https://qiita.com/wMETAw/items/b9bc643ded4b92bf6add)

## クラウドの知識
クラウドサービスとしてメジャーなものでは、[GCP](https://cloud.google.com/docs/overview?hl=ja),[AWS](https://aws.amazon.com/jp/),[Azure](https://azure.microsoft.com/ja-jp/),[Heroku](https://jp.heroku.com/)があります。
個人で使う分くらいは無料枠の中でできるので、実際にアプリを動かしてみたい場合は使ってみましょう。
自分もGCPとFirebaseを使ったWEBアプリケーションを作成中です。

## 有用な資料

* [研修資料まとめ](https://gist.github.com/gcchaan/02f4746a323acac4095c30e0783a3912)
* [2020夏のITエンジニアインターンの情報が集まる魔法のスプレッドシート](https://docs.google.com/spreadsheets/d/1O4LqD6tfVisshD4YngjEKwpU1FQCGuD8vZ1qlVX0sBY/edit)
* [個人開発ドットコム](https://kojinkaihatu.com)
* [【Webエンジニアど素人から３年生ぐらいになるまでに読むと良い本】を段階的にまとめた](https://qiita.com/JunyaShibato/items/3aa5f7f3fc991de17f3f)