皆さんこんにちは！シェアフル採用担当、福田です。

本日は、3回シリーズでお届けする技術顧問×CIO×メンバーによるエンジニア座談会の最終回となります。今回お呼びした技術顧問は、フロントエンド、Vue.jsのスペシャリストである翁 華宏（オキナカヒロ）さんです！

▼参加者プロフィール

翁 華宏@kahirokunn（写真中央）：フロントエンドエンジニア。新卒でSIirを経験し、株式会社マーケットプレイス、LAPRAS株式会社を経て、現在フリーランスとして活躍中。社内外のイベントへ登壇しながら、複数社の技術顧問としてマネジメント・フロントエンド開発に広く貢献している。

松尾 健司（写真左）：2018年よりシェアフルにジョイン。SREチームの立ち上げだけではなく、社内インフラ全般、情シス、他チーム連携など会社の基盤を幅広く支えている。2019年7月よりCIOとして開発全体をリードする。

福田 京平（写真右）：2018年よりシェアフルにジョイン。フロントエンドエンジニアチームでVue.js、React Nativeを使ったアプリの開発を経験する。趣味はネットサーフィンをすること。

▼フロントエンドの気になる最新動向とは

松尾：翁さん、本日はよろしくお願いします。フロント回りで複数社の技術顧問としても活躍されている翁さんですが、フロントエンド業界の最近の動向はどうなんでしょうか？？

翁：はい。最近の動向としては、TypeScriptを書く場合にはReactがいいなと思っています。Vue.jsは、Reactと比較すると良くも悪くも「緩い」というのもありますし、またJSXの方はBabelを使ってブラウザ毎に書き方を変える必要があるので、大変かなと思っています。言い換えると伸びしろがあるということですので、今後が楽しみでもあるのですが。(笑)

福田：僕も、Vue.jsとReactならReactの方がしっくり来ると思っています。今まで、一歩進んでいるReactをVue.jsが追いかけるという構図を見てきまして、例えばComposition APIもそうなんですが、結局はReactのフックの焼き直しのように感じています。そこに型が使えないのは旨味がないので、シェアフルはReactにおいて、クラスベースから関数ベースのコンポーネントにどんどん置き換えて、フックを積極的に使うようにしていますね。

福田：それから最近のTypeScriptについてですが、ただの型だけではないなと感じています。Optional Chainingやパイプライン演算子もそうですが、シンタックスまでもTypeScriptでやっているので、どこからが誰の領域なのか分かりづらくなってきている気がしますね。

翁： Optional Chainingやパイプライン演算子は、ESの仕様ですね。TypeScriptのオリジナルの構文は、基本的に型と、enumです。

TypeScriptは、何より「ちゃんと守ってくれる」というのが嬉しいです。リファクタリングでデグレが発生した時に、エラーで吐いてくれるのはいいですね。

福田：確かに。graphql-codegenを使用していればサーバーが変わったときに、ちゃんとエラーになってくれるのも本当に有難いです。

翁：GraphQLや、codegen、React、Nuxt.js…TypeScriptには、最近フロントで流行っているモダンなスタックが全て入っています。今後、シェアフルさんでももっとTypeScriptの開発環境を向上できるようお手伝いさせて頂きたいです。

▼App store/Google playの1割はReact Native！

松尾：シェアフルではJavaScript、Nuxt.js, React Nativeで開発を進めていますが、福田君は、シェアフルがReact NativeとNuxt.jsを採用した経緯を詳しく知っていますか？？（僕がシェアフルへジョインした一昨年の秋頃には、既に開発チームにいたため）

福田：まず、シェアフルの管理画面をサクッと作るためにNuxt.jsを、という考えがあったとは聞いています。React Nativeについては、当初から「これで行こう！」と舵を切っていた訳では無かったと思うんですが、振り返ると、一つのフレームワークに知見が偏るより、色々な物に興味を持ち、色々人を巻き込みながら開発できる点で良かったなと感じています。

ちなみに古賀さんは元々Vue.jsを書いていた方で、ジョインして初めてReactを触り始めたんですよ。何かしらのフレームワークに初めて触れる経験は誰でもあると思うのですが、翁さんのようにVue.jsに詳しい方に見て頂きとても助かりました。

翁： Vue.jsは初学者さんに優しく、テンプレートエンジンを触っていた方には馴染みやすいと思っていてます。シェアフルさんでは、サーバーサイドの方がフロントエンドに入ってくる時に、 Vue.jsに慣らしてからReact Nativeを学び、ステップアップするというコースが揃っているので、とてもいい環境だなと思いますね。

松尾：お二人にとって、React Nativeはどのようなメリットがありますか？

福田：まず1つ思うのは、React Nativeは「レンダリング対象が何であっても構わない」ということです。例えばターミナルのコンソールでもいいですし、ネイティブアプリでも、Windowsでも、Webでもいいですし…。React Nativeのコアな仕組みをある程度抑えておけば、レンダリング対象に囚われずに判断できるというのは大きなメリットだと思います。それから、いつものエディタを使えるというのも嬉しいですね。逆にデメリットもいくつかあるとは思うのですが…それは笑えるレベルです。(笑)

翁：そうですね。React Nativeは、特に書き心地が良いです。Firebase js sdkのようなwebの資産を使えるというのも嬉しいですね。僕の周りも、みんなReact Nativeを使っていますよ。Apple Storeの8％、Google playの10％がReact Nativeで作られているというデータもあります！こちらを見て下さい。

《※参照　https://appfigures.com/top-sdks/development/all　》

松尾・福田：おお！すごい！

翁：Twitterで見つけた記事です。かなりの数のアプリがある中で、この割合は相当ですよね。App storreで今年中にはIonicを超える気がしますし、更にはUnityも来年か再来年には、と思っています。このまま頑張って欲しいですね。

福田：確かに自分の周りやコミュニティを見ても、CordovaやUnityよりもReact Nativeの方が活発だと思います。

翁：認知度が増えたとは言え、世界で最も熱く、技術界の先端を走るReact Nativeを活用する会社はまだまだ少ないと思いますので、僕もシェアフルさんを応援させて頂きたいです！

福田：ありがとうございます。きっと、いくつか会社はあるとは思うのですが、ある程度大きい規模の人材会社で、大友さん・横井さん・松尾さんに支えて頂きながら、最新の技術を使えるのは嬉しいです。シェアフルは、「Objective-CやJAVAで書きなさい！」では無く、「学習意欲があればやっていいよ！」というような環境です。心理的安全性があるからこそ新しい技術が試せると思うので、同い年や若い方とやるのももちろん良いのですが、経験を持った方の下で、新しい挑戦ができるのはシェアフルの大きな強みだと思います。

▼翁さん×シェアフル

松尾：ここからは、翁さんとシェアフルの関わり方について詳しくお伺いできればと思います。まず、翁さんはどのような経緯でシェアフルにジョインされたんでしょうか？

翁：以前にシェアフルさんで働かれていた方の紹介がきっかけです。1年近く前に開かれたWeJSにも登壇させて頂いて、そこから本格的にお手伝いさせて頂くようになりました。

福田：あー！懐かしいですね！また機会があれば、WeJSで外部の方と交流してみたいです。

松尾：紹介でジョインされる方は多いので、シェアフルの繋がりの力はすごいなと感じますね。 現在、シェアフルではどのような活動をされていますか？

翁：Vue.js回りの設計や、構成の提案をさせて頂いています。またVue.jsで新たな機能が追加され、「TypeScriptをそろそろ使いたいよね」となった時に、自分が素振りをして、シェアフルさんにどのように組み込めるのか、調査や提案をさせて頂いています。

松尾：福田君は、どのような時に助けて頂いていますか？

福田：たくさんあるのですが、型や新しい技術（特に、Vue.jsの新しいバージョン）をやってみるかどうか悩んだ時に、まず翁さんに相談させて頂いています。色々な所で経験されているので、その知見やご自身の素振りの結果をまとめてお借りできるのは嬉しいです。自分でやろうとすると、かなり時間がかかってしまうと思います。

松尾：フロントは変化が激しいので、技術顧問の方の存在がより有難いですよね。今後、お二人がシェアフルでやってみたいことはありますか？

翁：先程もお話しさせて頂きましたが、Vue.js、Nuxt.jsで動いているソースコードの部分で、TypeScriptの開発環境を向上させていきたいです。

福田：僕は、リリース時に行っている目視チェックや、チェックの運用にも乗っていない部分（開発者がwindowsPCを持っていないため、出来ていない箇所など）を、CIと組み合わてチェックする仕組みを作ったり、デプロイフローを見直すことができればと思っています。お客様の中にもIEを使っている方や、特殊な環境の方もいると思いますので、アクシデントを防ぐ仕組みをより強固にしていきたいですね。

松尾：確かに…。僕も、下位互換が無いという状況は何とかしたいです。特にフロントはどんどんバージョンが上がっていくので、型で捉えられなかったエラーをプログラム側で回避できるような、もう一段固いシステムを作っていきたいですね。

福田：逆に言うと、最近のシェアフルのテクノロジー回りは足並みが揃ってきたように感じていますね。昔のように、フレームワークの選定で悩むこといったことは減りました。Vue.jsかReactのどちらかを使っていて、そこにTypeScript。数年前に比べると、少し余裕ができたなと思っています。

▼最後に…

松尾：さて、そろそろ座談会も終わりの時間が近づいてきました。最後に、お二人がフロントエンジニアとして大事にしている考え方を教えて頂けますか？

翁：フロントは変化が激しい業界ですので、新しいものに積極的に触れて、それを導入できるようにしています。そうでないと、すぐに置いてかれてしまいますので、 フロントはどんどん挑戦すべきかなと思っています。また新しいものを使うと生産性が上がりますし、ユーザーさんが使用する端末の体験もできると思いますので、これからも大事にしていきたいです。

福田：僕は、「基本に忠実に」という考え方です。翁さんと対照的かもしれませんが、変化が激しい中で、変わらないベーシックな部分もあると思うんです。例えば、 JSのスーパーセット（TypeScript）ができた場合でも、ブラウザで動くのはJSです。V8がどういう風にJSを読み込み、合わせているかどうかは、 言語のバージョンやスーパーセットの言語に左右されるものではありません。変わらないことをコツコツやっていけば、揺るがない幹のようなものができるかなと思っているので、今後も基本に忠実にやっていきたいと思います。

松尾：お二人とも、ありがとうございました！

いかがでしたでしょうか？全3回シリーズでお届けしたエンジニア座談会は、こちらで終了となります。シェアフルに少しでも興味を持って頂けた方は、ぜひメッセージしてみてくださいね！ご連絡、お待ちしております！