この記事の目次
はじめに
今回は私たちが実施している新卒研修の内容をご紹介します。この研修では、エンジニアリングとはあまり関わりのない、営業やライターとして採用されたメンバーも含めて研修をおこない、新卒全員が「プログラミングとは何か？」を知るための時間となっています。研修に参加した新卒社員は、部署に関係なく全員が一丸となって取り組むプログラムとなってます！
ITを軸として事業を展開している我々にとって、基本的なプログラミングスキルを持つことは非常に価値があります。ITリテラシーの向上は、どの職種においても大きな武器となります！
1. 基礎固め：ProgateでHTML,CSS,JavaScriptを学ぶ
研修の第一段階では、Progateという学習プラットフォームを使って、コーディングに最低限必要な基礎スキルを身に付けます。Progateは、プログラミング初心者に特におすすめされているオンライン学習サービスで、HTML、CSS、JavaScriptといったフロントエンド開発の基礎を手軽に学習できるサービスとなっています！ここでProgateがどんなサービスなのか簡単に紹介します！※Progateの宣伝ではありません。
Progateの特徴
Progateの最大の特徴は、プログラミングの初心者でも簡単に始められる点です。次のような要素が、学習をスムーズに進めるために役立ちます。
- スライド形式の解説
Progateでは、コードを記述する前に、プログラミングの基礎的な概念や用語を理解できるスライドが用意されています。スライドは図解を多用し、視覚的にわかりやすく説明されているため、テキストだけの教材よりも理解しやすく、初心者でも挫折しにくい仕組みです。プログラミングに触れたことがないメンバーもいましたが、仕組みが図解されているため初めてプログラミングをするメンバーでも問題なく進められていました！ - ハンズオン形式の練習
スライドで基本を学んだ後、実際にコードを書きながら課題に挑戦します。課題はステップごとに設計されており、必要なコードを入力するとその場で結果を確認できるため、即座にフィードバックが得られます。これにより、学んだ知識をすぐに実践に移せるのが魅力です！
研修ではスキルの習得ではなく、このProgateを活用してそれぞれが自分のペースでプログラミングに触れることを目指しています。自分のペースで進められるので、初心者でも焦らずに学習できる点がメリットです。
またこの研修期間中は先輩エンジニアの方が近くで見守っててくれるため、いつでも質問ができます！わからないことがあればすぐに先輩が対応してくれます！
2. 実践：オリジナル時計の開発
基礎スキルを習得した後、次に取り組むのは「オリジナル時計の開発」です。このプロジェクトは、自分のアイデアを具現化し、エンジニアの仕事を疑似体験することが目的です。デザインや機能の自由度が高く、各自が独自の工夫を施すことが推奨されています！！具体的な開発の流れは次の通りです。
初日：企画書作成 初日の午前中には、自分がどのような時計を作りたいかを簡単にまとめた企画書を作成します。ここで、自分のアイデアを整理し、何を実装するかを明確にします。
開発期間：個人での作業 各メンバーは個人で開発を進めます。自分の力で調べ、試行錯誤しながらプログラミングを行うことで、実際の業務に近い体験を得ることができます。エンジニアとして採用されたメンバーは、他の新卒社員をサポートすることで技術的なリーダーシップを発揮します。互いに教え合いながら協力してプロジェクトを進めることで、自然とチームワークが生まれ、全体的に学びの質が高まります！
またこの時間も先輩エンジニアがお手伝いをしてくれます！しかもなんともシュールなことにCTOがお手伝いをしてくれます笑。昨日プログラミングを始めたばかりのメンバーに流石に一人で開発を進めるには難しいため、かなりの数の先輩方がお手伝いしてくれます！まだ顔合わせして期間が短いメンバー同士や先輩同士のコミュニケーションのきっかけにもなり、めちゃめちゃ盛り上がる時間でもあります！
3. 発表会：自分の工夫をプレゼン
時計を作成した後は、発表会が行われます。
ここでは、自分が作成した時計についてのこだわりや、どのような工夫をしたのかを全員の前でプレゼンします。発表を通じて他の新卒社員の作品を見ることができます。またこのプレゼンはzoomで実施されるため、社内の人間であれば誰でも参加可能です！
自分の作品
自分の作品は、とあるアニメに登場するタイマーをモデルに、Reactを使って作ってみました！こちらの元ネタのタイマーは見た目はシンプルではありながらも結構緊迫感を出してくれる感じが好きで、これを自分なりに再現したく制作にチャレンジしました！
それと今回の記事用にスクショを撮るために久しぶりにプロジェクトを開いてみたら、なんと！レイアウトがちょっと崩れていて、ちょっと焦りました（笑）。まあ、機能自体はちゃんと動いてるんで、大きな問題はないんですが、デザインはやっぱり気になるので、いつかリベンジしたいなと思っています。来年、自分が研修担当する可能性があるので、その時にしっかり直そうと思ってます！
エンジニアとして採用されたこともあって、HTMLやCSS、JavaScriptには割と慣れてるんですけど、今回はReactを使ってみよう！と挑戦したところ、レンダリング周りで結構苦戦しました。特に、タイマーのカウントダウンをうまく表示させるために、Reactの状態管理（useStateとかuseEffectとか）を使ってみたんですが、思ったようにいかなくて何度も調整しました。タイマーがずれたり、動かなくなったり…そのたびに「え、なんで？」って感じで悩みましたが、なんとか解決して動作するようになった時の達成感は格別でした！やっぱり、こういうハマりどころがあると学びも深くなりますね。
それとちょっとこだわりポイントなんですが、秒針が50秒を超えると、背景と文字盤が赤とオレンジに点滅するようにしてみました。これは、時間が迫ってる感じを視覚的に伝えるための工夫です。色合いや点滅のタイミングを何度も微調整して、自分なりに納得のいく仕上がりにできました。
それから、背景の図形のデザインも一工夫しています。実は、CSSだけで背景の図形を作ろうとしたところ、これが思った以上に難しかったのでFigmaで手書きしました！
具体的に説明しますと、Figmaで図形を作りSVGとしてエクスポートしてから、Reactに組み込みました。CSSだけで頑張るよりも、Figmaを使った方がスムーズにいったので、我ながら良い工夫だったと思います！
まとめ
この新卒研修は、エンジニアに限らず、すべての新卒メンバーがプログラミングの基本に触れ、ITリテラシーを高める貴重な機会となっています！Progateでの基礎固めから始まり実践的な開発プロジェクトまで、多くの学びが得られ、研修を通じて技術に触れるだけでなく、チームワークも育まれます！
研修自体は約4日と非常に短い期間ではありますが、これをきっかけにIT対する理解が深まること間違いなしです！
それでは良いエンジニアライフを！！
関連記事
カテゴリー：
