ネットでWebエンジニアになる方法を調べても欲しい情報が手に入らなかったり、情報が多すぎて何が正解なのか迷ってしまっていないでしょうか？
本記事では、「Webエンジニアになるための手順を教えてほしい」「未経験からWebエンジニアになる方法が知りたい」といった悩みを持つあなたに向けて、未経験から独学でWebエンジニアになる方法をご紹介します。
下記5つのステップに分けて詳しくお伝えするので、ぜひ最後までご覧ください。
STEP1. フロントエンドとバックエンドのどちらかを選ぶ
Webエンジニアの仕事内容は、大きく分けてフロントエンドとバックエンドに分類されます。
フロントエンドとは、WebサイトやWebアプリケーションなど、ユーザーの目に直接触れる部分を指します。例えば、WebサイトやWebアプリケーションの見た目そのものや、文字を入力したりボタンをクリックする部分をフロントエンドと呼びます。
次にバックエンドとは、Webサーバーやデータベースなど、ユーザーの目に見えない部分を指します。ECサイトを例にすると、ログイン機能や検索フォームの実装、商品をカゴに入れてから購入するまでの一連の処理がバックエンドの範囲になります。
未経験からWebエンジニアを目指す人は、フロントエンドかバックエンドのどちらかを選びましょう。
フロントエンドとバックエンドでは、使用するプログラミング言語や仕事内容が大きく異なります。フロントエンドとバックエンド両方の勉強を一緒に行うと、覚えることが多くて挫折してしまうかもしれません。
どちらを選べばいいか悩んでいる人は、後ほど紹介するフロントエンドとバックエンドそれぞれに必要なスキルを勉強して、自分の適性に合ったほうを選ぶのも1つの手段です。
STEP2. Webエンジニアに必須な言語を身につける
フロントエンドとバックエンドのどちらでも身につけるべき言語が3つありますのでご紹介します。
- HTML&CSS
- JavaScript
HTML & CSS
HTML（エイチティーエムエル）は、Webサイトに表示する文字や画像、レイアウトなどの構造を定義するマークアップ言語です。
マークアップとは、タグを使ってテキストが何を示しているのか（段落・タイトル・リストなど）を、コンピュータが認識できるようにすることです。
下記はHTMLの一例です。段落を意味するpタグを使い、pタグに囲まれている文章を表示します。
ブラウザで見てみると、「ここに文章が入ります。」と表示されました。
次にCSS（シーエスエス）についてご紹介します。CSSは、HTMLで作った文章構造に装飾を加えて見た目を整えます。
CSSで実装できる装飾の具体例です。
- 文字色やサイズの変更
- レイアウトの変更
- グラデーションや影をつける
- 余白の調整
他にもアニメーションや、モバイル端末に対応したレスポンシブデザインの実装などが挙げられます。
下記はCSSの一例です。先ほど紹介したソースコードにCSSを記述し、pタグに背景色の追加と文字のデザインを変更します。
ブラウザで見てみると、背景に色がつき文字のデザインが変わりました。
Webサイトを制作するためにHTMLとCSSは必要不可欠です。HTMLで文章構造を定義し、CSSで装飾していくのが基本的な流れになるので、HTMLとCSSは一緒に勉強してください。
JavaScript
JavaScript（ジャバスクリプト）はブラウザ側で動くプログラミング言語で、動的なWebサイトが作れます。
JavaScriptで実装できる具体例です。
- 画面上に別の小さい画面を表示するポップアップ
- カウントダウンタイマー
- お問い合わせフォームの入力チェック
JavaScriptの実装例を見てみましょう。先ほど紹介したソースコードに、「Hello World!」と書かれたポップアップが表示されるコードを追記します。
ブラウザで見てみると、Webサイトが読み込まれたタイミングでポップアップが出現します。
JavaScriptは世界で最も人気があるプログラミング言語です。Webサイトだけではなく、Webアプリケーションの開発でも使われており、今後も需要が伸びる言語の一つです。
Webサイト制作に必要なHTMLとCSSを学んだ後は、JavaScriptのスキル習得に挑戦してみてください。
参考：「JavaScript」が首位維持、「Rust」のコミュニティ急成長–SlashData開発者調査
フロントエンドエンジニアに必要なスキル
フロントエンドの分野で働くWebエンジニアをフロントエンドエンジニアと呼びます。フロントエンドエンジニアとして活躍するために必要なスキルを2つご紹介します。
- jQuery
- Vue.js
- React.js
jQuery
jQuery（ジェイクエリー）とは、JavaScriptをより扱いやすくしたファイルの名称で、JavaScriptライブラリに分類されます。
例えば、「複数の画像を使用したスライドショー」「タブがクリックされるとコンテンツ内容が切り替わる」といった動きをJavaScriptで実装すると何十行も書くことになります。しかし、jQueryなら数行書くだけで実装可能です。
jQueryはJavaScriptよりも書くソースコードが少ないので、作業時間の軽減や、ソースコードの可読性を高めます。
スライドショーを実装するslickや、おもしろいアニメーションを実現させるCSShakeなど、jQueryは多種多様に存在するので興味がある人は探してみてください。
Vue.js
Vue.js（ヴュー・ジェイエス）とは、JavaScriptの機能を独自のルールに従って使えるようにまとめたフレームワークで、SPA開発の時によく使われています。
SPA（シングルページアプリケーション）とは、単一ページでコンテンツの切り替えができるWebアプリケーションです。サーバーとの通信量を減らし、Webサイト全体の表示速度を向上させます。
また、Vue.jsはHTMLベースのテンプレート構文を採用しているので、HTMLやJavaScript、jQueryを勉強した人は理解がしやすいように設計されています。
Vue.jsのサンプルを見てみたい人は、こちらから確認してみてください。
React.js
React.js（リアクトジェイエス）とはFaceBook社が開発した、UI（ユーザーインターフェース）の制作に特化しているライブラリです。
UIとは、ユーザーとサービスのインターフェース（接点）を指します。Webサイトであれば、デザインや文字フォント、ボタンといったユーザーの目に触れる外観をUIと呼びます。
React.jsはUIの部品に対し「こういった見た目になる」と宣言した形で実装できるので、理解しやすいソースコードになっているのが大きな特徴です。結果として、エラーの早期発見やテストの簡易化に繋がっています。
React.jsがどういったライブラリか気になるあなたは、こちらから確認して見てください。
バックエンドエンジニアに必要なスキル
バックエンドの分野で働くWebエンジニアをバックエンドエンジニアと呼びます。バックエンドエンジニアとして活躍するために必要なスキルを2つご紹介します。
- PHP
- MySQL
- Laravel
- Ruby
- Ruby on Rails
PHP
PHP（ピーエイチピー）はサーバー上で動くスクリプト言語で、動的なWebサイトを作るのに役立ちます。スクリプト言語とは、プログラミング言語の一種であり、ソースコードの記述や実行処理が比較的簡単に行える言語を指します。
PHPで実装できる具体例です。
- お問い合わせフォーム
- 予約システム
- ログイン機能
- 検索機能
PHPはMySQLなどのデータベースとの連携が容易なため、Webアプリケーションの開発に使われています。Webサイトの管理を簡単にするCMS（コンテンツマネジメントシステム）の代表格であるWordPressが一例です。
また、世界中にあるWebサイトの約78%がPHPで開発されています。そのため、利用者が多くソースコードのサンプルや解説などの情報が豊富で、未経験者でも学びやすいのが特徴です。
参考：Historical trends in the usage statistics of server-side programming languages for websites
MySQL
MySQL（マイエスキューエル）とは、世界中で使われているデータベース管理システムです。
ECサイトを例に、データベースについて説明します。ECサイトの場合、商品の名前や価格、発売日といった商品にまつわる情報がデータベースに格納されています。そして、ECサイト上でキーワード検索による絞り込みや、指定した条件による商品の並び替えが可能です。
データベースは必要な時に必要なデータを取り出せるように、整理してデータを格納しているのが大きな特徴です。また、データベースを操作するにはSQL（エスキューエル）と呼ばれる言語を使います。
Laravel
Laravel（ララベル）は、開発時によく使われるプログラムの雛形やシステム開発を効率的にしている機能がまとまっているPHPのフレームワークです。
LaravelはPHPフレームワークの中でも圧倒的な人気を誇り、Googleトレンドで見てみると、他のフレームワークに比べてLaravelの注目度の高さがわかります。
また、Laravelは実装する際の規約が少ないので自由度が高く、Laravelが自動生成したソースコードの修正や追加が可能です。
Ruby
Ruby（ルビー）は、日本で開発されたオブジェクト指向型のスクリプト言語で、Webアプリ開発やWeb制作で使われています。オブジェクト指向とは「様々なパーツを組み合わせてプログラムを組んでいく」といった概念になります。
Rubyは、ソースコードがシンプルで分かりやすいのが特徴です。具体例として、C言語とRubyそれぞれで「Hello World!」を出力するコードを書いてみます。
下記はC言語です。
次にRubyになります。
上記のようにRubyの文法は比較的容易なので、プログラミング未経験者でも習得しやすい言語と言えます。
Ruby on Rails
Ruby on Rails（ルビーオンレイルズ）は、Rubyを用いて開発されたWebアプリ開発用のフレームワークです。WebサイトやECサイト、SNSや業務システム開発といったあらゆる場面で活躍しています。Ruby on Railsで作られたサービスは数多く存在し、Twitterやクックパッド、GitHubが一例です。
Ruby案件の多くはRuby on Railsを使用した案件になるので、Rubyの勉強を考えているあなたは、Ruby on Railsも一緒に習得しましょう。
独学でプログラミングを身につけるには
プログラミングの習得を考えたとき、まず独学でやってみようと考えているあなた。独学方法は書籍やWebサイト、ブログなどさまざまですが、今回は動画教材を活用した勉強方法をお伝えします。
Udemyなどの動画教材を活用する
プログラミングに関する動画教材は、講師がプログラミングの画面を写しながら解説してくれます。受講者は動画を見ながら、自分のパソコンでプログラミングが可能です。
プログラミングの知識を身につけるために、参考書や資料を読むのも大切ですが、実際に手を動かしながらプログラミングを行ったほうがスキル習得が早くなるでしょう。
また、スマホやパソコンがあれば受講できるため、自分の好きなタイミングや場所で勉強できます。
プログラミングの相談ならMENTAがおすすめ
動画教材を使ってプログラミングの勉強を始めてみたけれど「分からないことが出てきてしまった」「不具合やエラーが解決できない」「自分で書いたソースコードに自信がない」など、心が折れそうになっている人もいるのではないでしょうか。
iOSエンジニア専門スクールを運営するinit株式会社が発表したデータによると、プログラミングを学習する人のうち9割が挫折した経験があると言われています。
また、プログラミング学習が辛いと感じないために必要なことは「不明点を気軽に聞ける環境（43%）」が4割を占め、次いで「プログラミング学習が楽しいと思える環境（16%）」「自分に合ったカリキュラム内容（10%）」という結果になりました。
引用：プログラミング学習者は約9割が挫折を経験｜挫折しないカギは「不明点を気軽に聞ける環境」
独学でプログラミングを勉強をしてつまずいた時、誰かに相談できる環境があると挫折しにくいことが明らかになりました。しかし、近くに相談できるエンジニアがいない人も多いのではないでしょうか。
そんなあなたには、独学をサポートしてくれるMENTAがおすすめです。
MENTAとは、「教えたい人（メンター）」と「学びたい人（メンティー）」をオンラインでつなげるサービスで、メンターにはエンジニアやデザイナー、クリエイターなどが在籍しています。
マンツーマンで指導してもらえるので、分からないことが出てきてもすぐに質問できます。単発契約は1,000円から、月額契約は3,000円から利用できるので、気になる人はぜひ試してみてください。
STEP3. 軽い案件から実務経験を積む
未経験者は簡単な案件から実務経験を積むことをおすすめします。
最初から自分のレベルより遥かに高い案件を受けてしまうと、挫折する可能性が高くなります。また、未経験者よりも即戦力となる経験者を求める企業が多いのも現状です。
後ほど紹介するクラウドソーシングやフリーランスエージェントを活用し、未経験者や初心者向けの案件をこなしてみてください。初めは単価が安いかもしれませんが、経験を重ねることでWebエンジニアとしてのスキルが身につきます。そうすれば高単価の案件や、今よりもレベルの高い仕事を受注できるようになるでしょう。
クラウドソーシング
クラウドソーシングとは、インターネット上で企業や個人が不特定多数の人に業務を発注する業務形態のことです。未経験者や初心者向けの案件を取り扱っているので、まずはクラウドソーシングで実績を積んでいきます。
国内最大級のクラウドソーシングサービスであるクラウドワークスやランサーズは、システム開発やWeb制作など、Webエンジニア向けの案件が豊富です。無料で使えるサービスなので、どんな案件があるか実際に調べてみてください。
インターンで企業に入る
インターンで企業に入り、働きながらWebエンジニアとしてのスキルを身につけるのも1つの手段です。
実際の現場で働くことで、Webエンジニアの仕事や働き方を体感できます。自分が本当にWebエンジニアとしての適性があるのか判断できるのも、インターンに参加するメリットになります。
また、気になる企業のインターンに参加した場合、働いている人の雰囲気や社風、仕事の取り組み方などが分かるので入社後のミスマッチ防止にも役立ちます。
JEEKやWantedly、リクナビなど活用し、あなたの希望に合った企業を探してみてください。
フリーランスエージェント
フリーランスエージェントとは、フリーランスのエンジニアやWebデザイナーを対象に、個々のスキルや希望にあった案件を紹介するサービスです。
案件紹介以外にも、契約関連の事務処理代行やクライアントへの単価交渉、キャリア相談などさまざまなサービスを展開しています。時間のかかる事務作業を担ってくれるので、あなたは仕事だけに専念できます。
フリーランスエージェントはポテパンフリーランスやITプロパートナーズ、レバテックフリーランスなど種類も豊富で、扱っている案件やサービス内容もまったく異なります。ぜひ、あなたに合ったフリーランスエージェントを探してみてください。
STEP4. ポートフォリオを作成する
ポートフォリオとは、Webエンジニアとしてのスキルや能力を証明するための作品集です。
未経験Webエンジニアが仕事を獲得する場合、ポートフォリオは必須です。特に未経験者は実務経験が無いので、ポートフォリオでWebエンジニアとしての能力を伝えなければ、他のライバルたちに負けてしまうかもしれません。
また、Webエンジニアの転職活動において、ポートフォリオの提出を求める企業が増えています。ポートフォリオは履歴書や職務経歴書、面接では伝えきれないスキルや能力をアピールするのに役立ちます。
最初から完璧なポートフォリオを作るのは難しいので、ブラッシュアップを繰り返しながら、オリジナリティ溢れるポートフォリオを作りましょう。
ポートフォリオを作るならGitHubで作ろう
Webエンジニアのポートフォリオは、GitHubで作りましょう。
GitHubはソースコード管理をするGitの仕組みを利用して、世界中の人々がプログラムを保存、ソースコード管理ができるWEBサービスの名称です。
GitHubで自分が作成したソースコードやプログラム、WEBサービスを公開すれば、WEBエンジニアであるあなたのポートフォリオ（履歴書）になります。
転職する際に採用担当者がGitHubのリポジトリを見て、
「読みやすいソースコードを書く人だ！」
「毎日ソースコードを書いて、プログラミングが好きな人なんだ！」
「リリースのタイミングでCI/CDを回してしっかりテストの自動化も行っているぞ！」
など、好印象を抱いてもらえる可能性が高くなります。
つまり、Githubにソースコードやプログラムを公開することで、採用面接前に企業のエンジニアや採用担当者とポートフォリオを通じて会話ができるのです。
STEP5. 転職エージェントに登録する
クラウドソーシングやフリーランスエージェントで経験と実績を積んだら、いよいよ転職活動です。
まずは転職エージェントに登録します。転職エージェントは、あなた専任のキャリアアドバイザーが求人紹介や提出書類のアドバイス、面接対策や入社までのフォローなどトータルでサポートしてくれます。
転職エージェントはリクルートエージェントやマイナビエージェント、ワークポートなど種類はさまざまです。応募できる求人の幅を広げるためにも、2〜3社の併用をおすすめします。
プログラミングスクールならすべて一括でできる
Webエンジニアとして転職するために、まずは必要な知識を身につけてからポートフォリオを作成し、そのあと軽い案件から実績を積んでいくとお伝えしました。
しかし、独学から転職までひとりで行うことに不安に感じる人もいると思います。そんなあなたは、プログラミングスクールの利用を検討してみてください。
プログラミングスクールは、Webエンジニアに必要なプログラミング言語を教えてくれるだけではなく、ポートフォリオの添削や転職支援といったサービスも提供しています。
ポテパンキャンプやCodeCamp、RUNTECといったプログラミングスクールが多数あるので、自分に必要なプログラミング言語が学べるか、費用や通い方など、あなたの目的やライフスタイルに合ったプログラミングスクールを探してみてください。
まとめ
未経験者から独学でWebエンジニアになるために必要な5つのステップを紹介しました。
未経験者でも今回お伝えしたロードマップに沿って行動すれば、Webエンジニアになれます。Webエンジニアは専門性が高いので、高収入を得られたり、さまざまなキャリアパスを描けたりと魅力的な職種です。
それゆえ、Webエンジニアに必要なスキルを身につけるための勉強は大変で、相当な覚悟が必要になります。
もし独学に限界を感じたら、オンラインでエンジニアに質問や相談ができるMENTAや、プログラミング言語の勉強から転職支援まで行ってくれる、プログラミングスクールの利用を検討してみてください。
