Webエンジニアになりたい人に捧げる学習ロードマップ

2019年06月18日

こんにちは、株式会社Gizumoの安藤です。

「どうやったらWebエンジニアになれるの？」「学習方法がわからない…」とプログラミング学習に苦戦しているエンジニアの卵の皆さんのためにこの記事を贈ります。

この記事を指標に充実した学習をすれば、駆け出しエンジニアとしてプログラミングの基礎を効率よく習得できるエントリーレベルの記事です。

対象読者：

Webエンジニア志望で1日2時間程度の学習を1ヶ月ほど確保できる方（全く未経験でも大丈夫！）

PC推奨スペック

CPU 2コア 2GHz以上、メモリ8GB以上（予算が許す人はMac推奨）

学習推奨サイト：

ドットインストール

費用：

月額1080円（ドットインストールの月額課金費用）＋書籍代（必要な人のみ）

Webエンジニアとは

Webエンジニアは、皆さんが普段お使いのインターネットを通じて使う便利なWebサービスを開発することを仕事としています。

Webエンジニアは大別するとフロントエンドエンジニアとバックエンドエンジニアに分かれます。
フロントエンドエンジニアはユーザーに見える部分の開発をします。バックエンドエンジニアはサービスが自動で動く裏側の仕組みを開発しています。最初からどちらもできるエンジニアになることは難しいため、どちらからキャリアをスタートしたいか検討してみてください！

例えば「デザインがきれいなWebサイトや凝ったアニメーションの演出があるWebサイトを作ってみたい」という人はフロントエンドを志望してみるといいかもしれません。また、「ECサイトのようなユーザーに便利なサービスの開発に携わりたい」「将来的に自分のサービスを開発したい」という人はバックエンドを志望してみるといいと思います。

下記はフロントエンド・バックエンドそれぞれでエンジニアとして仕事につくために習得しておきたい技術の一例です。学習のゴール設定に悩んでいる方は参考にしてみてください！

駆け出しフロントエンドエンジニアに求められるもの

HTML/CSSによるWebサイトコーディング経験（レスポンシブ対応含む）
JavaScriptの基礎構文理解
JavaScriptを使った動くUI(複数パターン)の実装経験
jQueryのプラグインやAjaxを使った実装経験
タスクランナー(gulp)やモジュールバンドラー(Webpack)の利用経
Vue.jsもしくはReact.jsを使ったミニアプリの開発経験
上記のスキルが証明できるポートフォリオサイトもしくはGitHubアカウントの提出

駆け出しバックエンドエンジニアに求められるもの

最低限のHTML/CSSの知識
JavaScript及びjQueryを使った簡易アニメーション実装経験
スクリプト系言語(ex. PHP, Ruby, Python, etc)の基礎構文理解
データベース(MySQL)の基礎的な理解
MVCフレームワークを使用したWebアプリケーション開発経験
仮想開発環境構築の理解（Vagrant/Docker）
上記のスキルが証明できるポートフォリオサイトもしくはGitHubアカウントの提出

難しそうな用語が並んでいてますね！でも全部わかっていてやったことがあるなら駆け出しエンジニアじゃないので心配しないでください。ひとつずつ理解していきましょう！

フロントエンド・バックエンド共通の学習事項

HTML, CSS, JavaScriptはフロントエンド・バックエンドどちらを志望するとしても共通で学習するものになります。

HTML

HTML（エイチティーエムエル）はWebページに表示する文字（タイトル、リスト、リンク）や画像などを定義して、ページの骨組みをつくるものです。現在はHTML5というバージョンが使われています。下記はHTMLの一例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>ブラウザのタブに表示されるタイトル</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div>はじめてのマークアップ</div>
</body>
</html>

CSS

CSS（シーエスエス）は、HTMLで作ったページの骨組みに対して装飾をしていくものです。このCSSを使えば幅・高さ、背景色・背景画像、枠線、余白、文字の大きさ・太さ・色などを自分の好きなようにデザインすることができます。現在はCSS3というバージョンが使われています。下記はCSSの一例です。

@charset "utf-8";
div { /* divと書いてあるものが、このカッコ内のスタイルを適用させるターゲット（セレクタ） */
  width: 300px; /* セレクタの幅の指定 */
  color: #fff; /* セレクタの文字の色の指定 */
  font-weight: bold; /* セレクタの文字の太さを指定 */
  font-size: 20px; /* セレクタの文字の大きさを指定 */
  background-color: #555; /* セレクタの背景色を指定 */
}

※HTMLとCSSはマークアップ言語と呼ばれるもので、プログラミング言語ではありません。HTMLとCSSは条件によって処理を分岐させたり、処理を繰り返すといった「コンピューターへの命令」ができないのです。（今はふーん、そうなんだぐらいでOK）

JavaScript

JavaScript（ジャバスクリプト）はブラウザを操作することができるプログラミング言語です。JavaScript自体はいろいろなことができるのですが、わかりやすい例としてはHTML/CSSでできたWebサイトに動きをつけることができます。例えば数秒ごとに画像が変わるスライド、クリックするとページの1番上に戻るボタンなどWebサイトを華やかに動かしてくれます。

短いですが以下の<script></script>の間に書かれている部分がJavaScriptです。ファイルをブラウザで開くと”Hello World!”と書かれた小さいウィンドウが表示されます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScriptの練習</title>
</head>
<body>
<script>
  alert('Hello World!');
</script>
</body>
</html>

※Java（ジャバ）とJavaScript（ジャバスクリプト）はまったく別の言語です。JavaScriptのことをさして「ジャバ」と呼ばないよう注意してください。JavaScriptはJSと略して書くことが多いので「ジェイエス」と呼ぶ人が多いです。

HTML&CSSの学習ステップ

それでは学習に入っていきましょう。

今回はドットインストールというサービスに沿って学習していきます。（有料コンテンツが含まれます）

ドットインストールについて：https://dotinstall.com/

ドットインストールは、豊富な3分動画を見ることで、はじめての人でも無理なくスキルを身につけていくことができるプログラミング学習サービスです。
HTML, CSS, JavaScript, PHP, Rubyをはじめ、iPhoneやAndroidアプリの作り方も学べます。月額1,080円のサブスクリプションで、すべてのコンテンツの利用がお得なサービスです。

まずはWeb制作の流れを体験してみましょう。

Web制作の流れを体験しよう

はじめてのWeb制作（全11回）

どんな流れでWeb制作を行っていくのか、イメージはつきましたか？
次に、エディタと呼ばれるプログラミングを入力するためのツールをダウンロードして初期設定をします。

学習環境を整えよう ※お使いのOSを選択してください

Web制作の学習環境を整えよう [Windows編] (全8回)
Web制作の学習環境を整えよう [macOS編] (全10回)

エディタの準備はできましたか？
それでは用意したエディタを使って、下記の順番にHTMLとCSSのレッスンを進めてみましょう！

もっと詳しくHTML/CSSを学んでみよう

詳解HTML 基礎文法編（全22回）
詳解HTML フォーム部品編（全8回）
詳解CSS 基礎文法編（全33回）
詳解CSS セレクター編（全12回）
詳解CSS フレックスボックス編（全16回）
詳解CSS アニメーション編（全20回）
詳解CSS レスポンシブウェブデザイン編（全8回）
詳解CSS グリッドレイアウト編（全16回）
詳解CSS 変数編（全7回）

どうでしたか？パズルみたいで少しおもしろくなってきたら嬉しいです。
全然わからなくてピンと来ない方も気にせずもう少し先までやってみましょう！

Webサイトをゼロから制作してみよう

実践！ポートフォリオサイトを作ろう（全17回）
実践！アプリ紹介ページを作ろう（全24回）
実践！ECサイトをマークアップしよう（全27回）

【JavaScriptの学習ステップ】

ここからは、本格的なプログラミング言語の学習になります。まずはドットインストールを使って以下の基礎レッスンをやってみましょう。

JavaScriptを体験しよう

はじめてのJavaScript（全8回）

もっと詳しくJavaScriptを学んでみよう

詳解JavaScript 基礎文法編（全26回）
詳解JavaScript オブジェクト編（全35回）
詳解JavaScript DOM編（全21回）
詳解JavaScript Intersection Observer API編（全13回）

難易度がグンと難しくなってきましたね。動くアプリケーションが作成はできましたか？
実際のWebサイト制作にも応用してみましょう。

Webサイト制作に活用してみよう

実践！ポートフォリオサイトに動きをつけよう（全5回）
実践！ECサイトに動きをつけよう（全6回）

ここからはミニアプリを作りながら学習します。ドットインストールのインストラクションに身を任せてドンドン学習していきましょう！JavaScriptのレッスンパッケージのうち、作りたいなと思うミニアプリを3つ作成してみてください。

ミニアプリを作ってみよう ※下記レッスンから最低3つを作成

JavaScriptでおみくじを作ろう (全9回)
JavaScriptでビンゴシートを作ろう (全13回)
JavaScriptでカレンダーを作ろう (全18回)
JavaScriptでストップウォッチを作ろう (全12回)
JavaScriptでタイピングゲームを作ろう (全11回)
JavaScriptで三択クイズを作ろう (全20回)
JavaScriptでスライドショーを作ろう (全13回)
JavaScriptでスロットマシンを作ろう (全13回)
JavaScriptで数字タッチゲームを作ろう (全18回)

プログラミング言語を使ってミニアプリを作成した経験が身につきましたね！プログラミングで「モノ」を作ってみる楽しさは感じられましたか？理解が難しいと感じた部分があればもう一周してみましょう。

以上で共通の学習内容は終わりです。フロントエンド・バックエンドそれぞれの学習手順の紹介に入っていきます。

フロントエンド志望の方

フロントエンド志望の方は上記のJavaScriptのミニアプリを作成するレッスンをすべて受講してください。その後、仕事で使うツールとしてjQuery、Vue.jsを学習してみましょう。

jQuery

jQuery(ジェイクエリー)は、JavaScriptを簡単に扱うことができるようにするライブラリ（よく使われる機能やプログラミングの部品を集めてひとまとめにしたもの）です。JavaScriptでプログラミングしようとするとたくさんコードを書かないといけないところを、jQueryを使うと短く書けたりするようになります。

例えばJavaScriptで書く下記のコードは、

var testList = document.getElementsByClassName('test-list');

jQueryで書くと以下のように書くことができます。

var testList = $('.test-list');

簡単な例ですが、短くなりましたね。

jQueryにはたくさんのプラグイン(さくっと使えて機能が拡張できる便利なプログラム)が容易されていて、コピペして使うだけでも非常に豊かなアニメーション表現やUIの実装が可能になります。

Vue.js

Vue.js(ビュージェイエス)はJavaScriptフレームワークのひとつで、SPAを開発する時に主に用いられます。SPAを開発できるJavaScriptフレームワークはいくつかありますが、本記事ではVue.jsを紹介します。

SPAとは：
SPAとは「Single Page Application」の略で、1ページでコンテンツの切り替えができるWebアプリケーションのことを指します。通常のWebアプリケーションでは、欲しい情報にアクセスするためにリンクをクリックしてページ遷移する必要がありました。しかし、SPAではページ遷移を行わずにひとつのページで欲しい情報を表示するなどのコンテンツの切り替えができるため、サクサク動いて使い勝手の良いユーザー体験(UX)をもたらすことが可能となります。

・Vue.jsで作成されたサイト集

Vue.jsは、シンプルで学習がしやすいこととSPA開発の普及から人気急上昇中の技術となっています。

【jQuery・Vue.jsの学習ステップ】

ドットインストールを使って下記の順番でレッスンを受講してください。（レッスンが見つからない場合はサイト内検索してください）

JavaScriptではじめるお手軽プログラミング/ミニアプリを作ってみよう

JavaScriptのミニアプリで作っていないものをすべて作る。

よく見るUIを作ってみよう

JavaScriptでモーダルウィンドウを作ろう (全8回)
JavaScriptでタブメニューを作ろう (全10回)
JavaScriptでハンバーガーメニューを作ろう (全13回)
Canvasを使ってみよう
詳解JavaScript Canvas編 (全21回)
JavaScriptでローディングアイコンを作ろう (全7回)
JavaScriptでアナログ時計を作ろう (全10回)

もっとJavaScriptに触れてみよう

jQuery入門 (全13回)
Vue.js入門 (全17回)

バックエンド志望の方

高度なWebアプリケーションを作るためにはバックエンドのプログラミング言語を習得する必要があります。Webアプリケーションを作成するための言語はいくつかありますが、本記事ではPHPを紹介します。学習ステップではPHPとともに、現在最も広く使われているデータベースのMySQL、PHPフレームワークのLaravelを学習する手順にしています。

ここからTerminal（Windowsの方はPowerShell）という黒い画面にコマンド打ち込んでで操作をしていくことが増えます。抵抗感を持たずに取り組みましょう！エラーが出た場合は慌てずに入力内容が間違っていないかを確認してみてね:)

PHP

PHP（ピーエイチピー）は、現在Webのバックエンド開発で最も利用されているプログラミング言語です。みなさんが一度は使ったことがあるであろうメルカリ、Yahoo!、ZOZOTOWNなどはPHPによって作られています。Web業界では伝統的にECサイトやソーシャルゲーム開発によくPHPが開発言語として用いられています。

フロントエンドの学習で紹介したJavaScriptはブラウザ側で動作するのに対して、バックエンドの言語はサーバー側で動いています。JavaScriptはユーザーから動いているのが見えるのに対して、PHPはどのように動いているかは見れません。

PHPを書く時には以下の例のように開始タグ<?php を記述します。

<?php

echo "Hello World!";

また、PHPの大きな特徴として以下のようにHTML内にスクリプトを埋め込むことができます。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>

        <?php
            echo "Hi, I'm a PHP script!";
        ?>

     </body>
</html>

MySQL

MySQL（マイエスキューエル）は、現在世界で最も広く使われるデータベースです。みなさんが普段お使いのWebサービス、例えばAmazonの場合、データベース内にはたくさんの商品の情報が格納されています。商品番号、製品名、価格、在庫数などの情報が整理されてデータベース内に入っているわけですね。私たちユーザーがこういった商品はないかと検索すると、Amazon側が検索にマッチする商品の情報をデータベースから選んできて私たちに見せてくれるといったことがプログラミングされています。データベースはSQLと呼ばれる言語を使って操作することができます。

Laravel

Laravel（ララベル）は、現在最も勢いのあるPHPフレームワークです。Laravelを使うと、掲示板のような簡単なWebアプリケーションであればほぼ自動生成することができます。また、自由度が高くてカスタマイズがしやいことで人気を博しています。

フレームワークとは：
フレームワークは、頻繁に使われる基本的な機能がまとめて用意されているプログラミングをするための枠組みです。PHPのみで高機能な機能を開発することは非常に手間がかかりますが、フレームワークを使うと少ないコード量で高機能なWebアプリケーションの開発が可能になります。現在のWebサービスのほとんどがフレームワークを使って開発されています。

【PHPの学習ステップ】

バックエンドの学習ではサーバー環境を構築する必要があります。ドットインストール内の「サーバー環境を作れるようになろう」のレッスンパックから下記を学習して開発環境を構築できるようになってからPHPの学習に進んでみてください。

【サーバー環境を作れるようになろう】 ※ご自身がお使いのOSを選択してください

ローカル開発環境の構築 [Windows編] (全14回)
ローカル開発環境の構築 [macOS編] (全14回)
UNIXコマンド入門 (全28回)

【PHPでウェブサービスを作れるようになろう】

詳解PHP 基礎文法編 (全34回)
詳解PHP ビルトイン関数編 (全32回)
詳解PHP オブジェクト編 (全25回)
MySQL入門基礎編 (全27回)
PHPデータベース入門 (全13回)
PHPでビンゴシートを作ろう (全7回)
PHPで画像アップロード掲示板を作ろう (全20回)
PHPでTodo管理アプリを作ろう (全18回)
Laravel5.5入門
詳解PHP ウェブ開発編 [macOS版] (全34回) ※現在Macのみ

PHPの学習でオススメの書籍： いちばんやさしい PHP の教本第2版人気講師が教える実践 Web プログラミング (「いちばんやさしい教本」)

その他推薦図書

プログラミング言語の学習とは別に推薦図書を3冊ほど挙げておきます。どれも一般的に良書と呼ばれているものです。内容は難しく感じるものが多いかもしれませんが一読の価値があります。関心のあるものから手に取ってみてください。

プログラミング以外で身につけたほうがいいこと

ブラインドタッチ（キーボードを見ずにタイピングすること）を身に着けておきましょう。必ず必要というわけではありませんが、できるとタイピングスピードが劇的に早くなります。最初は意識しながらタイピングすることになりますが、慣れると無意識で高速に入力できます。

覚え方は簡単です。キーボードの「F」と「J」にくぼみがついています。「F」には左手の人差し指を、「J 」に右手の人差し指を置き、左手中指から小指は「D」「S」「A」に置き、右手の中指から小指は「K」「L」「；」にそれぞれ順に置きます。

これがホームポジションといってブラインドタッチをするための手の位置になります。あとは入力する時にホームポジションから指を「ハ」の字型に動かすだけです。最初は手元見ながら入力して、慣れてきたら画面を見ながら入力していきましょう。タターン！と押したい気持ちはわかりますが、エンターは右手小指で最小限のムーブで押しましょう:)

何か目標が欲しいという人は e-typing のローマ字入力でA-以上を目標にしてみましょう！（安定的にA~B+を取ることができればタイピングスピードは平均以上となるので、それ以上ブラインドタッチの練習は不要です。）

※余談ですが、エンジニアで愛用者の多い高級キーボードで「Happy Hacking Keyboard」（略称HHKB）というものがあります。このキーボードのシリーズには強者向けの「無刻印」モデルがあり、キーボードにアルファベットが記載されていないというものがあります！ブラインドタッチができる人用のストイックなキーボードです。打鍵感も気持ち良いので気になる人は一度試し打ちしてみてね。

フェーズごとの学習方法（エンジニア志望の方向け）

エンジニア志望の方は、プログラミングの知識量と学習時間によって学習方法をレベルアップさせていきましょう。初学者のときにやっていた学習内容をずっと繰り返して学習していても知識が頭打ちします。以下を目安に自分の学習内容を調整していきましょう。

プログラミング初学者（学習時間目安 150h未満）

まずはプログラミングの楽しさに触れてみます。かんたんなWebサイトをつくってみたり、JavaScriptを使ってミニアプリを作ってみましょう。ぼんやりとエンジニアへのジョブチェンジを考えている方は本当にプログラミングを仕事にしていけるかどうかの確認時期になります。

エンジニア志望者（総学習時間目安150h ~ 500h）

作りたいポートフォリオサイトを作成しながら学びます。「こういったことをしたいからこういう機能をつけよう」「この機能に必要な知識は何だ？ググろう」「これとこれの知識を応用すればこの機能はつけれそうだ、やってみよう」といった具合に調べては開発、調べては開発を繰り返していきます。

時間がかかってもいいので、やりきること、作り切ることを意識して手を動かしていきましょう。最初からスムーズに、思い描いたポートフォリオをつくることは難しいです。まずは動くものを作り、ガチャガチャと改良していきましょう。作っても気に入らなければ戻せるし、何度でも作りなおせるのがプログラミングの良いところです。

実務参画前のエンジニア（総学習時間目安 500h ~ 1,000h）

技術書を1, 2冊頭に叩き込みましょう。体系的な知識を習得するよう努力して知識のムラをなるべく少なくしようとしましょう。

FAQ

Q. エンジニアになるためにプログラミングスクールに通う必要はありますか？

A. 必須ではありません。独学でもエンジニアになることは可能です。

昨今のプログラミングスクールは受講料が高騰しています。プログラミングスクールの受講者が増え、日本のエンジニアの総人口が増えることは喜ばしいことなのですが、パソコン1台でスタートできる手軽さがプログラミングの良いところです。初学者の方は大金を用意してスクールに通わなければエンジニアになれないという訳ではありません。プログラミングスクールに行くことを検討している方はリーズナブルな方法はないか再度検討してみてください。

筆者は職業訓練校をオススメします。採用担当者として職業訓練校出身の方とお話する機会をいただきますが、言語の基礎知識を学び、ポートフォリオの作成指導を受けた基礎的な技術をお持ちの方にお会いできることが多く、実際に職業訓練校を卒業後に弊社でエンジニアになっているメンバーが何名もいます。HTML/CSSのよるコーディングやJavaScript、PHP、Rubyなどが学習できないか事前に調べてみてください。また、Javaが学べるところが多いと思いますが、Javaから学んだとしてもそれは遠回りになることではありません。

下記は、良心的な受講料で、カリキュラム内容が濃く、レビューやサポートが手厚いと筆者が考えているスクールです。当該スクールの卒業生の方とお話した時の技術的な理解、ポートフォリオのクオリティ、カリキュラム内容、筆者周辺の方の評判など総合的にオススメしています。（ご紹介するスクールは弊社及び筆者個人とつながりがあるわけではありません）

Q. 資格は役に立ちますか？

A. Webエンジニアはプログラミングがどれだけできるかが実力の証明なのでポートフォリオの開発やGitHubにソースコード載せることに時間を集中させることをオススメします。資格があったほうが安心すると思う方は『基本情報技術者』の資格を取得しましょう。

基本情報技術者の資格はIT業界で仕事をする上で決して無駄にはならない知識が詰まった資格です。日系大手SIerさんではこの資格を持っていないと昇進できないところもあります。

これからエンジニアを目指す方で『ITパスポート』の資格の学習をしている方が比較的多いですが、筆者的にはITパスポートの内容は人によって既知のことも多いので最初から基本情報技術者を学習したほうが良いと考えています。また、採用担当者視点でみても基本情報技術者の資格はITパスポートよりも資格を保有している有効性は高いです。

Q. PCを買おうと考えています。WindowsとMacどちらがいいですか？

A. 予算が許せばMacをおすすめします。Windowsの方はご自身のPCが推奨スペック（CPU 2コア 2GHz以上、メモリ8GB以上）を満たしているか確認してみてください。最初は数万程度もしくは中古のMacbookで学習し、エンジニアとしてお仕事についてからその給与を貯めてMacbook Proもしくはお好きなPCを買うことをおすすめします。

※ドットインストールさんは基礎的な学習内容をわかりやすく、コンパクトな時間に圧縮した優れた学習コンテンツをご提供されています。筆者も独学のスタートはドットインストールさんにお世話になりました。本記事の内容は弊社の研修内容ではありません。筆者から初学者の方向けのオススメ学習方法です。

最終更新：2021/4/1