Javascript

『JavaScript ES6』をフル活用するためのwebpackとbabel【昭和と令和なJavaScript】

プログラミングの歴史において、

『JavaScript(ジャバスクリプト)』ほど、

栄光と挫折を味わった言語はないんじゃないかと思ったりします。

こちらの記事に面白おかしく書いてありますが、

JavaScriptの歴史をざっくりまとめたよ!

1995年生まれで、

ポケモン赤・緑とタメというポケモン世代な言語で、

戦国時代、暗黒時代、新時代の幕開け、そしてもはやJavaScriptではない世界まで駆け抜けた『JavaScript』

例えるならビリギャルのように、

偏差値35でグレた時代から慶応ボーイに成り上がり、

さらには『イーロン・マスク』よろしく宇宙に飛び出すような勢いで進化し続け、

もはや誰もついてこれないといわんばかりの言語が『JavaScript』

そんな『JavaScript』は、2015年以前と以降で大転換がありました。

そりゃあもう革命と言わんばかりの大転換が。

Sponsored link

大転換を迎えた昭和なJSと令和なJS

  • 2015年以前・・昔ながらの昭和っぽいJavaScript
  • 2015年以降・・いっきに平成後期で令和も見すえたJavaScript

2015年以前のJavaScriptをES5、
2015年以降のJavaScriptをES6、もしくはES2015と表記され、

2015年から毎年のようにバージョンアップが繰り返されています。

  • ES6 (ES2015)・・大幅変更。クラス、モジュール化、アロー関数、Promiseなど
  • ES7 (ES2016)・・ちょっとの変更
  • ES8 (ES2017)・・async/await (非同期関数)
  • ES9 (ES2018)・・Observable(まだよく知りません・・

さらに最近では『JavaScriptフレームワーク』も誕生。

アオキ
『React.js』とか『Vue.js』とか。

これらのフレームワークではES6以降の『JavaScript』を使うことが当たり前のようになっています。

毎年のようにパワーアップしている『JavaScript』ですが、

進化のスピードが速すぎて、

昭和世代
『インターネットエクスプローラー』じゃあうまく表示できないよ・・

という問題も起こるようになってきました。

なので、最新の書き方をしつつも、

昭和世代
『インターネットエクスプローラー』でも動くようにしてよ〜

というリクエストが多数寄せられ、それを実現するべく登場したのが、

『babel(バベル)』『webpack(ウェブパック)』というツールになります。

アオキ
ドラえもんでいったら翻訳こんにゃく的な

JavaScriptのフルパワーを引き出す最近の状況

令和世代の最新版『JavaScript』を動かすための2大ツールはそれぞれ、

  • 『babel(バベル)』・・・新しい書き方を古い構文に変換
  • 『webpack(ウェブパック』・・JSファイルを依存関係を調べつつ一つのファイルにまとめる

という用途になります。

これらのツールをインストールするには、『Node.js(ノードジェイエス)』も必要になります。

  • 『Node.js(ノードジェイエス)』・・JavaScriptをサーバー側でも使えるようにしたツール。

『Node.js』がインストールされている状態で、

例えば最近だと、『PHP』の全部乗せフルスタックフレームワーク『Laravel(ララベル)』だと、
『Laravel Mix(ララベルミックス)』という機能を使うことで、『babel』『webpack』をどっちもカバーしていたりします。

参考記事

また、令和世代な『JavaScript』でおなじみの『Vue.js(ビュージェイエス)』では、

『vue-cli(ビューシーエルアイ)』というツールを使うことで、

これまた『babel』『webpack』をまるっとインストールできたりします。

Vue-cli(webpack)解剖 ーディレクトリ構成ー

もちろん、『Laravel Mix』や『Vue-cli』を使わず、

直接『babel』と『webpack』をインストールすることもできます。

Sponsored link

JavaScriptのフルパワーを引き出す2大ツールをインストールするには

『babel』『webpack』それぞれいくつかのファイルをインストールする必要があります。

『babel』インストールに必要なファイル

  • @babel/core ・・メインのファイル
  • @babel/preset-env ・・環境にあわせて令和->昭和に変換できる
  • @babel/polyfill ・・令和なJavaScriptも変換できるようにする
  • babel-loader ・・webpackでも使えるようにする
アオキ
『Babel7』からアットマークがついたそうです。

『webpack』インストールに必要なファイル

  • webpack ・・ webpack本体
  • webpack-cli ・・webpackをコマンドで使えるようにする

また、設定ファイルも2つ必要で、

  • package.json ・・ npmの環境ファイル。npm init とコマンドうつと自動で作成される
  • webpack.config.js ・・ webpackの設定ファイル。自分で作成が必要。

これらのファイルをちょっと書き換えることで、使えるようになります。

ひとつづつインストールしてもいいけれど結構時間がかかるので、

npm init とうって『package.json』ファイルを作った後に、

npm i -D @babel/core @babel/preset-env @babel/polyfill babel-loader webpack webpack-cli

的なコマンドでまるっとまとめてインストールすることが多いです。

アオキ
コマンドや設定ファイルの書き方もいろいろあります、ics.mediaさんの記事がわかりやすかったので参考にしてもらえれば

最新版で学ぶwebpack 4入門 – Babel 7でES2018環境の構築(React, Vue, Three.js, jQueryのサンプル付き)

Sponsored link

JavaScript ES6 をフル活用するために

『クリエイティブコーディング』しかり、
個人で楽しむ分には『昭和なJavaScript』でもまったく問題はないのですが、

モダンな企業で最先端フロントエンジニアになりたいとすれば、
『ES6』以降の『令和なJavaScript』は必須になってきますので、

このブログでは、どちらもいい塩梅で(気分次第で)使い分けつつ記事を書いていければと思います。

参考文献

最新JavaScriptでのレシピが豊富に掲載されています。

created by Rinker
¥3,218 (2019/04/19 23:47:08時点 Amazon調べ-詳細)

『JavaScript』ならかかせない一冊です。ES6の記載もたっぷりあります。

アオキ
ところで令和なJavaScriptってなんやねん。 ←長めなノリツッコミ

 

 

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


Sponsored link

関連記事

  1. HTML/CSS

    パソコンでホームページをつくる5つの方法とサーバー4種類をまとめてみました【初心者向け】

    子供向け無料プログラミング寺子屋『CoderDojo熊本』第1回のアン…

  2. Javascript

    プログラミング入門おすすめの言語はJavaScriptで決まり〜分かりやすさ第一で説明してみる〜

    子ども向け無料プログラミング教室『CoderDojo熊本』の1回目無事…

Sponsored link

最近の記事

アーカイブ

Sponsored link
  1. IoT

    【Arduino】ラジコンをつくってみた 〜今ドキのプログラミングの覚え方
  2. Laravel

    【Django】【Laravel】【RubyOnRails】を比較してみた【初心…
  3. 検索システム

    【検索システム】をつくってみた【実際にログインしてさわれます】
  4. 検索システム

    バリアフリーなホテル のページをオープンしました。
  5. docker初心者向けdocker-composeからやったほうがいいかもよ

    ツール

    【Docker】初心者はdocker-composeから始めた方がいいかもしれな…
PAGE TOP