こんにちは！2024新卒menu事業部フロントエンドエンジニアの櫻井です。
大学で車の設計を学んでいましたが、興味が持てず2年間休学をしてWebサイト制作の個人事業主を経験しました！
その後「世界一の企業へ」というVisionに惹かれレアゾン・ホールディングスへ新卒入社し、様々な技術を学ぶ研修を受けました。
今回の記事では、その研修の中でも特にフロントエンド研修についてご紹介させていただきます。
研修の概要
研修の概要はオウンドメディアの記事で詳しく紹介していますので、こちらからご覧ください。 media.reazon.jp
フロントエンド研修の概要
私たちが受講したフロントエンド研修では、 以下のステップを通して基礎から応用までの技術を学びました
フロントエンド研修の詳細
新卒研修では、ゲーム開発志望やPM職志望のエンジニアも参加していたため、フロントエンド研修は基礎的な部分からスタートしました。
HTML・CSSの学習：レアゾン・ホールディングスのHPを作成（1日目）
最初に学んだのは、HTMLとCSSの基礎です。これにより、どのようにWebページが構築され、ブラウザ上で見た目が作り上げられるのかを理解することができました。
HTMLでは、各要素の役割やセマンティックなマークアップを重視し、正しいHTMLの書き方に慣れることを目的としました。
また、CSSでは、レイアウトの調整やレスポンシブデザインを学び、モバイルやデスクトップなど異なるデバイスでの最適な表示方法に焦点を当てました。
この段階で、実際にレアゾン・ホールディングスのHPを模倣するようなWebサイトを作成することで、実践的なスキルを身につけることができました。
▼研修で模倣したWebサイト reazista.co.jp
ブラウザの基本機能とHTTPプロトコルの理解（2日目 ~ 3日目）
次に、ブラウザの基本機能やHTTPプロトコルの理解に進みました。特に、ブラウザがどのようにしてHTML、CSS、JavaScriptを読み込み、レンダリングするか、また、HTTPリクエストとレスポンスのメカニズムを深く学びました。ここでは、通信の仕組みを理解するために、実際にブラウザの開発者ツールを使って、ネットワークの動きを確認しました。こうした技術を学ぶことで、Webアプリケーションがどのようにしてデータを取得し、ページを動的に更新するかを体感することができました。特に非同期通信に関しては、JavaScriptのfetchを使ってAPIにデータをリクエストし、ページが更新される過程を実際にコードを書いて学びました。
Reactの学習：ECサイトを作成（3日目 ~ 7日目）
研修の後半では、フロントエンドのフレームワークとしてReactを集中的に学びました。
まずはReactの基本的なコンセプトであるコンポーネントベースの設計や、hooksの使い方、それを用いた動的なUI構築に挑戦しました。
また、TypeScriptを使った型宣言や、フロントエンドで重要な非同期処理をReactと組み合わせて学ぶことで、より高度なアプリケーション開発のスキルを習得しました。
▼実際に作成したECサイト
技術的なお話し
私は現在、menu事業部のフロントエンジニアとして、React Nativeを中心に業務を行っています。
研修で学んだReactは、実務でも頻繁に活用しています。
特に、業務で取り組んでいるmenu事業のフロントエンドでは、複雑な処理や、リアルタイムなデータ更新が要求される場面が多いです。
この際に、研修で学んだuseMemoやuseCallbackなどを適切に使用してパフォーマンスを最適化しています。
HTTPプロトコルや非同期通信に関しても、研修で学んだ知識が実務に直結しています。menu事業部では、APIと非同期通信を通して行い、バックエンドとの連携が多く発生します。
特に、非同期通信時のエラーハンドリングは、研修で学んだ内容をベースにより高度な設計を考えるきっかけになり、APIとの通信がより効率的かつスムーズに行えるような、ユーザーエクスペリエンスの向上に貢献しています。
このように、研修で学んだ基礎知識が実務での応用力や問題解決力に直結していることを実感しています。
技術の表層的な理解ではなく、内部でどのように動いているかを深く理解することで、効率的でパフォーマンスの高いコードを書くことができるようになりました。
まとめ
今回の研修を通して、基礎から応用まで一貫して学ぶことができ、特にフロントエンドの技術が現在の業務に直結していることを強く感じました。
今後も、基礎を大切にしつつ、新しい技術にチャレンジしていきたいと思います！
▼採用情報 recruit.reazon.jp
