1
/
5

今日からはじめられるWebエンジニアになるための学習ハンドブック【バックエンド編&まとめ】

今回は、バックエンドエンジニアを志望する方に向けた学習手順と、チーム開発に必須のGitというツールのご紹介をしていきます。

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


バックエンド志望の方の学習ステップ

小松 前回は、フロントエンドエンジニアにとって必要なツールを学びました!
バックエンド志望の場合は、何を学べばいいですか?

境野 バックエンドエンジニアは、より高度な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と共存させて以下のように記載することができます。

<!DOCTYPE HTML>
<html>
<p><?php echo '初めてのPHP'; ?></p>
</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エンジニアとして活躍できる日は遠くないです!

小松 次回のおまけ編では、Q&A形式で気になる質問をしてみました!
最後までお読みいただけると嬉しいです!

次回「おまけ編」はこちら。

株式会社ビヨンドワークスでは一緒に働く仲間を募集しています
2 いいね!
2 いいね!
同じタグの記事
今週のランキング