フロントエンドエンジニア鼎談：技術の使い分けと現場の実情（後編）

ReactやVue.jsなどのモダンフロントエンド開発技術は、実際のWeb開発の現場ではどのように使われているのでしょうか。フロントエンド開発を得意とするWeb制作会社なすび代表の菅沼辰弥さん、Web開発会社LeapIn代表でありプログラミング講師も務める外村将大さん、オフィス支援のSaaSサービスを多数提供するラクスでフロントエンド開発のリーダーを務める中田和宏さんに、その使い分けや使いこなしなど、現場のリアルな声をうかがいました。

 

 

名前の後ろの表記　（開）＝開発会社　（制）＝制作会社　（自）＝自社サービス会社

 

なぜReactやVue.jsのニーズが高まっているのか

採用ニーズが高まるReactやVue.jsを扱える人材

──ReactやVue.jsは何年も前からあるものですが、最近注目が高まってきている理由はどういったところにあるのでしょうか。

外村（開）　近年急にというよりは、少しずつ増えてきたのかなと思います。ただ、2019年2月にReact Hooks^※01と呼ばれる大幅なバージョンアップがあって、それが使いやすくて評判で。2020年9月にはVue.jsもVer.3にバージョンアップして、Composition API^※02という機能を追加してReact Hooksと同じような実装になったんです。もしかしたら、その辺からより広まったのはあるかもしれません。

菅沼（制）　私もここ5年くらいで、徐々にVue
.jsやReactを採用する企業が増えていった印象です。JavaScriptだけではなくフレームワークの使い方を知っている人材でないと戦力にならないので、ReactやVue.jsが使える人を求める採用募集が増えていて、そこからフロントエンド開発をやるならフレームワークなどを習得しないといけないという意識を持つ人が増えたのではないかと思います。

──外村さんはプログラミングの学習教材販売や講師もされていますが、Reactはどういう方が学ばれていますか。

外村（開）　やはり求人広告とかでReactなどの募集を見るから、習得しておくとよさそうだと考える人は多いですね。

──JavaScriptの知識があっても、ReactやVue.jsの学習コストはけっこうかかりますか。

外村（開）　素のJavaScriptを習得するのと同じくらい新たに勉強しないと、思った通りに使いこなせないと思います。学んでみると、素のJavaScriptよりいいじゃんと思ってくれる方が多いですが。高単価の仕事をこなせるようになるという点でも習得しておくといいと思います。

──フロントエンドエンジニアであれば、誰でもReactやVue.jsを扱えるというわけではないということですよね。

中田（自）　うちはまだ全員が習得している状況ではないので、自社で教育をしようと思い、2019年頃から社内の勉強会を始めました。Vue.jsやReactが扱える人材は、どこも引く手あまたですから。

菅沼（制）　うちは自分も含めてフロントエンドエンジニアが4人います。Vue.jsでもReactでも、なんでも任せられる人もいますが、新卒採用で入社したばかりの人はこれから学んでいく段階です。

──新卒から育てていくのは、会社としてはけっこう大変ではないですか。

菅沼（制）　大変ではあります。やはり、すでに技術のある人を中途で採用したらすぐに単価の高い仕事を任せられますし。ただ、今のフロントエンド開発は難しくなってきているので、人が育つような環境を社内につくって提供してあげたいという思いがあって。将来的にうちを辞めて他の会社へ行くときにも、業界の役に立てるようになって出ていってほしいなと思うので。そうやって少しずつ人材を育てながら雇用をしていくと、人が増えたときになだらかに能力のグラデーションがあるチームになっていくと思うんです。その方が、多分全員にとって学びがあるんじゃないかなと考えています。

 

優れたフロントエンドエンジニアとは？

──そもそもフロントエンドエンジニアとは、どこまでの領域を担うのでしょうか。

菅沼（制）　HTMLとCSSとJavaScriptを使って、ユーザーの触る部分をつくる人だと自分は定義しています。最近はBackends For Frontends^※03というフロントエンドのためのバックエンドを立てるプロジェクトもあって。そういうのは、フロントエンドエンジニアがやっていると思います。反対にデータベースを触らなければいけないようなシステムをつくるのは、フロントエンドの仕事ではないかなと思います。ただ、フロントエンド開発の達人になるためには、リソースがどのサーバに配置されてどうやって配信されるのかという配信の仕組みを理解して、最適な方法を選択しないといけないですし。APIを使うなら、通信のプロトコルがREST^※04なのか、gRPC^※05なのかとか、そういう部分も詳しくないとバックエンドの人と話もできないですし。もちろんデザインの基礎知識もあった方が、デザイナーの意図は汲めるでしょうし。突き詰めると、すごくたくさん知らないといけないことがあります。

外村（開）　バックエンド側への配慮ができると、レベルの高いフロントエンドエンジニアになれるというのはありますよね。

中田（自）　自分のチームの中でも、フロントエンドエンジニアっていろいろな方向性があるよねという話は出ます。1つは、画面のデザインや挙動まで考えて、UI / UXデザイナーの領域まで担うタイプ。画面をつくるので、近しい領域ではありますよね。もう1つは、菅沼さんが言われていたような、画面を動かすためにHTMLとCSSとJavaScriptをどうやってブラウザに配信するかというインフラ側のサーバの最適化に熱心なタイプ。さらに保守性とか開発・継続性というところに着目すると、ちゃんとコードのテストができるかということも大事だと思っています。これらがすべてできるフロントエンドエンジニアってなかなかいないので、それぞれに得意とする傾向があるという感じがします。

外村（開）　確かに、デザイン寄りと技術寄りってありますよね。

菅沼（制）　会社によっても、フロントエンドエンジニアが所属する部署がデザイン部だったり、システム部だったり、けっこうバラバラですしね。

※01　React 16.8 で追加された新機能。stateなどのReactの機能が、クラスを書かずに使えるようになった。
※02　Vue 3で追加された新機能。それまで使われていたOptions APIでは切り離すことのできなかったロジックを切り離せるようになり、再利用しやすくなった。
※03　フロントエンドとバックエンドの間にある、フロントエンドのためのサーバ。バックエンドにAPIコールをしたり、バックエンドから取得したデータをフロントエンド用に加工したりする。
※04　Representational State Transferの略。APIの定義に使用される共通仕様。シンプルで効率的な開発ができ、Webサービスなどに広く使われている。
※05　Googleによって開発された、RPC（Remote Procedure Call）と呼ばれる、ネットワーク上に接続されたほかの端末のプログラムを呼び出し、実行させる技術の一つ。多くの大規模サービスで活用されている

 

 

フレームワークのこれからと新トレンド

受託案件におけるVue.jsやReactの使用例

──受託の案件では、どのような場面でフレームワークを使っていますか。

菅沼（制）　サイト名は出せないのですが、例えば、ユーザーが自由に画面を変更できるECサイトでVue.jsを使っています。小規模なものでも、縦に長くて要素がスクロールにあわせて動いたりするLPや、メインビジュアルでキャラクターが動いたりするLPなど、リッチな表現のLPをつくる際にもNuxt.jsを使っています。

──外村さんはいかがですか。

外村（開）　React Nativeで大学の研究機関のアプリをつくりました。商品のバーコードをアプリで読み込んで、商品を管理したり、売上ランキングを出すといったものです。あと、自社プロダクトとして「Quebee」という3D化ソリューションをReactで開発しました。静的なサイトでも、タグを1つ挿入することでReactのスクリプトがネット越しに読み込まれて、ECサイトの商品写真を簡単に3Dモデルで表示できるようになります。

 

これからフレームワークはどうなっていくのか

──Svelte^※01のような新しいフレームワークも出てきていますが、今後もこのままReactやVue.jsが主流という潮流は続くと思いますか。

外村（開）　僕は、Reactを越えるフレームワークは、少なくとも5年くらい出てこないと思っています。SvelteはReactよりもコードが少ないので、簡単なアプリをつくるなら早くできると思うんです。ただ、実績や使っている開発者の数が多くなく、安定的に保守される保証がないので、広がるのは難しいかなと思っています。

菅沼（制）　より早く開発できる技術が出てきたとしても、ReactやVue.jsもその機能と同じようなものを開発して成長するという流れになるような気がします。

──jQueryや素のJavaScriptの今後については、いかがでしょうか。

外村（開）　JavaScript自体が便利に進化したので、今はjQueryは基本的に選択しません。JavaScriptにもWeb Components^※02という機能がありまして、Reactみたいな形でコンポーネントごとにスタイルを当てられるようになっているのですが、まだぜんぜん便利ではないので、今はReactやVue.jsを使うのがトレンドです。ただ、これが進化してもっと便利になれば、フレームワークがいらなくなるかもしれません。

中田（自）　私も、Web Componentsが進化してほしいですね。フレームワークを取り入れると開発がやりやすくなる一方で、そのフレームワークのバージョンアップや開発終了などに引っ張られるリスクもあるので。

──他に気になるトレンドや技術はありますか。

中田（自）　エッジコンピューティング^※03が話題になっていますね。ブラウザにファイルを配布して表示させるところまでフロントエンドエンジニアの仕事だと考える人が増えてきたせいもあるかもしれません。

外村（開）　それは僕も気になっています。最近Bun^※04というのが出てきて、すごく速いという噂で。Deno^※05も最近すごく頑張っていて、そこら辺は盛り上がっているイメージがあります。あと、WebAssembly^※06という、PythonやRustやC++といったこれまでブラウザで動作しなかったプログラミング言語をブラウザで動作させるように翻訳して、JavaScriptから呼び出して実行する技術が裏であって。これを使って何か新しいものができないかと考えています。

菅沼（制）　自分もエッジコンピューティングと、JavaScriptの実行環境がBunなのかDenoなのかというところは、けっこう注目しています。実行環境は、今Node.js^※07が一般的ですが、たぶんこれ以上速度を上げることは難しくなっているんだろうなと感じることがあります。そう遠くない未来で、別のものに置き換わるのではないかと。Webの開発環境が大きく変わる時代の転換点が近いのかなと思っています。

──最後に、みなさんの今後の展望をお聞かせください。

外村（開）　会社を始めたからには、大きくしたいです。受託開発の仕事もしつつ、Reactなどを用いて自社のSaaSの製品で人の役に立つものをつくれたらいいなと考えています。

菅沼（制）　弊社も、少しずつ新卒採用したメンバーを育てながら、10人くらいまで増やせたらと思っています。そうして成長した社員の成果を仕事に発揮できるといいなぁと思います。

中田（自）　SaaSプロダクトは長く使われるものなので、保守運用やメンテナンスはもちろんですが、ユーザーに心地よく使い続けてもらうために組織づくりに尽力したいです。チーム開発を大切にし、組織がうまく機能することが、ユーザーにも有益になると信じています。

※01　フロントエンド開発用のフレームワークの一つ。JavaScriptのライブラリに関する大規模調査「State of JS 2020」で「最も愛されているWebフレームワーク」に選ばれた。
※02　JavaScriptなどをモジュール化できる技術。フレームワークを使わずにWebページで再利用できるパーツをつくることができる。
※03　データ処理の一部を利用者の端末の近くにあるサーバで行うことで、通信負荷を低減する。
※04　高速のJavaScript・TypeScriptランタイム（実行するプログラム）。オールインワンでバンドル、トランスパイラ、パッケージマネージャなどがあらかじめ含まれている。
※05　オープンソースのJavaScript・TypeScriptランタイム。開発元のDeno Landは、最速のJavaScriptランタイムを目指すことを表明している。
※06　通常はブラウザで実行できないプログラミング言語をブラウザで実行できるようにするプログラミング言語。
※07　JavaScriptをブラウザだけでなくサーバ側でも動作することができる実行環境。