2018卒エンジニアによるエンジニア研修レポート(1)【フロントエンド研修】

みんなのウェディング2018卒エンジニアの徳元です。今回は私が受けたエンジニア研修についてまとめていきたいと思います。

初めてのエンジニアリングブログへの投稿ということで少々緊張していますが、出来るだけ具体的に弊社のエンジニア研修について伝えられるよう頑張ります。

弊社の研修の概要

2018卒のエンジニアは4月に人事研修、5月と6月にエンジニア研修を受けました。7月からはOJTなどを通して業務で必要な知識や技術を身につけていく予定です。

5月、6月のエンジニア研修は多種多様な内容で構成されているため全てを伝えるのは難しいので、私が担当するブログでは特に長い時間をかけて取り組んだ

  • フロントエンド(HTML&CSS)研修
  • オブジェクト指向設計・自動化テスト研修
  • パイロットプロジェクト

について三部に渡ってお伝えしたいと思っています。

第一回はフロントエンド研修についてです。

フロントエンド研修の概要

今年のフロントエンド研修は、デザイナーとエンジニアの二週間にわたる合同研修となりました。デザイナーと一緒に研修を受ける理由は、デザイナーの皆さんも実際にコードを書いてデザインを実装することがあるからです。

フロントエンド研修ではHTML/CSSから説明が始まり、次にHaml/Sassの使い方の説明を受けます。そして実際にHTML/CSSを使って弊社のサービスにあるようなデザインのページを実装します。最後にHaml/Sassを使って同じようなデザインのページを実装します。

フロントエンドについて一つひとつ丁寧に教えてもらえる

研修では弊社のエンジニアである松久さんが丁寧に説明してくれました。まずはHTML/CSSでページの部品を作成し、部品を組み合わせ、最後はそれらをHaml/Sassで作ってみるといったように初めから一つずつ学んでいけば最終的にみんなのウェディングに近いデザインのページが作成できる流れになっていました。

基本的な知識の説明の時にも実務での使われ方について言及されているところもあり、学ぶところが沢山ありました。例えば画像の表示について説明する際には弊社のRetina対応について説明がありました。

実際のWebデザインを参考にして実装する

私が特にこの研修を受けて特に良かった点は、実際のサービスで使われているようなWebデザインを参考にして自分でコーディングをする演習課題に取り組めたことでした。

大学時代にも私はHaml/Sassを使って簡単なページを作る経験がありましたが、実際の業務の流れに沿って、デザイナーが作った画面をZeplinを使ってマークアップしていくことは初めてだっだったので、コーディングをしていく過程は本当にワクワクしました。この演習課題を通して、弊社のCSSライブラリである「Esthe」(エステと呼びます)の使い方やBEMというclassの命名規則の使い方を実践的に学ぶことが出来ました。

私が学びを最大化するために心がけたこと

このようにフロントエンドについてしっかり学べるよう設計されていた研修でしたが、私自身がフロントエンド研修の時間を最大限に活かすために心がけたこともあります。それは以下の三つです。

  1. 自分自身の理解や疑問についてメモを取りながら研修を受ける
  2. 質問をする際には出来るだけ仮説を立てておく
  3. 深く理解すべきところととりあえず知っておくだけでいいところを見極める

詳細なメモを取りながら研修を受ける

私はコードを書く時、自分の考えていることや迷ったことなど自分の頭の中身をそのままバッと書き出してメモを取る習慣があります。その方が自分がわからないことや感銘を受けたポイントなどが客観的に見ることが出来て、質問や振り返りの際に役に立つからです。

また自分が考えれば考えるほど書くべきことが増えるので、メモの量の違いで自分がちゃんと考えながら研修を受けている時かどうかが一目瞭然になります。そのため、一日の終わりに日報を書く際にそのメモを見ることで自分がちゃんと集中して研修を受けたかどうかをチェックすることもできます。

仮説を立てて質問する

1に関連して、講義を受けている間も演習課題の時も、質問をする際には私は出来るだけ仮説を立てるようにしていました。はっきりと仮説が立てられる場合には「○○だと思うのですが、その認識で正しいですか?」、仮説が曖昧な場合には「○○がわからなくて、△△が関係していると思うのですが、それで当っていますか?」という風にです。

仮説を立てるということは一度自分で考えるという意味でも大切ですし、仮説が間違っていたとしても一度自分で考える分、アドバイスを貰った時に高い納得度で理解することが出来ます。

また、仮説を立てる際に自分がわかっていることとわからないことが整理されるので、質問する相手は要点を理解して答えることが出来ます。自分のためにも相手のためにも、質問をする際には自分の意見を持っておくべきだと考えました。

深く理解すべきところを見極める

1と2で出来るだけ研修内容を理解するために工夫をしましたが、松久さんのフロントエンドに関する知識量がとても多く、関連情報も含めて色んなことを教えて貰ったので、全ての内容を深いレベルで理解することはできませんでした。そのため私はまずは重要なポイントだけに絞って理解をするようにして、時間があれば次に重要度の高いポイントについて質問をするということを心がけていました。

大切なポイントを抑えておけば、残りのポイントは(比較的)さほど重要ではないということになるので、実際にそのポイントを理解する必要が出てきた時に学んでいけば問題ないと考えました。

研修を終えてみて

私は学生時代の頃はサーバーサイドをいじることが多く、フロントエンドもデザインというよりはJSでユーザーの入力を補助するようなスクリプトを書くことが多かったのですが、以前からWebサービスにおいてデザインは機能と同じく大事だと思っていたので、フロントエンドについて学ぶ機会があって本当に良かったです。

あえてこの研修を終えるまでにマスター出来なかったことを挙げるとすれば、自分がデザインしやすいようにbox-sizingでボックスモデルを変えた上でCSSを書くこと、複数の要素を包括するクラスを効率的なデザインに使い回すためにmargin、paddingをうまく使い分けること、CSSのfloat、flex box、tableをちゃんと理解して使い分けることです。

今回の研修を通して以前よりもマークアップに自信がついたので、これからも業務の中で苦手なポイントを克服しつつフロントエンドのコーディングをガンガンやっていきたいです。

仕事としてのエンジニアリング

先に話に出したEstheは、CSSライブラリでありながら、みんなのウェディングのデザインガイドラインにもなっています。エンジニアやデザイナーがデザインに対して「この色かな」と思い思いにCSSを書いてしまうと、サービス全体のデザインに一貫性が欠けてしまいます。また、class名をつける際にもBEMに則って命名することによって共同開発の効率が上がります。

私は入社するまでは個人、または少人数で構成されるプロジェクトで開発を行なっていたので、こういった社内の開発の効率を上げる工夫に感心しました。

これは私がエンジニア研修に入ってから感じ始めていることなのですが、仕事としてのエンジニアリングには、趣味としてのエンジニアリングとは違ってて面白いところがたくさんあります。

また残りの二回でもこの点について触れていきたいと思います。