本投稿は TECOTEC Advent Calendar 2024 の18日目の記事です。
はじめに
新卒2年目の決済認証システム開発事業部の平沢です。
普段はVue.jsやReact.jsを使って、Webアプリケーションのシステム開発に携わっています。
決済認証システム事業部では、23卒が3名、24卒が6名の計9名が新たに加わりました。その中で、現在主にフロントエンドエンジニアとして活動しているのは私だけなんです！
（専門外でもフロントの改修を行っている方もいます）
フロントエンドエンジニアに関心を持つ方がまだ少ない印象を受けるので、この職種の楽しさややりがい、そしてテコテックで働く魅力について、最大限にお伝えしたいと思っています！
この記事が、少しでもテコテックやフロントエンドエンジニアに興味を持つきっかけになれば嬉しいです！
目次
フロントエンドエンジニアとは？
まず、フロントエンドエンジニアとは何でしょうか。
ご存じの方もいらっしゃるかと思いますが、フロントエンドエンジニアについて解説します。
フロントエンドエンジニアとは、ユーザーが直接触れる部分、つまりウェブサイトやウェブアプリケーションの「見た目」や「操作性」を担当するエンジニアです。ユーザーの目に見える部分を作成するため、デザインやインタラクションに関わる重要な役割を担っています。
今閲覧している記事を公開するサイトを作っているのもフロントエンドエンジニアの仕事内容の一つとなります。
フロントエンドエンジニアになるために必要なスキル
基本的に必要なスキルは下記3点になります。
1. HTML（HyperText Markup Language）
Webページの骨組みを作る言語。見出し、段落、画像など、ページの構造を定義しています。
<div> <p>これはHTMLコードです</p> </div>
2. CSS（Cascading Style Sheets）
Webページの見た目を整える言語。色やレイアウト、フォントサイズなどをデザインしています。
p { color: #fff; }
3. JavaScript
Webページに動きを加える言語。ボタンをクリックした時の動作やデータの更新を実現しています。
const message = "メッセージ" console.log(message) // メッセージ
HTML、CSS、JavaScriptが基本的なスキルであることが分かりました。
実務では他にどの様なスキルが必要なのでしょうか？
実務で必要なスキル
1. フレームワークとライブラリ
React、Vue.js、Angularなどのフレームワーク、ライブラリは再利用性・保守性の向上、状態管理の簡略化、パフォーマンスの最適化、大規模アプリケーション開発において必要です。
Material-UIやVuetify、BootstrapなどのUIフレームワーク、UIライブラリなどの知識も必要になります。
2. Git理解
Gitはソースコードやプロジェクトの変更履歴を管理するための分散型バージョン管理システムです。
フロントエンドエンジニアに限らずエンジニアには、コードの品質管理やチーム作業の効率化において欠かせないツールです。
HTML, CSS, JavaScriptだけで実装できそうなのにReact、Vueを学ぶ必要ってあるの？？と思う方もいると思います。
ChatGPTになぜフレームワーク知識が必要なのか聞いてみました。
再利用性の向上 ReactやVueでは、コンポーネントと呼ばれる独立した小さな部品を作ることができます。 これにより、例えばボタンやモーダルウィンドウのような要素を一度作成すれば、どこでも使い回すことが可能です。 HTMLやJavaScriptのみで作る場合、同じコードを複数箇所で書き直す必要があり、修正や追加時に手間がかかります。
保守性の向上 フレームワークでは、コードをモジュール化して管理しやすくします。 例えば、Vueの単一ファイルコンポーネントやReactのJSXを使用すれば、見た目（HTML）、スタイル（CSS）、動き（JavaScript）が一箇所にまとまるため、修正や拡張がしやすくなります。
状態管理の簡略化 現代のアプリケーションでは、ユーザーの入力やデータの変化によるUIの更新が頻繁に発生します。 ReactやVueは、状態管理を簡潔に行うための仕組み（ReactのuseStateやVueのreactiveなど）を提供しており、JavaScriptだけで実装するよりもコードが簡潔でバグが少なくなります。
パフォーマンスの最適化 仮想DOMや効率的なレンダリングアルゴリズムを使用することで、変更があった部分だけを更新する仕組みが内蔵されています。 これにより、手動でDOM操作を行う場合よりも効率的で高速な描画が可能になります。
チーム開発への適応 フレームワークを使用することで、プロジェクト全体で統一されたコーディング規約や構造を採用できます。 特に大規模なチームやプロジェクトでは、ReactやVueを使用することでスムーズな共同作業が可能になります。
エコシステムの活用 ReactやVueには、膨大な数のライブラリやプラグインが存在します。 例えば、フォームのバリデーションやルーティング、状態管理ライブラリ（Redux、Piniaなど）を簡単に導入できるため、ゼロから作る必要がありません。
現場の需要 多くの企業では、ReactやVueが現場で使われています。 そのため、これらを学ぶことは、市場価値を高め、実務に直結するスキルを身につけることにもつながります。
結論 ReactやVueを学ぶことで、再利用性、保守性、効率性が大幅に向上し、大規模なアプリケーションでも柔軟に対応できます。HTML、CSS、JavaScriptは基礎として大事ですが、それらを活かしつつ、現代の開発要件に適応するためにはフレームワークを学ぶ価値があります！
上記を見るとやはりフレームワーク知識は必要だということが分かりますね。
必要なスキルなども確認できたので、次にフロントエンドエンジニアとして働くことの魅力をお伝えします！
フロントエンドエンジニアとして働く魅力
フロントエンドエンジニアの魅力は沢山ありますが、抜粋して3点お伝えしたいと思います。
1. 「デザインとコーディングの両方を活かせる」
フロントエンドエンジニアの魅力の一点目は、デザインとコーディングの両方を活かすことができることだと思います。
具体的には、デザイナーが作成したプロトタイプやワイヤーフレームをもとに、先述したスキルを駆使してデザインを「Webアプリケーション」に変える作業を担当します。
ユーザーインターフェース（UI）の見た目を整えるだけでなく、ユーザーが直感的に操作できるような動きやアニメーションをJavaScriptやCSSで組み込むことで、使いやすさを実現します。
例えば、ボタンを押したときの反応や、ページ遷移のスムーズさなど、細部にまでこだわることで、より良いユーザー体験（UX）を提供する楽しさがあります。 デザイン通りに動くページを作成する事は難しいですが、完成したときの達成感は非常に大きいです。
2. 「ユーザーに近い仕事」
フロントエンドエンジニアの魅力の二点目は、ユーザーが実際に触れる部分を直接開発することができることだと思います。
これは、バックエンドエンジニアやインフラエンジニアとは異なり、成果物がユーザーに目に見える形で提供される仕事であり、やりがいを感じられます。
そのため、作成したものがユーザーから評価され、ユーザー体験(UX)に大きな影響を与えることになります。
3. 「常に新しい技術に触れられる」
フロントエンドエンジニアの魅力の三点目は、常に新しい技術に触れることができることだと思います。
フロントエンド開発の世界は技術の進化が非常に速く、ReactやVueのようなフレームワーク、Tailwind CSSや新しいブラウザAPIなど、新しいツールや技術が次々と登場します。
これにより、学び続ける意欲を持つエンジニアにとっては成長の機会が尽きない環境です。
また、新しい技術を取り入れてプロジェクトに活かせることで、自分のスキルが常に最新であるという実感を得ることができます。
テコテックでフロントエンドエンジニアとして働くことの良さ
1. 裁量権がある環境
テコテックでは、若手でも裁量をもって働くことが出来ます。新しいアイデアを提案したり、自分主体でプロジェクトの進行をする場面も多くあります。
「これやりたいです！」と声を上げれば挑戦できる環境も整っています。
実際に私もフロントエンドエンジニアとして働きたいと声を上げたところ、任せていただけました。
余談ですがフットサル部、バスケ部などの立ち上げも行なった実績もあります（笑）
2. 新卒からコーディングができる環境
新卒の「最初の仕事は雑務ばかり」と思っていましたが、テコテックの場合は違いました。
入社して外部プログラミング研修を終えた後に、プロジェクトにアサインしていただきコーディングをすることができます。 また、ベテランエンジニアがサポートについてくれるので安心してコーディングを行うことができます。
3. 多様な言語に触れることができる
入社してから1年半が経過しましたが、テコテックでは新卒からさまざまな言語やフレームワークに触れることができます。
ReactやVue（Vue2, Vue3）をはじめ、MySQL、PHP、TypeScript、Tailwind、Bootstrap、Vuetify、Elementなど、最新技術から定番技術まで幅広く学びながら実践しています。
（他にもありますがキリがないので割愛します）
プロジェクトごとに異なる技術スタックが求められるため、自然と多角的なスキルが身につきます。
例えば、フロントエンドではReactやVueといったモダンなフレームワークに加え、TailwindやVuetifyなどでデザインに挑戦し、バックエンドではMySQLやPHP（Laravel）を活用する場面もあります。
幅広く学ぶことで、自分の技術力を磨き、フルスタックエンジニアとしても成長できる環境が整っています。
4. 在宅勤務制度とフレックスタイム制
少し話はそれますが、好きな制度ランキングTOP2を占めている在宅勤務制度(No.1)とフレックスタイム制(No.2)についてお伝えします。
テコテックでは、在宅勤務制度やフレックスタイム制を導入しており、出勤時間や場所に縛られることなく、自由なワークスタイルバランスを実現できます。
例えば、始業前に市役所に行き手続きをしたり、育児や介護をしながら働いたり、自己研鑽に時間を割くことも可能です。
この制度のおかげで、在宅の環境を整え業務のモチベーションの向上を図ったり、プライベートの時間を有意義に過ごす事ができており本当に助かっています。
最後に
最後までブログを閲覧していただきありがとうございます。
フロントエンドエンジニアとしてテコテックで働く魅力が伝わりましたでしょうか？
今回は新卒の視点からフロントエンドエンジニアについてお話しましたが、他エンジニアでも同じような環境が整っていると思います。
まだまだ伝えきれない魅力はありますので、
↓↓気になった方は下記採用サイトからのご応募お待ちしております～！↓↓
テコテックの採用活動について
テコテックでは新卒採用、中途採用共に積極的に募集をしています。
採用サイトにて会社の雰囲気や福利厚生、募集内容をご確認いただけます。
ご興味を持っていただけましたら是非ご覧ください。
tecotec.co.jp
