Edited at

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

More than 1 year has passed since last update.


概要

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


関連ページ


現在のスキルチェック

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


  • 使用経験のある言語

  • 使用経験のある開発ツール

  • 開発経験年数

  • 開発実績

  • ネットワークの知識


    • 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業界の動向について軽くまとめて話しました。


  • エンジニアの年齢層

  • コミュニティが活発




  • 主な職種


    • ディレクター

    • デザイナー

    • フロントエンドエンジニア

    • バックエンドエンジニア


      • 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を導入します。


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