1
/
5
Wantedly
株式会社Gizumo
株式会社Gizumo
http://careers.gizumo-inc.jp
東京都

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

Akira Oishi
取締役COO
on 2019-06-18

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

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

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

筆者来歴：

大石 陽（株式会社Gizumo 取締役COO）

1990年生まれ、兵庫県出身。20歳の時に米国ワシントン州へ留学。Pierce College、Saint Martin's University卒業後、Gizumoに入社。Webディレクター、バックエンドエンジニアとしての経験を経て、2018年12月に同社取締役COOに就任。現在は事業開発、採用人事、ディレクションなどを担当。読書とPodcastを聞くことが好きで、グリーンピースが嫌い。

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

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

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

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


Webエンジニアとは

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

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

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

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

  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. Web系言語(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をJavaと呼ばないよう注意してください。JavaScriptはJSと略して書くことが多いので「ジェイエス」と呼ぶ人が多いです。



【HTML&CSSの学習ステップ】



それでは学習に入っていきましょう。エディターと呼ばれるプログラミングを入力するためのツールを使ってウェブサイトを作ったり、JavaScriptを使って動くミニアプリを作りながら学習していくところからスタートします。

この記事では3分動画を見ることで、はじめての人でも無理なくプログラミングの学習ができる『ドットインストール』というプログラミング学習サービスをご紹介します。ドットインストールのインストラクションに身を任せてドンドン学習していきましょう！

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

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

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

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

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

  1. はじめてのHTML (全15回)
  2. はじめてのCSS (全17回)

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

  1. 詳解HTML 基礎文法編 (全22回)
  2. 詳解HTML フォーム部品編 (全8回)
  3. 詳解CSS 基礎文法編 (全33回)
  4. 詳解CSS レスポンシブウェブデザイン編 (全8回)

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

  1. 実践！アプリ紹介ページを作ろう (全16回)

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

  1. Firebaseでウェブサイトを公開してみよう (全9回)

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


【JavaScriptの学習ステップ】




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

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

もっと詳しくJavaScriptを学ぼう

  1. 詳解JavaScript 基礎文法編 (全24回)
  2. 詳解JavaScript オブジェクト編 (全23回)
  3. 詳解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の学習ステップ】

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

  1. JavaScriptのミニアプリで作っていないものをすべて作る。（合計7個ほど）
  2. JavaScriptでモーダルウィンドウを作ろう (全8回)
  3. JavaScriptでタブメニューを作ろう (全10回)
  4. JavaScriptでハンバーガーメニューを作ろう (全9回)
  5. jQuery入門 (全20回)
  6. jQueryで作る先頭へのジャンプ機能 (全4回)
  7. Vue.js入門 (全17回)
  8. JavaScriptで学ぶFirebase入門

JavaScriptの学習でオススメの書籍：　改訂新版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を選択してください

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

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

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

  1. 詳解PHP 基礎文法編 (全34回)
  2. 詳解PHP ビルトイン関数編 (全32回)
  3. 詳解PHP オブジェクト編 (全25回)
  4. MySQL入門 (全36回)
  5. PHPデータベース入門 (全13回)
  6. PHPでビンゴシートを作ろう (全7回)
  7. PHPで画像アップロード掲示板を作ろう (全20回)
  8. PHPでTodo管理アプリを作ろう (全18回)
  9. 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」「；」にそれぞれ順に置きます。

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

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

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

FAQ

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

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

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

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

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

・G's ACADEMY TOKYO さん

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

・ポテパンキャンプ さん


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

A. Webエンジニアはプログラミングがどれだけできるかが実力の証明なのでポートフォリオの開発やGitHubにソースコード載せることに時間を集中させることをオススメします。



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

更新：2020/6/10

株式会社Gizumo's job postings
エンジニア 採用現場から プログラミング ワークスタイル 未経験エンジニア
92 Likes
92 Likes

株式会社Gizumo

▍株式会社Gizumoについて 「人の未来を創る」をビジョンに、プログラミング未経験・初中級者を対象としてエンジニア育成事業を行っています。エンジニア輩出実績多数。 未経験からエンジニアへキャリアチェンジしたストーリー集 https://www.wantedly.com/feed/s/gizumo_stories ▍事業展開： ・エンジニア育成事業（短期集中型研修・開発支援事業） ・クライアントワーク（Web制作・システム受託開発） ・AI外貨予測システム構築（Deep Learning） ▍サービス： ・オンラインプログラミングスクール『GizTech』 ・プログラミング学習メディア『GizPuzzle』※準備中 ・ブロックチェーンアプリケーション『GIZ』 ▶2年連続ベストベンチャー100に選出されました https://www.wantedly.com/companies/gizumo-inc/post_articles/209321 今後も未経験の方をハイレベルなエンジニアへ育て上げることに注力し社会貢献を目指します！ 2018年3月に資金調達をしました。 (累計3億円以上調達済み) https://www.wantedly.com/companies/gizumo-inc/post_articles/113217 ▍その他募集 成長中につき、その他ポジションも絶賛採用中です！ ＜人事職＞ 完全ポテンシャル採用！熱い気持ちを持った炎の採用担当者WANTED！ https://www.wantedly.com/projects/421570 ＜事務・経理サポート＞ じっくり腰をすえて | 会社を支える事務・経理サポート担当を募集。 https://www.wantedly.com/projects/421383 ＜経営もプログラミングも学んで総合的なスキルを高めたいビジネス職希望の21卒学生はコチラ！＞ 意識高い人必見｜社長から経営も学べるビジネス職を希望の学生WANTED！ https://www.wantedly.com/projects/410294 インターン｜ベンチャーでビジネス職の基礎を学びたい21卒学生WANTED！ https://www.wantedly.com/projects/409059 ▍現職SIerなどプログラミング経験者はコチラよりご応募ください SIerからWeb系へ！キャリアチェンジ希望のエンジニアWANTED！ https://www.wantedly.com/projects/342683 SI出身歓迎！Javaエンジニア100人を育成するメンターWANTED！ https://www.wantedly.com/projects/383516 ▍ネットワーク経験者の方を募集しております！ 5Gの時代に、ITの基盤を担うインフラエンジニアの育成をおまかせします！ https://www.wantedly.com/projects/416059

エンジニア

Weekly ranking

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