東京都

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

安藤大地, 五島晃希他7人

取締役 COO, エンジニア/メンター

安藤大地

株式会社Gizumo / 取締役 COO

フォロー

五島晃希

株式会社Gizumo / エンジニア/メンター

フォロー

阿部大祐

株式会社Gizumo / プログラミング研修担当

フォロー

山口　敬介

株式会社 Gizumo / エンジニア

フォロー

Shinya Miyatani

株式会社Gizumo /

フォロー

伊藤太樹

Web エンジニア

フォロー

Takumi Sakaino

エンジニア

フォロー

松島一徳

株式会社クイック / Web Dev

フォロー

坂田聖史

エンジニア

フォロー

on 2021/10/15

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

エンジニアを目指して学習中の皆さんに向けて、この記事を贈ります。

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

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

Webエンジニアになりたい人に向けた学習ロードマップ〈ファーストステップ編〉 | 研修＆キャリアパス

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

https://www.wantedly.com/companies/gizumo-inc/post_articles/442151

対象読者： Webエンジニア志望で1日2〜4時間程度の学習時間を2週間ほど確保できる方
PC推奨スペック：CPU 2コア 2GHz以上、メモリ8GB以上 or Mac
学習推奨サイト：ドットインストール
費用：　月額1,280円（ドットインストールの月額課金費用）＋書籍代（必要な人のみ）

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

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

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

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

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

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

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

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

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

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

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(全7回)

もっと詳しく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サービスのほとんどがフレームワークを使って開発されています。