はじめに
こんにちは、ウェルスナビの土本です。
私は今年の4月に新卒として、バックエンド / インフラエンジニア志望としてウェルスナビに入社しました。しかし、IT研修などを通して主にWebフロントエンド業務を担当するWebフロント開発チームを志望し、配属となりました。
この記事では、バックエンドエンジニア志望がなぜフロントエンドエンジニアを志望したのか、また開発を通じて得られたこと、バックエンド開発とフロントエンド開発で感じた違い、今後の課題などについて紹介させていただきます。
バックエンドエンジニア志望だったけど、フロントエンド開発に興味が出てきたあなたに...
Webフロント開発チームを志望することになったきっかけ
理由は3つあります。
1つ目は、配属先チーム紹介時にWebフロント開発チームが一番さまざまな領域に携われると感じたからです。
ウェルスナビのWebフロント開発チームは、主に下記の業務を担当しております。
- サービス紹介サイト、コーポレートサイト、LPなどのコーディング（HTML/CSS/JS/Vueなど）
- それらのサイトのシステムの管理・改善（WordPress/Laravel）
- VueやTypeScript、Next.jsを用いたWebアプリケーション開発
- 業務効率化のための改善・技術的負債の返却
- TypeScriptを使った社内ツールの改善
以上のように当チームはVue、TypeScript、Next.jsを使用したアプリケーションの開発にとどまらず、Laravelを用いたWebページの作成も可能なため、幅広い技術スタックを使うところが魅力的でした。
2つ目は人との関わりが多いことです。
自分のチームの人以外にもWebディレクターやデザイナーの方、事業側の方々と一緒に業務することが多いです。
そのため、業務理解やコミュニケーションの方法など社会人としてのソフトスキルの成長が早急に求められる点が良い経験になると感じました。
3つ目は、ユーザーに近い位置にある点にあります。
バックエンド開発と異なり、ユーザーが直接目にする部分であるため、迅速にフィードバックや反応を得ることができる点が非常に魅力的です。
私は入社前からWebサイトを運営していたのですが、ユーザーと共にサイトを作り上げること（リリース後もユーザーから反応を受け取り、それに基づいてサイトをブラッシュアップする過程）を通じてサイトの改善を行う点に面白さがあると思います。
以上3点の理由でフロントエンド開発を志望しました。
Webフロント開発チームでの経験
印象深い業務は2つあります。
1つ目はWNのサービス公開8周年記念ページのリニューアルです。
HTMLとSCSSを使用し、既存のコーディングルールに従ってマークアップすることが求められました。
未経験だったBEM、SMACSSなどのコーディングルール、再利用性の高いマークアップ、そしてCSSの適切なプロパティの使い方を学び、入社前には意識できていなかったリリース後の運用を考えたコーディングの難しさを改めて感じました。
そしてリリース後には事業側の方々から記念ページの感想を聞くことができたので改めてユーザーとの近さを感じました。
2つ目はLaravelのバージョンアップグレードです。
現行で利用しているLaravelのバージョンのサポート終了に伴う、セキュリティのリスクを回避するために行いました。
ここでは、安全にリリースするための進め方（インフラ部分の運用・構築を担当するシステム基盤チームと連携し、検証用環境の作成から本番環境への適用までの進め方）と事業側とのコミュニケーションが求められました。
システム基盤チームの方々と話す上で、予めこちらがスケーラビリティやロードバランシングなど知っておくことが必要なため、インフラ側の基本概念についての知見を増やすことが必要だと感じました。
経験して感じたバックエンド開発とフロントエンド開発の違い
1つ目は、ブラウザを頻繁に使用することです。
フロントエンド開発ではデザインの確認、JavaScript側のエラー出力など頻繁にブラウザを使用します。
一方バックエンド開発ではアプリケーションがサーバー上で動作するため、コンソール上でデバッグやレスポンスの確認などを行うところに違いを感じました。
2つ目は、使用するツールの違いです。
フロントエンドとバックエンドを開発する上で使用するツールに以下のような違いがあると感じています。（企業やチームによって変わると思います）
フロントエンドのツール
- Figma、Visual Studio Code、ブラウザ（Google Chromeなど）
バックエンドのツール
- InteliJ、APIクライアントツール、DBMSクライアントツールなど
以上のように、ツールだけを見てもフロントエンド開発で使用するツールは画面に関連するものが多い印象を受けました。
3つ目は、フロントエンド開発とバックエンド開発のレビューの違いです。
Webアプリケーション開発（特にロジックやデータ処理の場合）やバックエンド開発の場合はロジックやデータ処理に重点を置くため、ある程度プルリクエスト上で確認できると感じました。
一方、視覚的なデザインとユーザーの操作感に重点を置いている画面の場合、画面上でレスポンシブデザインのサイズ感やFigma通りに実装されているかを確認することが重要だと感じました。（HTML、CSS、JavaScriptをまとめて送られて、コード上だけでレビューするのは厳しい…）
今後の課題と目標
今後の課題は、ただ与えられたタスクを行うのではなく、「依頼されたタスクの背景を考える」ことです。
業務で感じることとして、新規Webページ作成やLP改修などは担当する事業側の部署から依頼を受けることが多いのですが、「なぜそのサイトを修正したいのか、新規で作成する必要があるのか、目指しているところはどこか」などを考えながら業務を行う必要があると感じています。
これができるようになることで、一方向的にタスクをこなすのではなく、他部署と意見を交換することでより良い提案や顧客目線での実装が可能になると考えています。
また今後の目標はフロントエンド開発だけでなく、新規事業におけるバックエンド開発を行うことです。
現在、Webフロント開発チームは、マーケティング開発チームというマーケティング領域に関わる開発チームへ変更されました。この組織変更に伴い、バックエンド開発を行う機会が増えてきています。
そのため自身のキャリアプランにおける判断材料を増やすために、積極的に新しいことにチャレンジしていきたいと考えています。
さいごに
フロントエンドエンジニアとしての経験は私のスキルセットだけでなく、他部署目線だとどう考えるかなど視点の幅を大きく広げてくれました。
今後はバックエンド開発業務とフロントエンド開発業務の両方の知識を活かして、より顧客の悩みを解決できるエンジニアとして成長していきたいと考えています。
Discussion