1
/
5

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

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

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

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

筆者自己紹介:
安藤 大地(取締役 / COO)

お客様先に常駐し、バックエンドエンジニアとして開発支援に携わった後、本社勤務へ転属。バックエンドメンターとして研修生や社内エンジニアの教育を担当し、約200名のエンジニア教育を手掛けました。
現在は取締役 / COOとして教育事業の全体統括と開発事業のプロジェクトマネジメント、AI技術の研究開発に携わっています。

対象読者: Webエンジニア志望で1日2時間程度の学習を1ヶ月ほど確保できる方(全く未経験でも大丈夫!)
PC推奨スペック:CPU 2コア 2GHz以上、メモリ8GB以上(予算が許す人はMac推奨
学習推奨サイトドットインストール
費用
: 月額1080円(ドットインストールの月額課金費用)+書籍代(必要な人のみ)

Webエンジニアとは

Webエンジニアは、皆さんが普段お使いのインターネットを通じて使う便利なWebサービスを開発することを仕事としています。例えばこの記事が書かれているWantedlyもWeb系のプログラミング(React.js / Ruby on Rails)でできています。

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

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

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

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

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

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

  1. 最低限のHTML/CSSの知識
  2. JavaScript及びjQueryを使った簡易アニメーション実装経験
  3. スクリプト系言語(ex. PHP, Ruby, Python, etc)の基礎構文理解
  4. データベース(MySQL)の基礎的な理解
  5. MVCフレームワークを使用したWebアプリケーション開発経験
  6. 仮想開発環境構築の理解(Vagrant/Docker)
  7. 上記のスキルが証明できるポートフォリオサイトもしくは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を選択してください

  • Dockerを導入しよう [Windows 10版](全6回)
  • Dockerを導入しよう [macOS版](全3回)
  • UNIXコマンド入門 (全28回)

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

  • 詳解PHP 基礎文法編 (全34回)
  • 詳解PHP ビルトイン関数編 (全32回)
  • 詳解PHP オブジェクト編 (全26回)
  • MySQL入門 基礎編 (全27回)
  • 詳解PHP データベース編(全19回)
  • PHPでTodo管理アプリを作ろう 関数編(全25回)
  • PHPでTodo管理アプリを作ろう クラス編(全14回)
  • PHPでTodo管理アプリを作ろう 非同期通信編(全30回)
  • 詳解PHP ウェブ開発編 [macOS版] (全34回)

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

  • Laravel 8入門 基本機能編(全22回)
  • Laravel 8入門 データベース編(全13回)
  • Laravel 8入門 CRUD処理編(全20回)
  • Laravel 8入門 リレーション編(全16回)

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

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

最終更新:2021/11/30

株式会社Gizumo's job postings
27 Likes
27 Likes

Weekly ranking

Show other rankings
If this story triggered your interest, go ahead and visit them to learn more