フロントエンドの適材適所と、エンジニアは何を学ぶべきか

Tatsuro Nakamura
Sep 23, 2016 · 9 min read

Kaizen Platform フロントエンドエンジニアの中村です。

現在開発中のプロダクトでは、フロントエンド開発のフレームワークに React + Redux を採用しています。
当初は自分が一人で開発していましたが、チームのRubyエンジニアの皆が次々と React を習得、気がつけばフロントエンドの機能実装も担うようになり、おかげでフロントエンド専門の自分はUIデザインの補佐 & UXの向上へ手が回せるようになりました。

弊社のビジョンは『21世紀の新しい雇用と働き方の創出』ということで、会社の壁を越えた適材適所を目指しているのですが、社内でも「適材適所」が進んでいるというわけです。

畢竟、開発チームの皆さんが仕事しやすいよう、技術基盤の整備に邁進するのですが、新しいツールやライブラリを導入するにも適宜判断が必要になりまして、じゃあ何をどう選ぶかについて意見を持てる & 説明ができることが、チーム開発におけるフロントエンドエンジニアの仕事の一部かなと思う次第です。

そこで、普段どうやって技術選定しているのかについて、近ごろ目にしたライブラリでちょっと気になっている rollup.js を例に、少し掘り下げてみたいと思います。

Image for post
Image for post
本文と関係ないですが福岡からリモートワークしています。

技術選定の際にやっていること

それは何を解決するのか

今回の rollup.js は JS のトランスパイルを担当するライブラリのようなので、webpack の全機能を代替するものではなく、むしろ Browserify の代替といった位置付けになりそうです。

現状の何が辛いのか

  • 設定やプラグインの思想が独特、’webpack way’ のようなものに乗る必要がある
  • プラグインでなんでもできる反面、なんでもできすぎて処理が巨大になりがち
  • 出力する bundle.js の容量が増えがち

といったところでしょうか。
自分が気づいていない辛さがまだまだあるかもしれません。

得意なことは?

Image for post
Image for post
import した maths.js 内の function ‘square’ が消えているのがわかります

また、ES2015 ネイティブで動作するのも特徴で、従来のバンドルツールでは CoffeeScript を一旦 ES5 に変換してからバンドルするところ、rollup.js は何でも ES2015 に変換し、必要に応じて Babel でトランスパイルするとのこと。
これによって Tree-Shaking を可能にしているようです。

現状、Tree-Shaking によるバンドルサイズの縮小は rollup.js の優位性と言えそうです。
ただし、webpack は ver.2 で Tree-shaking に対応する予定があるとのこと。

触ってみる

得意、不得意を調べる際、ドキュメントをざっと読んでいまいちわからないところは実際に触ってみます。
CodePen などを利用すると、ブラウザ上で動作を試せるので、非常に便利です。
幸い rollup.js の場合は公式サイトに playground があったので、すんなり挙動を理解することができました。

苦手なことは?

要件にマッチするか

手になじむか

import buble from ‘rollup-plugin-buble’;export default {
entry: ‘src/main.js’,
dest: ‘dist/bundle.js’,
format: ‘umd’,
plugins: [ buble() ]
};

他にもっといいものはないのか

以上を踏まえると、弊社で開発中のシステムに rollup.js を導入するのは、

  • 検討の余地あり
  • 導入のインパクトはまだそこまで大きくない
  • 今後、webpack2 の動向も見すえつつ、リプレイス候補として頭の片隅に置いておく

といった判断に落ちつきそうです。

Image for post
Image for post
福岡は海と山が近いです。都心から車で30分ほどで、いきなり渓谷が現れます

前提知識の仕入れ方

「フロントエンドは流行り廃りの流れが早くてついていくの大変、どれを選んでいいのかわからない」

確かにそうだと思います。トレンドの変化は早いし、フレームワークの衰勢も近ごろは1年程度で様変わりしています。
流れの早さは受けいれて泳ぐしかないのですが、いざ何を選ぶかについては、流れていくものを眺めておけば、一定の指針を持つことができます。

ニュースを流し読みしつづける

ちなみに自分がウォッチしてるニュースソースは、

あたりになります。
なかでも、国内・海外のフロントエンド関連記事を、日本語のサマリ付きでキュレーションしてお届けしてくれる Frontend Weekly はオススメです。

Image for post
Image for post
太宰府天満宮。福岡市中心部の地名「天神」は、天神様の名で知られた菅原道真が由来です。

Kaizen Platform のモノ作り

Story about who we are — Kaizen platform’s product team —…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store