初心者からエンジニアになるには?

【完全ガイド】独学でWebエンジニアになるロードマップを経験者解説

今未経験(orエンジニア初心者)から独学でWebエンジニアになりたいんだけど、どうやって勉強していくのが良い?学習ロードマップを教えて!

という方向けの記事になります。  

 

記事執筆者:オザック

年収1000万超、Web開発を生業にしていて10年以上のオザックです!

某有名R社で働き、副業も含めて個人事業主で関わってきたプロジェクトは20以上。

普段エンジニアの面接もやっていて、様々な会社でテックリードをしてきました。

 

今回はそんな僕が未経験からWebエンジニアまでの学習ロードマップを紹介します!

 

3分程度で読み終わりますので、効率的にWebエンジニアまでの学習方法を知りたい方は最後まで読んでみてください。  

 

すぐにフロントエンドの勉強方法を見たい方はこちら

すぐにバックエンドの勉強方法を見たい方はこちら

 

 

Web制作の副業に興味のある方はこちら

確実に副業案件が獲得できるテックアカデミーはじめての副業コース

 

目次

初心者から独学でWebエンジニアへの学習ロードマップ

まずは結論として未経験から学習ロードマップを紹介します。  

また後ほど説明しますが、今回の学習ロードマップは未経験からビギナークラスとジュニアクラスの間くらいにはなります。  

そのレベルでエンジニアへの転職は可能です(もちろんメガベンチャーや年収600万以上とかはいきなりは難しいです)。  

 

Webエンジニアまでの学習ロードマップ

  • Webエンジニアには主にフロントエンドとバックエンドがあり、どちらから勉強するか選択する
  • それぞれの職種に合ったUdemy講座で勉強する
  • 実際に自分で作りたいものを作って見て、更に知識を深める

 

この順で勉強していくのが良いです。  

まずは勉強方法の前にエンジニアレベルの区分やフロントエンド、バックエンドについて説明していきます。  

 

Webエンジニアとは?主に3つに分類される

Webエンジニアとは昨今だと主に3つに分類されます。

Webエンジニアを3つに区分

  • フロントエンドエンジニア
  • バックエンドエンジニア(サーバサイドエンジニアとも言う)
  • インフラエンジニア

と分けられます。

 

今回はその中でも多くの割合を占める

  • フロントエンドエンジニア
  • バックエンドエンジニア

の独学勉強方法について説明していきます!

 

Webエンジニアのスキルレベル区分

大きくWebエンジニアのスキルレベルで区分を分けてみました。

 

クラス区分 内容
ビギナークラス 未経験からプログラミングスクールで勉強した人
  • for文、if文、classや関数の使い方はわかる
  • フレームワーク(FW)の基本的な機能は一度以上使っていて、使い方は調べながら使える
  • 特定の言語/FWの環境構築が出来る
  • TODOアプリのような簡単なWebアプリをゼロから調べながら作ることが出来る
ジュニアクラス エンジニア歴1~3年程度相当
  • ECサイトやSNSなど自分でゼロからFWを駆使して作ることが出来る
  • TODOアプリのような簡単なWebアプリなら2~3日程度で作成可能
  • エラーは基本的に自己解決出来る
シニアクラス エンジニア歴6年以上相当
  • コードを保守運用しやすいようにある程度クラス設計が出来る
  • 非機能要件を意識した実装ができる
  • 基本的なRDBのスキーマ設計が出来る
  • 1つの領域(フロントやバックなど)だけでなく2つ以上可能
  • エラーは殆どの場合自己解決出来る
テックリード チームリーダー相当
  • 開発手法やチームビルディングができる
  • 非機能要件をシニアクラス以上に意識した実装、設計ができる
  • インフラ面にも高度に精通している
  • 全体的なアーキテクチャを設計、構築できる

※あくまでボク個人の見解で分けています  

 

オザック
今回の学習ロードマップはこのビギナーとジュニアクラスの間程度には実装でき、且つ未経験からWebエンジニアへ転職できる学習ロードマップになります!

 

初心者はまずフロントエンドとバックエンドを選ぶ

はてな

ではまずフロントエンドとバックエンドをどちらを選ぶべきか?

 

について説明していきます。

 

フロントエンドとバックエンドの違い

フロントエンドはユーザが見たり触ったりする見た目の部分を開発していき、UI/UXを向上させることが主な業務になり、スキルの幅はバックエンドと比べると少ないです。

バックエンドはユーザが見えない、データベースの設計構築から、画面に表示するためのデータをフロントに渡したり、ユーザが入力したデータをデータベースに保存するAPIを開発するのが主な業務になり、 必要なスキルはバックエンドのプログラミング言語とある程度のインフラやフロントエンド、データベースの知識も必要になってくるため、必要なスキルの幅が広いです。
フロントエンドとバックエンドの違い参照

上記の参照のように

  • フロントエンドはユーザが触るWeb画面を作る仕事
  • バックエンドはユーザからは見えない裏側のシステムを作る仕事

ということです!

 

更に詳しく業務や年収などを知りたい方はこちらの記事がとても参考になります

フロントエンドとバックエンドの違いとは?現役エンジニアが解説  

 

フロントエンドで使用される技術

フロントエンドで使用される技術

  • HTML
  • CSS(SCSS)
  • JavaScript(TypeScript)
  • React.js(or Vue.js)

となります。

 

基本的に上記を使えればフロントエンドと言っても差し支えないです!  

 

HTML、CSSとは?

HTMLとCSSとは画面を作る骨組みとデザインを作るマークアップ言語と呼ばれるものになります。

例えば

<div class="hoge"><p>フロントエンドで使用される技術</p></div>
.hoge { background-color: orange; }

 

このようにHTML、CSSは書かれています。  

 

JavaScript(TypeScript)とは?

JavaScriptとはプログラミング言語の一つです。

主にフロントエンドで使われていて、Web画面のアニメーションやバックエンドのAPIを呼ぶときに使われます。  

またTypeScriptというのはMicrosoft社がOSSで開発しているプログラミング言語で JavaScriptに型をもたせ、

JavaScriptの欠点を補った上位互換のプログラミング言語です。  

 

オザック
昨今フロントエンドでは新しく開発されるものは殆どTypeScriptが使われるようになっています。

 

参考

JavaScriptとTypeScriptはバックエンドを開発することも可能です。

 

React.js, Vue.jsとは?

React.js, Vue.jsはSPAというWebサイトを作るためのJavaScriptのフレームワークです!

SPAとは単一のWebページで出来たWebサイトで、画面遷移は一つのページを部分的に変更することで無駄な処理を省き、直ぐに切り替わるようにしているツールになります。
フロントエンドとバックエンドの違い参照

  昨今はモダンなWeb開発現場ではReactかVueで開発されている事が殆どです。

 

またReactの方がTypeScriptとの相性がよくVue.jsよりも人気です。   なのでもしフロントエンドを目指す場合は

  • HTML
  • CSS(SCSS)
  • JavaScript
  • TypeScript
  • React.js or Vue.js

  これらの技術を使える様になる必要があります。  

 

バックエンドで使用される技術

バックエンドは冒頭で述べた通り、幅広い知識が必要になります。

 

 

必要なスキル

  • バックエンドのプログラミング言語
  • データベースの設計・運
  • インフラの多少の仕組みの知識
  • CI/CDなどDevOpsの構築・設計
  • 多少フロントエンドの知識

となります。

 

バックエンドはAPIというプログラムを開発することが主な仕事で、その仕事ではフロントやインフラ、データベースに関わることが多くなります。

 

なので必然的にフロントエンド、インフラもどちらも多少の知識を備えている必要が出てきます。

 

バックエンドのプログラミング言語は有名なのだと

  • Java(Kotlin)
  • PHP
  • Ruby
  • Go
  • Rust
  • TypeScript(JavaScript)

などになります。

 

フロントエンドとバックエンドをどのように選ぶべきか?

ではどのように選ぶべきか?について説明していきます。

 

注意ポイント

「あくまで最初のキャリアにどちらを選ぶべきか?」という話なので、決めたら今後のキャリアパスで変更できないと言う訳ではないです!

勉強すれば変更は可能です!

 

Webエンジニアへ転職したい人はフロントエンド、バックエンドどちらでも良いが、バックエンドの方がおすすめ

Webエンジニアへ転職したいと思っている人は フロントエンドでもバックエンドでもどちらでも良いです!

オザック
理由はどちらでも異業種からWebエンジニアへ転職することは可能だからです。

ただバックエンドの方がおすすめではあります

 

理由は

  • Webの全体的な構造を学べて、1人でWebアプリを作れるようになる
  • CTOやテックリードなど重役は大抵の場合バックエンドの人になる
  • 初学者が勉強しやすい(プログラミングスクールでもバックエンド中心に教えている)
  • バックエンドの経験があればフロントエンドも覚えるのが難しくない

という点です。  

 

なので迷っている場合はとりあえずバックエンドを勉強していくことを勧めます!

 

補足

後でフロントエンドに変更したり、バックエンドが出来るようになってからフロントエンドも勉強するというのは全然出来ます!

Webの根幹を担うバックエンド開発は後々にエンジニアに転職しても必ず活きてきます!

 

自分のサービスを開発したい人、一般教養としてWeb開発を学びたい人はバックエンドが良い

オザック
自分のサービスを作りたい、教養としてWeb開発を身に着けたい人はバックエンドにすべきです!

 

理由は1人でWebアプリを作れるようになるからです! フロントエンドが出来ても画面しか開発出来ないので、

  • Webアプリを公開
  • ユーザなどのデータをデータベースへ保存

などは出来ないですし、上記のことはほぼ間違いなくWebアプリでは必須です。

これはバックエンド開発側の仕事になるため、バックエンドの知識が必要です!  

 

なので起業してWebアプリを開発したい人はまずバックエンドを覚えるべきです!

 

注意ポイント

ただこの場合バックエンド開発は画面を作るためのHTML、CSS(SCSS)は覚える必要があります。

HTML、CSS(SCSS)はマークアップ言語であり、プログラミング言語ではないので覚えるのはそこまで難しくなく初心者でも独学で容易に出来るでしょう!

 

【独学】初心者からフロントエンドを目指す学習ロードマップ

ではまずフロントエンドの学習ロードマップから解説していきます。

 

フロントエンドの学習ロードマップ

  • HTML, CSS,JavaScriptをUdemy講座で勉強する
  • React or VueのどちらかをUdemy講座で勉強する
  • 勉強した知識を活かして自分で考えたサービス(就活する人はポートフォリオ)を作ってみる

 

独学でWebエンジニアになる場合Udemyをおすすめする理由

まずUdemy講座をおすすめする理由は以下になります。

 

Udemyのメリット

  • Progateはゼロから自分のパソコンで環境構築しないので実践的でない
  • 誰でも手の届く値段で安い
  • 動画なので本よりもわかりやすい
  • 何度でもわからないところは見直し出来る
  • 講師に質問することが出来る

という理由からUdemy講座をおすすめしています!

 

オザック
僕自身機械学習やAWS SAAを取得するためにUdemyの講座で勉強しました。

 

注意ポイント

実践の現場では自分のパソコンで開発環境を構築して実装していきます。

また自分でサービスを作るときも同様で、開発環境を構築する必要があります。

その点Progateは開発環境を構築せずにプログラミング言語を学ぶということにフォーカスしていて、

初心者が最初に詰まる環境構築がないので、結局学んだ所であまり活かせないので、Progateはおすすめしていません。

 

なので環境構築も一緒に勉強できるUdemyの方をおすすめしています!

 

フロントエンドの勉強方法

各技術ごとにフロントエンドの勉強方法を紹介します!

 

HTMLとCSSの勉強方法

ベストセラーの講座です!9600円とスクールよりも全然安いです!

HTML,CSS,JavaScriptをマスターするUdemy講座

30日間返金保証、セールがやっていることもあるので必ず確認しましょう!

この講座は

  • ベストセラー講座
  • 環境構築から解説がある
  • プログラムを書くエディターから解説している
  • HTML、CSS、JavaScriptの実践的な書き方もハンズオンで学べる
  • Webサイトを公開する手順もハンズオンで解説している

というメリットが有り、初心者にはオススメです!  

 

  一応僕のHTML、CSSの勉強方法も紹介すると、 僕の時代はUdemyとかは流行っておらず本で勉強するしかなかったので以下の本で勉強しました。

動画のほうが圧倒的にわかりやすいので、Udemyの方をおすすめします。  

 

React.jsのVue.js勉強方法

では続いてJavaScriptのフレームワークのReactとVueの勉強方法を紹介します。  

 

React.jsの勉強方法

ベストセラー講座です!4200円とUdemyの中でもかなり安い方なのでお得です!

UdemyでReactを勉強する

30日間返金保証、セールがやっていることもあるので必ず確認しましょう!

この講座は

  • ベストセラー講座
  • JavaScriptの基本も解説している
  • Reactをゼロから解説していることはもちろんモダンなReactの機能を解説している

の点がオススメです!  

 

オザック
特に値段は他のUdemy講座と比べても安いのでフロントエンドを目指している方はかなりおすすめの講座です!  

 

Vue.jsの勉強方法

ベストセラー講座です!こちらも1万円とUdemy講座の中でも安いです

UdemyでVue.jsを勉強する

30日間返金保証、セールがやっていることもあるので必ず確認しましょう!

こちらの講座は

  • Vue.jsのフレームワークのNuxtを覚えられる
  • 環境構築の基礎から学びバックエンド(Firebase)も含めたWebアプリを開発出来るようになる

のがおすすめポイントです。

 

参考

NuxtとはVue.jsのフレームワークで、Webアプリを開発する上でVue.jsだと手間な部分をまとめて機能として提供してくれるため、

基本的にWebアプリを作る会社でVueが使われている場合はNuxtをまず使っているケースが多いです!

 

【独学】初心者からバックエンドを目指す学習ロードマップ

次に未経験からバックエンドを目指すための学習ロードマップについて説明していきます。

 

バックエンドの学習ロードマップ

  • 勉強するプログラミング言語を選択する(Ruby or PHP or Python)
  • それぞれの言語をUdemy講座で勉強する
  • それと同時にデータベースについても勉強する
  • インターネットにデプロイ(インターネットに公開する)する方法を勉強し公開する(就活で使うポートフォリオは基本的に公開することになります)
  • 勉強した知識を活かして自分で考えたサービス(就活する人はポートフォリオ)をゼロから作ってみる

 

詳しくはこちらが参考になります

未経験から中級者になれるバックエンドエンジニアの学習ロードマップ

 

バックエンドで必要なスキル

まずバックエンドで必要なスキルは

バックエンドで必要なスキル

  • バックエンドのプログラミング言語を実装
  • データベースのテーブル構築
  • (HTML、CSS)
  • (インフラ構築)←最低限で大丈夫

※上記の括弧書きは初学者ならなくても大丈夫だが、あると望ましいというレベルのスキルになります

 

バックエンドにおすすめのプログラミング言語

おすすめプログラミング言語

  • PHP
  • Ruby
  • Python

になります。

 

理由は

  • 動的型付け言語で初心者が学ぶのに比較的簡単なプログラミング言語
  • 日本語のドキュメントが豊富

などになります。

 

 

詳しくはこちらの記事がとても参考になります

バックエンドにおすすめの言語と勉強法

 

バックエンドの勉強方法

オザック
バックエンドの勉強方法は各言語ごとにこちらがとても参考になるので、バックエンドを目指す方は参考にしたほうが良いです!

【実践レベル】バックエンドエンジニア特化スクール厳選2選!勉強法も解説

 

おまけ: 初心者からWebエンジニアへ転職するためにはデータベース設計は多少わかっていれば良い

データベースというのはユーザが保存したデータを格納しておくサーバになります。

例えばアマゾンだとユーザの配送先やメールアドレス、名前などが多くのものがデータベースに保存されています。

 

このデータベースですが実は勉強するとかなり奥が深いです!

 

なので初心者はまずは最低限

  • テーブルを作ることが出来る(フレームワーク経由でもOK)
  • primary keyをつける意味がわかり、実際に付けることが出来る
  • foreign keyを付ける意味がわかり、実際に付けることが出来る

あたりが出来れば問題ないです!

 

オザック
Webエンジニアへ転職してもっと非機能要件の部分まで出来るようになると良いでしょう!

 

 

参考

非機能要件とは機能とは関係のない要件のことを指します。

例えば「ユーザがサイトに訪れてからサイトが表示するまでの時間を短くする」といったことがそれに当たります。

 

インフラはクラウドなどでポートフォリオをインターネットに公開出来れば良い

インフラとは自分でプログラムを書いて作ったWebサイトをインターネットに公開するサーバのことを指します。

 

インフラを構築し、自分のプログラムをアップロードすることでインターネットに公開されます。

 

ただ初心者にとっては結構難しい部分になり、また多くのバックエンドエンジニアと名乗っている人がインフラは出来ないという人もいます。

 

オザック
(自分はAWS SAAなどの資格も持っているのでよく構築・運用します)が、インフラを勉強するにはある程度の時間と多少のお金がかかります

 

なので最低限ポートフォリオをインターネットに公開できるレベルの知識は持っておくだけで良いです!

 

独学で初心者から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エンジニアへの学習ロードマップを見てない方はこちらから飛んでください

フロントエンドの学習ロードマップ

バックエンドの学習ロードマップ

 

-初心者からエンジニアになるには?

© 2022 プログラミング×エンジニア副業道場 Powered by AFFINGER5