ブログ

ES6を学ぼう！(ES2015)／社内エンジニア勉強会①

Kazunori Ichikawa
2022.09.01

システム開発

＃新人
＃エンジニア
＃勉強会
＃JavaScript

初めまして、8月にBit Beansに入社した市川です。

入社して最初のエンジニア勉強会でES6(ES2015)について勉強したので、その内容を一部今回ご紹介します。

ECMAScript（エクマスクリプト）とは

ECMAScriptとは、国際標準化団体のECMAがJavaScriptのコア部分を標準化したものになります。
従来のJavaScriptはブラウザ間の互換性が低く、ブラウザで共通の仕様を作ることが難しかった為、Ecma International（エクマ・インターナショナル）が中心となりECMAScriptが開発されました。

JavaScriptとの違いと、ECMAScript開発の経緯

JavaScriptとは、Netscape Communications社によって開発されたプログラミング言語。
同社が開発していたブラウザNetscape Navigatorで動作しました。
その後、マイクロソフト社もInternet ExplorerにJScriptという名で導入しましたが、各社が独自の機能拡張を行っていたため、互換性に問題がありました。
そこでNetscape社はECMA社と組んで、JavaScriptの標準化を行うようになります。
つまり、JavaScriptはECMAscriptに準拠した言語となり、各種ブラウザはECMAScriptの基本仕様に沿うよう開発を行っています。

ECMAScriptのバージョン

ES6の登場以降、毎年改訂されて新しいバージョンが発表されています。
最新バージョンはES2022ですが、現在はES6（ES2015）が主流となっています。
理由は、ES6はモダンブラウザが完全対応しているためです。

トランスパイルについて

IE11はES6に対応していないため、ES6に対応していないブラウザでも動作するようにBabelというツールを利用し、トランスコンパイルするのが一般的でした。
しかしIE11も2022年6月16日（日本時間）にサポート終了となったため、今後トランスパイルによって別のコードに変換する必要はなくなるのでは？という参考記事も紹介されました。

参考）https://postd.cc/modern-web-apps-without-javascript-bundling-or-transpiling/

なぜ、脱・jQueryなの？

ファイルサイズも大きく処理も遅いため、処理の規模が大きくなるほどES6が適していると言えそう。
IE対応しているjQueryは採用されやすかったが、IEがサポート終了したことにより必要性が薄れている。
Webデザイントレンドを実現するにはjQueryでは残念ながら厳しく…
jQueryは学習しやすいけれど。。。jQueryはそれまでのJavaScriptに比べ、格段に分かりやすく、より直感的に書けるようになったため爆発的に普及しました。学習コスパの点ではjQueryのほうが勝っているかもしれません。ですが、ECMAScriptの理解を深めるとJSの基礎が身につき、モダンフレームワークであるreactやvue.js、WebGL用のライブラリthree.jsなどを導入しやすくなり、スキルの幅を拡げられると言えそうです。
とはいえjQueryはとても優れたフレームワークなので、今後も案件によって使い分けるのが良さそうです。

実際にコードを書いて動作させてみないと理解はしずらいということで、前記の説明を受けたあとにES6の「class構文の基本」や「constructor」、よく使う記法として「エレメントの取得」「クラス操作」「繰り返し処理」等のサンプルコードを教えていただき、各々jqueryで動かしていた「タブ切り替え」「モーダル」、といったコードを書き直して動作させるというところで今回の勉強会は終了しました。

今回は1時間半の勉強会なこともあり、時間が足らず会社で扱うモジュールとして仕上げるところまでは作成できませんでしたが、ES6に触れる機会が少なかった私はとてもためになりました。

今後も勉強会は続く予定です。
メンバー間で知識を共有できる機会があるのはありがたいですね！