ベイジのエンジニアが受ける新人研修をご紹介

はじめに

この記事では、昨年の9月にベイジに入社し研修を受けたエンジニア菅野が、ベイジの研修についてご紹介していきます。

ベイジの新入社員向けの研修は非常に充実しており、全職種共通と職能別で様々なプログラムが用意されています。今回は職能ごとの研修のうち、エンジニアが受ける研修にフォーカスしてご紹介していきます。また、各研修について私を含めた新人エンジニア2名の感想も紹介していきます。

エンジニアが受ける職能別研修は以下の3つです。

• パーツコーディング
• サイトコーディング
• JS問題集

すべて実際にコードを書いて制作していく研修です。いずれの研修もまず自分で課題に取り組み、それをチェックした先輩からフィードバックを受けるという流れで進んでいきます。フィードバックはdiscordで画面共有をしながら、1対1でじっくりと教えてもらえます。ベイジといえばフィードバック文化が根付いていますが、新入社員はまず研修でその文化を体感することになります。

それでは各研修の詳細を見ていきましょう。

①パーツコーディング

エンジニア研修の中で一番初めに受ける研修で、2週間～1カ月ほどかけて取り組みます。タブメニューやメディアカード、リストといった、webサイト内でよく使用される基本的なパーツを作成していきます。ベイジ流のコーディングの基礎や、ベイジで採用しているCSS設計手法FLOCSSの基本をこの研修で身に着けます。

また、各パーツの制作に取り組む前に、どれくらいの時間でそのパーツを実装するのかという見積もりを出し、実装完了後に実際にかかった時間と照らし合わせるという作業を繰り返します。これによって自分の工数感覚を磨くこともできます。このスキルは、実案件でスケジュールを立てる際に非常に役立つことになります。

●菅野の感想（入社時 実務経験1年 制作会社未経験）

この研修を受けることによって実装の奥深さを思い知りました。サイトを作るうえで基本となる簡単なパーツが多いのですが、ベイジのディティールへのこだわりを再現しようとすると、自分にはまだまだ技術的に足りない点があることに気が付かされます。

また、それまでの自分の実装はただ見た目だけ再現する実装になっていましたが、サイトのパフォーマンスや保守性、アクセシビリティなどまで非常によく配慮された実装を学ぶことができました。

加えて、私の場合FLOCSSにきちんと触れるのが初めてでしたが、課題に取り組む中で、ベイジの過去のコードを見てスキルを吸収しつつ、細かな悩みもフィードバックの場で徹底的にクリアにすることができました。

ベイジらしい非常にクオリティが高い実装方法や、サイトの運用後のこと、アクセシビリティなどに対する高い意識を身に着けることができ、エンジニアとしての基礎力が一段階上がったように感じた研修です。

●瀬尾の感想（入社時 実務未経験）

これまで独学で習得したHTML/CSSの基礎をおさらいしながら、ベイジ流のコーディングにも慣れていくベイジエンジニアになるための準備体操のような研修でした。

Webサイトでよく見るページトップのアイコンやチェックボックスの実装があり、実務未経験でも調べながら十分出来るような内容のものでした。ですが、ベイジのコーディングガイドラインに沿ったHTMLの書き方や、CSSを使ったホバーアニメーションの付け方、メンテナンス性を考慮したコードのフィードバックなどがあり、独学では身に着けにくい細かなお作法や注意点が学べるとても大事な研修期間でした。

また作ったパーツは、実案件でもよく使われているものなので作ってお終いではなく、研修が終わったあとでも役立つ点が良かったです。

②サイトコーディング

パーツコーディングが終わったら次に取り組む課題です。過去の案件を基にしたサイトを実際に作成していきます。

ここで初めてデザインカンプデータに触れることになり、実案件と同じように実装を進めていきます。複数ページあるサイトなので、CSSの設計力なども必要となり、さらにJSで簡単なモーションも付けていくので難易度は少々高くなります。3週間ほどかけて取り組む研修です。

●菅野の感想（入社時 実務経験1年 制作会社未経験）

憧れのベイジのデザインカンプからコーディングをするということでテンションがだいぶ上がった記憶があります。

ベイジのデザインはとてもクオリティが高いので、その良さを消さないように組んでいくためには、デザインの意図を正確に読み取り、適した実装方法を考える必要があり難しかったです。しかしそれによって、以前よりデザインに対して注意深くなり、実装したものを確認する際の眼が養われました。

また、一般的にスマホ～PCの間の画面幅におけるレスポンシブ対応は、エンジニア側でよしなに対応することが多いかと思います。ベイジのデザインを実装していく中で、デザインに対する考え方や注意力も養われ、エンジニア側でよしなに対応する画面幅での実装のクオリティが上がりました。

この研修を通して、サイトの目的が達成できる実装になっているか、などといった点について以前より注意深くなり、言語以外の面でのサイト制作をしていく上で必要な、基礎スキルがしっかりと固められる研修だなと感じました。

●瀬尾の感想（入社時 実務未経験）

初めにAdobeXDに描かれたデザインデータを共有してもらい、トップページと下層ページ、JavaScriptのアニメーションなどを実装していく、実際のWebサイト案件に近い内容の研修でした。

最も難しかったのが、下層ページも考慮したスケジュールの設定でした。1つのページにどの程度時間を掛けられるのかを考えて、自分でスケジュールを組み立てていくので、常に目標スケジュールと現在の進捗を気にしながら進めていきました。

3～4週間という期間で1つのサイトを完成させるので、コーディングのスキルが一段と上がったのを実感できる期間でもあり、またWebサイトを制作していくうえで求められる素養も身につけられたと思います。

③JS問題集

JSの実装問題をドリル形式で解いていきます。問題数は100問近くあり、最初の方は「Hello,worldとconsoleに出力せよ」といった簡単なものです。

しかし後半になるにつれて実際にアプリを作る問題などになっていき、JSの根本的な仕組みへの理解が求められ、難易度は上がります。

●菅野の感想（入社時 実務経験1年 制作会社未経験）

初めの方の比較的簡単な問題でも、意外にひっかかる箇所がありました。基礎的な部分で自分の抜けている箇所が露わになり、とても勉強になります。普段あまり使わない技術に関しても復習の場となり、実務での使い道を再発見することもありました。

また、ただ「こう書けばこう動く」と暗記するのではなく、動作の裏にある根本的な仕組みや概念等をみっちり学ぶことができる期間です。そういった根本的な仕組み等については、独学で学んでいた時は理解しきれなかったものもありましたが、この研修で先輩にみっちり教えていただいたおかげで、しっかり理解することができました。

実案件に入ると、モダンなJSフレームワークに触れることも出てきますが、新しいフレームワークを学ぶ際も、この問題集で学んだ基礎知識のおかげですんなり理解することができます。

●瀬尾の感想（入社時 実務未経験）

私はこれまでJavaScriptをほとんど触ったことがなく、1問目から???となってしまうような状態でした。ただ、JavaScriptの基本的な問題から作られているので、段階を踏みながら少しずつ理解を深めることが出来ます。

難しいと感じた問題があったときは、同じ問題を繰り返し行ったり、分かるまで質問させてもらったりして徐々に理解を深めていきました。そうすることで段々とJavaScriptが読めるようになり、次第に1から書けるようになっていきました。

研修の中で最もよかった点が、進むペースが遅くなってしまっても急かされることはなく、常に自分のペースを尊重してもらいながら取り組むことができたので、焦らず一つ一つ理解をしながら進めることが出来た点です。

問題集の最後の方は調べてコピペすれば解けてしまうような問題ではなく、一捻りしないと実装出来ないような内容になっているので少し難しかったですが、全て解けた後は自分の自信にもつながりました。

その他の教育・サポート体制

WordPress勉強会

ベイジではWordPressを使用した案件が多いです。そのため、隔週でWordPressの様々な技術について勉強する会を開いています。

少し前にWordPress5.9で最新機能が公開されましたが、その際もこの勉強会で実装知識を共有し実案件でどう使えるか話し合うなどしました。WordPressを使用するエンジニアとして、一段階上の技術力を身に着けることがができる貴重な会です。

エンジニア勉強会

外部から講師を招いてVue.jsやReact.jsなどのモダンな技術について学ぶ勉強会も定期的に開催しています。ベイジではウェブサイトの案件が多いですが、こうした機会も設けてすべてのエンジニアがアプリケーションのフロントエンド実装もできるようになることを目標に掲げています。

サポート業務

新人エンジニアは研修が終わった後、まずはサポート業務という形で実案件に携わります。先輩が担当している案件にサポートとして入り、実装の一部を引き受けるというものです。これによって、実案件での他職能とのやり取りや、ワークフローの進め方にも慣れることができ、安心して独り立ちをすることができます。

おわりに

今回はベイジのエンジニア研修についてのご紹介でした。

ご紹介してきたように、様々な研修を時間をかけて実施し、一対一のフィードバックをみっちり重ねることにより、エンジニアとしての基礎力を身に着け、大きな不安を抱くことなく実案件に携わることができます。

また、現在の研修内容が完成形というわけではなく、日々改善ポイントを探しては研修内容もアップデートしています。実際、最近では今回ご紹介した研修に加え、WordPressの実装や要件定義についての研修も実施しています。

ベイジの充実した教育環境の中で、今よりもう一段階上のエンジニアを目指す方は、是非ご応募ください。また、ベイジではカジュアル面談も可能ですので、ぜひお気軽にお問い合わせください。