はじめに
私は街のデザイン会社で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コーダーからフロントエンドエンジニアになる過程で感じたことについて、また投稿していこうと思います。