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

概要

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

関連ページ

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

現在のスキルチェック

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

• 使用経験のある言語
• 使用経験のある開発ツール
• 開発経験年数
• 開発実績
• ネットワークの知識
  • 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.
  • オンライン学習サービス
    • CODEPREP
    • Progate
    • ドットインストール

• 主な職種

  • ディレクター
  • デザイナー
  • フロントエンドエンジニア
  • バックエンドエンジニア
    • 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
• Apache、PHP、MySQL
  • MAMPP
• Git
• MySQLクライアント
  • Sequel Pro
• SFTP / S3クライアント
  • [Forklift] (http://www.binarynights.com/)
• コンテナ
  • Docker
  • Docker compose
• 開発エディタ
  • Sublime text
• その他
  • Slack

---

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