More than 5 years have passed since last update.

未経験から7日間でコーダーとして現場投入させるまでのカリキュラムを忘れないようにメモっとく

Last updated at 2019-03-28Posted at 2019-03-24

エンジニア不足と言われて久しいですが、できる経験者を採用するのはますます難しくなっていますね。

そんななか、弊社ではひょんな縁からエンジニア未経験の新人をエンジニアとして採用することになりました。未経験とはいえ、弱小企業の弊社には悠長に育てている余裕がないため、7日間で現場投入を目指してカリキュラムを組みました。

だいたいうまくいったので、メモがわりに晒しておきます。

前提条件

誰でも7日間でエンジニアになれると言っているわけではありません。あくまで一例として捉えていただければ幸いです。

担当してもらう予定の領域

HTML/CSS コーディング
JavaScript はそこそこで（動きのエフェクトやカルーセルを仕込める程度）
concrete5 テーマの開発（PHPファイルに foreach を入れていくイメージ、WordPress と変わらない）

流石にアプリケーション開発で7日間は無理ゲー。逆にいうと、コーディングくらいであれば割とサクッと実戦レベルにはなれるかも？という算段での、未経験採用です。

本人のスペック

HTML/CSS は、自分のサイトを作ろうと思って触ったことがある程度で、特にスクール等には通っていない（サイトもまだ公開していない）
- FTP, SSH, Git という単語は知らなかった
大学生
- ただし、休学中
女性
- 性別はエンジニア適正に関係ないと思うけど、珍しいかなとは思うので一応記載
芸術系
- ここポイントかも。キレイなデザインを見てテンションが上がったり、モノを作るということに根源的な喜びを感じないと、モチベ的にきついかと思うので。

カリキュラムという名のログ

初日

支給マシン（Mac）のセットアップ
- 弊社では世間的には利用者の少ない Mac が標準OSなので、慣れてもらうためにも初期セットアップをやってもらいます。
- セキュリティ関係の設定やインストールするソフトは指示に従ってもらいます。
出退勤システム（MoneyForward）の説明
IDE（PHPStorm）の概要説明
- Bracketsを触ったことがあるとのことで、割とすんなり。

2日目

MDN マジ神。入門書不要。MDN を使って基本知識を解説していきます。

Web開発の基本を解説（座学）
HTMLの基礎を解説（座学）
マークアップしてみる
- マークアップがしっかりしていて、なおかつ文書構造が見た目からも判別しやすい教材として、自治体サイトを活用
- 世田谷区のサイトの適当な下層ページ（どれかは忘れた）で、見出し、箇条書き、表組み、画像、外部リンクが揃ったページを見て、ソースを見ずにHTMLを作ってみる
CSSの基礎を解説（座学）
- CSSの構文
スタイルを付けてみる
- マークアップしてみたHTMLの見出しなどを、世田谷区サイトに似せて付けてみる

3日目

引き続き世田谷区サイトに似せてCSSを当てていきます。

サイドバーを作る
- float の練習
  - 社内外から今から教えるならFlexboxじゃないの？というツッコミがあったが、既存サイトの修正の仕事もあるので、まだfloatから知っておいたほうがいいという判断
座学
- ボックスモデル

4日目

ヘッダー・フッター・サイドバーを揃え、ウェブサイトらしい構成を作ってみます。

ヘッダーを作る
- position を使ったレイアウトの練習
ulを使ったナビゲーションのマークアップとスタイリング
- 先頭のマークを消したり、縦に並べたり横に並べたりのアレ
jQuery基礎（座学）
- 社内外から今から教えるのにjQuery？というツッコミがあったが、既存サイトではまだまだ使われてるしconcrete5もまだjQueryに依存してるし…。いいじゃん、jQuery教えたって！
- 資料は公式のjQuery Learning Centerを使います。

5日目

JavaScriptに慣れつつ、案件で頻出するjQueryプラグインを触っていきます。

jQuery プラグインを導入してみる
- 実戦でよく使うライブラリに慣れておくことと、JavaScriptに対する恐怖感を和らげるため、簡単に動くというイメージを持ってもらう
- jQuery Smooth Scroll - とりあえず、入れれば動く
- Slick - 言わずと知れたカルーセルの決定版
- Magnific Popup - 言わすと知れたモーダルの決定版

以上で、マークアップの基礎の基礎は終了です。

6日目

ネットで入手できるフリーのデザインカンプをコーディングしていきます。支給されたデザインを再現するという、コーダーのお仕事の実践編です。

こちらがお題です。Sketch App Sources からダウンロードできます。

なぜSketchかというと、タイポグラフィやカラーリングなどある程度のCSSはSketchが教えてくれるため、実習の時間短縮が可能だからです。カラーピッカーで色を取ったり、フォントサイズを合わせたりは、１回やれば十分。

Sketch の基本的な使い方
- スタイルの取り方とパーツの書き出し方程度
Flexboxの解説
- A Guide to Flexbox
CSSでの実現手法についてディスカッション
黙々と作ってみる
- 余白、フォントサイズ、グリッドについて、デザインと実装の差分について逐次指摘して直させる

7日目

フォームのマークアップの概要（座学）
- HTMLフォームガイド
引き続き黙々とコーディング
- 随時デザインとの違いについて指摘
納品クオリティの担保
- 入れるべきChrome拡張
  - HTMLエラーチェッカー
    - 閉じタグ漏れなど、初学者にありがちなミスをサクッと指摘してくれるため、重宝します。
  - HTML5 Outliner
    - マークアップにあたっては、デザインの再現だけでなく、文書構造としても適切であることが求められます。アウトラインを可視化できるこのツールは非常に便利です。
  - Web Developer
    - JavaScript を無効にした状態での確認、ブラウザデフォルトCSSの無効にした状態での確認、alt属性値の可視化、あたりが初学者にとって必要な機能ですが、それ以外にも様々な便利な機能があり、フロントエンドエンジニア全てにおすすめできる拡張かなと思います。
- バリデータ
  - HTMLバリデータ
  - CSSバリデータ
セマンティックの基礎
- HTMLでのセマンティクス

まで、7日間の研修終了！実践編、たった２日で終了。

8日目以降の主な研修

実際は実践編の期間は１週間ほど取ってクオリティを詰めたかったのですが、新人が入ったのでコーディングの仕事ができるよ〜とFacebookでつぶやいたところ、早速お仕事の依頼が取れてしまったので、研修強制終了。翌日からは実際のコーディング案件を担当させています。

8日目

デザインが .ai で支給されたので、Adobeのインストール
- イラレで切り抜きのレクチャー（ここよくわからないので、社内のデザイナーにバトンタッチ）
Semantic UI の解説
- Semantic UI を使う理由は、普段よく使うというわけではなく、支給されたデザインからの逆算です。あと初心者にも使いやすい
- 弊社CTOのオススメはTailwind CSSなのですが、最初に使うには難しいので…。