中堅Webエンジニアがオススメする独学でエンジニアになる具体的な勉強法

中堅Webエンジニアがオススメする独学でエンジニアになる具体的な勉強法

こんにちは。年収1000万の中堅エンジニアのrevenue-hackです。

今日は実際にWebエンジニアは独学でなれるのかという話を、

実際に僕がエンジニアになるためにやったことや経験したことを交えて、

未経験からWebエンジニアへの道を紹介していきたいと思います。

未経験の頃の僕は?

僕は理系の大学に在学していて、そこからWebエンジニアになりました。

皆さんは理系というと元々プログラミングができたと思う人も多いのかもしれないですが、

それは全くの誤解です。

僕は全く出来なかったです。

大学の授業でプログラミングはありましたが、全く聞いておらず友達に課題をやってもらう始末、、、

そんなレベルだったので僕は大学3年生の後期の時点でprintfが書けるだけでしたw

そこから研究で少しプログラミングを使うようになり、if文for文程度は書けるように成りました。

そんな状態から僕は7年経って年収1000万にたどり着きます。

後の詳しい話はこちらに書いていますので読んでみてください。

独学でWebエンジニアになれるのか?

そんな僕でも出来たので、これを読んでいる方もWebエンジニアに成ることが出来ます。

ただ独学でWebエンジニアになれるかというと、どこまでを目指すかによりますが、年収1000万円はまず無理です。

ただ独学で勉強して、どこかの会社にWebエンジニアとして就職するまでは可能だと思います。

なので、今回は独学でWebエンジニアの会社に最初に就職するまでのプロセスをどのように勉強するのが良いのかについて話していきます。

そもそもWebエンジニアの仕事とは何をするのか?

Webエンジニアになるための勉強方法について話す前に、

まずはWebエンジニアの仕事とはどのような仕事なのかについて話します。

Webエンジニアは大まかに3種類に分かれる

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

この3種類に主に別れています。

多くの人はフロントエンドかバックエンドになると思います。

今回はフロントエンドとバックエンドについて説明していきます。

フロントエンドエンジニアとは?

フロントエンドエンジニアとは簡単に言うとWebサイトの画面を担当するエンジニアのことです。

必要なスキルとしては詳しくは後述しますが、

  • HTML
  • CSS
  • JavaScript(JS)
  • (デザイン)

となります。

今日のフロントエンドだとReact.js, Vue.jsなどのシングルアプリケーション(SPA)を作るためのフレームワークが流行っていたりします。

今回はこの辺の難しい話はまたどこかでするとして割愛します。

バックエンドエンジニアとは?

バックエンドエンジニアとはWebサイトの裏側を担当するエンジニアになります。

主にデータベースにデータを入れたり、データを取ったりしてそれをフロントに表示する役割を担っています。

バックエンド言語で有名なのだと

  • PHP
  • Ruby
  • Go
  • Node.js
  • Java

などがあります。

Webエンジニアになれる条件はあるの?

素質という意味では特にないと思っています。

実際に全然大学時代勉強してこなかった僕でもなれているので、素質というものは関係ないと思います。

「Webエンジニアになれる」ことを「Webエンジニアとして就職できる」と置き換えると、昨今だとポートフォリオはある程度必須のようです

実際に僕もWebサイトではないですが、家計簿Androidアプリを開発して、それをポートフォリオとして就活しました。

なのでWebエンジニアを目指すのであれば何かしらのプログラミング言語を書けるようにして、ポートフォリオを作って就活すると良いと思います。

独学でWebエンジニアになるオススメの勉強法とは?

では本題に入ります。

僕自身はWebエンジニアになるにあたって幸いすでにアルバイトとして仕事していましたが、

そこから実際にやったオススメの勉強法をご紹介します。

これは独学で勉強する際にも役立つ方法です。

エンジニアリングを勉強の前にまずはエディター選定

まずコードを書くためのエディターを選定する必要があります。

エディターを制するものはプログラミングを制すると言っても過言ではないのでとても重要な話になります。

詳しくは別の記事になりますが、簡単に触れておくと、

  • VS Code
  • Vim
  • Sublime Text
  • IntelliJ

これらがよく使われるエディターになります。

VS Codeは昨今かなり人気で最もエンジニア使うエディターと言っても過言ではないかもしれないです。中級エンジニアから初心者まで使っている印象です。

こちらはマイクロソフト製のエディターで言語を書く時の補助となるプラグインをインストールするだけで簡単に使える様になるため人気を博しています。

Vimはこのようなよくエンジニアと言われて想像するような黒い画面のエディターになります。

Vimエディター

Vimは結構ギークな人に人気で、カスタマイズ性が高いです。

ただ初心者にはあまりオススメしないです。最初にうちは少しカスタマイズするのにあらゆることを覚えたり、設定しないといけないです。

Sublime Textもいっとき人気で初心者にもおすすめです。ただ昔Sublimeを使っていたユーザはほとんどVS Codeに移ってしまったように思います。

IntelliJはJetbrainsが開発している人気のエディターになります。簡単にプラグインのインストールも出来て便利ですが、フリーで OSS な Community 版と、有償の Ultimate 版があります。

色々と紹介しましたが、最初はVS Codeが良いと思います。

HTML、CSSを覚える

HTML、CSSとは?

HTML、CSS勉強法の前にそれぞれどういう役割かさらっと触れておきます。

HTMLとはHyperText Markup Languageの略で、こちらは実はプログラミング言語ではなく、マークアップ言語と言われるものになります。

なので基本的なことを覚えるにはそこまで難しくないです。

HTMLはWebサイトのパーツを作るためのものになります。

例えばWebサイトに有るお問い合わせフォームのボタン一つも一つのパーツであり、HTMLで出来ています。

CSSはCascading Style Sheetsと言われるもので、HTMLで作ったパーツにデザインを当てるものになります。

独学でHTML、CSSを勉強するには?

HTML、CSS自体は僕はこの本を使って覚えました。

全部を丁寧にやるというよりは、サンプルを写経しながら覚えて、最後の方に0から自分で作るための練習問題があるので、それをちゃんとできるようになると一旦OKです。

また補助的にドットインストールを使っていました。

こちらはエンジニアの人がちゃんと編集した動画で要点がまとまっているので、とても勉強になります。

またエディターを決めていない人や、特にこだわりのものがなければJS Binというものがとても役に立ちます。

マークアップの補完がされて、書いたコードは即時反映されて、且つ保存しておくことが可能となります。

一つ以上の言語・フレームワークを覚える

ここからはプログラミングの領域になります。

フレームワークとは?

プログラミング言語はわかるけどフレームワークって何?という人のために

簡単に解説します。

フレームワークとはWebサイトを特定の言語で簡単に作るためのキットです。

Webサイトを作る際に、よく使われる機能を特定のプログラミング言語で実装してくれて、提供してくれるキットです。

そのため殆どの場合、Webサイトを作るときはフレームワークを使います。

初心者が最初にやると良いプログラミング言語とフレームワークとは?

ポートフォリオを作るためには一つの言語、フレームワークをある程度できる必要があります。

一番覚えやすい言語で、且つフレームワークが優秀なものから覚えていくのが良いと思います。

そうすると大体以下の2つに絞られます。

  • Laravel(PHP言語)
  • Ruby On Rails(Ruby言語)

就活観点でもどちらも人気のフレームワークになるのでどちらでも良いと思います。

また色々なスクールでもどちらも教えているケースは多いです。理由は初心者に簡単なためです。

勉強方法としては

  • チュートリアルをやってみる
  • TODOサイトを作ってみる

最初はこれで良いと思います。

LaravelだとこのQiitaに書かれているのが良さそうです。

https://qiita.com/sano1202/items/6021856b70e4f8d3dc3d

Ruby On Railsだと公式で出ているのでこちらが良いです。

https://railstutorial.jp/

チュートリアルを終えた後は、

TODOサイトを作ってみると良いでしょう。

Laravelだと

https://www.hypertextcandy.com/laravel-tutorial-todo-app-list-folders

Ruby On Railsは公式のチュートリアルにサンプルアプリケーション開発の項目があるので、TODOアプリケーションはそれのおまけくらいでやると良いです。

https://qiita.com/tosite0345/items/ec5a238ef09bc6996098

Git, CommandLineTool(CLI)を学ぶ

Gitとは?

Gitとはプログラムのコードをバージョン管理するためのツールです。

こちらがわかりやすいです。

https://backlog.com/ja/git-tutorial/

CLIとは?

CLIとはコマンドを使ってパソコンに命令を出すツールになります。

よく皆さんがエンジニアといえば想像する画面上で使うコマンドがそれに当たります。

こんな感じのやつですね。

これはこのくらい画面でコマンドを打って、コンピュータに命令を送っていて、実はみなさんが何気なく行っている、アイコンをダブルクリックしてソフトを開くなども実は裏ではコマンドが実行されているのです。

今回は話が難しくなるので深く話さないですが、

Gitを使うにもGUIとCLIの2つの使い方があります、出来ればCLIでやることをオススメします。

理由はCLIは今後幾度となく使っていく基本となりますので、CLIに慣れるためにもGitはCLIで使っていくのをオススメします。

ここまででも結構初めてやるにはつまりポイントがたくさん出てくると思うので、めげずに努力できる必要があります。

がそういう大変なことは辛い、有識者に教えてほしい、

そういう方はスクールに行くかMENTAなどのサービスを使って有識者に質問できる環境で学んでいくのが良いです。

MENTAとは有識者がメンターとなって、スポットでわからないことを聞けるサービスとなっています。スクールと比べるとお手軽です。

ただスクールと違う点は体系的には教えてくれないです(もしかしたら教えてくれるプランを出しているメンターもいるかもですが)。

良いスクールの選び方は?

スクールを選ぶ際に気になるのがホントにできるようになるのか?ということですよね。

実際僕自身はスクールに行ったことがないので、ここからは実体験ではなくなりますが、こういう職業をしていると嫌でもエンジニア界隈の情報がいっぱい入ってきます。

それの情報を元に酸いも甘いもあるのでご紹介します。

Progate

URLhttps://prog-8.com/
おすすめ度(最大: 星5)★★★★
値段980円/月
メンターなし
技術のカバー範囲豊富

理由としては何より安いという点が一番でかいです。

なにかの職業をやりながらエンジニアを目指す場合、問題は持続力になります。

どれだけプログラミングに時間を割けるかはとても重要です、ただ途中で挫折するリスクを考えると値段というのはとても重要なファクトとなるので、安いに越したことはないです。

またもう一点オススメする点としては技術のカバー範囲が豊富なことです。

前の章で書いた内容だとバックエンドとフロントの基礎的なHTML、CSSのみとなり、モダンなフロントエンドの部分はカバーできてないです。

ただこのProgateはReactをカバーしています。

僕の今の知っているエンジニア市場だとReactはかなり需要があり、どこの会社の人に聞いても最近はReactのエンジニアを探している印象です。

その点をカバーしているProgateは良いと思います。

デメリットを上げるとすると、メンターがいないので、困った時に最悪聞けるメンターがいないことかなと思います。

そこはTwitterで聞くなり、MENTAのサービスでメンターを探すなりしても良いかもしれないです。

一応僕の知り合いの非エンジニアがProgateを昔使っていて、エラーで詰まってもすぐに解決できるような仕組みになっていると聞いたことがあります。

テックアカデミー

URLhttps://techacademy.jp/
おすすめ度(最大: 星5)★★★★
値段159000円
メンターあり
技術のカバー範囲豊富

エンジニアスクールではかなり大手になるかと思います。

こちらの魅力は

  • 現役エンジニアがメンターとして教えてくれる
  • 転職サポートしてくれる

などかなと思います。

Progateとは違い現役のエンジニアの方にわからないことをサポートしてくれる環境というのはなかなか得られないものです。

そういう点はかなり魅力的かなと思います。

また金額も相場と比べると安い方かなと思います。

さらにテックアカデミーの魅力について知りたい方はこちらの記事に詳しく書いてあります。

ただデメリットとしては集中した期間でやるため社会人には難しいことなどがあります。

とはいえ本気でエンジニアを目指すなら集中した期間でやるということが可能であれば絶対にそちらのほうが良いと思います。

コードキャンプ

URLhttps://codecamp.jp/
おすすめ度(最大: 星5)★★★★
値段148000円~298000円
メンターあり
技術のカバー範囲少ない

魅力は

  • 現役エンジニアによるサポート
  • メンターの厳選な先行を行っているので、メンターのレベルが高い

になります。

メンターのレベルが高いのはとても魅力的です。実際に現場を長く経験しているということは、Web開発で必要な要素を知っているので、受講者の不足していることや、現場に通用するレベルまで後どの程度かを知っているので、そういう助言はとても受講者からするととてもありがたいものです。

デメリットとしては入学金があることや転職サポートを行っていないこと、技術のカバー範囲が少ないことです。

ただ技術範囲が少ないことは、Web開発をマスターすれば後は就職後などにでも一人で新しいことを学ぶことは全然当たり前にやっていくことなので、そこまでは問題にならないと思います。

総括すると現場のWeb開発しっかり学びたい人向けになります。

まとめ

今回は現役のエンジニア目線で独学でWebエンジニアになる方法を話しました。

ただ紹介した内容をやったからと言って必ず望む結果になるとはわかりません。

昨今エンジニアになりたい方が増えて、入社のハードルも上がっているのも事実なので、本気でエンジニアになりたいと思うのであれば、本気で取り組むことをオススメします。

エンジニアの勉強・経験カテゴリの最新記事