フロントエンドエンジニアに求められる役割の多様化
▲登壇時の写真
はじめまして、フリーランスエンジニアとしてフロントエンド開発をメインに行っている、小林（@neo6120）と申します。
もともとはインフラやサーバサイドも扱っていましたが、独立時にフロントエンドに絞り、現在もフロントエンドメインでエンジニアをしています。
変化が激しいと言われるフロントエンド界隈ですが、今回はフロントエンド特化のフリーランスエンジニアとして、スキルアップのために普段どのような点に気をつけているか、また注目している技術はなにか、について紹介したいと思います。
広がるフロントエンドのカバー範囲
サーバからテンプレートエンジン等を使ってHTMLを組み立てて返すだけで済んでいた頃は、今日のフロントエンドとバックエンドの境界はかなり曖昧でした。フロントエンドといえばマークアップを書いたり、ちょっとしたインタラクションをつける役割のことを指していたように思います
しかし、ウェブアプリケーションが複雑になるにつれて分業化が進み、UI（ユーザインターフェイス）やUX（ユーザエクスペリエンス）を主に担うフロントエンドの領域は徐々に大きくなっていき、現在に至ります。
求められる役割・スキルの変化
ひとくちにフロントエンドといっても、複雑なウェブアプリケーションの場合、様々な要素技術の複合領域になります。デザイナの意図通りの見た目を実装すればいいというだけではなく、
- 複数人での開発を円滑かつ高速に進めるために、デザインガイドを設計して再利用可能な形でアプリケーションを作る必要がある
- マーケティングのために、どういう情報を収集しておかねばならないか想定しながら開発することが求められる
- サーバやAPIにいたずらに大量のリクエストを送るとサーバの負荷が高まりサービス自体がダウンしてしまう考慮をする必要がある
......などなど知っておいた方が良いこと、考えるべきことはたくさんあります。
これ以外にも、最近では TypeScript が普及してきたこともあり、型についての知識としてコンピュータサイエンスを知っておくことで、より堅牢なコードを書けるようになったり、Electron や React Native の登場でウェブに留まらず様々な OS のネイティブアプリを開発することもできるようになってきており、その裾野はますます広がっています。
フロントエンド界隈のトレンドとスキルについて考え方
モバイルアプリ全盛からウェブへの揺り戻し
少し前までは完全にモバイルアプリが全盛で、下記のようにウェブのフロントエンドはやらないといけない理由が無いとやらない、という判断になることが多かったように感じています。
- 流入を SEO に依存している
- アプリエンジニアを確保できない
- プラットフォーマーとどうしても折り合いのつかないビジネス領域である
現在は多少緩和したかな、という感覚が若干あるものの大筋はあまり変わっておらず、一方でB向けのサービスやプロダクトではニーズが高まってそうだなあ、と予想しています。
スキルについての考え方
フロントエンド領域が複雑化かつ細分化されてきている中で、それでも全体を一気通貫で習得していくべきか、特化ジャンルを作ってそこで一点突破するかは難しいところです。
ただ、欲を言えば大枠を追いつつ、自分の興味のあるものを学習しておくと、すぐには活用することがなくても、点と点が線になって後々から活きてくるというのは経験的に確信しています。
例えば VR に興味があれば WebXR を突き詰めてみたり、ユーザの行動に興味があれば心理学を学んでみたり、といったことがあると思います。
スキルアップのためにいかに「素振り」をするか？
では、どのように「点」を作れば良いのでしょうか。
フロントエンドに限った話ではないですが、仕事でもなんでもやる時に手数は多くあった方がいいと考えています。問題に取り組む際に引き出しが多い方がより最適な解を導けるためです。
そのためには、新しい技術やアイデア、あるいは普段とは異なる会社や組織での開発に積極的にトライして引き出しを増やしていくことが大切です。このような自分の道具箱をメンテナンスしていくことを、野球になぞらえて「素振り」と呼んでいます。
素振りメモを残す
素振りとなる、OSSや個人開発の際のモチベーションは大きく分けて次の2つかなと思います。
- 試してみたい技術がある
- 解決したい課題がある
これらを整理して進めるために、日々、気になる技術やアイデアをTodoistで記録しています。
▲管理しやすいTodoistを使用
素振りの流れ- 1.Todoistでアイデアや技術をタスクとして残す
- 2.技術調査ラベルの中から気になるものを、チュートリアルをやるなどしてツールやライブラリの理解を深める(週末などまとまった時間を取れる時に)
- 3.2が応用できそうなものをアイデアラベルで探して実装してみる
まずは、素振りをするにも、取っ掛かりがないとやりづらいので、普段の生活の中で感じたふとした引っ掛かりをアイデアとしてメモし、GitHub のトレンドや、SNS、掲示板などで見かけたツールやライブラリ、サービスなどを技術調査としてメモしておくように心掛けています。
実際に手を動かす
次に、休日や平日の朝にこれらをざっと見て手頃そうなものを試します。チュートリアルをやるとわかった気になるだけなので、チュートリアルをやって面白かったものは既存の過去につくったものを書き換えてみたり、アイデアリストから合いそうなものを引っ張り出してきて実装してみたりします。
アイデアやメモとして残しておき、忘れずに手を動かすことで学習も捗るのではないかと思います。
ここで意識したいのは次のようなことです。
- 偏らないように特に気をつける
- 自分の知識から1ステップ先程度だと難易度が低いので、2ステップ程度離れていそうなものがちょうど良い
- 実用に近いものほど水物だと思っておく。標準やプロトコルのキャッチアップを忘れない
今の仕事の主力となっている React や Next.js ともこうした素振りの一環で出会い、自分のための小さなアプリケーションを作るところからはじめて、自信を深めていき、仕事という打席に立って大きなアプリケーションやサービスを作るに至っています。
スキルアップのための副業もアリ
どのような副業を選ぶか次第でもありますが、R&Dのような自分が未開拓の領域の仕事を受けられれば自分の知見を増やすことができますし、自分のよく知った領域でも応用先によって制約が全然違ったりするので勉強になることも多いです。
一方で、あまりに手に馴染みすぎている仕事だと徒労感があったり、切り売りしていると感じてしまう面もあると思います。
今はOffersを使って週2ペースでスタートアップ副業をしています。会社員でも、フリーランスでも週1,2ペースでなら副業は始めやすいと思いますので、ぜひトライしてみてください。
副業は入社体験にも役立つ
私はこれまでアルバイトやインターンで実際に働いてみたことのある会社にしか就職をしたことがありません。実際に働いてみることが一番会社のことを知ることができる手段だと思っています。
会社や組織は十人十色なので、自分に合うかどうかは飛び込んでしまうのが一番手っ取り早く分かります。そういう意味で副業はお得で、コストが小さく入社体験ができるので積極的にやるといいです。
フリーランスになる前は、会社員の身分でいくつか副業をしていたのでフリーランスになってもこの調子でやっていけるだろうという自信につながりました。
今注目している技術のトレンド
上記のように、普段は、自分のスキルを広げるために、日々の業務では使わないような技術でも積極的に触れていくことを意識しています。
そんな中、最近では次のような技術に注目しています。
パフォーマンスのチューニング
エッジコンピューティングという概念は元々は IoT 領域が発祥だと認識していますが、これを CDN でのコンピューティングとして捉える動きが活発になってきているように思います。
従来はサーバに到達したリクエストから HTML を組み立てて返す、というのが一般的でしたが、CDN でちょっとしたスクリプトが動いて HTML を組み立てて返すことができればより応答が高速になると考えられます。Amazon の Lambda Edge や Cloudflare の Workers でこれを実現できます。
一方で、Next.js を開発する Vercel は別のアプローチをとっていて静的なページ生成と動的なページ生成の中間のような Incremental Static Regeneration という仕組みでレスポンスの高速化を試みています。
かつてはフロントエンドのパフォーマンスチューニングといえば、ブラウザのプロファイラをこねてチューニングしたり、アセットのサイズを調整したりというのが専らだったように思いますが、ウェブサイトやサービスへの最初のリクエストからレスポンスまでをチューニングする取り組みを注視しておく必要があるでしょう。
WebAssembly
JavaScript が誕生してから早20年以上経ちますが、これまで様々な言語やプラットフォーム、パラダイムに挑戦されながらも現在まで勝ち残ってきました。JITコンパイラのチューニングのお陰でかなり高速に動作するようになったものの、他のバイナリにコンパイルする言語と比較するとまだまだ遅いのが現状です。
Webpack よりもかなり高速にバンドルできる esbuild は Go で書かれていますし、TypeScript のサーバーランタイム deno の linter である deno_lint は Rust で書かれていて、これも eslint と比較するとかなり高速です。
ブラウザでは、WebAssembly の実装がじわじわと進んでおり、Rust や C++ をはじめとした言語から wasm にコンパイルして動かすことができるようになってきました。今のところ、JavaScript で処理するには重いものをオフロードするような用途でしか実践的には使えないかと思いますが、canvas にレンダリングするなどして DOM に依らない GUI が組めるようになると面白いのではないかと考えています。
まずは小さなことからチャレンジ
変化の激しいフロントエンド界隈ですが、継続的に自分の市場価値を高めていくために、まずは小さなことから始めて継続させることが大切だと思っています。
気になる技術についてメモを取っていったり、副業してみたい企業を調べてみたり。
結局必要なことは、いかに必要なスキルを見極めるかではなく、日々の行動の積み重ねをどう行うか、だと思うので、日々精進していきたいと思います。
