フロントエンドエンジニア鼎談:技術の使い分けと現場の実情(前編) 事例詳細|つなweB

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

 

外村将大
LeapIn株式会社 代表取締役/ソフトバンクにてシステム設計、開発、運用に従事する。独立後、Web開発会社LeapIn株式会社代表。CodeMafiaの名でプログラミング講師としても活動。著書に『独習JavaScript新版』。
https://leap-in.com/
Twitter:@codemafia0000
菅沼辰弥
株式会社なすび 代表取締役/制作会社でWebやアプリ開発の経験を積み、その後株式会社ディー・エヌ・エーに入社。大規模サービスにおけるフロントエンドの設計から実装までを担当。2016年に株式会社なすびを設立した。
https://nasbi.jp/
中田和宏
株式会社ラクス 楽楽勤怠開発課/フロントエンド開発のリーダーとして、技術選定から開発リードを担当。Vue.js日本ユーザーグループのコアスタッフとしてイベント運営やドキュメント翻訳、ハンズオン作成にも携わる。
https://www.rakus.co.jp/

 

名前の後ろの表記 (開)=開発会社 (制)=制作会社 (自)=自社サービス会社

 

3大フレームワーク/ライブラリの利用実態

どのフレームワーク/ライブラリを使っている?

──みなさんReact、Vue.js、Angularでは主にどれを使っていますか。

外村(開) 4年ほど前からVue.jsを使っていたのですが、2年ほど前からReactをメインで使うようになりました。Angularは趣味程度にしか触ったことがないですね。

菅沼(制) 私は6~7年前から当時勤めていた事業会社でVue.jsをメインに使っていました。Reactは2016年に今の会社をつくってから触ることが増えてきました。Angularは昔試しに触ってみたことがある程度です。

中田(自) 私は5年くらい前からVue.jsを使っています。途中、Angularを半年~1年くらい使ってみて、ReactもVue.jsとの違いを知るために最近触ってみていますが、ここ数年はSPAの業務が多いので、ほぼ100%をVue.jsでつくっていますね。

──ラクスさんにはたくさんのサービスがありますが、すべてVue.jsでつくっているのですか。

中田(自) 社内ではReactとVue.js半々くらいで、どちらを選ぶかはチームの開発者が判断しています。統一した方が効率的かもしれませんが、先々どの技術が廃れてどれが残るのかは予測しづらいので、いろいろ把握しておいて適切なものを選択できる方がいいのかなと思っています。長く続いているサービスの中には、今でもjQueryを使っているものがあります。最近はそれらをReactにリプレイスしようという動きもあります。

──外村さんはどうしてVue.jsからReactへと移行されたのでしょうか。

外村(開) Webアプリケーションをつくる案件をVue.jsで制作して納品した約1年後に、スマホアプリ版の制作依頼もいただいて。これをReactでつくっておけば、React Native※01
が使えて、スマホアプリ用のコードに書き直すムダな工数がかからずに済んだなと思った経験がありまして。結局このスマホアプリはReact Nativeでつくり直したのですが、それから基本的にReactに切り替えました。お二人はそういった場面はこれまでなかったですか?

中田(自) 個人的にはスマホアプリを開発するなら端末の機能を最大限利用できる
Swift※02やKotlin※03でつくった方がいいんじゃないかなと思います。あとはFlutter※04とか。

菅沼(制) 自分もFlutterを選ぶと思いますね。ReactでつくったWebアプリをReact Nativeでスマホアプリにするのって、そんなに簡単でもないですよね。

外村(開) そうですね、ちょっと手は加えないといけないです。それほど複雑なアプリではなかったというのもありますが、制作メンバーにSwiftやKotlinを使える人がいなかったので、学習コストの観点からReact Nativeにしたというのもあります。

 

日本におけるAngularの立ち位置

──Angularをあまり使われていないのは、なぜでしょうか。

菅沼(制) Vue.jsとReactがあれば使う余地がなくなってしまうという。あと、日本では使っている人が少ないというのがあります。

中田(自) 採用や教育の観点から、世間のトレンドは無視できません。あまり使われていない技術で募集しても人は集まらないですし、個人の学習意欲も上がりづらいと思うので。

外村(開) AngularはTypeScript※05しか対応していないので、一般的に敷居が高いんですよ。他の2つはJavaScriptもTypeScriptも使えるんですけど。あとやっぱり技術選定において、トレンドというのは大事になってきます。使っている人が多いということは、コミュニティが盛り上がって保守され、高機能なプラグインがたくさん出てきます。いくら優れたフレームワークでも、使う人が少ないと開発が止まってしまうことがあるので。

※01 iPhoneとAndroidのアプリ開発ができるフレームワーク。React同様Meta社が提供している。
※02 Appleが開発したプログラミング言語。iOSやMacのアプリ開発が行える。
※03 チェコのJetBrains社が開発したプログラミング言語。GoogleによりAndroidの公式開発言語の一つに認定されている。
※04 Googleが提供する、モバイルアプリ開発用のフレームワーク。AndroidとiOSを同じソースで開発していくことができる。
※05 JavaScriptを拡張してつくられたプログラミング言語。Microsoftが開発。

 

フレームワークを使うメリットと使い分け

フレームワークの使い分け

──菅沼さんはReactとVue.jsどちらも使われていますが、どのように使い分けていますか。

菅沼(制) うちは受託開発の会社なので、クライアントの意向があればそれに従います。どちらでもいい場合は規模で使い分けています。小規模~中規模のサイトであれば、Nuxt.js※01
というVue.jsがベースとなったフレームワークを使うことが多いです。Vue.jsは周辺ライブラリを公式がつくっていて、そこから適切なものを選んだ時点で敷かれたレールの上を走る感じになるので、とても効率よく開発ができます。それ以上の規模だと、より柔軟な開発ができるReactを使います。

──みなさん、今もフレームワーク等は使わず素のJavaScriptを使うこともありますか。

外村(開) ありますね。つくるものによって、推奨されるフロントエンドの仕組みがあるので。例えばWordPressを改修する案件ではReactを使わないですし、逆にバックエンドがPythonのDjango※02でつくったAPIであればReactなどでSPAをつくりますし。

菅沼(制) フレームワークを使うか否かは、画面をどれだけ書き換えるかというのを一つの基準として判断しています。フレームワークを使うようなものでない場合には、webpack※03
でJavaScriptをバンドルする環境だけをつくり、素のJavaScriptで書くこともします。

中田(自) お問い合せフォームでも、複雑な画面の表示切り替えがある場合は、ライブラリなどを使ったほうが楽になることはありますね。

 

ReactやVue.jsで開発するメリット

──ReactやVue.jsを使うメリットはどのような点になりますか。

菅沼(制) フレームワークを使わない場合には、バックエンドが先行して開発した後に、フロントエンドがテンプレートを組み込んでいくという作業手順で行います。しかしフレームワークを使うと接点がAPIになるので、バックエンドとフロントエンドの開発を並行して行えるのが大きなメリットだと思います。あと素のJavaScriptよりも記述量が少なくなりますので、改修がしやすいですね。受託をやっていると、2年前に納品したサイトを更新してくださいというような依頼をいただくことがあるのですが、自分でつくったものでも2年前の記憶なんてないんですよ(笑)。それがフレームワークを使ってつくっていたら、2年前のソースでもわかりやすいです。

外村(開) テストもしやすいですよね。バックエンドの実装はテストできるけれど、フロントエンドの画面はできなかったので。フロントエンドの機能もReactにリプレイスするとテストできるようになります。あと、APIで繋がることで、チーム開発もしやすくなります。ファイル単位でコンポーネントと呼ばれる画面上に表示する部品がつくれるので、共同作業はもちろん再利用や部分的な修正もしやすいです。

──中田さんは「楽楽勤怠」というSaaSプロダクトを開発されていますが、Vue.jsを使うことでどのようなメリットを感じていますか。

中田(自) 楽楽勤怠は素のJavaScriptやCSSはほとんど書いていなくて、すべてVue.jsです。理由としては、まずインタラクティブな画面の切り替えをしたりと、UI / UXにこだわりたかったというのがあります。あと、やはりフロントエンドとバックエンドが別々に並行して開発を進められるということも選んだ理由です。自社プロダクトは長期間運用することが前提なので、コンテンツの変更や画面のレイアウト変更がある可能性がありますが、そうした場合にもVue.jsだと長期的な運用・保守がしやすくなります。もし素のJavaScriptやjQueryでそれをやっていくと、度重なる改修によって段々と変更しづらくなりがちです。

 

ReactやVue.jsの案件を発注する際のコツ

──非技術者のディレクターやクライアントの方が、ReactやVue.jsを用いた案件の発注時に注意すべきことはありますか。

菅沼(制) ライブラリを使うか決める際に、意外と忘れがちなのがOGP※04です。SPAだけだと実装できないので、先に構成をきちんと考えて、静的にビルドするか、サーバサイドでレンダリングできるような環境に整えるなどの対処をしておかないと、「後から言われてもできません」ということになってしまいます。

外村(開) やりたいことや入れたい機能を細かくリストアップして伝えてもらうことが大事ですね。もし将来の展望もあれば、それも伝えてもらえれば。そうしたら、先ほどのWebアプリを後でスマホアプリ化するような場合にも、それを見越した上で効率的な開発方法を選択することができるので。もちろん気づけばこちらからも聞きますが、開発者は言われていないことは仕様外だと思いますから(笑)。

──発注側にとっても、追加発注の際に予算や日数を抑えられるというメリットになりますね。

中田(自) インタラクティブな表現ってなかなか言語化しづらいようで。弊社でも開発側から「このときはどうなるんですか?」と聞きながら引き出していっています。画面の動きを決められる方は、インタラクティブな部分も言語化できるということが必要かもしれないですね。

※01 Reactのフレームワーク「Next.js」に影響を受けて開発された、Vue.jsをベースとしたフレームワーク。 SPAを比較的容易に実装できる。
※02 Pythonで実装されたWebアプリケーションフレームワーク。高機能なアプリを少ないコードで開発できる。
※03 オープンソースのJavaScriptモジュールバンドラー。JavaScriptをまとめてモジュール化することができる。
※04 SNSでサイトのURLをリンクした際にページのタイトルや画像が表示される機能。設定することで、訴求力が高まる

 

楽楽勤怠 https://www.rakurakukintai.jp/
ラクスが提供する、クラウド型勤怠管理システム。出退勤や残業はもちろん、休暇取得などの勤怠情報を一元管理できる。Vue.jsでつくられている画面は、誰でも直感的に操作しやすいシンプルなUIになっている。

 

中田和宏
フレームワークは、複雑な画面の切り替えがあるものを開発するのに適していて、UI/UXに凝ることができます。また、長期運用するプロダクトの運用・保守もしやすいです。

 

Text:平田順子 Illustration:シライカズアキ
※Web Designing 2022年12月号(2022年10月18日発売)掲載記事を転載

関連記事