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

そんななか、弊社ではひょんな縁からエンジニア未経験の新人をエンジニアとして採用することになりました。未経験とはいえ、弱小企業の弊社には悠長に育てている余裕がないため、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の基本
  • CSSの基本
  • JavaScriptの基本
  • ウェブサイトの公開
  • ウェブのしくみ
• HTMLの基礎を解説（座学）
  • HTMLをはじめよう
  • head には何が入る? HTML のメタデータ
  • HTML テキストの基礎
  • 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
  • バリデータ
    • HTMLバリデータ
    • CSSバリデータ
• セマンティックの基礎
  • HTMLでのセマンティクス

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

8日目以降の主な研修

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

8日目

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

10日目

• Git の使い方と初期セットアップ
  • 教材は当然、サルでもわかるGit入門
• メディアクエリの解説 CSSでメディアクエリ(Media Queries)の基本的な書き方、記述の意味を理解し、「何となく使う」を卒業する。

concrete5 テーマ作成

クライアント確認の合間を塗って、弊社監修の『世界一わかりやすいconcrete5導入とサイト制作の教科書』を使って、concrete5のテーマ制作とテンプレートカスタマイズについて自習させました。

本を使っての自習はだいたい丸２日間で終わらせました。concrete5のテーマ制作は、考え方が独特なのでつまづく人も多いのですが、詰まった時のサポートさえあれば正直かんたんなので、これくらいで学べます。

まとめ

もちろん足りない知識だらけなので、都度知識は補填しながら、１ヶ月が経過しました。現在は２つ目の案件のコーディングを担当しています。

自分がこの業界に入った時（10年ちょっと前）に比べると、何もかも楽になったものだとしみじみ思います。

何かしらの参考になれば幸いです。