Webエンジニアになりたい人に向けた学習ロードマップ〈フロントエンド/バックエンド編〉

2019年06月18日

こんにちは、株式会社Gizumo教育担当です。

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

すでに学習を開始した方を対象としているため、「そもそも何を学習したらいいの？」という方は、まずはファーストステップ編から学習してみてください！

Webエンジニアになりたい人に向けた学習ロードマップ〈ファーストステップ編〉

対象読者：

Webエンジニア志望で1日2時間程度の学習を1ヶ月ほど確保できる方

PC推奨スペック：

CPU 2コア 2GHz以上、メモリ8GB以上 or Mac

学習推奨サイト：

ドットインストール

費用：

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

今回は、エンジニアとして仕事につくために習得しておきたい技術を、フロントエンドとバックエンドに分けて学習していきます。
以下、求められる技術の一例を記載しておきますので、学習のゴール設定に悩んでいる方は参考にしてみてください！

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

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アカウントの提出

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

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

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

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

HTML, CSS, JavaScriptはフロントエンド・バックエンドどちらを志望するとしても共通で学習するものです。
〈ファーストステップ編〉にて、HTMLとCSSの学習ステップはご紹介したので、今回はJavaScriptをメインにお伝えしていきます。

HTML&CSSのおさらい

まずはHTML/CSSを使った応用編として、Webサイトを自分で制作してみましょう。

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

ゼロからサイトを作れるようになりましたか？
続いて、JavaScriptについても学習していきましょう。

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と略して書くことが多いので「ジェイエス」と呼ぶ人が多いです。

JavaScriptの学習ステップ

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

JavaScriptを体験しよう

はじめてのJavaScript (全8回)

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

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

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

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

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

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

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

フロントエンド志望の方

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

jQuery

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

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

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

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

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

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

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

React.js

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

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

「GoogleMap」「Slack」「Trello」など数多くのサイトがSPAで構築されています。

React.jsは、汎用性や拡張性の高さから世界で最も使用されているJavaScriptのフレームワークです。

jQuery・React.jsの学習ステップ

ドットインストールを使って下記の順番でレッスンを受講してください。

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

Canvasを使ってみよう

もっとJavaScriptに触れてみよう

バックエンド志望の方

高度な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を選択してください

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

フレームワークを使ってみよう

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

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

最終更新：2022/10/14