9
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

バックエンド(レガシー)からフロントエンド(最新技術)まで学んだ Advent Calendar

Posted at

はじめに

今年は、業務と個人開発の両方で新しい言語・技術に挑戦した一年でした。

本業では、初めての COBOL と SQL に本格的に取り組み、
基幹システムの中でどのようにデータが扱われ、どのように業務ロジックが実装されているのかを
2年間を通して学んできました。
慣れないレガシー環境に苦戦しつつも、少しずつ理解が深まり、
「読み解く力」と「堅実な実装力」が身についたと感じています。

今年学んだ技術一覧

今年は、業務・個人開発の両面でこれまで触れたことのなかった技術に挑戦し、
エンジニアとして大きく幅が広がった一年でした。
以下では、実際に取り組んだ主要な技術を簡単にまとめます。

COBOL COBOL

本業で本格的に学び始めた言語。
レガシー環境特有の構造やバッチ処理の考え方に触れながら、
“業務ロジックを正確に読み解く力” を身につけるきっかけになりました。

Oracle SQL

データベースと業務の関係性を理解するために欠かせなかった技術。
実際のテーブルを扱いながら、
「データがどう流れ、どう加工されているのか」を体感的に掴むことができました。

React React

個人開発で挑戦した初めてのモダンフロントエンド。
コンポーネント指向に慣れ、UI を組み立てる楽しさを知ることができました。

Next.js Next.js

React をさらに活かすために学んだフレームワーク。
ルーティングなど、Web アプリの構造を深く理解するきっかけになった技術です。


これらの技術を通して、
“レガシーからモダンまでの流れを実際に体験する” という貴重な一年になりました。

初めての React / Next.js に挑戦

今年は、個人開発を通して React と Next.js に初めて挑戦しました。
これまで業務で触れてきた COBOL や SQL とはまったく異なる世界で、
最初は UI を“自分で組み立てる”という発想に戸惑いながらも、
徐々にコンポーネント志向の楽しさに気づいていきました。

React では、State や Props といった基本概念を理解することで、
画面の動きが自分のコードに直結する感覚を得られたのがとても新鮮でした。
小さなコンポーネントを積み重ねて UI を作る流れは、
今まで触れてきた言語では味わえなかった面白さがあります。

Next.js では、さらに開発体験が大きく変わりました。
一方で、学習の中で多くの壁にもぶつかりました。
特に最初は、State の更新タイミングや Props の受け渡しがうまく理解できず、
「なぜ再レンダリングされないのか」「どこで状態が変わっているのか」が分からずに
何度も手が止まりました。

また、Next.js では
「この処理はサーバー側で動くのか、クライアント側で動くのか」
といった考え方に慣れるまで時間がかかりました。
ページ遷移やデータ取得の仕組みを理解しないまま書いたコードが、
思った通りに動かず悩む場面も多かったです。

それでも、エラー内容を一つずつ調べ、
小さな動作確認を繰り返すことで少しずつ理解が進みました。
この試行錯誤の経験が、
「分からない状態を分解して考える力」を鍛えてくれたと感じています。

ルーティング、データ取得、といった Web アプリの基本構造を自然に学べるため、
“フレームワークを使うメリット” を実感することができました。
特にページを増やしていく中で、
「必要なデータをどこで取得すべきか」を考える習慣が身についたのは大きな収穫です。

これらの技術を学ぶことで、
バックエンド寄りだった自分の視野がフロントエンドまで広がり、
アプリ全体を見渡せるようになってきたと感じています。
引き続き、小さなアプリを作りながら理解を深めていこうと思います。

2026年に向けてチャレンジしたいこと

2026年は、これまで以上にフロントエンド技術へ本気で取り組む一年にしたいと考えています。
今年 React や Next.js を学んだことで、UI を自分の手でつくる楽しさや、
ユーザー体験を意識した開発の奥深さに強く惹かれるようになりました。

これをきっかけに、今後は フロントエンドエンジニアとして本業でも活躍できる力
本格的に身につけていきたいと思っています。

そのために、2026年は次のようなことに挑戦していく予定です。

1. React / Next.js の理解をさらに深める

  • App Router・SSR/SSG の理解をより実践的なレベルへ
  • 状態管理(Redux / Zustand / Server Actions など)の習得
  • 小規模アプリだけでなく、中規模開発を意識した設計の練習

2. UI/UX の知識を強化する

  • コンポーネント設計(Atomic Design など)
  • Web アクセシビリティの基礎
  • Figma やデザインシステムへの理解を深める

3. TypeScript をちゃんと“使いこなせる”ようにする

  • 型定義の理解を深め、より堅牢なコードを書く
  • API とフロントの型を揃える開発体験を習得

4. 個人開発の継続

  • 小さなアプリを継続的に作り、実践経験を積む
  • 実際に使われるサービスを作ることで、企画〜改善まで経験する
    👉 アプリを見る

5. 本業でもフロント業務に携われるよう準備する

  • コードレビューに耐えうる品質で書けるようになる
  • GitHub や Qiita で学習ログを公開して実績化する
  • チャンスが来たときに動けるようポートフォリオを整備する

レガシーな言語からスタートしたからこそ、
今の自分がフロントエンドに強く興味を持てていると感じています。

2026年は、これまでに積み上げてきた経験を活かしながら、
本業でもフロントエンドエンジニアとして活躍できる力を育てていく一年にしていきます。

9
3
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
9
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?