今日からはじめられるWebエンジニアになるための学習ハンドブック【学習準備＆共通学習編】

こんにちは、ビヨンドワークス採用担当です！

「エンジニアになりたいけど何から学習すればいいのか分からない」
「そもそもWebエンジニアってなにするの？」
「プログラミングを無駄なく最短で学習したい」

そんなお悩みをお持ちのみなさまに向けて、
Webエンジニアを目指すために効果的な学習手順をまとめました！

今回はビヨンドワークスのプログラミング研修担当に、オススメの学習手順を教えてもらいました！
みなさんの代わりに、気になることを質問しながら進めていきます。一緒に学習しましょう！

岩崎（聞き手）
ビヨンドワークス採用担当。主にカジュアル面談や説明会を担当。
IT業界歴はあるもののエンジニア経験は無し。プログラミングに関してはまだまだ勉強中。
面接で熱い思いを語ってくださる方とお話するのが好きです！

境野（話し手）
ビヨンドワークス研修担当。
前職ではプログラマーとして開発に従事。HTML、CSS、JavaScript、Bootstrap、jQuery、PHP、Laravelを使用した処理プログラムを1人で対応していた。
自身も未経験からエンジニアになったという経験を活かして、現在はビヨンドワークスにてエンジニア研修を担当。フロントエンド、バックエンドどちらも担当しています。
趣味は漫画、ゲーム。好きな食べ物は焼肉、お寿司。好きな技術はjQuery。

【学習の流れ】
1.学習準備＆共通学習編　←今回はこちら！
2.フロントエンド編
3.バックエンド編＆まとめ
4.おまけ

Webエンジニアとは

岩崎　そもそもWebエンジニアって何をする仕事なんですか？

境野　Webエンジニアは、Webサービスを開発するエンジニアのことをさします。
例えばAmazonや楽天などのECサイトや、TwitterやInstagramなどのSNSなど、インターネットを通して利用するサービスは全てWebエンジニアが開発しています。

岩崎　幅広くいろいろなものを開発できるんですね。難しそう…

境野　そうですね。基本的には、サービスの全ての部分を1人で開発しているわけではありません。
Webエンジニアは大きく分類すると、フロントエンドエンジニアとバックエンドエンジニアに分かれます。

岩崎　フロントエンドエンジニアとバックエンドエンジニア？

境野　フロントエンドエンジニアは、Webサイトなどでユーザーの目に見える部分を開発しています。
かっこいいデザインのWebサイトを作ったり、サイトにアニメーションをつけたりするのはフロントエンドエンジニアの担当ですね。

岩崎　Webサイトで見えている部分はフロントエンドエンジニアが作っているのですね。
では、バックエンドエンジニアはどこを担当しているのですか？

境野　バックエンドエンジニアは、ユーザーの目に見えない裏側の部分を開発しています。
例えばECサイトにはログインフィームがついていて、アクセスするたびに異なる内容が表示されますよね。これを動的ページと言うのですが、動的ページには必ずバックエンドの技術が使われています。

岩崎　目に見える部分と見えない部分で担当が分かれているのですね。
どちらの技術を習得したらいいのか、迷ってしまいますね。

境野　最初からフロントエンド、バックエンドどちらにも特化したエンジニアになることは難しいので、どちらからキャリアをスタートしたいか考えてみるといいでしょう。
ただ実際にやってみないと本当の適正は分からないことも多いので、まずはどちらの技術にも触れてみることをオススメします。
これからご案内する内容に沿って、一通り学習してみましょう。

岩崎　よろしくお願いします！

学習の準備をしましょう。

岩崎　学習をしたいけど何から手をつけたらいいのでしょうか？

境野　学習を始める前に、いくつかの準備が必要です。
まずはPCと学習の参考サイトの確認です。

ーーーーーーーーーーーーーーーーーーー

1.PCの準備
PC推奨スペック：CPU 2コア 2GHz以上、メモリ8GB以上
エンジニアにとって1番必要なものです。まずはPCを準備しましょう。推奨スペックは上記の通りですが、予算が許せばMacBookがオススメです。（最新のMacBook Airは10万円前後で購入できます）

2.学習参考サイト
今回は主にProgateという学習サイトを参考にしています。
Progateは初心者向けプログラミング学習サイトです。2014年にサービスが開始され、現在は200万人以上のユーザーと100か国以上への提供で多くの方に利用されています。
今回参考にしているレッスンは有料会員向けの内容も含まれます。（弊社の研修内容ではありません）

また、一部Progateのレッスンカリキュラムにない技術もご紹介しています。
その際はYouTubeやUdemyなどのオススメ動画をご案内していますので、そちらを参考にしてみてください！（一部有料の教材もあります）

ーーーーーーーーーーーーーーーーーーーーー

岩崎　準備完了しました！
学習時間はどれくらい確保すればいいのでしょうか？

境野　可能であれば毎日2時間ほどは学習することが好ましいです。1ヶ月続ければプログラミングの基礎は理解できるようになるはずです。
最初は分からない部分も多くつまずいてしまうこともあると思いますが、あまり悩みすぎずにどんどん進めてみましょう。繰り返し学習することで理解度が深まります。

フロントエンド、バックエンド共通の学習ステップ

HTML&CSS

岩崎さっそく学習を進めていきます！まず何を学べばいいのでしょうか？

境野ホームページやECサイトなど、全てのWebページでHTML（エイチティーエムエル）とCSS（シーエスエス）が使われています。フロントエンド、バックエンドどちらを志望する方も必須の学習事項ですので、ここから学んでいきましょう。
ちなみにこれらはマークアップ言語と呼ばれていて、厳密にはプログラミング言語ではありません。条件によって処理を分岐させたり、処理を繰り返すといった「コンピューターへの命令」ができないからです。

岩崎　マークアップ言語…？もう少し詳しく教えていただけますか？

境野　HTMLは、Webページを表現するための基本となる言語です。ドキュメントの構造を表現する役割を担っていて、Webページに書かれている文字の情報や、段落や見出しなどのレイアウト、画像やリンクといった要素を表現します。現在はHTML5というバージョンが主流となっています。例えばこのような感じで書くことができます。

<!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>初めてのHTML</div>
</body>
</html>

岩崎　Webページを表現するためにはHTMLが必要ということですね。
CSSはどのようなものですか？

境野　CSSは、HTMLとセットで使って、Webページのレイアウトや装飾を決めるものです。
例えば文字の大きさ・色・フォント、背景色や余白などを変更して、自分の好きなレイアウトのWebページを表現することができます。現在はCSS3というバージョンが主流です。例えばこのような感じで書くことができます。

@charset "utf-8";
/* 上記のHTMLのdivと書いてあるものに少しスタイルをつけてみましょう */
div { /* divと書いてあるものが、このカッコ内のスタイルを適用させるターゲット（セレクタ） */
width: 300px; /* セレクタの幅の指定 */
height: 400px; /* セレクタの高さの指定 */
color: #fff; /* セレクタの文字の色の指定 */
font-weight: bold; /* セレクタの文字の太さを指定 */
font-size: 16px; /* セレクタの文字の大きさを指定 */
background-color: #333; /* セレクタの背景色を指定 */
}

岩崎　文字の色や背景の設定ができないとデザイン性のあるWebページは作れないですもんね。
HTML、CSSどちらもWebページを作るためには必須ということですね。

境野　その通りです。
Progateの「HTML＆CSS」レッスンで、実際にコードを動かしてみましょう。

《 HTML&CSSの学習》

[学習コース] HTML＆CSS 初級編
[学習コース] HTML＆CSS 中級編
[道場コース] HTML＆CSS 初級編
[道場コース] HTML＆CSS 中級編
[学習コース] HTML＆CSS 上級編
[道場コース] HTML＆CSS 上級編
[学習コース] HTML＆CSS Flexbox編

岩崎　実際に自分の書いたコードが画面上に表示されるのはおもしろいですね！

境野　そうですね。慣れてきたところでローカル環境の構築をやっておきましょう。
Progateではサイト上で実際にコードを動かせる機能が備わっていますが、実際に自分でWebページなどをつくる際は、自分のPCに開発のための環境を用意する必要があります。
コーディングはメモ帳などのアプリでもできますが、効率よく快適に開発するための環境を構築しておきましょう。

[ローカル環境の構築]

Progateの下記のページを参考にしてみてください。

HTML＆CSSの開発環境を用意しよう！（MacOS用）
HTML＆CSSの開発環境を用意しよう！（Windows用）
※お使いのOSに合わせて選択してください

岩崎　開発環境の構築ができました！

境野　Progateのレッスンで学んだことを参考に、自分のPC上でもいろいろと試してみましょう！
また、開発を進めているとレイアウトが崩れたり、思うように動かなくなるときがあります。そんな時は検証ツールを使って原因を調査することができます。
HTML、CSSがブラウザのどの部分に対応しているのか一目でわかるので、使いこなすと作業効率もあがります。

[検証ツールの使い方]

Progateの下記のページで検証ツールの使い方を確認しておきましょう。

検証ツール（デベロッパーモード）の使い方

岩崎　これで上手くいかないときも焦らず確認することができますね！
PC上で試していると、自分の開発したWebページを公開したくなってきました。

境野　そんなときのために、GitHubというサービスを使って、Webページをインターネット上に公開する方法を知っておくといいでしょう。

[Webページを公開する]

Progateの下記のページを参考にしてみてください。（この記事の最後にGitというツールの使い方を詳しく学習します）

自分で作ったWebページをインターネット上に公開しよう！

岩崎　自分が開発したものを簡単にみんなに見てもらえるなんて嬉しいです！

境野　お気に入りのWebページができたら、ぜひ世の中に発信してみてください！
HTML、CSSはプログラミングをする上で基礎となる部分です。理解が曖昧な部分はしっかりと確認しておきましょう。
また、現時点で分からなくても、学習を進めるうちに理解できる場合も多いです。「今はまださっぱり...」という場合もひとまず先に進んでみましょう！

〈HTML＆CSSの理解度チェック〉
□タグの使い分けができる
□HTMLにCSSを適応させることができる
□プロパティの使い分けができる
□padding, border, marginの位置関係を理解できる
□メディアクエリを使ったレスポンシブ対応ができる
□Flexboxを使ってレイアウトを組むことができる
□ローカル開発環境の構築ができる
□検証ツールを使って適宜確認ができる
□GitHubでWebページの公開ができる

JavaScript

岩崎　HTML＆CSSでは基本的なWebページの作り方を学習しましたが、なんだか少し味気ないですね。
Webページってもっと華やかなものが多い気がします。

境野　WebページにJavaScript（ジャバスクリプト）を取り入れることで、ユーザーの操作に応じた動的な表現が可能になります。
例えばボタンをクリックするとページが変わったり、マウスオーバーすると画像の色が変わるなどの動きはJavaScriptを用いて定義されています。

以下の<script></script>の間に書かれている部分がJavaScriptです。ファイルをブラウザで開くと"初めてのJavaScript"と書かれた小さいウィンドウが表示されます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScriptの練習</title>
</head>
<body>
<script>
alert('初めてのJavaScript');
</script>
</body>
</html>

岩崎　JavaScriptでは動きの部分を定義しているのですね。

境野　そうですね。Progateの「JavaScript」レッスンで実際に触れてみましょう。
レッスン内にはES6とES5のレッスンがありますが、バージョンの違いなのでどちらも学習してみるといいでしょう。

《 JavaScriptの学習》

[学習コース] JavaScript (ES5) Ⅰ
[学習コース] JavaScript (ES5) Ⅱ
[学習コース] JavaScript (ES5) Ⅲ
[道場コース] JavaScript (ES5) Ⅰ
[学習コース] JavaScript (ES5) Ⅳ
[学習コース] JavaScript Ⅰ
[学習コース] JavaScript Ⅱ
[学習コース] JavaScript Ⅲ
[学習コース] JavaScript Ⅳ
[学習コース] JavaScript Ⅴ
[学習コース] JavaScript Ⅵ
[学習コース] JavaScript Ⅶ

岩崎　関数や配列…少し難しくなってきましたね。

境野　専門的な用語も出てきて難しく感じる方も多いかもしれません。
1回で理解できる方のほうが少ないので、焦らず繰り返し学習してみましょう！

〈JavaScriptの理解度チェック〉
□コンソールへの出力ができる
□四則演算ができる
□変数の役割を説明できる
□比較演算子を利用できる
□if文を使った条件分岐ができる
□while文やfor文を使った繰り返し処理ができる
□配列とオブジェクトの違いを説明できる
□配列を操作するメソッドの使い分けができる
□関数の利用ができる
□アロー関数を使って関数の定義ができる
□classを使って、オブジェクトの作成や継承ができる
□引数とは何か説明できる
□コールバック関数について理解できる