LoginSignup
48
56

More than 5 years have passed since last update.

@naomichi-y(Naomichi Yamakita)

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

Last updated at Posted at 2016-10-09

概要

以前、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の講習カリュキュラムとなります。

48
56
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
48
56