はじめに

私は街のデザイン会社でWebコーダーとして働いています。
最近は、将来的なキャリアも考えて、よりフロントエンドの対応力を強化するためにReactを勉強しています。
自分の現在位置を記録し、どのように学習してWebコーダーからフロントエンドエンジニアになれるのかを記録していきます。

フロントエンドエンジニアの定義について

2025年1月現在では、一般的に以下のような技術を会得していることです。

Vanilla JSに精通している
JSフレームワーク（React.js、Vue.js、Anguler.js）を使える

求められることは多く、これに加えてバックエンドやサーバーサイドの知識、JSライブラリやモジュールバンドラなど様々なツールを扱える必要があります。

フロントエンドエンジニアの仕事について

大きく以下の２つに分類されます。

Webサイト制作
Webアプリケーション開発

Webサイト制作

Webサイトからユーザーへ情報を伝えることを主目的とします。
デザインにアニメーションを加えることで、印象や雰囲気をより演出することができます。
フロントエンドの技術は主にHTML / CSS / JavaScriptを使用しますが、UXを向上させる方法としてSPA（シングル・ページ・アプリケーション）があります。
ページ遷移時に1ページの内容を書き換えることで、ユーザーにページ遷移を感じさせない手法です。
SPAを実装するためには、ReactやVueの理解が必須になります。

Webアプリケーション開発

情報の流れが一方通行なWebサイト制作と違って、
ユーザーとWebサイトが双方向で情報をやりとりする特徴があります。
わかりやすい例で言うと、FacebookやNetflix、Dropboxなどです。
どのWebサイトもSPAで構築されており、画面遷移を感じることなくスマホアプリのように操作が可能です。
Webアプリケーション開発は、工期がWebサイト制作の2倍以上だったり、関わる人数も多く、JSフレームワークの知識もより深く学ぶ必要があります。

参考：フロントエンドの知識地図

Webサイト、Webアプリのどちらの仕事をしたいのか

私の業務経験から言うと、BtoCのWebサイト制作が長いので、やはりWebサイト制作にやりがいを感じます。
とはいえ、Webアプリーケーション開発にもチャレンジしてみたい気持ちがあります。
Reactを勉強することは、どちらにしても価値のあることなので、仕事を限定せずに勉強に取り組んでいく所存です。

私がReactを学ぶために使用しているツール

Udemy

動画学習ツールのUdemyです。現在はこのサービスをメインに学習しています。
様々な技術の学習コースがあり、以下のような機能で学習しやすいです。

コース内でセクションごとに動画が分かれている
動画の再生秒数の位置にメモを記述できる
動画の再生スピードが0.25刻みで選択できる
デバイスを問わず利用でき、スマホで動画ダウンロードもできる
コースごとのQ&Aで投稿者に質問ができる

私はReactの学習に、「じゃけえ」さんの動画を購入しました。
以下にリンクを載せておきます。

基礎編
【最新ver対応済】モダンJavaScriptの基礎から始める挫折しないためのReact入門
応用編
Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版

本

技術書はたくさん出ており、情報の正確性が高いです。
付箋を挟んでおけば、知りたい情報にもすぐアクセスできます。
本はモニターと違って、目が疲れないのもいいです。
Udemyの講座については、本を通して知ることができました。
以下の本です。
モダンJavaScriptの基本から始める　React実践の教科書

Progate

オンラインプログラミング学習サービスのProgateです。
こちらでは、スライド資料による学習と、課題の実践を通して学んでいけます。
JavaScriptの講座は、かなりの数があり、基礎から勉強するにはもってこいです。
一番の魅力は作業環境の準備が0ということです。
Progateのサイト上でエディタが準備されているので、自分で用意するものが１つもありません。

いま作りたいものと、Reactの不明点について

作りたいもの

・SPAで構築したポートフォリオサイト

ページ遷移に待ち時間がなく、素早くページが表示される仕様を自分のサイトで実装する。

・Reactを使用したWebアプリケーションを個人開発

Reactの様々なメソッドを使用して、オリジナルのアプリを作成する。
自分好みのToDoアプリ、ファンサイトなど。

Reactの不明点

自分のサーバーにReactで構築したサイトをアップする

HTMLとCSSのみならば、FTPソフトでサーバーにアップするだけで公開できますが、Reactは同じようにいきません。
学習ツールの多くは、最初の環境構築の課題をスキップさせてくれるため、学びやすいですが、いざ自分で1から構築→公開しようとすると難しいです。
2年前に挑戦したときは、パッケージマネージャーのnpmを使い、Node.jsも使用して環境構築をした記憶があります。ただ、アップできるファイルにするには、モジュールバンドラを使用して1つにまとめて...というところからわからない現状です。

コンポーネント指向の真価について

大規模なサイト制作を経験していないので、コンポーネントを分ける作業に手間を感じてしまいます。
ただ、整理整頓や共通化とかは好きなので、大規模な開発でどういきてくるのか楽しみです。

最後に

2年前にReactを勉強したときはちんぷんかんぷんで挫折しました。
しかし、今は楽しみながら勉強を進められています。
当時に比べるとJavaScriptの理解が進んでいることや、案件でオリジナルのJavaScriptを組んだ経験があるからかなと思います。制作物→診断コンテンツ
今回は、転職を控えての勉強なので、精一杯がんばります。
Webコーダーからフロントエンドエンジニアになる過程で感じたことについて、また投稿していこうと思います。