FEED
フィード
プログラミング学習課題（ポテンシャル採用枠）
ビヨンドワークス採用担当の大森です！
「エンジニアになりたいけど何から学習すればいいのか分からない」
「そもそもWebエンジニアってなにするの？」
「プログラミングを無駄なく最短で学習したい」
そんなお悩みをお持ちのみなさまに向けて、 ビヨンドワークスのプログラミング研修担当に、オススメの学習手順を教えてもらいました！
みなさんの代わりに、気になることを質問しながら進めていきます。一緒に学習しましょう！
また、この記事はビヨンドワークスのWebエンジニア（ポテンシャル採用枠）の学習課題としています。
ビヨンドワークスにご興味をお持ちいただいている方で、プログラミング未経験の方は、二次選考時までにこちらの学習を完了させておいてください。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
大森（聞き手）
ビヨンドワークス採用担当。主にカジュアル面談や説明会を担当。
IT業界での勤務経験はあるもののエンジニアとしての就業経験はなし。プログラミングに関してはまだまだ勉強中。 面接で熱い思いを語ってくださる方とお話するのが好きです！
境野（話し手）
ビヨンドワークス研修担当。 前職ではプログラマーとして開発に従事。 HTML、CSS、JavaScript、Bootstrap、jQuery、PHP、Laravelを使用した処理プログラムを1人で対応していた。
自身も未経験からエンジニアになったという経験を活かして、現在はビヨンドワークスにてプログラミング研修を担当。フロントエンド、バックエンドどちらも担当しています。
趣味は漫画、ゲーム。好きな食べ物は焼肉、お寿司。好きな技術はjQuery。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
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年にサービスが開始され、現在は190万人のユーザーと100か国以上への提供で多くの方に利用されています。 月額980円のサブスクリプションで、
今回参考にしているレッスンは有料会員向けの内容も含まれます。（弊社の研修内容ではありません）
また、一部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を使って、オブジェクトの作成や継承ができる
□引数とは何か説明できる
□コールバック関数について理解できる
フロントエンド志望の方の学習ステップ
大森 ここからはフロントエンド、バックエンドに分かれて学習を進めていくのですね。
フロントエンド志望の場合は、何を学べばいいですか？
境野 フロントエンドエンジニアは、基本的にはここまでで学んだ3つの言語で開発を行うことが可能です。
さらに使いこなせるよう、Sass、 jQuery、Vue.jsを学習してみましょう。
Sass
境野 CSSのコードを書いているときに、何度も同じコードが出てきたことに気がつきましたか？
大森 そうですね。もう少し簡潔にまとめられないのかなって思っていました。
境野 CSSをより便利に書くための言語として、Sass（サス）というものがあります。
Sassを使うことで、CSSのコードをより簡潔に書くことができ、同じコードを何度も記載する必要がなくなります。開発の規模が大きくなった際でも拡張や変更がしやすくなるので使いこなすと便利です。 現在はSCSS記法というものが主流となっています。
Progateの「Sass」のレッスンで練習してみましょう。
《 Sassの学習 》
- [学習コース] Sass Ⅰ (1~2)
〈Sassの理解度チェック〉
□Sassを使用するメリットを説明できる
□入れ子構造を使ってコードを簡潔に表現することができる
jQuery
境野 jQuery（ジェイクエリー）はJavaScriptのライブラリのひとつです。
大森 ライブラリってなんでしょうか？
境野 ライブラリとは、よく使われる機能やプログラミングの部品をまとめたものです。 JavaScriptだとたくさんのコードを書かないといけない処理も、jQueryを使いこなすことで簡単なコードで書くことができます。
例えばJavaScriptで書く下記のコードは、
jQueryで書くと以下のように書くことができます。
簡単な例ですが、短く記載できました。
jQueryを使ってどんなコードを書くことができるのか、Progateで試してみましょう。
《 jQueryの学習 》
- [学習コース] jQuery 初級編
- [学習コース] jQuery 中級編
- [道場コース] jQuery 中級編
- [学習コース] jQuery 上級編
〈jQueryの理解度チェック〉
□jQueryを使用するメリットを説明できる
□classとidの使い分けができる
□cssメソッド、htmlメソッド、textメソッドの使い分けができる
□thisの構文を使うことができる
□findメソッドやchildrenメソッドを使って子要素の取得ができる
□hoverメソッドを使ってホバーイベントを取得できる
□eqメソッドやindexメソッドを用いて要素指定取得ができる
Vue.js
境野 さらに効率的に開発するためにVue.js（ビュージェイエス）というものをご紹介します。
Vue.jsはJavaScriptのフレームワークのひとつです。
大森 フレームワークってなんでしょうか？
境野 フレームワークとは、Webアプリケーションを開発しやすくするための枠組みのことです。よく使われる機能や基本的な機能がまとめて用意されています。
フレームワークを使うことでプログラムの見通しが良くなったり、少ないコードの量で機能性の高いアプリケーションを開発することが可能になります。
今日的なWebアプリケーションではほとんどがフレームワークを使って開発されています。
大森 Vue.jsを使うとどんなことができるんですか？
境野 ユーザーが使いやすく見やすいWebアプリケーションを効率的に構築することができます。
上手く活用することで、洗練されたSPA（シングルページアプリケーション）の開発も可能となります。
Vue.jsはフレームワークの中でも特にシンプルで学習もしやすいため、初心者でも扱いやすいと言われています。
Vue.jsのレッスンはProgateにないので、Youtubeの動画と書籍を組み合わせて学習を進めていきます。
《 Vue.jsの学習 》
境野 まずは下記の動画をみて、ざっくりとVue.jsについて把握してみましょう。
配信者の たにぐちまこと さんは数多くの技術書を出版されていることで有名です。やさしく、わかりやすく説明されているので、まずはこの入門動画をみてみましょう。
- Vue.js入門 #01： 一番最初のプログラム
- Vue.js入門 #02： 最初のプログラム解説
- Vue.js入門 #03：if構文とディレクティブ
- Vue.js入門 #04：Vue.jsによる属性の書き換え
- Vue.js入門 #05：ボタンクリックで現在時刻を表示する – v-onディレクティブ
- Vue.js入門 #06：配列の内容を繰り返し表示する – v-for
- Vue.js入門 #07：Vue.jsの動きにアニメーションを追加しよう
- Vue.js入門 #08：コンポーネントで再利用可能なパーツを作ろう
大森 Youtubeでの動画学習はすごくわかりやすいですね！実際のエンジニアさんがコードを書いているところを動画で見れるところも魅力的でした。
境野 そうですね、僕がプログラミング学習をはじめた頃はこういう動画はあまりYoutubeには出ていなかったように記憶しているので、これから学習をはじめる人は動画は良いです。
Youtubeでの学習が完了した人は以下のチュートリアルをやってみましょう。ToDoリストをつくりながら学習できる内容になっています。内容がわからなくてもつくりきることを目標にしてください！
大森 最初に完成形が置いてあるので、間違っても見比べながらやりきることができそうです。
境野 最後におすすめの本ですが、本格的にエンジニアになることを目指している方は以下の書籍で学習してみましょう。こちらの著者の山田 祥寛 さんも数多くの技術書を出版されていることで有名です。
こちらの書籍は骨太な内容になっています。ライトに学びたい方は購入を後回しにしてくださいね。中級者になるまで十分つかえる内容になっています。ノートアプリなどに自分が理解したことをメモしながら学習していきましょう。
〈Vue.jsの理解度チェック〉
□フレームワークとは何か説明できる
□Vue.jsを使用するメリットを説明できる
□データバインディングについて説明できる
□ディレクティブを活用できる
□isDoneを使用してToDoの完了状態を管理できる
□v-ifディレクティブを使って条件分岐ができる
□computedキーを使ってデータから動的にプロパティを算出できる □LocalStorageを使って入力したデータを永続化や読み出しができる □Componentについて説明できる
□Componentに機能を持たせることができる
□propsキー、emitキーを用いて Componentに値を送れる
境野 フロントエンド志望の方の学習手順はここまでです！
分からなかった部分は何度も繰り返し学習してみてくださいね。
バックエンド志望の方の学習ステップ
大森 フロントエンドエンジニアにとって必要なツールを学びましたが、バックエンド志望の場合は、何を学べばいいですか？
境野 バックエンドエンジニアは、より高度なWebアプリケーションを開発する必要があるので、バックエンドのプログラミング言語を学ぶ必要があります。
言語はいくつかありますが、今回はPHPをご紹介します。
PHP、データベース言語であるSQL、 PHPのフレームワークであるLaravelを学習してみましょう。
Command Line
境野 普段コンピューターを操作するときって、マウスで画面上をクリックしていますか？
大森 そうですね。それ以外どうやって操作するのでしょうか？
境野 コンピューターを操作するためにCommand Line（コマンドライン）というツールを使います。
Webアプリケーションを開発する際はTerminal（Windowsの方はPowerShell）という黒い画面ににコマンドと呼ばれる文字を入力することでコンピューターを操作します。
大森 黒い画面…なんだかそれだけで難しそうな予感がします（笑）
境野 慣れるまでは戸惑うかもしれません。
ただ、バックエンドエンジニアを目指す方は必須のツールですので、しっかりと使い方を理解しておくといいですね。
Progateの「Command Line」レッスンで、ファイルの作成や変更などを行ってみましょう。
《 Command Lineの学習 》
- [学習コース] Command Line 基礎編
〈Command Lineの理解度チェック〉
□ファイル、ディレクトリの作成ができる
□ファイル、ディレクトリの移動ができる
□ファイル、ディレクトリ名の変更ができる
□ファイル、ディレクトリのコピーができる
□ファイル、ディレクトリの削除ができる
PHP
大森 今回学習するPHPはどんな言語ですか？
境野 PHP（ピーエイチピー）はバックエンドの開発で使われるプログラミング言語です。ECサイトやソーシャルゲームなどの開発でよく使われます。
大森 これまで学んだ言語とどう違うんですか？
境野 HTML、CSS、JavaScriptはコードで書いた内容をブラウザ上に表示するものでしたが、PHPはサーバー側で動作し、ユーザーから送信されたデータによってページの内容を変えることができます。 サーバー側でPHPがどのように動いているのか、ユーザー側からは見えません。
PHPのコードを書く際には、必ず開始タグ<?php を書きます。
また、PHPはHTMLと共存させて以下のように記載することができます。
大森 見えない部分で動くって難しそうですね。
境野 フロントエンドに比べると難しいと感じることも多いと思いますが、その分開発できるサービスの幅は広がります。 エラーが出たときは焦らず入力内容を確認してみてくださいね。
Progateの「PHP」レッスンで、実際に使ってみましょう。
《 PHPの学習 》
- [学習コース] PHP Ⅰ
- [道場コース] PHP Ⅰ
- [学習コース] PHP Ⅱ
- [学習コース] PHP Ⅲ
- [学習コース] PHP Ⅳ
〈PHPの理解度チェック〉
□echoでテキストの出力ができる
□変数とは何か説明できる
□文字列の連結ができる
□if文、else文、elseif文を用いて条件分岐ができる
□論理演算子の使い分けができる
□switch文を使った条件分岐ができる
□配列・連想配列の違いが説明できる
□for文、while文、break文、continue文、foreach文を使った繰り返し処理ができる
□関数の定義・利用ができる
□formタグの使い方を理解できる
□四則演算ができる
□オブジェクト指向の概念を理解できる
□クラスとインスタンスについて説明できる
□プロパティとメソッドについて説明できる
□コンストラクタの実行タイミングについて説明できる
□オブジェクトの継承ができる
□Webページ内にリンクやレビューの表示ができる
SQL
大森 SQLとはどのような言語ですか？
境野 SQL（エスキューエル）は、データの管理や分析を行うデータベース言語です。
大森 データベースとはなんでしょう？
境野 データベースとは、ユーザーやコンテンツのデータを保存しておくための場所のことです。 データベースがなければデータを保存することができないので、複雑なサービスを開発することができません。
大森 データベースにはどんなデータが保存されているのですか？
境野 例えばショッピングサイトで検索すると表示される商品の情報や、会員情報などのデータは、全てデータベースに保存されています。 SQLを使うと、データベースに対して「どんなデータを引き出すか」「どんなデータを格納するか」などの処理を実行することができます。Progateで、SQLの使い方を学習しましょう。
《 SQLの学習 》
- [学習コース] SQL Ⅰ
- [学習コース] SQL Ⅱ
- [学習コース] SQL Ⅲ
- [道場コース] SQL Ⅰ
- [学習コース] SQL Ⅳ
大森 データベースの必要性がわかってきました。
実際に自分のPCで使うにはどうしたらいいのでしょうか？
境野 自分のPCでデータベースを使うためには、MySQLの準備が必要です。 MySQLは代表的なデータベース管理システムのひとつで、大量のデータの中から少ないデータを高速で取り出すことができるという強みがあります。
Progateの下記ページを参考に、MySQLの環境を用意して実際に使ってみましょう。
[MySQLでデータベースを作成する]
- MySQLの開発環境を用意しよう（macOS）
- MySQLの開発環境を用意しよう（Windows）
※お使いのOSに合わせて選択してください
- MySQLでデータベースを作成しよう
- MySQLでカラムを追加・変更・削除しよう
〈SQLの理解度チェック〉
□データベースとはなにか説明できる
□SELECTを使ってデータの取得ができる
□DISTINCTを用いて重複するデータを取り除くことができる
□取得したデータを四則演算を用いて加工できる
□集計関数の使い分けができる
□データのグループ化ができる
□サブクエリを使って複雑なデータを取得できる
□テーブル結合について説明できる
□データの追加、更新、削除ができる
□MySQLでデータベースの作成ができる
□MySQLでカラムの追加・変更・削除ができる
Laravel
大森 データベースについて学んだので、バックエンドの開発もできそうな気がしてきました！
境野 そうですね。 PHPのフレームワークであるLaravel（ララベル）も学習しておきましょう。
大森 フレームワークはVue.jsのところでも学習しましたね！
Webアプリケーションを開発しやすくするために、基本的な機能がまとめてあるもののことですね。
境野 その通りです！
Laravel（ララベル）は、最もよく使われているPHPのフレームワークです。開発の自由度が高くカスタマイズしやすいという特徴があります。
LaravelのレッスンはProgateにないので、オススメのYouTube動画をご紹介します！
これまでの内容に加えて、MAMP（マンプ）というツールと、Node.js（ノードジェイエス）という実行環境のインストールが必要ですので、コメント欄の手順に沿ってインストールしておきましょう。
《 Laravelの学習 》
（Webアプリ独学開発チャンネル【打田裕馬】さんの動画を参考にさせていただきました！ありがとうございました！）
〈Laravelの理解度チェック〉
□フレームワークとは何か説明できる
□Laravelを使用するメリットを説明できる
□artisanコマンドを使ってマイグレーションファイルの作成ができる
□ログイン機能を実装できる
□Bladeテンプレートを使用してレイアウトファイルの作成ができる
□MVCの仕組みを説明できる
□ルーティングについて説明できる
□ddを使ったデバックができる
□whereを使ってデータの取得ができる
□foreachを使ってループができる
□Bootstrapについて説明できる
□ルーティングの設定ができる
□引数について説明できる
□formの実装ができる
□リレーションについて説明できる
□Vue composerの活用ができる
チーム開発を行うための学習
境野 プログラミング言語に実際に触れてみていかがでしたか？
大森 難しい部分も多いですが、自分でサービスを作っていけるのは楽しいです！
実際にエンジニアになったらチームでプロジェクトを進めるんですよね？ うまく連携が取れるか不安ですね…
境野 チーム開発に必要なツールもあるんです。
最後に、フロントエンド、バックエンド、どちらのエンジニアを目指す方も必須で知っておくべきツールのご紹介をします。
Git
大森 Gitとは、最初に少し触れたGitHubの仲間ですか？
境野 そうですね。 GitHubはGitを用いて管理されているサービスのひとつです。
Git（ギット）はソースコードのバージョン管理や共同開発を可能にするシステムです。
IT業界でプロダクト開発を進めるうえで、バージョン管理のツールを導入することは大前提のひとつとなっているため、エンジニアとしてお仕事をするのであれば使いこなす必要があります。
大森 どのように使うのですか？
境野 例えばゲームを行う際に、こまめにデータをセーブしておく必要があるかと思います。データをセーブしておくことで、ゲームを中断しても続きから開始できたり何かトラブルがあったときも途中からやり直すことができますよね。
それと同じように、Gitを使うと、コードの修正者や日時などの変更履歴を確認できるようになります。問題が起きたときに、元の状態に戻したり正しく修正することが可能になります。
大森 なるほど。これを使うとチームで連携が取れるんですか？
境野 チームでの共同開発においては、新しいメンバーが変更履歴から過去のコードの経緯を確認できたり、他のメンバーの作業状況を把握してフォローをしたりと、何かと便利です。
Progateの「Git」のレッスンで、使い方を学習しましょう。
《 Gitの学習 》
- [学習コース] Git Ⅰ
[Gitの環境構築]
実際に自分で開発を行う際は、自分のPCにGitの環境を用意する必要があります。 Progateの下記のページを参考に環境を構築しましょう！
- 【Mac】 Gitの環境構築をしよう！
- 【Windows】 Gitの環境構築をしよう！
※お使いのOSに合わせて選択してください
大森 自分で開発する際も記録しておくといいですね！
境野 学習した内容をGitにまとめておけば、面接の際にもこれまでの学習をアピールすることができます！どんどんまとめておきましょう。
〈Gitの理解度チェック〉
□自分のPCにリポジトリをクローンできる
□Pushしてローカルリポジトリの情報をリモートリポジトリに反映できる
□リモートリポジトリのコードをPullしてローカルに取り込める
□Commitして変更履歴を保存できる
□ブランチの作成・切り替えができる
□共同開発の流れやメリットを説明できる
まとめ
大森 Webエンジニアを目指すにあたって必要な学習がよく分かりました！
今回学んだ内容をまとめておきます。
フロントエンド＆バックエンド共通：HTML、CSS、JavaScript
フロントエンド：Sass、 jQuery、Vue.js
バックエンド：PHP、SQL、Laravel
チーム開発のためのツール（フロントエンド＆バックエンド共通）：Git
境野 今回学習したもの以外にも、プログラミング言語やツールはたくさんあります。 今回はあくまで学習の一例ですので、興味のある内容があればどんどん触れてみてくださいね！
大森 自分の興味のある言語や学びたいツールが見つかると学習がさらに楽しくなりそうですね。 プログラミングは難しいイメージでしたが、順序立てて学習すると自分が何につまずいているのか見えてきました！
境野 そうですね。最初は分からないのは当たり前ですので、何度も繰り返し学習して少しずつ苦手を克服していくことが大切です。 諦めずに学習する習慣を身につけていけば、Webエンジニアとして活躍できる日は遠くないです！
おまけ
大森 プログラミングについていろいろと学んできましたが、そのほか、身につけておくべきスキルはありますか？
境野 ブラインドタッチを身につけておくと、タイピングスピードが早くなります。無意識で入力できるようになるとプログラミングの効率も格段に上がります！
大森 タイピングの効果的な練習方法はありますか？
境野 まずはホームポジションに慣れましょう。
キーボードには、「F」と「J」にくぼみがついています。「F」には左手の人差し指を、「J 」に右手の人差し指を置き、左手中指から小指は「D」「S」「A」に置き、右手の中指から小指は「K」「L」「；」にそれぞれ順に置きます。これをホームポジションといいます。
入力する時はホームポジションから指を「ハ」の字型に動かします。エンターキーは右手小指で押しましょう。
寿司打やe-typingといったタイピングの練習サイトもあるので、目標を決めて練習しておくといいですね。
大森 タイピング、わたしもまだまだ遅いので練習します…！
面接の際によくご質問いただくのですが、資格なども取ったほうがいいですか？
境野 Webエンジニアを目指すにあたって、専門資格は絶対に必要なわけではありません。まずはプログラミングのスキルを磨くことをオススメします。
エンジニアの採用面接では、ポートフォリオなどで技術をアピールする方が有効な場合が多いです。 ただ、資格を取ることで自分の自信に繋がったり、学習を振り返ることができるというメリットもあります。
大森 そうなんですね！資格取得を目指すかどうかは自分次第ですが、プログラミングスキルを磨くのは必須ということですね。
（よく耳にする資格について詳しくまとめてみましたので、気になる方は以下の記事もご覧ください！「資格があると安心？Webエンジニアを目指すにあたって、よく耳にする資格5つを比較してみました」）
大森 ビヨンドワークスの技術面接では、メンターの方たちが面接官を担当する場合もありますよね。 技術面接でみなさまにお聞きしている内容を少しだけ教えていただけませんか？
境野 例えば、「変数とはどんなものか説明してください」「フレームワークについて説明できますか？」「GETリクエストとは何か分かりますか？」といったことですね。 ほとんどネタバラシになってしまいますが…（笑）
何かを暗記していればいいというわけではなく、技術的な用語の意味や使い方を本当に理解しているのかどうかを重視しています。
大森 ネタバラシありがとうございます（笑）
用語の意味まで理解するには相当学習が必要そうですね。
境野 これだけ聞くと難しそうだなという印象を受けるかもしれませんが、エンジニアになるためには、コードの意味や仕組みまで理解できていなければいけません。
現在プログラミングを学習している方は、コードのコピペや単語の丸暗記にならないよう、「どうしてこのコードが動いているのか」「用語は何を表しているのか」といったところを理解しながら学習を進めるといいのではないかと思います！
大森 これからビヨンドワークスの選考を受けてみたいと考えてくださっている方は、ぜひ参考にしてみてください！
今回は、分かりやすく教えていただきありがとうございました！ 何から学習を始めたらいいのか分からない方は、エンジニアを目指す道筋が見えてきたのではないでしょうか。
境野 自分も未経験からプログラミングの学習をしてエンジニアになったのですが、最初は何から取りかかるべきか分からないですよね。
努力すれば必ず道は開けるので、焦らずコツコツ学習していきましょう！ エ
ンジニアになったみなさんと、いつか一緒にお仕事できる日が来ることを楽しみにしています！
ここまでお読みいただきありがとうございました！ 学んでみて楽しいと感じた方は、ぜひ一度ビヨンドワークスにもお話しを聞きにきてくださると嬉しいです！