17
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

レアゾン・ホールディングス 2024新卒エンジニアフロントエンド研修 - 基礎力を高めるHTML・CSSからReactまでの学び -

Last updated at Posted at 2025-04-11

こんにちは!2024新卒menu事業部フロントエンドエンジニアの櫻井です。
大学で車の設計を学んでいましたが、興味が持てず2年間休学をしてWebサイト制作の個人事業主を経験しました!
その後「世界一の企業へ」というVisionに惹かれレアゾン・ホールディングスへ新卒入社し、様々な技術を学ぶ研修を受けました。
今回の記事では、その研修の中でも特にフロントエンド研修についてご紹介させていただきます。

研修の概要

研修の概要はオウンドメディアの記事で詳しく紹介していますので、こちらからご覧ください。

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

私たちが受講したフロントエンド研修では、 以下のステップを通して基礎から応用までの技術を学びました

  1. HTML・CSSの学習:会社のHPを作成(1日目)
  2. ブラウザの基本機能とHTTPプロトコルの理解(2日目 ~ 3日目)
  3. Reactの学習:ECサイトを作成(4日目 ~ 7日目)

フロントエンド研修の詳細

新卒研修では、ゲーム開発志望やPM職志望のエンジニアも参加していたため、フロントエンド研修は基礎的な部分からスタートしました。

HTML・CSSの学習:レアゾン・ホールディングスのHPを作成(1日目)

最初に学んだのは、HTMLとCSSの基礎です。これにより、どのようにWebページが構築され、ブラウザ上で見た目が作り上げられるのかを理解することができました。
HTMLでは、各要素の役割やセマンティックなマークアップを重視し、正しいHTMLの書き方に慣れることを目的としました。
また、CSSでは、レイアウトの調整やレスポンシブデザインを学び、モバイルやデスクトップなど異なるデバイスでの最適な表示方法に焦点を当てました。
この段階で、実際にレアゾン・ホールディングスのHPを模倣するようなWebサイトを作成することで、実践的なスキルを身につけることができました。

▼研修で模倣したWebサイト

ブラウザの基本機能とHTTPプロトコルの理解(2日目 ~ 3日目)

次に、ブラウザの基本機能やHTTPプロトコルの理解に進みました。特に、ブラウザがどのようにしてHTML、CSS、JavaScriptを読み込み、レンダリングするか、また、HTTPリクエストとレスポンスのメカニズムを深く学びました。ここでは、通信の仕組みを理解するために、実際にブラウザの開発者ツールを使って、ネットワークの動きを確認しました。こうした技術を学ぶことで、Webアプリケーションがどのようにしてデータを取得し、ページを動的に更新するかを体感することができました。特に非同期通信に関しては、JavaScriptのfetchを使ってAPIにデータをリクエストし、ページが更新される過程を実際にコードを書いて学びました。

Reactの学習:ECサイトを作成(3日目 ~ 7日目)

研修の後半では、フロントエンドのフレームワークとしてReactを集中的に学びました。
まずはReactの基本的なコンセプトであるコンポーネントベースの設計や、hooksの使い方、それを用いた動的なUI構築に挑戦しました。
また、TypeScriptを使った型宣言や、フロントエンドで重要な非同期処理をReactと組み合わせて学ぶことで、より高度なアプリケーション開発のスキルを習得しました。

▼実際に作成したECサイト
20240917222218.png

技術的なお話し

私は現在、menu事業部のフロントエンジニアとして、React Nativeを中心に業務を行っています。
研修で学んだReactは、実務でも頻繁に活用しています。
特に、業務で取り組んでいるmenu事業のフロントエンドでは、複雑な処理や、リアルタイムなデータ更新を要求される場面が多いです。
この際に、研修で学んだuseMemouseCallbackなどを適切に使用してパフォーマンスを最適化しています。

HTTPプロトコルや非同期通信に関しても、研修で学んだ知識が実務に直結しています。menu事業部では、APIと非同期通信を通して行い、バックエンドとの連携が多く発生します。
特に、非同期通信時のエラーハンドリングは、研修で学んだ内容をベースにより高度な設計を考えるきっかけになり、APIとの通信がより効率的かつスムーズに行えるような、ユーザーエクスペリエンスの向上に貢献しています。

このように、研修で学んだ基礎知識が実務での応用力や問題解決力に直結していることを実感しています。
技術の表層的な理解ではなく、内部でどのように動いているかを深く理解することで、効率的でパフォーマンスの高いコードを書くことができるようになりました。

まとめ

今回の研修を通して、基礎から応用まで一貫して学ぶことができ、特にフロントエンドの技術が現在の業務に直結していることを強く感じました。
今後も、基礎を大切にしつつ、新しい技術にチャレンジしていきたいと思います!

▼採用情報

レアゾン・ホールディングスは、「世界一の企業へ」というビジョンを掲げ、「新しい"当たり前"を作り続ける」というミッションを推進しています。

現在、エンジニア採用を積極的に行っておりますので、ご興味をお持ちいただけましたら、ぜひ下記リンクからご応募ください。

17
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
17
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?