はじめに

本記事では、エンジニア未経験の私がWebエンジニアデビューに向けて、2025年5月から12月にかけて実施した社内研修について、取り組んだ内容や振り返りをまとめています。

本研修では、会社で用意してもらったロードマップに沿って進める形で、最初はHTML・CSS・JavaScriptといったWeb制作の基礎からスタートしました。
その後、段階を踏んでReactやNext.js+TypeScriptといった、自社のフロントエンド開発の実務でも使用する技術を学び、最終的には本ブログサイトの制作まで取り組みました。

研修では、教材を使ったインプットに加えて、実際に手を動かしながら学ぶアウトプット中心の演習スタイルで進められ、要所ごとに学んだ技術を使ったページ制作の課題にも取り組んでいます。

特に研修後半では、実際のサービスサイトの模写や、ゼロからプロジェクトを立ち上げる形でのブログサイト制作に挑戦しました。
コーディングだけではなく、設計やAPI連携など、フロントエンド開発をより実践的に経験できた期間だったと感じています。

この記事では、研修期間中に「何を学び、どのような課題に取り組んできたのか」を時系列で振り返りながら、研修を通して感じた変化や学びについてまとめていきます。

研修の概要

学習内容

・フロントエンド開発全般

学習言語・技術

・HTML

・CSS

・Sass（scss / sass）

・JavaScript

・TypeScript

・React

・Next.js（Pages Router / App Router）

・Git / GitHub

・Docker

学習の進め方（ロードマップの流れ）

・主に動画教材（Udemy）を使った、インプット+コード模写

・自社サービスをモデルにしたハンズオン形式のアウトプット

・Webサイト制作（本ブログサイト）

研修前半では、Webサイト制作の基本となるHTML・CSS・Sass（scss / sass）・JavaScriptの基礎学習と並行して、チーム開発に必須となるGit、GitHubの基礎を学びました。
後半ではTypeScript・React・Next.jsといった実務に近い技術や、Dockerを使った環境構築など、より実践的なWeb開発の内容へとステップアップしていきました。

次の章では、研修期間中にどのような取り組みをしてきたのかを、時系列で振り返っていきます。

2025年5月｜事前課題のサイト模写に挑戦！

研修に入る前段階として、2025年5月上旬に開発部門へ加入するための事前課題に取り組みました。

この課題では、既存のWebサイト（LP）をもとにしたサイト模写を行い、HTML・CSSを使ってページを再現する内容となっていました。

事前に2週間ほどの学習期間が設けられ、その期間にUdemyの動画教材を使ったインプットを行いました。
実はコロナ禍の自粛期間中に少しだけHTML・CSSを学んだことがありましたが、本格的にWeb制作に取り組むのは初めてだったため、本番の課題では同じ見た目を再現するのに苦戦しました。

苦戦しながらもなんとか手を動かし、コードがブラウザ上に表示される体験を通して、教材のコード模写とは違った形で、体系的に学ぶことができたのではないかと感じています。
（当時のソースコードを見返してみたら、1,500行くらい頑張って書いていました笑）

今となってみると、エンジニアデビューを目指す最初の一歩を踏み出した月だったと感じています。
（課題の期限は10日間で、終わらなければプロダクト部への加入不可という条件だったので、正直かなり不安でした…）

2025年6月｜Webサイトコーディングの基礎学習でインプット過多を起こす。

事前課題を無事にクリアし、6月からはいよいよ研修本編が本格的にスタートしました。
この月は、Webサイトコーディングの基礎知識を中心にインプットを進めた期間でした。

CSSのSass記法（scss / sass）やJavaScriptといった技術を中心に学習を進め、学習は主に動画教材（Udemy）を使ったハンズオン形式で、教材の内容を追いながらコードを模写していくスタイルでした。

当時は「理解しながら次に進まなければいけない」と考えていたため、用語やメソッドなどを細かくメモに取りながら学習を進めていました。

特にJavaScriptは、HTMLやCSSとは異なり、初めて本格的に触れるプログラミング言語だったこともあり、一気に難易度が上がったように感じました。
扱う情報量も多く、学習を進めるのにかなり時間がかかっていたと思います。

（今振り返ると、覚えられるはずもない内容を細かくメモしながら進めていたので、当然と言えば当然ですが……笑）

講座の内容が呪文のように聞こえてしまう場面も多く、早くも焦りと挫折を感じる瞬間もありました。
結果として予定していた進捗よりもかなり遅れが出てしまい、反省の残る月でした。

一方で、ちょっとしたアニメーションなどに触れる機会もあり、これまでとは違い、Webサイトに動きをつけられるようになったことに感動したのを覚えています。

2025年7月｜スピード重視の学習へ切り替えと最初のアウトプットを制作！

6月の進捗を振り返り、上司からの助言もあって、学習スタイルを大きく見直した月でした。
これまでのように細かくメモを取りながら進めるやり方では研修のペースについていけないと感じ、思い切ってメモを取ることをやめ、「理解できなくてもとにかく手を動かす機会を増やす」という方向にシフトしました。

結果として、これまでの遅れを少し取り戻すきっかけになったと感じています。

学習内容としては、前月に引き続きJavaScriptの基礎学習を進めながら、レスポンシブデザインを取り入れたカード型UIページのアウトプット課題に取り組みました。

課題が終わった後は、Reactの基礎学習もスタートしています。

Reactの学習では、初めてAPIを叩いてデータを取得し、画面に表示する経験をしました。
仕組みを完璧に理解できていたわけではありませんが、これまでモックデータを表示していた画面に実際のデータが入った瞬間は、素直に感動しました。

また、初めてフレームワークに触れてみて、素のJavaScriptよりも不思議と親しみやすさを感じたのも印象に残っています。
この経験を通して、「自分でもやれるかもしれない」と少し前向きな気持ちになれた月でした。

2025年8月｜実務に近い技術へステップアップし、焦りを感じる。

8月からは研修内容も実務寄りになり、難易度が大きく上がったと感じた月でした。
（これまでも十分に難しいと感じていましたが…）

この月はReactのアウトプット課題からスタートして、課題終了後はTypeScript、Next.js、Dockerなど、新しい技術が本格的に登場して学ぶ範囲が一気に広がっていった印象でした。

Reactのアウトプット課題では、Reactを使ったユーザー一覧ページとユーザー詳細ページの制作に取り組みました。
カード型UIやAPIからデータを取得するフロー自体は、これまでのアウトプットや学習でも触れてきた内容でしたが、初めて複数ページにまたがってデータの表示内容を変える実装に苦労しました。

正直なところ、分からないことが多い状態のまま研修を進めていたため、「このままで大丈夫なんだろうか」と不安や焦りを感じる場面も多くありました。
それでも7月に切り替えた「とにかく進める」というスタンスを崩さず、理解が追いつかない部分があっても手を止めずに作業を進めることを意識しました。

結果として、研修全体の進捗としてはオンスケジュールで進めることができ、焦りは感じながらも「着実に前に進めている」という実感が持てた月だったと思います。

2025年9月｜Next.jsでアウトプットに挑戦する。

9月からは（正確には8月の末から）、これまでのインプット中心の研修内容から、アウトプット量を増やしていく方向へとシフトしていきました。

自社サービスをモデルに、Next.js（Pages Router）+TypeScriptを使った、実務に近い技術構成でのページ構築に取り組み、複数の課題項目を段階的に実装していく内容でした。
初めてNext.jsを使った実践的な開発に挑戦することになり、ファイル構成やコンポーネント分割、各ファイルの役割を理解しながら進める必要がありました。

最初の環境構築から依存関係のエラーなどにつまずき、「なぜ動かないのか分からない」という、コードを書く以前の段階で洗礼を受けたことを覚えています。

なんとか環境構築を乗り越えた後も、作業を進める中でエラーが頻発し、思ったように進まない状況が続きました。
この頃から、Google検索で情報を探しつつ、AIと壁打ちを繰り返しながら進めていくようになりました。
（多分AIがない時代だったら、この段階で確実に挫折していたと思います。）

結果として、予定していた課題の途中まで終わらせることができ、ひと安心したことを覚えています。
この経験を通ぢて、Next.jsを使った開発のおおまかな流れや、分からない問題に対する向き合い方を学ぶきっかけになった月だったと感じています。

2025年10月｜ペースを掴み、ゴールが見え始めて前向きな気持ちに。

10月は、9月から引き続きNext.js（Pages Router）＋TypeScriptの課題に取り組みました。
この頃から、ようやく作業に慣れ、少しずつペースを掴めてきたと感じた月でした。

課題も後半に差し掛かり難易度も上がりましたが、ゴールが見え始めたことでモチベーションを保つことができたと思います。

「この課題ではこんなことを実装する」といった全体像を、なんとなくイメージできるようになったので、以前より作業の手が止まることは減っていきました。

また、この頃からChatGPTの有料プランを利用し始めました。
それまではGeminiをメインに使っていましたが、何かのきっかけでChatGPTを試したところ、対話性能の高さや、選択肢を複数提示してくれる点がとても使いやすいと感じ、切り替えることにしました。

AIの使い方にも変化が見られ、（実際にGPTに聞いてみたところ）最初は「分からないことをそのまま聞く」使い方が中心でしたが、
徐々に「自分なりにこう考えたが、この方向で合っているか」という形で相談するようになっていったそうです。

たしかに、単に答えを教えてもらうのではなく、自身のインプットをもとに考え方をすり合わせるようなやり取りが増えていったように感じます。

細かいエラーで詰まるシーンは多々ありましたが、 以前よりも落ち着いて対処できるようになり、少し心にゆとりも持てたような気がしています。

実装のスピードも徐々に上がり、 結果として目標としていたところまで課題を進めることができました。

完全に余裕があるわけではないものの、「このまま進めれば研修全体のゴールまで辿り着けそうだ」という感覚を持って、前向きに課題と向き合える状態になった月でした。

2025年11月｜Next.jsの課題完了と最終課題のブログサイト制作に挑戦！

11月は、9月から取り組んできたNext.js（Pages Router）＋TypeScriptの課題を中旬頃に完了し、いよいよ研修の最終課題となるブログサイト制作に着手した月でした。

これまでの課題を終えたことで、ひとつの区切りはついたのものの、ブログサイト制作ではゼロからプロジェクトを立ち上げる必要があり、「まず何から手を付ければいいのか分からない」という状態からのスタートでした。

これまでの課題では、決められた手順や仕様がしっかり用意されていましたが、ブログサイト制作ではディレクトリ構成やコンポーネント設計なども、ある程度自分で考える必要があり、とっかかりの部分で特に苦戦しました。

上司からの助言もあり、作業に入る前のタスク分解（ページ構成やコンポーネント分割）を改めて見直してからは、順調に作業を進められるようになりました。
あまり慎重になる必要はないと思いつつも、行き当たりばったりで手を動かすより、ある程度の作業の流れや手順を事前に決めておいた方が、自分には合っているのかもしれないと感じています。
この点は今後の実務でも意識して取り組んでいきたいと思っています。

実装フェーズでは、レビューを通して、ページとコンポーネントの責務分離や、どの単位でコンポーネントを切り出すかといった点に指摘を受けることが多く、後半にかけて特に意識して取り組めるようになりました。

とにかく無心で作業を進めていたこともあり、細かいところは覚えていないところもありますが、少しずつブログサイトが自分の手で形を作っていく過程は、やりがいを感じられる経験だったと思います。

2025年12月｜ブログサイト制作は後半へ。苦戦しながらも無事に研修終了！

12月は、11月から進めていたブログサイト制作の後半に取り組み、研修全体の総仕上げとなる月でした。
UIコンポーネントの実装は比較的スムーズに進んだ一方で、API連携やデータの扱いといった部分では、大きく苦戦しました。

今回はヘッドレスCMS（microCMS）を使い、初めて自身でAPIを用意しましたが、APIのレスポンス内容や構造を理解すること、型定義をどのようにすれば良いのかといった点が特に難しく感じました。
「このページではどこからデータを取得すればよいのか」「どこで、どのようにAPIを叩けばよいのか」といった全体像を把握するのに、かなり時間がかかったのを覚えています。

最後のサイト内検索の機能実装では、フロントエンド側とバックエンド側の責務分離や、クエリパラメータの扱い、検索条件の組み立てなど、考慮する点が多く、特に難しく感じました。

このあたりは参考になるブログも多かったため、それらを参考にしながら、「まずは小さく動かして確認してみる」といった進め方を意識し、AIと壁打ちしながらひとつひとつ問題を整理していきました。

最終的には、独自にドメインを取得し、Vercelでホスティングしてデプロイしました。
実際にWebページとして公開できたときには、何とも言えない達成感を感じることができました。

苦労したことも多かったですが、目標としていた年内での研修クリアを無事に達成でき、本当に良かったと思います。

さいごに、研修を通して感じたこと・学んだこと

今回の研修を通して、技術面だけでなく、学習や課題への向き合い方そのものが大きく変わったと感じています。

まずは、多忙な中で研修のロードマップ作成やコードレビューに時間を割いてくださった上司には、本当に感謝しています。

これまで接客業、営業職、マーケティング職といった、いわばエンジニアとは真逆の職種しか経験してこなかった私に、未経験から挑戦する機会を与えていただき、本当にありがとうございました。

Webサイトをゼロから開発するという経験自体が非常に貴重でしたし、その過程を通して、技術面だけでなく「やり切る力」や「自分で調べて解決する力」が身についたと感じています。

研修を始める前は、自分に本当にやれるのかという不安が大きく、研修が始まってからも焦りを感じる場面は少なくありませんでした。
特に学習初期は、「プログラミングは覚えるもの」という意識が強く、すべてを理解しないと次に進めない状態に陥っていたと思います。

しかし研修を通して、「すべてを理解してから進む」ことは現実的ではなく、「まずは全体をざっくり把握し、手を動かして動くものを作ること」が、結果的に一番のインプットになるのだと身をもって体験することができました。

7月以降は、理解できなくてもまずは手を動かし、形にしてから振り返るという進め方に切り替えました。
この考え方の変化によって、研修全体のペースについていけるようになっただけでなく、自分なりに試行錯誤しながら前に進んでいく感覚を掴めたように思います。

また、研修後半ではAIを使う場面もかなり多くなりました。

正直なところ、今の自分はAIの力を借りなければ、まだ何もできないに等しいと思っています。

ただ、分からないことをそのまま聞いて答えをもらう、という使い方ではなく、

「自分はこう考えているけど、この方向で合っているのか？」
「他に選択肢はないのか？」

といった形で、考えを整理するための壁打ち相手として使う感覚が、少しずつ掴めてきたように思います。

今回の研修でも、AIを使いながら進めてきましたが、コードをそのままコピーして終わらせる、ということはしないように意識していました。
実際に手を動かして、自分でコードを書きながら、「分からないなりに理解しよう」と努力しました。

正直、当時は「理解できた」と思って進めていた部分も、今振り返ると覚えていないことの方が多いです。
でも、それも含めて今の自分の実力なんだと思っています。

まだスタートラインに立ったばかりで、ひとりで何かができる段階ではありませんが、今回の研修で、「分からなくても止まらずに向き合い続ける」経験ができたことは、自分にとって大きかったです。

この研修で得たものを土台にしながら、これからも学びと試行錯誤を続けて、少しずつでも「できること」を増やしていけたらいいなと思っています。

検索テスト用キーワード：海

テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。

見出し h2

テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。

見出し h3

テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。

見出し h4

テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sample Code</title>
    <style>
      body {
        font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
        margin: 0;
        padding: 24px;
        line-height: 1.8;
      }

      .container {
        max-width: 960px;
        margin: 0 auto;
      }

      .button {
        display: inline-block;
        padding: 12px 20px;
        background-color: #2563eb;
        color: #fff;
        text-decoration: none;
        border-radius: 6px;
        transition: background-color 0.2s ease;
      }

      .button:hover {
        background-color: #1e40af;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Hello World</h1>

      <p>
        これはサンプル用のHTMLコードです。<br />
        長めの1行や、スタイル・構造が混ざった状態を想定しています。
      </p>

      <a
        href="https://example.com/some/very/long/path/that/should/cause/horizontal-scroll/in-code-block"
        class="button"
      >
        Click Me
      </a>

      <script>
        const button = document.querySelector('.button');

        button?.addEventListener('click', (event) => {
          event.preventDefault();

          console.log(
            'Button clicked at:',
            new Date().toISOString(),
            'UserAgent:',
            navigator.userAgent
          );

          alert('Button was clicked!');
        });
      </script>
    </div>
  </body>
</html>

検索テスト用キーワード：湖

テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。

見出し h2

テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。

見出し h3

テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。

見出し h4

テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。

検索テスト用キーワード：テクノロジー

テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。

見出し h2

テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。

見出し h3

テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。

見出し h4

テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。テキストはダミーです。