という方向けの記事になります。
記事執筆者：オザック
年収1000万超、Web開発を生業にしていて10年以上のオザックです！
某有名R社で働き、副業も含めて個人事業主で関わってきたプロジェクトは20以上。
普段エンジニアの面接もやっていて、様々な会社でテックリードをしてきました。
今回はそんな僕が未経験からWebエンジニアまでの学習ロードマップを紹介します！
3分程度で読み終わりますので、効率的にWebエンジニアまでの学習方法を知りたい方は最後まで読んでみてください。
Web制作の副業に興味のある方はこちら
確実に副業案件が獲得できるテックアカデミーはじめての副業コース
目次
初心者から独学でWebエンジニアへの学習ロードマップ
まずは結論として未経験から学習ロードマップを紹介します。
また後ほど説明しますが、今回の学習ロードマップは未経験からビギナークラスとジュニアクラスの間くらいにはなります。
そのレベルでエンジニアへの転職は可能です(もちろんメガベンチャーや年収600万以上とかはいきなりは難しいです)。
Webエンジニアまでの学習ロードマップ
- Webエンジニアには主にフロントエンドとバックエンドがあり、どちらから勉強するか選択する
- それぞれの職種に合ったUdemy講座
で勉強する - 実際に自分で作りたいものを作って見て、更に知識を深める
この順で勉強していくのが良いです。
まずは勉強方法の前にエンジニアレベルの区分やフロントエンド、バックエンドについて説明していきます。
Webエンジニアとは？主に3つに分類される
Webエンジニアとは昨今だと主に3つに分類されます。
Webエンジニアを3つに区分
- フロントエンドエンジニア
- バックエンドエンジニア(サーバサイドエンジニアとも言う)
- インフラエンジニア
と分けられます。
今回はその中でも多くの割合を占める
- フロントエンドエンジニア
- バックエンドエンジニア
の独学勉強方法について説明していきます！
Webエンジニアのスキルレベル区分
大きくWebエンジニアのスキルレベルで区分を分けてみました。
| クラス区分 | 歴 | 内容 |
| ビギナークラス | 未経験からプログラミングスクールで勉強した人 |
|
| ジュニアクラス | エンジニア歴1~3年程度相当 |
|
| シニアクラス | エンジニア歴6年以上相当 |
|
| テックリード | チームリーダー相当 |
|
※スマホではスクロールできます
※あくまでボク個人の見解で分けています
初心者はまずフロントエンドとバックエンドを選ぶ
はてな
ではまずフロントエンドとバックエンドをどちらを選ぶべきか？
について説明していきます。
フロントエンドとバックエンドの違い
フロントエンドはユーザが見たり触ったりする見た目の部分を開発していき、UI/UXを向上させることが主な業務になり、スキルの幅はバックエンドと比べると少ないです。
バックエンドはユーザが見えない、データベースの設計構築から、画面に表示するためのデータをフロントに渡したり、ユーザが入力したデータをデータベースに保存するAPIを開発するのが主な業務になり、 必要なスキルはバックエンドのプログラミング言語とある程度のインフラやフロントエンド、データベースの知識も必要になってくるため、必要なスキルの幅が広いです。
フロントエンドとバックエンドの違い参照
上記の参照のように
- フロントエンドはユーザが触るWeb画面を作る仕事
- バックエンドはユーザからは見えない裏側のシステムを作る仕事
ということです！
更に詳しく業務や年収などを知りたい方はこちらの記事がとても参考になります
フロントエンドとバックエンドの違いとは？現役エンジニアが解説
フロントエンドで使用される技術
フロントエンドで使用される技術
- HTML
- CSS(SCSS)
- JavaScript(TypeScript)
- React.js(or Vue.js)
となります。
昨今ではこれらの技術が主に使われていて、特にReactを使う企業は年々増えているため、フロントエンドをやる場合はReactは必須の技術と言っても良いです！
バックエンドで使用される技術
バックエンドは冒頭で述べた通り、幅広い知識が必要になります。
必要なスキル
- バックエンドのプログラミング言語
- データベースの設計・運
- インフラの多少の仕組みの知識
- CI/CDなどDevOpsの構築・設計
- 多少フロントエンドの知識
となります。
バックエンドはAPIというプログラムを開発することが主な仕事で、その仕事ではフロントやインフラ、データベースに関わることが多くなります。
なので必然的にフロントエンド、インフラもどちらも多少の知識を備えている必要が出てきます。
バックエンドのプログラミング言語は有名なのだと
- Java(Kotlin)
- PHP
- Ruby
- Go
- Rust
- TypeScript(JavaScript)
などになります。
フロントエンドとバックエンドをどのように選ぶべきか？
ではどのように選ぶべきか？について説明していきます。
注意ポイント
「あくまで最初のキャリアにどちらを選ぶべきか？」という話なので、決めたら今後のキャリアパスで変更できないと言う訳ではないです！
勉強すれば変更は可能です！
Webエンジニアへ転職したい人はフロントエンド、バックエンドどちらでも良いが、バックエンドの方がおすすめ
Webエンジニアへ転職したいと思っている人は フロントエンドでもバックエンドでもどちらでも良いです！
ただバックエンドの方がおすすめではあります
理由は
- Webの全体的な構造を学べて、１人でWebアプリを作れるようになる
- CTOやテックリードなど重役は大抵の場合バックエンドの人になる
- 初学者が勉強しやすい(プログラミングスクールでもバックエンド中心に教えている)
- バックエンドの経験があればフロントエンドも覚えるのが難しくない
という点です。
なので迷っている場合はとりあえずバックエンドを勉強していくことを勧めます！
補足
後でフロントエンドに変更したり、バックエンドが出来るようになってからフロントエンドも勉強するというのは全然出来ます！
Webの根幹を担うバックエンド開発は後々にエンジニアに転職しても必ず活きてきます！
自分のサービスを開発したい人、一般教養としてWeb開発を学びたい人はバックエンドが良い
理由は１人でWebアプリを作れるようになるからです！ フロントエンドが出来ても画面しか開発出来ないので、
- Webアプリを公開
- ユーザなどのデータをデータベースへ保存
などは出来ないですし、上記のことはほぼ間違いなくWebアプリでは必須です。
これはバックエンド開発側の仕事になるため、バックエンドの知識が必要です！
なので起業してWebアプリを開発したい人はまずバックエンドを覚えるべきです！
注意ポイント
ただこの場合バックエンド開発は画面を作るためのHTML、CSS(SCSS)は覚える必要があります。
HTML、CSS(SCSS)はマークアップ言語であり、プログラミング言語ではないので覚えるのはそこまで難しくなく初心者でも独学で容易に出来るでしょう！
【独学】初心者からフロントエンドを目指す学習ロードマップ
ではまずフロントエンドの学習ロードマップから解説していきます。
フロントエンドのロードマップ
- HTML, CSS,JavaScriptをUdemy講座で勉強する
- TypeScriptをUdemy講座で学ぶ
- ReactのフレームワークNextをUdemy講座で学ぶ
- 勉強した知識を活かして自分で考えたサービス(就活する人はポートフォリオ)を作ってみる
[/st-mybox]
フロントエンドに関しては詳しくは「独学でできるフロントエンドの学習ロードマップ」が参考になります！
独学でWebエンジニアになる場合Udemyをおすすめする理由
まずUdemy講座をおすすめする理由は以下になります。
Udemyのメリット
- Progateはゼロから自分のパソコンで環境構築しないので実践的でない
- 誰でも手の届く値段で安い
- 動画なので本よりもわかりやすい
- 何度でもわからないところは見直し出来る
- 講師に質問することが出来る
という理由からUdemy講座をおすすめしています！
注意ポイント
実践の現場では自分のパソコンで開発環境を構築して実装していきます。
また自分でサービスを作るときも同様で、開発環境を構築する必要があります。
その点Progateは開発環境を構築せずにプログラミング言語を学ぶということにフォーカスしていて、
初心者が最初に詰まる環境構築がないので、結局学んだ所であまり活かせないので、Progateはおすすめしていません。
なので環境構築も一緒に勉強できるUdemyの方をおすすめしています！
フロントエンドの勉強方法
フロントエンドの勉強するものは
- HTML,CSS
- TypeScript
- React
が最低限必要です！
詳しくはこちらの記事がとても参考になります！
【独学の最短ルート】フロントエンジニアの学習ロードマップ
【独学】初心者からバックエンドを目指す学習ロードマップ
次に未経験からバックエンドを目指すための学習ロードマップについて説明していきます。
バックエンドの学習ロードマップ
- 勉強するプログラミング言語を選択する(Ruby or PHP or Python)
- それぞれの言語をUdemy講座で勉強する
- それと同時にデータベースについても勉強する
- インターネットにデプロイ(インターネットに公開する)する方法を勉強し公開する(就活で使うポートフォリオは基本的に公開することになります)
- 勉強した知識を活かして自分で考えたサービス(就活する人はポートフォリオ)をゼロから作ってみる
詳しくはこちらが参考になります
未経験から中級者になれるバックエンドエンジニアの学習ロードマップ
バックエンドで必要なスキル
まずバックエンドで必要なスキルは
バックエンドで必要なスキル
- バックエンドのプログラミング言語を実装
- データベースのテーブル構築
- (HTML、CSS)
- (インフラ構築)←最低限で大丈夫
※上記の括弧書きは初学者ならなくても大丈夫だが、あると望ましいというレベルのスキルになります
バックエンドにおすすめのプログラミング言語
おすすめプログラミング言語
- PHP
- Ruby
- Python
になります。
理由は
- 動的型付け言語で初心者が学ぶのに比較的簡単なプログラミング言語
- 日本語のドキュメントが豊富
などになります。
詳しくはこちらの記事がとても参考になります
バックエンドの勉強方法
【経験談】バックエンドエンジニアになれる勉強法とスクールを解説
おまけ: 初心者からWebエンジニアへ転職するためにはデータベース設計は多少わかっていれば良い
データベースというのはユーザが保存したデータを格納しておくサーバになります。
例えばアマゾンだとユーザの配送先やメールアドレス、名前などが多くのものがデータベースに保存されています。
このデータベースですが実は勉強するとかなり奥が深いです！
なので初心者はまずは最低限
- テーブルを作ることが出来る(フレームワーク経由でもOK)
- primary keyをつける意味がわかり、実際に付けることが出来る
- foreign keyを付ける意味がわかり、実際に付けることが出来る
あたりが出来れば問題ないです！
参考
非機能要件とは機能とは関係のない要件のことを指します。
例えば「ユーザがサイトに訪れてからサイトが表示するまでの時間を短くする」といったことがそれに当たります。
インフラはクラウドなどでポートフォリオをインターネットに公開出来れば良い
インフラとは自分でプログラムを書いて作ったWebサイトをインターネットに公開するサーバのことを指します。
インフラを構築し、自分のプログラムをアップロードすることでインターネットに公開されます。
ただ初心者にとっては結構難しい部分になり、また多くのバックエンドエンジニアと名乗っている人がインフラは出来ないという人もいます。
なので最低限ポートフォリオをインターネットに公開できるレベルの知識は持っておくだけで良いです！
独学で初心者からWebエンジニアになるには勉強した後、アウトプットをすること！！
フロントエンドでもバックエンドでもどちらの学習ロードマップにも記載していますが、
必ず勉強したあとに自分でゼロからWebアプリを作ってください！！！
勉強途中は理解した気がするのですが、実際に自分でゼロから作ってみようとすると全然出来ないと思います！
独学でWebエンジニアになる自信がないまたは挫折経験がある方へ
独学というのはそれなりの精神力がないとなかなか難しいのも事実です。
なので
- 独学で勉強していく自信がない方
- 過去に挫折経験がある方
へ別の勉強方法を紹介します。
プログラミングスクールに行って勉強する
最後はプログラミングスクールに行って勉強する方法です。
独学にはないこちらのメリットは
- 初心者に教えるのに特化したカリキュラムがある
- 講師に質問して即レスが来るので、すぐに詰まっても解決する
- エンジニアへの転職保証がある
- 転職のための経歴書添削や面接対策がある
というのがあります。
フロントエンドにおすすめのプログラミングスクール5選
選ぶポイント
- ReactやVueに特化したカリキュラムがある
- 現役エンジニアが教えてくれる
という点抑えて探しましょう！！
フロントエンドにおすすめのスクールはこちらがとても参考になります
フロントエンドが学べる質の高いプログラミングスクール5選
バックエンドにおすすめのプログラミングスクール: DMM WEBCAMP
バックエンドは転職保証付きプログラミングスクール DMM WEBCAMP COMMITがおすすめです！
魅力ポイント
- 在宅で勉強可能
- 受講生1人にメンターがついてくれる
- チャットで質問すればすぐにレスが返ってくるので詰まってもすぐに解決できる
- オリジナルのアプリやポートフォリオ作成までもサポート
- エンジニア転職保証がある
- 国から支給される保証費用が出るので相場よりも格安でエンジニア転職できる
- 時間のない社会人でも無理なく続けられる
格安で受講できるDMM WEBCAMPのカリキュラムや詳細はこちらが参考になります！
【これ注意】DMM WEBCAMP専門技術コースは〇〇が重要！徹底解説
格安で受講できるDMM WEBCAMP COMMITの詳細はこちら
【独学で初心者からWebエンジニアを目指す学習ロードマップ】まとめ
Webエンジニアまでの学習ロードマップ
- Webエンジニアには主にフロントエンドとバックエンドがあり、どちらから勉強するか選択する
- それぞれの職種に合ったUdemy講座で勉強する
- 実際に自分で作りたいものを作って見て、更に知識を深める
まだ初心者からWebエンジニアへの学習ロードマップを見てない方はこちらから飛んでください