WEBエンジニア新卒研修マニュアル（1）

こんにちは、NE株式会社の巻嶋です。

私もWEBエンジニアとして、新卒で入社してから、速いもので今年で8年目となりました。
まだまだ気持ちは新卒1年目のままなのですが、どんどんと後輩が入ってくるのを見て、「あぁ、先輩になってしまったのだなぁ」という思いが日に日に募ってまいります。

さて、後輩が入ってくると、先輩は仕事を教えなくてはいけません。
自分がまだまだ未熟だなぁと思っていても、きっと教えてあげられることはあるはずなので、頑張ってチャレンジしてみましょう。

というか、別に自分が先輩だからといって、すべてにおいて新人さんより優れている必要はありません。
得意不得意、興味がある分野、これまでの経験、性格など、人の個性は十人十色、いろいろあると思うので、お互いに良いところを吸収しあって、高めていきましょう！

とはいえ、「さあ研修をしましょう」となっても、いったい何から始めたら良いのでしょうか？
私の場合、WEBアプリケーションを作る部署に所属していますので、プログラミングの技術面を教えるというのが中心になってくるのだと思います。
新人さんがプログラマー初心者であるのと同じように、こちらもひよっこトレーナーですから、戸惑うのは当然のことです。

今回の記事では、入社2年目から8年目まで、私が「先輩」になってから、たくさんの後輩さんたちに指導させていただいた経験を元に、どうやったら良い研修ができるか、私なりのメソッドをご紹介したいと思います。

OJTとOff-JT

研修のスタイルは、大きく分けて、OJTとOff-JTがあります。
OJTは仕事をしながら実践で学んでもらうスタイル。Off-JTは仕事とは分けて、講義のような形式で学んでもらうスタイル。

OJT、Off-JTという呼び方は、エンジニアの方がよく使っていますが、別にエンジニア以外の仕事でも同じです。
例えばコンビニの店員さんで、初心者マークを名札につけ、横に先輩従業員がつきながら、レジ打ちをしている人を見たことはありませんか？
あれがOJTで、要は分からないなりに、実践で学んでいこう、というスタイルです。

Off-JTは、講義形式です。
チェーン店の飲食店だと、マネージャー研修が定期開催されて、調理方法や、接客方法の指導等がある場合があります。
要するに、学校や塾のようなやり方だと思っていただければほぼ間違いないです。

これはどちらが優れているというものではありません。
新人さんのこれまでの知識や興味、目指す方向に応じて、オーダーメイドで考えていきます。

人数に関しては、個別指導塾のような形で1対1（できればトレーナーは2人）でやるのがおすすめです。

Off-JTに限って言えば、学校や塾のように、30〜40人を同時に指導するやり方もできなくは無いと思いますが、私の所属しているNE株式会社の場合は、そんなに大勢の新人採用をしたことがありませんので、やってみたことがありませんから、どうなのか分かりません。

今回は、ロールモデルとして、「プログラミングなんてまったくしたことないけど、これから頑張ってプログラマーになるぞ！」と燃えている新人さんを想定しています。

目指すところとしては、弊社のサービス、ネクストエンジンの「企画・新規開発・既存改修・保守・トラブル時のサポート対応・レビュワー」がある程度の水準までできるようになることです。
「ある程度の水準」はあいまいですが、本人が働いている充実感を得られるところまで成長できれば研修として十分と言えるでしょう。

Off-JT

研修は焦らず、スモールステップで進んでいきましょう。

昨日できなかったことが今日できるようになっていれば、それでOKなのです！
「仕事なんだから」とか「お給料もらってるから」とか、変に気張ってしまわないようにしましょう。

まったくプログラミング経験が無い人や、まだ経験が浅い人に、Off-JTは、とても有効です。

というのも、スモールステップで進めるにあたって、ちょうど良いレベル感の課題がOJTでは用意しきれないことがあるからです。
いきなり難易度の高めの開発に入るのもダメではないですが、少々スパルタな研修になります。

私の場合、ただ技術力をつけてもらうのではなく、「長く楽しく続けて欲しい」という考えがありますので、あくまでスモールステップで進めていきます。

外部の教育機関も数多くありますが、弊社では新卒2年目のエンジニアが1年目のOff-JTをやるのが慣例になっています。

「教える」というのは、新人さんのためではあるのですが、「教える」という経験を通して、1年間かけて学んできたことを、人に説明できるレベルまで整理することができます。
ですから、研修は「教わる側」より「教える側」の方が勉強になることが多いと私は思います。

WEBエンジニアを目指すのであれば、ベストな課題としては、「掲示板をつくってみる」だと思います。
レベル感としては、たとえば、下記のKENT-WEBさんで配布しているぐらいの掲示板を、１から作り上げるぐらいのことを目指していきましょう。

（ちなみに、KENT-WEBさんは90年代から、WEBサービス用のソース配布をしていて、しかもずっと更新し続けている、超老舗です。3億回もアクセスがあってすごいサイトです。尊敬しています。
Perlのソース配布していますが、「丸々コピーして完成！」は研修としてはダメですよ。もちろん、普通に掲示板として設置するのに使うのはまったく問題ないです。)

説明する順序

研修の順序としては、新人さんの興味がある分野からやっていただくのが良いと思いますが、基本的にはこの順序で説明しています。

①HTML
②CSS
③PHP
④MySQL
⑤JavaScript

シェルの操作やgitの使い方、デプロイの方法などは、適宜必要になったタイミングで説明しています。

どんな順序でやっても良いんですが、この順序だとストーリーが作れます。

ただ、画面の動きを見るよりもデータ設計などの方が好きだったり、経験がある人の場合、PHPやMySQLから入ることもあります。

具体的な説明内容については、他の方が執筆された、Qiitaの初心者向けの説明がたくさんあります。

また、こちらは有料になりますが、比較的安価で、おすすめの教育コンテンツを2つご紹介します。
よくまとまっていて、私自身も新しい技術に触れるときには、よく使っています。

①HTML

まずはHTMLを書いてみましょう。メモ帳でも何でも良いです。これをWEBブラウザで見てみましょう。ページになりましたね。これがWEBページというものです。初めてのページができましたね！　おめでとうございます！　さっそく世界に公開していきましょう！ と言って、デプロイをしていきます。

この段階では、herokuやAWSにデプロイするのは難しいと思います。
結構いろいろconfigいじらないといけなかったり、gitの概念が必要だったりしますからね。

私のおすすめとしては、XREA FreeにFTPでアップロードしてもらうことです。

広告が自動で入りますが、無料なのに、めちゃめちゃ高機能です。
小規模なサイトでしたら、自分は本番環境でも、XREAの広告なしプランを選択します。

②CSS

HTMLだけだと簡素ですよね、いつも見てるページはもっと華やかですから、色とかつけてみましょう。
と言います。

このあたりは個人の志向や、キャリアパスにもよりますが、CSSは深みにハマりすぎない程度で良いかもしれません。

いきなり全部のCSSを書くのは大変ですから、Bootstrapを導入して、見た目を良くする、ということで代替しても良いと思います。

難しすぎる課題は嫌になってしまいますから、Bootstrapをちょっといじるくらいで良いと思います。

もし自社で使っているフレームワークがあれば、Bootstrapの代わりに、それを使うと、業務に移行しやすいですね。

CSSを直接触るタイミングとしては、bootstrapでまかなえないデザインをしたいなと思った時です。
CSSは、課題が出てきたときに、「文字　中央寄せ CSS」のように、Googleなどで検索して少しずつ覚えていくようにしましょう。
滅多に使わないCSSのプロパティまで、全部初めから覚えるのは学習効率が良くありません。
私もすべてのプロパティを熟知はしておりませんが、それでも画面のデザインを作ることはできています。

「必要な時に必要なものを覚える」がCSSの鉄則です。

③PHP ④MySQL

PHP、MySQLは弊社の構成で多く使われているものです。
サーバーサイドで動作するプログラミング言語やデータベースの製品は色々ありますから、ご自身の会社で使われているものに適宜置き換えて下さい。

※PHPの代わりにRuby、Java、Python、Perl、.NET系の言語など
※MySQLの代わりにPostgreSQL、Oracle、SQL Serverなど

ほぼ同時進行でいきます。動的ページと静的ページの説明をします。
私の場合、Amazonのマイページを見せて、
「さて、これを人数分、HTML作るのって、できますかね? まあもちろん、一応理屈の上では出来るんですが、すごく大変ですし、Amazonほどの人気サイトであれば、実質不可能ですよね。そうなるとページの内容を自動生成したくなりますよね。」
というようなシナリオです。

⑤JavaScript

JavaScriptを最後に持ってきたのは、Ajaxの説明をするためです。
①〜④のすべてを先にやっておかなければ、Ajaxの意味がわかりません。
掲示板で言うと、たとえば「良いねボタンを押すと、リロードすることなく良いね数が増える」などが良いと思います。

生のJSをそのまま使っても良いですが、jQueryを導入するのをおすすめします。

使いたい機能としては、セレクターとajaxです。

ReactやVueなども非常に優れたフレームワークですし、私もプロダクトで好んで使用しますが、コンパイルする必要があったり、生のJavaScriptと考え方が大きく異なる点があったりなど、初めてJavaScriptを触る人にとっては少々敷居が高いように思います。

jQueryですと、必要な前提知識が少ないので、とっつきやすいと思います。

Ajaxに関しては、jQueryにあるAjaxの機能が私は好みです。

jQueryのAjaxの方が私は慣れているのですが、fetchAPIも人気です。
fetchAPIを使う場合、PHP側の処理も少し変わってきます。
https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch

セレクターについては、jQueryのセレクターを使っても良いですし、JSのquerySelectorを使っても良いと思います。

JS周りは他にも色々と便利なフレームワークがありますが、自社で使っているものを積極的に紹介してあげましょう。

学習方針

上記①〜⑤は、①が終わったら②、②が終わったら③というようなものではなく、
積み重ねですから、おそらく、行ったり来たりする形になると思います。

丸一日講義だけずっとするのではなく、「少しだけ説明して、作ってみる」の繰り返しで良いと思います。

この段階では、広く浅い理解ができていれば十分です。

教えたいことはたくさんあると思いますが、情報過多になると説明を受ける側が嫌になってしまいますので、この段階では、「何を教えないか」をよく考えるのが大事です。
WEBアプリケーションエンジニアを想定するのであれば、この段階で教えるべきでないことは、たとえば下記のような知識です。

• オブジェクト指向
• デザインパターン
• リファクタリング
• 速度改善
• データベースチューニング
• テストコードの書き方
• React、Vue
• マネジメントの方法
• 経営、法律、会計などの知識
• 美しいUI/UXの作り方
• サーバー周りの深い設定方法
• AI関連の知識
• 情報技術者試験対策

これらは、現段階で教えるべきでないですが、「学ぶ必要がないもの」ではないので誤解のないようにお願いしますね。

これらは、知っているに越したことはない知識なのですが、中級者〜上級者のエンジニア向けです。
深みにハマりすぎるといつまで経ってもOff-JTが終わりません。

考え方としては、とりあえず掲示板を作るのに必要な最低限の知識だけを取捨選択します。

見てくれが多少悪くても、動作が重くても、中のコードがスパゲッティでも構いませんので、とりあえず「掲示板」として成立するものを最速ルートで作り上げます。

成果物発表

「掲示板」が完成したら、新人さんに作品発表の機会を作ってあげて下さい。

発表会は、「プロ」としてデビューするための大切な会です。
これまで仲間内でしか作品発表する場がなかった人が、「多くの人に自分が作ったものを見てもらう」という機会です。

15分くらいのプレゼンで、自分で自分の作品の説明をしてもらいます。

自分が作ったもののアラは誰よりも自分が一番良く知っていると思います。
「ここが思い通りに仕上がらなかった」とか。

こういう言い方をすると、私が作ったものを気に入ってご購入いただいているお客様に失礼かもしれませんが、もう8年エンジニアをやっている私ですら、自分が作った製品を100点満点だと思ったことはありません。
やはりどこか「もっとこうしたかったな」という「後悔」があるものです。

当然、新人の頃の私は、今よりずっとその「後悔」は大きかったです。

きっと自信が持てなくて、緊張していると思います。
「大丈夫だよ」「良く出来てるよ」と声をかけてあげてください。
そして、言葉だけでなく、「人前に出しても恥ずかしくないレベル」とトレーナー側が思えるまでは、コードレビューを繰り返ししてあげて、お墨付きをあげてください。

社内の全従業員に呼びかけて、来れる人にはなるべく来ていただけるようにお願いしましょう。
エンジニア以外の営業さんやサポートセンターのメンバー、社長や取締役なども、できる限り調整してもらいましょう。
「こういうものを作れる子がこれから皆さんの仲間になりますよ」というお披露目の会にもなります。

きっと一生懸命やってくれると思いますので、終わったらたくさん褒めてあげてください。

その他

新人さんのはじめての作品作りを横で見て、苦労して仕上げる工程を最後まで見られるのが、Off-JT担当の楽しみです。
完成した瞬間はみんな何かを成し遂げた、というとてもいい表情をしてくれますので、トレーナーも達成感が得られると思います。

研修に関わったメンバーで打ち上げにいくのも良いでしょう。

次回予告

次回はOJTについて書いていきます！