Web開発未経験エンジニア向けのハンズオン1 - はじめに

# 概要

以前、Web開発を経験したことがない組み込みエンジニアの方にWeb開発のノウハウを教える機会があったので、その際に作成したカリキュラムを公開します。

# 関連ページ

* [Web開発未経験エンジニア向けのハンズオン1 - はじめに](http://qiita.com/naomichi-y/items/ad802167a6ef14a691b7)
* [Web開発未経験エンジニア向けのハンズオン2 - HTML](http://qiita.com/naomichi-y/items/3544d75328f54950bdc9)
* [Web開発未経験エンジニア向けのハンズオン3 - CSS](http://qiita.com/naomichi-y/items/3544d75328f54950bdc9)

# 現在のスキルチェック

カリュキュラムを作成するに辺り、事前に現在のスキルをヒアリングします。

* 使用経験のある言語
* 使用経験のある開発ツール
* 開発経験年数
* 開発実績
* ネットワークの知識
    * TCP/IP
    * HTTP
    * DNS
* データベースの知識
* Linuxの知識
    * 基本操作
    * ソフトウェアのインストール
    * サーバ構築

# ゴールの明確化

Web開発を学ぶに辺り、最終的に目指したいゴールを設定してもらいました。

## 短期目標

1. Web+DBを用いたファイル検索システムを構築するための技法を習得する
2. AWSを用いたシステム運用方法を学ぶ

## 長期目標

1. ビックデータの分析手法を学ぶ
  * Redshift or EMR

# 学習内容を決める

短期目標は一般的なWebシステムの構築となるため、モックアップを作りつつ関連する技術を習得する流れとします。

* 設計
    * 画面
    * ネットワーク
        * HTTP
        * DNS
    * データベース
       * MySQL
* 開発
    * オブジェクト指向
    * PHP or Ruby (今回はPHPを採用)
* 運用
    * AWS (Linux)
        * 一年間の無料枠を利用

## 講習から省いた要素

理論より実践という訳で、手っ取り早くサービスを立ち上げるため、以下の技術は今回の講習から省きました。

* UML
* デザインパターン
* ドメイン設計 (DDD)
* 継続的インテグレーション (CI)
    * CircleCI、Travis CI等
* ビルドシステム
    * gulp.js、Grunt等
* 構成管理
    * Ansible、Chef等
* デザイン (UI, UX)
* JavaScriptフレームワーク
    * Vue.js、AngularJS等
* テスト手法 (BDD, TDD)
    * PHPUnit
* ネットワーク
    * SSL
    * SMTP/POP

今回は組み込みエンジニアの方への講習でしたので、TCP/IPの基礎やLinuxの基本操作、プログラミング言語の基礎文法も除外しています。

# Web業界の特色

最近のWeb業界の動向について軽くまとめて話しました。

* エンジニアの年齢層
* コミュニティが活発
    * OSS
    * ソースコードの共有
      * GitHub
    * 勉強会
      * [dots.](https://eventdots.jp/)
    * オンライン学習サービス
      * [CODEPREP](http://codeprep.jp/ja)
      * [Progate](https://prog-8.com/)
      * [ドットインストール](http://dotinstall.com/)
* 主な職種
    * ディレクター
    * デザイナー
    * フロントエンドエンジニア
    * バックエンドエンジニア
        * Webアプリケーション
        * ネイティブアプリケーション (iOS/AOS)
    * フルスタックエンジニア

* 開発
    * リリースサイクルが速い
        * OSのアップデート (iOS/AOS)
        * ユーザフィードバックによる機能改善
        * バグ・セキュリティフィックス
        * システムのスケールアウト
    * 技術動向
        * フロントエンド
            * とにかく技術進歩が速い
        * バックエンド
            * PHP、Rubyが人気
                * Web開発に特化した言語
                * それぞれの言語の利点・欠点
            * Pythonの優位性
        * インフラ
            * オンプレミスからクラウドへの移行
                * スケールメリット
                * コスト
                * セキュリティ
            * AWS、GCP、Azure
    * トレンド
        * モバイルファースト
        * サーバレスアーキテクチャ
            * Lambda
        * AI、ビックデータ
        * VR

# 講習予定の技術

講習を始めるに辺り、学習していく技術を選定します。今回は習得のし易さ、ドキュメントの豊富さで候補を選びました。

* 設計
    * オブジェクト指向
    * データベース設計
    * Webアプリケーションのセキュリティ
* フロントエンド
    * HTML
    * CSS
       * Bootstrap
    * JavaScript
       * jQuery
* バックエンド
    * Apache
    * PHP
      * Composer
      * Laravel
          * REST
          * Eloquent
* ネットワーク
    * AWS
        * 基礎
            * EC2
            * RDS
        * 応用
            * Lambda
            * S3
            * Redshift
            * Route 53
            * CloudWatch
            * API Gateway

* データベース
    * MySQL
        * DDL
        * DML
        * リレーション
        * ACID

* 開発ツール
    * Git (GitHub)
    * Docker

# 学習フロー

大まかに次の手順で学習します。

1. HTML
2. CSS
3. JavaScript
4. AWS
5. Git
6. PHP
7. MySQL
8. Docker

また、フレームワークを用いた開発の利点・欠点を学習してもらうため、初めはフレームワークを使わずいくつかのプロトタイプのアプリケーションを作成してもらう形を取りました。

# 開発環境の構築

開発に必要となるツールをセットアップします。
手っ取り早くHello worldしたいので、開発環境にはMAMPPを導入します。

* ブラウザ
    * [Chrome](https://www.google.co.jp/chrome/)
* Apache、PHP、MySQL
    * [MAMPP](https://www.mamp.info/en/)
* Git
* MySQLクライアント
    * [Sequel Pro](https://www.sequelpro.com/)
* SFTP / S3クライアント
    * [Forklift] (http://www.binarynights.com/)
* コンテナ
    * [Docker](https://www.docker.com/)
    * [Docker compose](https://docs.docker.com/compose/)
* 開発エディタ
    * [Sublime text](https://www.sublimetext.com/)
* その他
    * [Slack](https://slack.com/)

* * * 

次回はHTMLの講習カリュキュラムとなります。