バックエンドエンジニアがフロントエンドをやってみた
この記事は 「Atrae Engineers Advent Calendar 2024」の20日目、12/20(金)担当の記事になります。
(アイコンが違いますが同一人物です)
前回はまるちゃん(まるちゃん / Yusuke Maruyama)による「エンジニアリングって錬金術」というお題でした。タイトルは一見よくわからないですが、読んでみると確かにと思うことも多かったですね。
はじめに: 自己紹介
このnoteで投稿するのは初めてなので、軽く自己紹介と、なんでこういうタイトルの状況になったかを説明します。
筆者は2024年8月にアトラエに中途入社しました。前職はヤフー株式会社→LINEヤフー株式会社で、2022年4月に新卒入社後、Yahoo!ショッピングなどのビジネスユーザー向けプラットフォームの保守運用、SRE系を中心に行っていました。
そこから「もっと顧客に近いサービス開発をしたい」という思いを持ってアトラエに入社しました。現在はカスタマーサポートと連携してのサービス改善や、内部で用いているシステムの改善など、改善タスクを中心に行いながら、新規機能開発に向けた準備を行っているところです。
フロントエンドを触らずに生きていきました
前職時代は保守運用メインということで、主にバックエンドやサーバー、k8sの知識を問われることが多く、フロントエンドをいじることはあまり多くはありませんでした。画面まで自分のチームの担当箇所である場合もあるにはあったんですが、複雑な機能が必要なわけではなく、JavaScriptの基本的な知識があれば十分、という程度でした。
その前にも他社でのアルバイトや競プロ、大学院の研究などでプログラミングに触れる機会はあったのですが、いずれもフロントエンドは「求められるデザインを実現する」というより「最低限動くものであれば良い」というレベルだったので、なかなか勉強する機会がなく今に至りました。
バックエンド Java: 5年相当, Python: 3年相当, Go: 1年相当
フロントエンド JavaScript: ちょっと修正したことはある
これくらいスキルセットに差がある状態でアトラエに入社しました。
開発メインになって必要なスキルが変わった
アトラエでは運用も行いつつ開発もするチームに入り、念願だったユーザーに近い部分の開発も行うようになりました。
最初の仕事はバックエンド中心で、画面部分はフロントエンドが得意な方とペアを組んで行うスタイルでした。Ruby on Railsを触るのは初めてでしたが、基本的な文法の勉強をすれば、(ドメイン知識の吸収という別の問題はあったにせよ)問題なく進めることができました。
ところが、その時はやってきます。とあるプロジェクトで
「今バックエンドの方は進んでるけどフロントエンドがビハインドしているから、棚橋くんもフロントエンドやってくれない？」
もちろん、嫌というわけではありません。筆者もフルスタックエンジニアを目指す人の一人なので、フロントエンドを勉強する大チャンスです。
とはいえ、ほのおタイプでパーティを組んでみずタイプのジムに来てしまった時並に「どうしよう」という気持ちになりながら、作業を進めるのでした。
フロントエンドとバックエンドの違い
フロントエンドとバックエンドで学習にはどんな違いがあるか。ChatGPTに訊いてみました。最後の部分だけを切り出すと以下の通りです。
フロントエンドは見た目やインタラクションに焦点を当て、直感的に学びやすい反面、デザインセンスが求められることがあります。
バックエンドは論理的思考が必要で、サーバーやデータ処理に興味がある人に向いています。
どちらも重要なスキルであり、興味やキャリア目標に応じて選択することをおすすめします。
まさにここに、自分から見たフロントエンドへの壁があるように思います。
自分は大学の学部までは文系だったのですが、得意科目は数学で、地歴なども事象を論理的に分析して覚えるタイプでした(じゃあなんで理系じゃなかったのかというと、生物や化学がそんなに論理的に覚えられず得意じゃなかったからです。個人的には理系だろうと文系だろうと論理的思考は大事だと思っています)。だからバックエンドは得意だったんだろうと思います。
バックエンドは論理的に深掘りして考えるのが大事
自分が思う象徴的なバックエンドプログラミングは競プロです。
入力はある範囲に定まっていて、それ以外はそもそも想定しないし受け付けない
計算機の力を使い、ロジックを組んで何らかの「答え」を出す
結果は機械で扱いやすいのが重要
まさにこれがバックエンドの特徴です。
これは、ある問題が与えられて、その問題を論理的に証明したり、答えを出したりする、数学っぽいやり方だなと思います。
フロントエンドは直感的な理解がまず大事
一方、フロントエンドは(勉強に苦しんでいる段階の僕が言えることかはわかりませんが)直感的な理解を重視するように思います。
入力は2次元の画面全てから存在する
計算機の力を使ってロジックを組むが、細かい操作はバックエンドに任せるので「間を取り持つ」方が大事
結果は直接ユーザーに見えるようにする
という特徴を持つ以上、1画面に同時に無数の問題があるという見方の方が正しいのではないかと思います。そういった場面では、一つひとつをじっくり解くというより、直感的な理解の方が優先されるようです。
例えば「トリガーからイベントを発火する」とか、論理的に説明できないことはないと思いますが、直感的にざっと理解した方が早いんだろうなと思います。
デザイナーとフロントエンドエンジニアはまたちょっと違うのでややこしいですが、デザインセンスもやはり必要だと思います。というのも、そういったセンスが、先述した「直感的な理解」を助ける、と思うからです。
ちなみに筆者は中学美術はからっきしダメでした。高校は工芸選択でしたがそっちも微妙でした。
どうやってフロントエンドエンジニアになるか(まだなれてないけど)
さて、できない理由を分析していても始まりません。フルスタックエンジニアになりたいのであれば、今の自分の能力で何とかやりくりするしかない。
筆者のように環境の関係でバックエンドばかりやっていて、フロントエンドを触ることになった、という方もある程度はいらっしゃると思います。
そんな方に、おすすめの勉強方法を紹介します。
本を読んで勉強する
フロントエンドといえど、プログラミングは言語の勉強に他なりません。教科書を買ってそれに合わせて勉強するのが愚直ながら大事な方法でしょう。
とはいえ、バックエンドと少し違うのは、「文法をじっくり理解する」というよりも「とにかく手を動かして学ぶ」というところです。そういう意味では、ハンズオンが多めの本を買うと良いでしょう。
何か作ってみる
筆者はそういうタイプではないのですが、エンジニアの中には「とにかく作ることで覚える」という方もいらっしゃいます。自分のHPやブログ用サイトとかを作ったことがある人もいらっしゃるでしょう。
そんな方は、そこに新しい機能を追加する形でフロントエンドの技術に触れてみるのもよいでしょう。先述した通り、手を動かして学ぶことにもつながります。
頼れる人に頼る
「そんなこと言われても、もう仕事で明日から開発だよ間に合わないよ」という方。プライドを捨てて、詳しい人に頼りましょう。筆者はほとんどこれで乗り切りました。
頼る時は頼りっぱなしではなく、次に同じパターンの実装をするときには質問しなくていいように、どこがポイントなのかを聞いて自分のものにしていくしかありません。プライドなんて無駄です。頑張りましょう。
まとめ
元も子もない記事になってしまった気がしますが、自分の中にある「バックエンドとフロントエンドって何が違うんだろう」という問いを言語化できたのは良かったと思います。
もしよければ、アトラエでは筆者のフロントエンドの師匠になってくださる方も募集していますので、ぜひ。