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

こんにちは、株式会社Gizumoの大石です。

「どうやったらWebエンジニアになれるの？」「学習方法がわからない…」とプログラミング学習に苦戦している未来の同志のためにこの記事を贈ります。といっても、あまり力んで書くとガッチガチのポジショントークみたいになってしまうので、受験勉強に悩んでいる高校生にざっくりとした受験対策を教える大学生ぐらいの温度感でお送りします。

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

対象読者： Webエンジニア志望で300時間ぐらいの学習時間を確保できる方（全く未経験でも大丈夫！）

PC推奨スペック： CPU 2コア 2GHz以上、メモリ4GB以上（予算が許す人はMac推奨）

学習推奨サイト： ドットインストール

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

Webエンジニアとは

Webエンジニアは、皆さんが普段お使いのインターネットを通じて使う便利なWebサービスを開発することを仕事としています。例えばこの記事が書かれているWantedlyもWeb系のプログラミング(Ruby on Rails)でできています。Webエンジニアは大別するとフロントエンドエンジニアとバックエンドエンジニアに分かれます。フロントエンドエンジニアはユーザーに見える部分の開発をします。バックエンドエンジニアはサービスが自動で動く裏側の仕組みを開発しています。最初からどちらもできるエンジニアになることは難しいため、どちらからキャリアをスタートしたいか検討してみてくださいね！

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

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

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

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

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

最低限のHTML/CSSの知識
JavaScript及びjQueryを使った簡易アニメーション実装経験
Web系言語(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をJavaと呼ばないよう注意してください。JavaScriptはJSと略して書くことが多いので「ジェイエス」と呼ぶ人が多いです。

【HTML&CSSの学習ステップ】

それでは学習に入っていきましょう。エディターと呼ばれるプログラミングを入力するためのツールを使ってWebサイトを作ったり、JavaScriptを使って動くミニアプリを作りながら学習していくところからスタートします。ドットインストールのインストラクションに身を任せてドンドン学習していきましょう！（動画学習になります）

ドットインストールの「ウェブサイトを作れるようになろう」のレッスンパックを下記の順番に行い、Firebaseを使って作成したサイトを公開してみてください。

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

・HTML/CSSの学習環境を整えよう [Windows編] (全4回)

・HTML/CSSの学習環境を整えよう [macOS編] (全4回)

HTML/CSSの概要を理解しよう

はじめてのHTML (全15回)
はじめてのCSS (全17回)

ウェブサイトをゼロから制作してみよう

よく見るウェブサイトをゼロから作り上げてみよう実践!ウェブサイトを作ろう (全16回)
実践！スマートフォンサイトを作ろう (全22回)

より高度な技術にチャレンジしてみよう

ウェブサイトを公開する流れを知ろう Firebaseでウェブサイトを公開してみよう (全9回)

Webサイトを作成して、世の中に公開することができましたね！自分が作成したサイトのリンクを家族や友人に送ってみましょう:D

【JavaScriptの学習ステップ】

本格的なプログラミング言語の学習になります。まずは基礎を理解するようにしてみてください。ドットインストールで以下の順番に学習していき、JavaScriptを使ってミニアプリを3つ作成してみてください。

JavaScriptに触れてみよう
1. はじめてのJavaScript (全11回)

もっと詳しくJavaScriptを学ぼう

詳解JavaScript 基礎文法編 (全24回)
詳解JavaScript オブジェクト編 (全23回)
詳解JavaScript DOM編 (全15回)

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

・JavaScriptでおみくじを作ろう (全8回)
・JavaScriptでタイピングゲームを作ろう (全14回)
・JavaScriptでストップウォッチを作ろう (全12回)
・JavaScriptで三択クイズを作ろう (全20回)
・JavaScriptでスライドショーを作ろう (全14回)
・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のミニアプリで作っていないものをすべて作る。（合計7個ほど）
jQuery入門 (全20回)
jQueryで作る先頭へのジャンプ機能 (全4回)
Vue.js入門 (全17回)

JavaScriptの学習でオススメの書籍：　改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

バックエンド志望の方

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

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

PHP

PHP（ピーエイチピー）は、現在Webのバックエンド開発で最も利用されているプログラミング言語です。みなさんが一度は使ったことがあるであろうメルカリ、Yahoo!、ZOZOTOWNなどは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フレームワークです。

フレームワークとは：

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

Laravelを使うと、簡単なWebアプリケーションであれば自動生成することができます。また、自由度が高くてカスタマイズがしやいこともメリットとして挙げられます。

【PHPの学習ステップ】

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

サーバー環境を作れるようになろう ※ご自身がお使いのOSを選択してください

・ローカル開発環境の構築 [Windows編] (全14回)

・ローカル開発環境の構築 [macOS編] (全14回)

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

PHP入門 (全30回)
MySQL入門 (全36回)
PHPデータベース入門 (全13回)
PHPでビンゴシートを作ろう (全7回)
PHPで画像アップロード掲示板を作ろう (全20回)
PHPでTodo管理アプリを作ろう (全18回)
Laravel5.5入門

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

その他推薦図書

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

・リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)

・Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus)

・体系的に学ぶ安全なWebアプリケーションの作り方第2版脆弱性が生まれる原理と対策の実践

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

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

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

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

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

プログラミングスクールに通う必要はあるか否か

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

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

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

・G's ACADEMY TOKYO 様

・フィヨルドブートキャンプ様

・ポテパンキャンプ様