WebサイトリニューアルでES2015を実際に使ってみた

（投稿が遅れてしまって申し訳ない気持ちでいっぱいです。。。）

はじめに

最近、ES2015やES2016、ES2017に関する記事が多くなってきていますが、みなさんはES2015使ってますか？

僕はWeb制作会社で働いているのですが、Webサイト制作の現場ではES2015の利用はそんなに拡大してないなーという印象です。
他の会社の人に話を聞いても、興味はあるけど使ってない…みたいな話が多いです。（もちろんバリバリ使っている制作会社もあると思いますが、まだ少数派であるように感じます。）

そんな中で自分がES2015を使ってみてどうだったか、ということについて書きたいと思います。

なんで使われないのか

まずWebサイト制作でES2015の利用が進まない理由を考えてみたいと思います。
（個人的な感想なので、違うよ！という部分があったらコメントください）

開発環境の構築がめんどくさい

個人的に一番大きいのはここではないだろうかと思います。
常に遅れがちなWeb制作の現場において、一番工数を圧縮されやすいのがコーディングです。
そんな時間のない中で、新しい技術を導入したり環境構築をするのは非常に難しいを思います。

また、案件ごとに技術構成や納品形式が違ったりするので、それらに対応したビルド環境を構築するのも大変です。

レガシーブラウザ…

…

周囲の理解が得られにくい

これはどの職種でもあることだとは思いますが、かなり重要な問題ですよね。

特にES2015に関しては、旧来のJavaScriptの記法が使えなくなるとか問題があるとかではなく普通につかえるので、「使えるんだったら今までの感じでよくね？」みたいになりがちです。
使うメリットが明確にして、この問題を解決しないと案件での導入は難しいと思います。

解決策

ボイラープレートを使う

WebpackやBabelなどのツールを使うことになると思いますが、それらの設定を1からやっていくのはとても大変です。
そこで、公開されているボイラープレートを最初は使うのが良いと思います。

WebpackはReact用のボイラープレートが多く出回っているので、それを使うといいです。
http://andrewhfarmer.com/starter-project/

ケースごとに導入メリットを考える

漠然と、ES2015の導入を考えるとイメージしにくいです。
そこで、実際に困っている問題やケースを考えて、ES2015を導入することでどう解決できるのか？を考えていくと、周囲の理解も得られるのではないでしょうか。

実際に使ってみてよかったこと

機能の切り分けができるのが便利

ES2015から class , import , export が使えるようになりました。
みなさん下記のようなコードを一度は見たことがあると思います。

import $ from 'jquery';
import Hoge from '../Hoge';

export default class Hogehoge {
  //処理内容
}

上記のコードは
「 jQuery と Hoge.js を読み込んで、 Hogehoge という class を作るよ」
という内容になっています。

ES5でも、クラスみたいなものを作ったり機能の継承をすることができますが、同一ファイル内に限ったものでした。
しかしES2015では外部ファイルの機能も継承することができるようになりました。

これによって、今まで1つのファイルの中におさまっていたものを、複数のファイルに分割することができるようになりました。

これには以下のようなメリットがあります。
一度使い始めるともうやみつきです。

複数人開発がやりやすい

複数人で開発する際に同一ファイルを編集しなくてよくなり、より効率的に作業をすすめることができるようになりました。

コードの見通しがよくなる

機能ごとにJSを分割することで、修正や追加をする際、どの部分をみればよいかわかりやすくなります。
各機能で共通で使う部分を切り出して使いまわすことができ、コード全体の量を減らすこともできます。

ライブラリの管理が簡単に

これはES2015の直接の機能ではないですが、ライブラリをnpmで管理できるので、バージョン管理や追加削除などがとても簡単に行えるようになりました。
以前は使用するプラグインやライブラリが増えたら、各ページにscriptタグを追加しなければならず、非常に大変でした。
しかし、ES2015ではnpm moduleをimportして使用することができるので、そのライブラリを使用する部分に記述をするだけでよくなります。
これにより、読み込み漏れや、使わないライブラリを読み込んでいた、みたいな問題が起こりにくくなります。

アロー関数便利

アロー関数は即時関数を同じような働きをします。（厳密には違いがありますが）
詳しくはこちら
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/arrow_functions

課題

ビルド環境の最適化

やはり案件ごとにいろいろあるので、最適化難しいです…

書き方に慣れない、、、

ES5は「命令的に」記述しますが、ES2015では「宣言的に」処理を記述します。
この書き方の違いになれないと大変かな…と思います…

まとめ

ES2015は、ES5で不便に感じていたことを改善してくれます。
たしかに導入面などでハードルはありますが、それ以上に大きな恩恵をもたらしてくれると思います。
ES2015を使ってよりよいJS生活を送りましょう！